One System, Many Brands — Inside Multi-Brand Design Systems

The moment a company announces it’s launching a sub-brand, the design team inherits a quiet dilemma. Build a separate component library for each brand and maintenance costs double with every launch; force every brand through one shared system and their personalities flatten into sameness. The answer that mature teams keep arriving at is a multi-brand design system — one that separates what components are from how they look, sharing structure across brands while letting each inject its own visual values.

1. Separating Structure from Values

The core principle fits in one sentence: share the component’s structure across brands, and swap only the visual values per brand. There is one Button — one anatomy, one set of states, one accessibility contract. Brand A renders it with sharp corners and a serif typeface; Brand B renders the same button with rounded corners and a geometric sans. The skeleton is common property; the skin is brand territory.

This is the same reason a design system like Atlassian’s can serve visibly different products from a shared foundation: what’s shared is the underlying logic, not the surface. Once structure and values are decoupled, adding a brand stops being a rebuild and becomes a configuration exercise.

2. Two Layers of Tokens

To make that separation real, tokens need at least two layers. Components never reference brand values directly — they reference semantic tokens (surface, text-primary, radius-interactive), and each semantic token points to a brand token that holds the actual value. Switching brands means re-pointing that single connection; the component code never changes. If your team already runs a semantic token layer for theming, this is the same hierarchy extended one level further.

Proving It in Figma

Figma’s Variables make this architecture testable before a line of code exists. Create one collection with a mode per brand, and any component instance can flip between brands instantly. The mechanics are identical to a light/dark mode switch — and because modes combine, adding a dark-mode axis alongside the brand axis lets you manage every brand-and-theme combination in a single file. Figma’s official Variables documentation covers the mode setup in detail.

3. White-Label Is Not Multi-Brand

Designing one of these systems, teams often blur two concepts that deserve sharp separation. White-labeling means building one product and letting external clients dress it as their own — the structure stays rigidly identical, and only surface identifiers change. Multi-brand means one company deliberately operates several brands and wants each to keep a genuine personality. The engineering looks similar; the policy question — how much difference is allowed between brands — is fundamentally different.

Skip this distinction and you get one of two failure modes: white-label-grade rigidity applied to a multi-brand portfolio, suffocating every brand’s character — or multi-brand-grade freedom applied to white-label clients, until every client demands a structurally different product and the shared system collapses.

In practice, most real portfolios mix both. The flagship brand gets multi-brand freedom; an acquired subsidiary or partner surface gets white-label treatment, limited to little more than a logo swap. Mixed setups work fine — as long as the tiers are written down. Document which brand sits at which level of freedom, or every new team member will wonder why one brand’s customization range is mysteriously narrower than another’s. Better still, define brand tiers once, with a pre-agreed customization scope per tier, so each new brand launch starts from a known grade instead of reopening the negotiation from scratch.

Closing Thoughts

A quick checklist, distilled: separate component structure from visual values; split tokens into semantic and brand layers; validate brand switching with Figma Variables modes before building; agree up front on the elements each brand keeps to itself; and document the minimum work required to onboard a new brand. A multi-brand design system is never a solved problem — it’s an ongoing negotiation over where sharing ends and brand personality begins. But hold on to the one principle of separating structure from values, and the cost of every next brand drops visibly.