Design tokens: definition and examples

Design tokens

Design tokens are named values for design decisions such as colour, spacing, typography and radius, stored in a tool-neutral format. Design files and code read the same tokens, so one change updates every screen and theme.

Also called

Design token, Tokens, Design variables, DTCG tokens

Category

Design and UX

Updated

October 2026

A design token is a name paired with a value, such as color-text-primary: #03111c or space-4: 16px. Instead of hard-coding a hex value in fifty places, every button, card and heading refers to the token. Tokens can also reference other tokens, which is how one brand colour feeds a dozen semantic roles.

The Design Tokens Community Group published the first stable version of its format, 2025.10, in October 2025, with Format, Color and Resolver modules. Tokens are JSON objects with a $value and a $type (colour, dimension, font family, font weight, duration, cubic Bézier, number, and composites such as shadow and typography), and aliases use curly braces, for example {color.blue.500}. Build tools then turn one token file into CSS variables, iOS and Android values. Figma’s equivalent is variables, with modes for themes like light and dark.

Why it matters for a SaaS product

Tokens are what make a design system change cheaply. Dark mode, a rebrand, a white-label version for an enterprise customer or a tighter spacing scale become edits to token values rather than a hunt through every component. They also give designers and engineers the same vocabulary: “use color-border-subtle” settles a debate that “make it a bit lighter” starts.

How DesignMe handles it

On product design projects, handoff includes components with variants and variables, so the token layer exists in Figma before engineering starts. For N3XT we built the design system on design tokens, with light and dark theming throughout. We name tokens by purpose, not appearance, and keep primitives out of components.

Example

This website is built the same way. When we moved designme.agency from Framer to Astro, the source had 191 colours, 37 font sizes and 53 font families. We collapsed them into scales in one tokens file: primitives such as the brand navy and blue, then semantic tokens such as --color-bg and --color-text that components use. Every theme-aware colour is written once with CSS light-dark(), so switching between light and dark mode changes no component code.

Common mistakes

Naming tokens by value. blue-button breaks the day the button turns green. Name the role, not the colour.
Tokens only in Figma. If code keeps hard-coded values, the tokens are documentation, not a system.
Too many tokens. Hundreds of one-off tokens recreate the mess they were meant to fix.
Skipping the semantic layer. Without it, dark mode means editing every component.

Questions

Is there a standard format for design tokens?

Yes. The Design Tokens Community Group, a W3C Community Group, published the first stable version of its specification, 2025.10, in October 2025. Tokens are JSON with $value and $type properties. It is a Community Group report rather than a formal W3C Standard, but tools including Style Dictionary, Tokens Studio, Figma and Penpot support it.

What is the difference between primitive and semantic tokens?

Primitive tokens name raw values, such as blue-500 or space-4. Semantic tokens name a purpose, such as color-text or color-bg, and point to a primitive. Components should use semantic tokens only, so a rebrand or a dark theme changes what the semantic token points to without touching any component.