A rebrand shouldn't mean rebuilding the website. If your interface stores its colours, spacing and type as named values rather than scattered hex codes, changing the brand becomes a small edit instead of a project. Those named values are called design tokens.
What a design token actually is
A design token is a name that stands in for a design decision. Instead of writing #0A0A0A in fifty places, you define color-text-primary once and reference the name everywhere. The same idea applies to spacing (space-4), font sizes (font-size-lead), border radius, shadows and animation timings. The token is the single source of truth; everything else points at it.
Why this matters when the brand changes
When a brand evolves — a new primary colour, a slightly tighter typographic scale, rounder corners — the work is now concentrated in one file. Update the token values, and every button, card, form and heading that referenced them updates with it. Without tokens, the same change means hunting through stylesheets and components, and you will miss some.
Photo: stefano manzini / Unsplash
Two layers keep it flexible
Good token systems separate what a value is from how it's used:
- Primitive tokens name raw values:
green-500,grey-950,size-16. They rarely change. - Semantic tokens name intent:
color-action,color-surface,space-section. They point at primitives and are what your components actually use.
A rebrand usually only touches the mapping in between — you re-point color-action from one primitive to another — while components stay untouched.
Keep the set small
The most common mistake is too many tokens. If every screen introduces a new spacing value, you don't have a system, you have a list. Start with a tight scale — a handful of spacing steps, five or six text sizes, a small colour set — and only add a token when the same new value shows up in three separate places.
Where tokens live
For most sites, CSS custom properties on :root are enough, and they can be themed at runtime. Larger products keep tokens in a format-neutral file (often JSON) and generate CSS, iOS and Android outputs from it, so every platform shares one definition. Either way, the rule is the same: designers and developers agree on the names, and nothing hard-codes a value that a token already covers.
In short
Tokens turn "change the brand" from a rebuild into a config change. We set them up as part of our design and web development work — if you're planning a refresh and want the site to keep up, get in touch.