Design token

What is a design token?

A design token is a named, platform-agnostic value that stores a single design decision: a colour, a spacing step, a font size, a radius or a shadow. Instead of writing #1A56DB in fifty places, a team defines color-brand-primary once and references it everywhere. Change the token, and every button, link and banner that uses it updates together.

Tokens are the smallest building blocks of a design system. They connect design files and code, so both stay in sync.

How design tokens work

A token has a name and a value, often stored in a JSON file and then transformed into the format each platform needs, such as CSS, iOS or Android. On the web, tokens usually become CSS variables:

:root {
  --color-brand-primary: #1a56db;
  --space-m: 1rem;
  --radius-s: 4px;
}
.button {
  background: var(--color-brand-primary);
  padding: var(--space-m);
  border-radius: var(--radius-s);
}

Types of design tokens

• Colour: brand, text, background and state colours, as in a colour palette.
• Typography: font families, sizes, weights and line heights, as in a type scale.
• Spacing and sizing: margins, padding, gaps and breakpoints.
• Shape and depth: border radius, borders and shadows.
• Motion: durations and easing curves.

Global, alias and component tokens

Best practices and common mistakes

• Name tokens by purpose, not by appearance: color-danger rather than color-red.
• Use the three levels so a rebrand only changes the global layer.
• Keep the list short. Too many tokens are as hard to maintain as hard-coded values.
• Use alias tokens to support dark mode and themes by remapping values.
• Store tokens in one source of truth and automate their export to design and code.
• Document each token so designers and developers share the same vocabulary.

Design tokens, consistency and speed

Tokens remove guesswork between UI design and development. They make rebrands cheaper, keep multi-brand products consistent and speed up new pages, because the decisions are already made.

Design tokens at BeBranded

At BeBranded, we define tokens at the start of a design system project, in Figma and in the Webflow build, so colour, type and spacing stay identical from mock-up to live site. When the brand evolves, we update the token layer instead of editing pages one by one. This is part of our design service.