11. Design Tokens

11.7 Multi-theme architecture

Design Tokens · Section 11.7

Diagram source

Mermaid

flowchart LR
    A[Primitive palette]
    B[Light semantic tokens]
    C[Dark semantic tokens]
    D[Components]

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

Components should prefer semantic tokens:

background: var(--color-bg-surface);
color: var(--color-text-primary);

not:

background: var(--white);
color: var(--gray-900);

11.6 Token categories

Design Tokens · Section 11.6

12. Layout System

Create a consistent system for spacing, base units, breakpoints, and grids.