multi-brand-design-systems

name	multi-brand-design-systems
description	Use when designing for multiple sub-brands (e.g., X3 Compass + X3 Fleet Safety + X3 Investment Group). Covers token inheritance, white-label patterns, and the shared-vs-distinct architecture.

Multi Brand Design Systems

Multi-brand systems share primitives, diverge on semantics.

Architecture

Primitives shared across brands. Semantic tokens differ per brand. Component code shared; brand layer is just CSS variables.

Brand inheritance

X3 Compass inherits from X3 brand. Overrides accent color, voice, tagline. Same component primitives.

Theme switcher

data-brand='compass' on root. CSS variables change. Components don't know which brand they're in.

White-label vs co-brand

White-label = customer's brand only. Co-brand = both visible. Different use cases, different patterns.

Common mistakes

Forking components per brand (maintenance nightmare). Brand differences encoded in component code (inflexible). Multiple primitives diverging (drift).

Where this fits in X3 Compass

Applied across the X3 Compass design system.