Design tokens explained for people who are not designers

Your developer mentions design tokens for the third time this week, and you keep nodding along while quietly wondering whether you should know what they are. You are not alone, and it is not a daft question. The term sounds far more technical than the idea behind it.

Strip away the jargon and a design token is one of the most sensible ideas in modern web work. Understanding it will make every conversation about your brand and your website easier.

The problem tokens solve#

Picture your brand blue scattered across a website. It appears in buttons, links, headings, the odd icon, maybe a background or two. Now imagine the brand evolves and that blue needs to shift, even slightly.

Without tokens, someone has to hunt down every place that colour was typed in and change each one by hand. Miss a few, which is almost guaranteed, and your site ends up with two slightly different blues that nobody can quite explain. Tokens exist to stop that mess before it starts.

A token is just a named decision#

Here is the whole concept in one sentence. A design token is a name given to a design decision, used everywhere instead of the raw value.

So rather than typing a specific blue into fifty places, you define it once as something like brand primary and point everything at that name. Change the value behind the name, and every button, link and heading updates together, instantly and consistently. The decision lives in one place, which is exactly where it should live.

On the web this is built on a real, standardised feature called custom properties. The MDN guide to CSS custom properties shows how a named value gets reused across an entire site, and the underlying CSS variables specification is published by the W3C, so this is not a passing trend.

Colour, spacing and type as variables#

Colour is the easiest example, but tokens cover far more than that, and this is where the real consistency comes from.

Spacing is a quiet hero. Defining a small set of spacing values, and reusing them everywhere, is what makes a site feel calm and deliberate rather than slightly off in a way visitors sense but cannot name. Type works the same way: your font sizes, weights and line heights become named tokens instead of arbitrary numbers, so headings and body text stay in proportion across every page.

When colour, spacing and type are all defined as named variables, the whole interface starts to behave like a system rather than a collection of one off decisions. In code these names are referenced through the var() function, and Google's own guidance on designing for the web leans heavily on exactly this kind of reusable structure.

Why this saves money later#

This is the part that matters to whoever signs off the budget. Tokens are not a designer's indulgence. They are a cost control measure.

Every future change gets cheaper. A rebrand that touches the colours becomes a handful of edits rather than a page by page slog. Adding a new section to the site reuses the existing tokens, so it automatically looks right without a fresh round of decisions. New people join and inherit a clear system instead of guessing at your brand. The upfront effort of defining tokens is repaid every single time the site changes after that.

It also keeps your website and your wider brand honest with each other. The same values that live in your brand guidelines can be expressed directly as tokens in the build, so the green on the site is provably the green the brand agreed on, not an approximation someone eyeballed.

Light and dark from one source#

Tokens have one more trick that shows the idea at its best: theming. A light mode and a dark mode are, underneath, just two sets of values pointing at the same names.

Because every colour reference goes through a token rather than a hard coded value, switching the whole site to dark mode is a matter of swapping what those tokens resolve to. The browser can even respond to a visitor's own preference, using the prefers-color-scheme feature, and Google's notes on building dark mode describe the same single source approach. Without tokens, a second theme means rebuilding half the site. With them, it is close to free.

You do not need to know how any of this is coded to make good decisions about it. You just need to know that a token is a named decision, defined once and reused everywhere. If you would like that structure built properly into your site, a considered design token system is the foundation worth getting right early, because everything you build on top of it stays cheaper to change.