Design Tokens

  • Design tokens are the “subatomic” foundation of a design system. 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
    • #343434 -> Gray-100
  • Alias tokens
    • name related to specific context, making context easier to identify.
    • Gray-100 -> bg-color
  • Component-specific tokens
    • representation of value associated with a component
    • bg-color > primary-button-cta-color