Design Tokens
Named variables for design values like color, spacing, and type.
Design tokens are named variables that store design decisions — colors, spacing, font sizes, radii, shadows — so they can be reused and changed centrally. Instead of hard-coding '#266df0', you reference 'color.accent'.
Tokens make theming (light/dark mode, white-labelling) and large-scale design changes trivial, and keep design tools and code referencing the same values.
Key characteristics
- Named variables for design decisions — colour, spacing, type, radius, shadow.
- Stored once and referenced everywhere, so a change propagates across platforms.
- Enable theming (light/dark, brands) by swapping token values, not components.
- Often expressed as JSON and synced between design tools and code.
Example
Defining `color.primary` as a token means switching the brand colour updates buttons, links and highlights across web and mobile from one place.
Frequently asked questions
Why use design tokens instead of hard-coded values?
Tokens centralise decisions, so updates are consistent and instant, theming becomes trivial, and design and code stay in sync. Hard-coded hex values drift and are painful to change.
What are semantic vs primitive tokens?
Primitive tokens are raw values (e.g. blue-500). Semantic tokens give them meaning (e.g. color.action). Components reference semantic tokens, so themes and rebrands change only the mapping.
Related terms
Need this done, not just defined?
I design and build it — Framer sites, product UI/UX, and more.