Glossary
What are design tokens?
Named values for the smallest design decisions, shared across design and code.
Updated 2026-09-09
Design tokens are named values for the atoms of an interface: colour, spacing, radius, type size, and motion timing, stored once and consumed everywhere.
The point is indirection. A component references color.bg.subtle rather than a hex code, so when the palette changes you change one value instead of hunting through 40 files. Same for spacing, radius, and type. It sounds like bookkeeping until the first theme change, dark mode, or rebrand, and then it is the difference between an afternoon and a sprint.
Naming is where most systems fall apart. Literal names describe how a value looks, like blue-500. Semantic names describe what it is for, like bg.danger or text.muted. Literal names break the moment a theme makes your blue not blue. Name by role, keep the literal palette underneath as raw values nobody references directly.
One source, many outputs. A single token file exports to CSS variables, a Tailwind config, native platform formats, and Figma variables. Without that export step, design and code drift within weeks and every handoff turns into an argument about which grey is correct.
Where people get this wrong
- Do not tokenise everything. A token used once is a variable with extra ceremony and a worse name.
- Three token systems in three places is worse than none, because now nobody knows which is authoritative.
- Tokens without a sync step are documentation. The value shows up when the pipeline is automated.