Design tokens in plain terms

A design token is a named design decision. Instead of writing #0F62FE in a stylesheet, you write color.action.primary. The name describes the decision, and the value can change without touching every place it is used.

Why tokens exist

Without tokens, design values spread in three bad ways:

• Duplication: the same colour is pasted into Figma, CSS, an iOS app and an Android app. Changing it means finding every copy.
• Drift: a developer picks #0F62FD by eye. Nobody notices until the brand team does.
• Ambiguity: a value like 16px appears everywhere, but nobody knows which uses are padding, which are font sizes and which are accidents.

Tokens solve this by giving each decision a single source of truth, from which every platform receives the same values in its own format.

What counts as a token

Common token types include:

• Colour
• Dimension: spacing, sizes, radii, border widths
• Typography: font family, weight, size, line height, letter spacing
• Shadow and elevation
• Duration and easing for motion
• Opacity and z index

Not every value should become a token. A one off illustration colour or a special marketing layout does not need to live in the system. Tokens are for decisions you want to reuse and keep consistent.

Tokens connect design and code

In Figma, tokens usually live as variables. In code, they become CSS custom properties, Sass variables, Swift constants, Android resources or JavaScript objects. A build step transforms one source into all of these. When a designer changes a value, the change flows through the pipeline into every platform.

:root {
  --color-action-primary: #0f62fe;
  --space-4: 16px;
  --radius-md: 8px;
}

The project

We will build tokens for a fictional banking dashboard with a light and dark theme. By the end of the course, changing the primary brand colour in Figma will rebuild CSS and mobile token files automatically, and every component will update.

In the next lesson we look at the single most important structural decision: how to layer tokens into primitives, semantics and component tokens.