How do you design a multi-brand Design System architecture that supports dark mode?

Short answer

Separate the component's structure and logic from its visual appearance, and replace direct color values with semantic tokens whose values change according to context or the active theme.

Explanation

In a multi-brand system, such as a company with three related apps, a component such as a product card has the same Auto Layout and interaction rules for every brand. Only the semantic token file differs: Brand A uses blue shades and rounded corners (radius-sm), while Brand B uses black shades and sharp corners (radius-none). When dark mode is enabled, surface tokens are remapped to dark values without creating new components.

Common mistakes

• Creating a complete, separate component library for every brand or light mode, multiplying maintenance costs.
• Using hardcoded hex color values inside component code or Figma frames.

Follow-up questions

• What design principles create a comfortable dark mode instead of randomly inverting colors?

Sources

• Material Design — Dark Theme Implementation and Contrast