Design Token
A named variable holding one design decision — a colour, spacing step, radius or type size — so the value can change everywhere from one place.
Deliverables & ArtifactsTokens replace literal values with names: not `#151A23` but `color-text-primary`, not `24px` but `space-6`. The naming is the work. A token named after its appearance (`blue-500`) breaks the moment you add a dark theme; a token named after its role (`color-surface-raised`) survives, because the role is stable even when the value is not.
They are the foundation layer of a design system and the mechanism that makes theming, white-labelling and accessibility contrast fixes tractable. Without them a rebrand is a search-and-replace across every repo; with them it is a change to one file that every platform consumes.
In practice
A trading interface needed a light theme after launching dark-only. Before: colours were hardcoded per component, and the estimate was six weeks. After a token pass that renamed values by role, the light theme was a second token file and shipped in eight days. The catch — the pass surfaced eleven near-identical greys that had to be reduced to four.
Learn more
You may ask
Frequently Asked Questions
How should tokens be named?
By role, not appearance, and in a consistent hierarchy — category, then use, then variant. `color-border-subtle` tells you where it belongs; `grey-3` tells you nothing and becomes wrong under a second theme.
Do small products need tokens?
A short list is worth it even on a single-screen product, because it stops the palette from growing accidentally. Full multi-tier token architecture is only worth the overhead once you have more than one theme or platform.
Related terms
All terms- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.
- Component LibraryA shared, versioned set of reusable interface components that designers and engineers build from instead of recreating elements per screen.
- Style GuideA document defining the visual and verbal rules of a brand or product — logo use, colour, type, spacing, imagery and tone of voice.
- Visual DesignThe craft of composition, colour, typography and imagery — how an interface or asset looks, and what that appearance communicates.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us