Multi-Brand Design System
One component library faithfully representing six distinct brand identities — built once, deployed everywhere, with zero duplication.
One system.
Six identities.
Designing a single component library that can faithfully represent six distinct brand identities — each with their own visual language, typography, colour philosophy and interaction patterns — without duplicating components or fracturing the system.
The challenge was architectural: how do you build once and deploy everywhere, while preserving each brand's identity so thoroughly that no user ever notices they're looking at the same component underneath?
The answer was a layered Figma variable architecture split across dedicated collections — Primitives for raw values, a Brand collection where BMW, MINI, Motorrad, Rolls-Royce, Alpina and Alphabet each live as their own mode, and Public collections for shared colour, sizing and typography. Switching a single brand mode cascades through every alias, restyling 100% of components instantly.
Tokens are grouped by component — accordion, badge, button, cards, checkbox and more — and resolve through light and dark modes, so one definition stays consistent across every brand and theme. This case documents that token structure and how it scaled across global teams.
The three-layer
token model
Primitives — Raw Values
The foundation: _Primitives (307 values) plus shared Public collections for colour (76), sizing (40) and typography (3). Pure literal values — hex, px, type — with no brand context or meaning.
Brand — Semantic Aliases
The _Brand collection — 1,127 variables. Each brand (BMW, MINI, Motorrad, Rolls-Royce, Alpina, Alphabet) resolves through its own light and dark modes, aliasing straight back to Primitives.
Component Tokens
Within _Brand, tokens are grouped per component — button (65), cards (24), checkbox (41), accordion (21) and more. Every property maps to a semantic alias, never a raw value.
One swap, full cascade
Switching a brand mode re-resolves all 1,127 aliases at once. Add _Breakpoint (431) and Alphabets-Localization (11) and the system spans brand, theme, screen size and locale.
Brand swap
in action
Switch between brand modes below. Every component updates simultaneously — no component logic changes. Only the active Semantic mode swaps, resolving to different Primitive values underneath.
How it
was built
Brand audit & tokenisation. Analysed all brand identities side by side — extracting shared structural patterns while preserving individual visual languages.
Primitive foundation first. Established _Primitives (307) plus the shared Public colour, sizing and typography collections, with strict naming conventions enforced from day one.
Brand modes. Each brand added inside _Brand with its own light and dark modes, so components stay brand-agnostic.
Component grouping. 1,127 brand variables organised into component groups — button, cards, checkbox, accordion — each pointing exclusively to semantic aliases.
Responsive & localisation. _Breakpoint (431) and Alphabets-Localization (11) extend the system across screen sizes and locales without touching components.
Accessibility validation. Every brand mode validated independently for WCAG AA contrast across all component states.