Reference
What is Design tokens?
Design tokens are named values for design decisions — colours, spacing, type sizes — defined once and referenced everywhere. They make a change like darkening a brand colour for contrast a single edit rather than a search across a codebase.
Also called: design system variables
Why they matter beyond tidiness
When a brand colour fails a contrast check, the fix is one token value if tokens exist, and a hunt through every stylesheet and template if they do not. The second version is where inconsistency creeps in, because someone always misses a place.
What to tokenise
- Colours, including the specific accessible variants for text on coloured backgrounds
- Spacing, on a consistent scale rather than arbitrary values
- Type sizes and line heights
- Border radii and shadows, which otherwise multiply silently
The small-project version
You do not need a design system. CSS custom properties in one place, named for meaning rather than appearance, give most of the benefit — "--text-muted" rather than "--grey-3", so changing the value does not make the name a lie.
Where this is covered in depth
A definition can only go so far. The 35 types of SEO, explained without the padding covers this properly — 6 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.