process & strategy
Design tokens
What are design tokens?
Design tokens are named values for design decisions like colours, spacing, corner radius, and type sizes - stored once and referenced everywhere. Change the token, and everything built from it updates at once.
Also known as: design variables
Prefer to watch?
Watch the recap 0:37
The demo
Three controls, one card. Each control changes a single token - and watch how much of the card moves with it, because every part just points at the token.
The card is using the site's default tokens. Change one and the whole card follows.
What this demo shows (text version)
A mock product card - image, tag, title, text and an "add to basket" button - is styled entirely from three design tokens: an accent colour, a corner radius and a spacing value. Controls let you change each one.
Changing the accent recolours the tag, the button and the image tint together. Changing the radius rounds every corner at once. Changing the spacing loosens or tightens the whole card's padding and gaps. Nothing in the card holds its own copy of these values; each part references the shared token, so a single change ripples everywhere - which is exactly how a design system keeps a hundred screens consistent, and how this site itself is themed.
Design tokens are named values for design decisions like colours, spacing, corner radius, and type sizes - stored once and referenced everywhere. Point everything at the token instead of hard-coding, and one change restyles the whole product at once instead of a hunt-and-replace across files.
You changed one value and the whole card restyled - accent, corners and density all moving together, because each is a token the card merely points to. That single source of truth is the point: design decisions live in one place, not copied into a hundred. This very site is themed exactly this way.
Tokens are only worth it if everything actually uses them. The failure mode is the stray hard-coded value - one button with a hand-typed colour that doesn't move when the token does - and now you have drift, the slow divergence a design system exists to prevent. A token nobody references is just a comment.
My rule: name tokens by intent, not by appearance. "--accent" survives a rebrand; "--green" becomes a lie the day the brand turns blue. The whole value is that one change ripples everywhere - so name them for the job they do, and the rename never has to happen.
Try adjusting design tokens live on site:uxbyexample.co.uk - the demo shows how one change cascades across your whole design system. This page’s hands-on demo lets you see tokens in action, not just theory - that’s how we teach UX here.
Try changing a design token live on site:uxbyexample.co.uk to see how it updates everything built from it - no hunting through files needed. This page’s interactive demo lets you adjust tokens and watch the effect ripple across your design system - that’s the real example here.