Glossary / UI/UX & Product Design
Design Tokens
Design tokens are named values for the smallest design decisions, such as color, spacing, type size, and radius, stored once and referenced everywhere. Instead of hardcoding a hex code on every screen, you reference a token, so one change updates the whole product consistently.
What are design tokens?
Design tokens are named values for the smallest design decisions, such as color, spacing, type size, and radius, stored once and referenced everywhere. Instead of hardcoding a hex code on every screen, you reference a token, so one change updates the whole product consistently.
Key takeaways
- Tokens are named design decisions stored once and referenced everywhere.
- Name tokens by role ("accent", "surface"), not by appearance ("green"), so a rebrand does not break them.
- A semantic tier over the raw palette is what makes dark mode a remap, not a rewrite.
- Keep the set as small as it can be while still covering the product.
Why it matters
Tokens are the layer that makes a design system more than a folder of components. They make theming, dark mode, rebrands and consistency cheap, and they give design and code a shared vocabulary so a change in Figma maps cleanly to a change in the codebase.
How Devoq approaches it
The mistake we see is teams jumping straight to specific tokens like "button-background-blue" without a layer of meaning underneath. We build tokens in tiers. The base tier is raw values, the palette itself. The semantic tier gives those values meaning: "surface", "text-primary", "accent", "danger". Components reference the semantic tier, never the raw one. That indirection is what makes dark mode a remap of semantic tokens rather than a rewrite of every component, and what lets a rebrand change the palette without touching a single screen. We name tokens by role, not by appearance, because "accent" survives a brand change and "green" does not. And we keep the token set as small as it can be while still covering the product, because every token is a decision someone has to remember and honour. Done well, tokens are invisible; the team just builds, and consistency and theming come for free. Done badly, they are a second inconsistent system layered on the first.
The three token tiers
Base
The raw values: the actual palette, the type scale, the spacing scale. No meaning yet.
Semantic
Roles that reference the base: surface, text-primary, accent, danger. Components use only this tier.
Component
Optional per-component tokens that reference the semantic tier, never the raw values.
Example
A product needs dark mode. Because colors were referenced as semantic tokens like surface and text-primary rather than raw hex values, dark mode is one remap of the token layer, not a hunt through hundreds of components.
Related terms
Hire a design system designer
We set up token architecture that makes theming, dark mode and rebrands cheap instead of a rewrite.
Hire a design system designer
