Design System Gems

@components publications

"@components publications" is a collection of articles, tutorials, and resources about design systems by EightShapes. It aims to provide a complete guide for anyone looking to establish and maintain a design system. The topics covered in the publications range from the basics of design systems to more advanced aspects such as team formation, governance and strategy creation. The publications cover everything that one needs to know to start a design system and make it successful. Whether you are a newbie to design systems or an experienced design system designer, developer or manager, this collection of publications will provide you with in-depth understanding of various aspects of design systems.

https://eightshapes.com/components/ by Nathan Curtis

The Component Gallery

The Component Gallery is designed to serve as a reference for anyone building component-based user interfaces. The components in the gallery are not intended to be ready-made solutions, but rather inspiration for designers and developers to create their own solutions for the problems they are working to solve. The concept for this site comes from the 1977 book "A Pattern Language" which describes over 250 patterns for the physical world, but this site adapts this idea to the web, focusing on design patterns commonly referred to as "components".

https://component.gallery/ by Iain Bean

Wallace CSS Analyzer

The Wallace CSS Analyzer is a powerful tool for analyzing production CSS. It is designed to provide developers and designers with insights into their CSS over a longer period of time, making it a valuable resource for keeping track of changes and identifying potential issues. The tool is visually appealing with its report generation, providing information such as the usage of units and colors. Wallace was created in response to the limitations of other CSS analyzers which only provide a one-time analysis. This tool provides developers and designers a way to keep track of complexicity of their CSS and ensuring that the colors and fonts are being used as intended. Its a great tool for keeping your codebase maintainable and clean.

https://www.projectwallace.com/analyze-css by Bart Veneman

The Design System Guide

The step-by-step guideline on how to set up your own design system and make your process more consistent, organized, and efficient. The book guides you through doing a complete design audit, by showing how to gather all branding and design materials, click through all User Interfaces, take screenshots and record user flows, it also suggests starting with the most commonly used components and foundations, and defining what you want your final design system to include, Not all design systems are created equal, but the guide will help you to adapt the process to your needs.

https://thedesignsystem.guide/ by Romina Kavcic