Design system for a multi-brand e-commerce platform
A multi-brand e-commerce operator needed a single design system that could skin itself to four distinct brand identities without duplicating components. We built the token layer, the Figma library, and the React implementation in 12 weeks.
- Client
- E-commerce operator (NDA)
- Year
- 2023
- Duration
- 12 weeks
- Practice
- Designs
§ 01Brief
The client operated four distinct retail brands from a single engineering team. Each brand had its own colour palette, typography, and feel — but the engineering overhead of maintaining four separate component libraries had become unmanageable.
We designed a token-first system where brand identity lived entirely in a theme layer. Switching brands was a single token-set swap; every component underneath remained untouched.
§ 02Approach
- 01Audit
Cross-brand component inventory
We catalogued UI patterns across all four brand storefronts — 280+ unique components collapsed to 64 shared primitives once brand-specific styling was extracted to tokens.
- 02Tokens
4-tier token architecture
Global → semantic → component → brand. Brand tokens overrode semantic tokens at the theme boundary. No component file needed editing when switching themes.
- 03Figma
Single library, 4 themes
One Figma component library with Figma variables driving all four brand themes. Designers switched themes via the variable mode picker — no duplicate components.
- 04Handoff
React + CSS custom properties
Tokens compiled to CSS custom properties via Style Dictionary. The React library consumed them with zero brand-specific logic — brand switching was a class on the root element.