What is a Design System ?
A picture is worth a thousand words
A Design System is composed of different pieces:
- Design Tokens
- Design Kit
- Component Libary
- Documentation site
These are the foundation of the brand. The most common design tokens are the colors in the brand palette, the fonts or the scale sizes. Design Tokens are shared across Design Kits and Component Library for a cohesive experience.
A Component Library is the code side of the Design Kit. It's a list of reusable component that developers should use to create new experiences.
Like the Design Kit, the Component Library uses the Design Tokens for a consistent design signature that is easy to maintain.
The Documentation site, also called Reference site, is a central piece in the Design System definition. It aggregates all previous elements like Design Tokens, Design Kit and Component library into a single explorable site. It adds rules and guidelines about when and why a pattern or component should be used or not.
Designers will find UI, UX and Content design rules and guidelines along side references to the Design Kit elements.
Developers will find development guidelines along side references to the components to use. Most of the time, you will find development "Playgrounds" where components can be experienced immediately. This is great for component adoption.