In short
A design token is a named design decision — a colour, a spacing step, a font size — stored once and referenced everywhere, in both design tools and code. Tokens are the mechanism that keeps a product visually consistent and lets a single change propagate across every screen at once.
What a design token is
Instead of writing the colour #2E4BFF in a hundred places, you name it once — color-signal — and reference the name. That name, paired with its value, is a design token. It captures a design decision as data, so the same decision can be used identically by a designer in Figma and an engineer in code.
Why tokens matter
Tokens solve the drift problem. Without them, a brand colour or spacing rule is copied by hand across screens and files, and the copies slowly diverge. With them, there is one source of truth: change the token, and every screen that references it updates at once — in design and in the product.
Primitive, semantic, component
Mature token systems use three layers, each referencing the one below:
- Primitive — raw values, like
blue-600: #2E4BFF. - Semantic — values given meaning, like
color-action: {blue-600}. - Component — values scoped to a component, like
button-background: {color-action}.
The layering means you can rebrand by changing primitives, or change how one component looks without touching the rest.
Tokens in practice
In code, tokens are often CSS custom properties; in design tools, they are variables. A token pipeline keeps the two in sync so the values a designer picks become the values the product ships. When design and code read from the same tokens, the design system stops being a reference document and becomes the product itself.
Common questions
What is a design token in simple terms?
A design token is a named design decision — such as a colour, spacing step, or font size — stored once and reused everywhere, in both design tools and code, so the whole product stays consistent.
What is the difference between design tokens and variables?
They are closely related. "Variable" is the general programming term; "design token" specifically means a named design decision shared across design and code as the single source of truth for a value.
Why use three tiers of tokens?
Layering primitive, semantic, and component tokens lets you change things at the right level — rebrand by editing primitives, or restyle one component without affecting others — while keeping a single source of truth.