Token architecture for white-label multi-brand

WHAT THIS TESTS Whether you can architect tokens so dozens of brands share one component codebase, with brand differences isolated to data, not code.

A GOOD ANSWER COVERS Fix a shared semantic contract: the set of semantic token names every component depends on, like color-primary, color-surface, spacing-md. This contract stays constant across brands. Each brand then provides two things: its own primitive values, its palette and scales, and its own mapping that assigns the shared semantics to those primitives. A build-time transformation, using a tool like Style Dictionary, takes the shared schema plus a brand's overrides and emits a brand-specific output, either a separate CSS bundle per brand or a scoped block keyed by a brand class or attribute. Components import nothing brand-specific; they consume only the shared semantic custom properties. To serve a brand, you load that brand's generated CSS or set its scope. This isolates brand variation to token data and keeps a single component library.

COMMON WRONG ANSWERS Forking the whole design system per brand multiplies maintenance and guarantees divergence. Adding brand conditionals inside components couples them to brands and makes them fragile. Hardcoding brand colors. Generating everything into one giant bundle with every brand's values shipped to every client wastes bytes.

LIKELY FOLLOW-UPS Do you ship one bundle per brand or all brands at once? Per brand for size, unless runtime brand switching is required. How do you guarantee a brand defines every required semantic? Validate the brand mapping against the schema at build time and fail on gaps. How do brands add unique tokens? Extend, do not break, the shared contract.

ONE CONCRETE EXAMPLE The shared schema declares color-primary. Brand A maps it to a teal primitive, Brand B to a crimson primitive. The build runs once per brand, producing brand-a.css and brand-b.css, each defining var(--color-primary) differently. The same Button component, using var(--color-primary), renders teal for Brand A and crimson for Brand B with zero component changes, because only the token data differed.