Design tokens

Design tokens are named values for the small decisions in a design — a colour, a spacing step, a font size — stored once and reused everywhere. They're what let a brand change in one place and update across a whole product.

Design tokens are named values for the small, repeated decisions in a design: a specific colour, a spacing step, a font size, a corner radius. Instead of writing #111111 in a hundred places, you define color-text once and reference the name everywhere. The value lives in a single source of truth.

The payoff is change without chaos. Darken the brand colour, bump the base spacing, or swap a font, and every screen that references the token updates together — no hunting through files, no half-updated pages. Tokens are the machine-readable layer underneath a design system, which is why the two almost always come together.

We build sites on tokens so the identity stays consistent as the product grows. See the reasoning in a website is a system, not pages.

Quick recall

What are design tokens? Named, reusable values for design decisions — colours, spacing, type sizes — stored in one place.

Why use them? Change a value once and it updates everywhere, so a growing product stays consistent.

How do they relate to a design system? Tokens are the machine-readable layer a design system is built on.