Design tokens: one place for every colour, size and font
A website's look is a few dozen decisions repeated thousands of times. Design tokens make each decision once, name it, and apply it everywhere.
The short answer
A website’s look is a few dozen decisions, the brand colours, the spacing between things, the sizes of text, the roundness of corners, applied thousands of times across every page. Design tokens make each decision once, give it a name, and have every component use the name rather than the raw value. The result is a site that looks like one site however many people build on it over however many years, a rebrand that is a change to a list, and constraints that prevent the slow drift into forty shades of grey. In our stack the tokens are the Tailwind configuration and a set of CSS variables; nothing is typed by hand.
What tokens cover
| Category | Examples | What the constraint prevents |
|---|---|---|
| Colour | Brand, accent, text, backgrounds, borders, states, with defined pairings | Untested combinations that fail contrast; near-duplicate shades |
| Spacing | A scale of steps for margins, padding and gaps | Arbitrary gaps that make pages feel uneven |
| Typography | Families, sizes, weights, line heights, in a stepped scale | Headings that are almost but not quite the same size |
| Shape | Corner radii, border widths | Buttons and cards with slightly different corners |
| Elevation | A small set of shadows | Every card floating at a different height |
| Layout | Breakpoints, container widths, grid gutters | Pages that break differently on the same phone |
| Motion | Durations and easing curves | Animations that feel unrelated |
How they work in practice
- The designer defines the decisions: palette with pairings, spacing scale, type scale, radii, shadows, breakpoints.
- The decisions become configuration: the Tailwind theme and CSS custom properties, committed to the repository.
- Components use names only. A button uses the accent colour token and the medium radius token; it never contains a hex value or a pixel size.
- Reviews reject raw values. A pull request that types a colour by hand is a signal that a token is missing or being bypassed.
- Automated checks verify contrast on the pairings and flag values outside the scales.
- Changes go through the tokens. A new brand colour is a change to the configuration, previewed across the whole site before it ships.
Why it matters to the business
A site built on tokens ages well. Pages added in year three match pages from year one. A new developer inherits the decisions rather than guessing at them. Accessibility constraints, contrast especially, are built into the pairings and cannot be forgotten on a new page. And when the brand evolves, the site follows in a day, on a preview, rather than through a page-by-page project with a budget attached.
What this means for you
Design tokens are the difference between a site that stays consistent by discipline and one that stays consistent by construction. Insist that the design decisions live in one list, that components use names rather than values, and that reviews protect the list. Your site will look like one site for years, your next rebrand will be a preview link rather than a project, and the accessibility constraints will hold on pages nobody has designed yet.
Frequently asked questions
Is this not just a style guide?
A style guide is a document people are supposed to read. Tokens are the same decisions made executable: the code cannot use a colour that is not in the list, and changing the list changes every page. A style guide describes consistency; tokens enforce it.
How many tokens does a business website need?
Fewer than people expect: a small palette with defined text and background pairings, a spacing scale of a dozen steps, a handful of type sizes and weights, two or three radii, a couple of shadows, breakpoints. A few dozen decisions in total. More than that usually means decisions being duplicated rather than reused.
What happens when we rebrand?
The colour tokens change, the type tokens change if the typeface does, and every component updates because it referenced the names. The work moves from touching every page to reviewing the result on a preview. It is the difference between a rebrand taking a day and taking a month.
Sources
- Tailwind CSS documentation: Theme variables (accessed 2026-09-11)