Multi-Theme and Multi-Brand Token Architecture

A theme changes the color mode of the same brand (light and dark versions of the same product). A brand is a different visual identity — the same design system components rendered with different colors, typography, and spacing to serve different products or customers. Both use the same token architecture but at different abstraction levels.

Primitive tokens are the complete palette of raw values available to the system. They include every color step (color-blue-50 through color-blue-900), every spacing unit, every font size. Primitive tokens are never used directly in components — they are only referenced by semantic tokens. The palette is defined once and shared across all themes and brands.