Build a Token Pipeline

Create the project structure with reference/, semantic/, and component/ directories under a tokens/ folder

tokens/
├── reference/
│   ├── color.json
│   ├── typography.json
│   └── spacing.json
├── semantic/
│   ├── color.json
│   ├── typography.json
│   └── spacing.json
└── component/
    └── button.json

Define reference tokens — Raw values: a color palette (8–10 colors with tint scales), a type scale (6–8 sizes), a spacing scale (4px base, 8 steps)

Define semantic tokens — Intent-based aliases: color.surface.primary, color.text.primary, color.interactive.primary, typography.heading.lg, spacing.gap.md

Define component tokens — Button-scoped: button.primary.background, button.primary.text, button.padding.horizontal

Install Style Dictionary

npm install style-dictionary@4

Write the config — Register source files, define CSS custom properties output

Build — Run the pipeline, verify output CSS file

Inspect the output — Confirm tokens resolve through the chain (component → semantic → reference)

Create a dark theme override — New semantic token file that remaps surface and text colors

Configure two build targets — :root (light) and [data-theme="dark"] (dark)

Build both themes — Verify the same component tokens resolve to different values per theme

Write a brief README — What the tokens are, how to build, how to add a new token

Document naming conventions — tier-category-variant-state pattern