Back

Design Tokens

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