11. Design Tokens

11.2 Token layers

Design Tokens · Section 11.2

A robust model:

Diagram source

Mermaid

flowchart TD
    A[Primitive Tokens]
    B[Semantic Tokens]
    C[Component Tokens]
    D[Component Styles]

    A --> B --> C --> D

Primitive tokens

Raw scales.

blue.500
gray.100
space.4
radius.2

Describe purpose.

color.text.primary
color.text.danger
color.background.surface
color.border.muted

Optional layer for component-specific decisions.

button.primary.background
button.primary.text
button.primary.backgroundHover

11.1 Why tokens?

Design Tokens · Section 11.1

11.3 Avoid value-oriented naming

Design Tokens · Section 11.3