Why it shows up in your week
A brand refresh changes the accent colour. Without tokens, someone greps fifty files for near-orange hex codes and still misses three landing pages. With tokens, you change color.accent once.
In plain language
A token might be color.accent or --acc. Components consume tokens instead of raw hex codes.
Primitive tokens (raw palette) and semantic tokens (accent, danger, text-muted) keep intent clear when themes expand.
WordPress block themes express many tokens in theme.json so editors stay inside the palette.
Without tokens, each landing page invents spacing. With tokens, the design system stays coherent as the site grows.
Document aliases. If design says "Coral" and code says "--acc", write the map down.
Facts worth keeping
- What they name
- Colour, type, spacing, radius, elevation, motion (sometimes)
- Code form
- CSS variables, style dictionary outputs, theme.json values
- Design form
- Figma variables / styles
- Why they exist
- One source of truth for brand and UI consistency
- Pairs with
- Components and patterns in a design system
Not the same as
- A full design systemTokens are the primitive layer. Components and patterns consume them.
- Hard-coded theme colours in one CSS fileBetter than scattered hex, still weaker than named semantic tokens used everywhere.
- Brand guidelines aloneGuidelines describe. Tokens implement values machines and components can reference.
Where it bites
Missing tokens hurt during a brand refresh when fifty pages each hard-code slightly different greys and nobody knows which orange is official.
Campaign pages then ship "close enough" colours that make the brand look accidental.
What to check
- Do Figma styles and CSS variables use the same token names?
- Are one-off hex values still scattered in components?
- Can a brand accent change ship without editing every template?
- Are semantic tokens (accent, danger) used instead of raw palette everywhere?
- Does theme.json (or equivalent) expose the same palette editors see?
Common questions
What are design tokens?
Named values for visual decisions such as colour, typography, and spacing, shared between design tools and code.
How do design tokens relate to a design system?
Tokens are the primitive layer. Components and patterns consume tokens so the system stays consistent.
Do WordPress sites use tokens?
Yes. Block themes often map tokens through theme.json. Custom themes can use CSS variables the same way.
What should you check first for design tokens?
Confirm core colour, type, and spacing tokens exist in both Figma and production, and that components reference those names instead of raw values.
Are tokens only for big product teams?
No. Even a marketing site with ten templates benefits when accent and spacing are named once.