Introduction
Enterprises often manage multiple brands—think parent companies with sub-brands or white-label products for different clients. Maintaining a consistent design system across brands can be a nightmare if every brand requires a separate codebase.
The solution? A multi-brand design system powered by SASS variables and CSS custom properties (variables). This approach allows developers to:
- Define shared tokens (spacing, typography, breakpoints)
- Override brand-specific tokens (colors, logos, themes)
- Scale design consistently across multiple products without duplicating code
In this article, we’ll explore:
- How to structure design tokens for multi-brand systems
- Implementing brand overrides with SASS and CSS custom properties
- Practical code examples for theme switching
- Best practices and pitfalls when scaling across brands
By the end, you’ll know how to build a flexible design system that supports multiple brands while maintaining consistency.
1. Structuring design tokens
Tokens represent the building blocks of design systems:
- Colors
- Typography
- Spacing
- Shadows, radii, z-index
Example token definition in SASS:
// tokens/_core.scss
$spacing-unit: 1rem;
$font-family-base: 'Inter', sans-serif;
$border-radius-base: 0.5rem;
// Default (brand-neutral) colors
$color-primary: #0066ff;
$color-secondary: #ff6600;
$color-bg: #ffffff;
$color-text: #222222;Now let’s extend this for multi-brand usage.
2. Creating brand-specific overrides
Each brand defines its own color palette while inheriting shared tokens.
// tokens/_brand-acme.scss
$color-primary: #e63946;
$color-secondary: #f1faee;
$color-bg: #ffffff;
$color-text: #1d3557;
// tokens/_brand-nova.scss
$color-primary: #ffb703;
$color-secondary: #023047;
$color-bg: #fefae0;
$color-text: #14213d;Applying brand context
Use SASS’s @use or @import to load the right brand tokens at build time:
// main.scss
@use 'tokens/core';
@use 'tokens/brand-acme'; // Switch this to brand-nova for another product
body {
font-family: core.$font-family-base;
background-color: brand-acme.$color-bg;
color: brand-acme.$color-text;
}This lets you compile separate stylesheets per brand while keeping a shared core.
3. Using CSS custom properties for runtime switching
SASS is powerful at build time, but sometimes you need runtime theme switching (e.g., white-label platforms). This is where CSS custom properties shine.
Define brand variables
:root {
--color-primary: #0066ff;
--color-secondary: #ff6600;
--color-bg: #ffffff;
--color-text: #222222;
}
.brand-acme {
--color-primary: #e63946;
--color-secondary: #f1faee;
--color-bg: #ffffff;
--color-text: #1d3557;
}
.brand-nova {
--color-primary: #ffb703;
--color-secondary: #023047;
--color-bg: #fefae0;
--color-text: #14213d;
}Consume variables in components
.button {
background: var(--color-primary);
color: var(--color-bg);
border-radius: var(--radius, 0.5rem);
}
body {
background: var(--color-bg);
color: var(--color-text);
}Switching brands dynamically
<body class="brand-acme">
<button class="button">Buy Now</button>
</body>
<!-- Switch to another brand -->
<body class="brand-nova">
<button class="button">Buy Now</button>
</body>4. Scaling across multiple products
When scaling, combine SASS (build-time) with CSS variables (runtime):
- SASS handles global consistency: breakpoints, typography, shared spacing.
- CSS variables handle brand identity: colors, theming, overrides.
This hybrid model ensures both maintainability and flexibility.
Example: Define shared SASS tokens, but output CSS variables for runtime overrides:
// tokens/_core.scss
$spacing-unit: 1rem;
$radius: 0.5rem;
// Export as CSS vars
:root {
--spacing-unit: #{$spacing-unit};
--radius: #{$radius};
}Now, CSS variables inherit shared defaults while allowing brand-level overrides.
5. Pitfalls & best practices
- Pitfall: Duplicating brand files → code bloat.
- Best practice: Extract common tokens into _core.scss and override selectively.
- Pitfall: Too many brand variations → maintenance overhead.
- Best practice: Define a brand strategy (e.g., only colors/logos vary).
- Pitfall: Accessibility ignored in branding.
- Best practice: Test brand palettes with contrast checkers.
- Pitfall: Inconsistent naming.
- Best practice: Use a naming convention for tokens ($color-primary, $spacing-unit, etc.).
Conclusion
Supporting multiple brands doesn’t mean duplicating entire design systems. By combining SASS tokens with CSS custom properties, you can:
- Build a shared design foundation
- Create brand-specific overrides without duplication
- Support runtime theme switching for white-label products
- Maintain accessibility across palettes
This approach scales across products while keeping design consistent, flexible, and easy to maintain.
👉 Want to implement a multi-brand design system for your organization? Explore our UI/UX services here.
