What is a Design System ?
A picture is worth a thousand words
A Design System is composed of 5 pillars:
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 components that developers should use to create new experiences.
Created by UX Writers, Content Designers or Content Strategists, the Content Design is meant to be used by everyone - writers or non-writers.
Content Design defines voice, tone and glossary, but also rules and recommendations for writing in an inclusive and consistent manner.
It is like Design Kit for the words and have a tremendous impact on the experience of the user.
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 alongside references to the Design Kit elements.
Developers will find development guidelines alongside 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.