What is Design Token?
A design token is a name-value pair for a design decision: `color.brand.primary` instead of `#324ceb`, `space.md` instead of `16px`. The gain sits one layer up: because everything references the name rather than the number, a single entry changes the colour in Figma, in the iOS app and on the website at once. Good token sets work in layers - raw values, semantic names such as `color.text.muted`, and component values built on top.
Since 28 October 2025 there is a standard for this. The Design Tokens Community Group at the W3C published the first stable version of its specification (version 2025.10), backed by Adobe, Google, Microsoft, Meta, Figma, Salesforce and Shopify among others. The file format is now vendor-neutral, so tokens move between tools without anyone maintaining conversion code.
The most common misreading is to treat tokens as a design topic. They are a distribution problem: without an automatic pipeline from the source into design, code and documentation, a token file is simply a PDF with better syntax. The same logic applies to language - a style guide only bites once it lives, versioned, in the system prompt of the tools rather than in a folder.
Why does Design Token matter?
The format is not what decides it, the pipe is: in zeroheight's Design Systems Report 2026 (147 practitioners surveyed) only 40 per cent of teams had any token pipeline at all, while everyone else syncs values by hand between design, code and docs. That gap is where the inconsistency people later blame on the brand actually comes from.
Design Token in practice
- 01`color.brand.primary` is defined in one place and read by Figma, the website and the app, so a rebrand becomes a commit instead of a week of find-and-replace.
- 02Semantic rather than raw names: `color.text.muted` survives a palette change, `grey-400` does not.
- 03Dark mode as a second set of values behind the same names, rather than a second set of components.
