UX Glossary · D
Design token
Also: Token
A named design decision stored as data, so one value drives both the design tool and the code.
A design token is a design decision expressed as a named value: color-signal,
space-4, radius-md. The name is referenced everywhere; the value is defined once.
The approach came out of Salesforce around 2014, where the team needed one set of decisions to drive several platforms at once.
Why the indirection is the point
Referencing --signal rather than #82C203 means a colour can change in one place. More
importantly, the name records intent. --signal says “this is the accent that means act
here”, which survives a redesign; #82C203 says nothing at all.
CSS custom properties made this native on the web, so tokens are no longer a build-time substitution but a live value the browser resolves.
Layers
Mature systems separate raw values from their use:
- Primitive:
green-600: #4E7500 - Semantic:
color-action: green-600 - Component:
button-background: color-action
The extra layer looks like ceremony until you need to change every action colour without touching every component.
In practice
The test of whether tokens are working is whether hardcoded values appear anywhere outside the token file. If they do, the system is documentation rather than infrastructure, and it will drift.