Design Multi-Brand Theming

Design Systems & Tokens · tokens, design systems, color

Updated 2026-07-28

Separate what can change from what cannot. Colour, type, radius, and density are usually themeable, while layout, behaviour, and accessibility rules are not.
Theme through tokens only. The moment a component reads a brand name and branches, you have two components pretending to be one.
Build the semantic layer first. Components should ask for the primary action colour, not for orange, so a new brand is a value change rather than a rewrite.
Decide which parts of the system are locked. Focus indicators, error colours, minimum contrast, and touch target sizes should not be negotiable per brand.
Test every theme against the same accessibility bar. A palette that passes for one brand and fails for another means the system has shipped an inaccessible product under a different name.
Watch density and type. A brand with a wider typeface or a larger base size will break layouts that were only ever checked with the original one.
Keep one source for the token values and generate every format from it, so the site, the apps, and the design tool cannot drift apart.
Give each brand a real review. Automated theming produces technically valid combinations that look wrong to the people who own the brand.

Theming works when brands differ in their values and agree on their structure, and it collapses the moment a brand needs its own components.