Skip to main content

Design Tokens

Design token types​

  • Global tokens are the primitive values.
    blue-700
  • Alias tokens relates to specific context.
    cta-bg-color
  • Component-specific tokens relates to a component.
    button-cta-background-color

To avoid things like "the grey border is the color-grey-30 or color-gray-40?" or "the primary color is the color-primary-50 or the color-primary-60?" I'm using

value-variable-context-component

How to create semantic tokens​

  • NO 'color-gray' — YES 'neutral'
  • NO 'color-red' — YES 'color-danger'

Properties​

  1. border
  2. surface
  3. text
  4. icon

Emphasis​

  1. default
  2. high-emphasis
  3. low-emphasis

States​

  1. default
  2. hover
  3. disabled
  4. inverse

Levels​

2 level naming:

CATEGORY – CONCEPT $color-action

3-level naming:

CATEGORY – COMPONENT – VARIANT $background-button-primary

4-level naming:

CATEGORY – COMPONENT – VARIANT – STATE $background-button-primary-hover

5-level naming:

SYSTEM – CATEGORY – COMPONENT – VARIANT – STATE $cat-background-button-primary-hover

Examples​

  • neutral-border-interactive-hover
  • neutral-text-high-emphasis
  • surface
  • surface-high-emphasis
  • surface-low-emphasis
  • border
  • border-hover
  • text-high-emphasis
  • text-low-emphasis
  • text-disabled
  • icon-high-emphasis
  • icon-low-emphasis