Design tokens are the “subatomic” foundation of a Design SystemDesign System
Design System is a collection of reusable Components, build using Atomic and Sub-atomic Design Tokens particles that follow the guideline, behave consistently, and together work as the building block of the product.
A design system is not a pattern library or a sticker sheet. Atoms being consistent or similar in a design system won't make the final result compatible. For that, it requires a clear documented guideline on behavior and usage patterns. Usage patterns, organisms and templates mak... implementation. They are the values needed to build a design system, like color, space, typography etc., represented as data.
Design token types
- Global tokens
- Global tokens values, represented by context-agnostic names.
- Eg : Hex value represented as Gray-100
- Alias tokens
- Alias tokens relate to a specific context, making purpose/context easier to identify.
-
Eg : Gray-100 represented as bg-color
- Component-specific tokens
- representation of value associated with a component.
- Eg : bg-color, represented as primary-button-cta-color
- In case of system that supports multiple screen sizes, we can build global tokens anchored around base values of each screen sizes.
- Eg : Adobe Spectrum Size tokens (size-100 means 100%, 8px on desktop and 10px on mobile )
Sources :
#🌱def / §Design