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.
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us