Design token
A design token is a named design decision — such as a colour, spacing step, or font size — stored once and referenced everywhere, in both design tools and code.
Tokens are the smallest unit of a design system. Because every screen references the token rather than a copied value, a single change propagates everywhere at once, keeping design and code in sync as a product scales.
How it works
Tokens usually come in two tiers. Primitive tokens name raw values, such as blue-600 or space-4. Semantic tokens name purposes and point at primitives, such as color-action pointing at blue-600. Components reference only the semantic tokens, so changing what "action" means, or adding a dark theme, is a change in one place.
Tokens are stored in a neutral format such as JSON and transformed into CSS custom properties, native app values and design-tool variables, so every platform reads the same source.
Example
troiana.net keeps its tokens as CSS custom properties at the top of one stylesheet: a single accent colour, --signal, used only for interactive elements, plus the type and spacing scale. Every page and generated section reads those variables rather than hard-coding a colour.
Common mistakes
- Naming tokens after their value (
blue) instead of their role, so a rebrand breaks the meaning. - Creating a token for every one-off value until the set is as messy as the code it replaced.
- Keeping design-tool variables and code tokens in two unsynchronised places.
