Agencies and multi-brand companies face a unique challenge: each brand needs its own visual identity, but there should be enough structural consistency to maintain efficiency and quality. Color systems are the key leverage point.
Shared Structure, Unique Values
The most effective approach is standardizing the structure while varying the values. Every brand gets the same role categories (Primary, Supporting, Light Base, Dark Base), the same number of slots, the same CSS variable names, and the same shade scales. Only the hex values differ.
This means your components, templates, and design tokens work across all brands. Swap the color values and the entire system rebrands itself.
Building Each Brand Palette
Use PaletteRx for each brand independently. Start with the brand's core identity colors, add bases, validate accessibility, and assign roles. The consistent role system ensures structural compatibility even with wildly different color choices.
The CSS Variable Layer
Export each brand as CSS Variables from PaletteRx. They will all follow the same naming convention. Your component library references these variables, so a button with background: var(--color-primary) automatically picks up whatever primary color the current brand defines.
Brand Switching
For multi-brand dashboards or white-label products, brand switching becomes trivial: swap one CSS file or add a class to the body element. No component changes needed.