Three brands, three libraries, and no shared source of truth. I built one flexible system that preserves each identity while aligning design and engineering.
Domain
Systems & Architecture
Year
'24 - '25
Scope
Atomic Design Foundations
Problem
With no unified system, each brand maintained its own library, duplicating work across teams, creating inconsistent design-to-dev handoffs, and limiting how well the organization could scale as new brands came online. The challenge: create one flexible system that let every brand keep its identity while scaling across the product. Mature systems offered strong defaults but were too prescriptive for our multi-brand requirements.
Solution
One system. multuple brands. Zero duplication. 100% Figma-to-code token parity across semantic color, spacing, and font states. 60% faster component delivery from design to production 2x Increase in prototype-to-production speed across all product squads.
01 The Audit & Evaluation
I audited each brand's existing requirements and evaluated industry-standard systems, Material Design, Carbon, and Atlassian, for platform flexibility, ease of adoption, framework simplicity, and customization flexibility. Selected Atomic Design as the foundation for its scalability.
02 Layered Architecture
I built the system in key layers: (1) Tokens: color, spacing, typography, and theming tokens formed the core with semantic naming; (2) Components: atomically structured for reusability, with states and WCAG accessibility considered; (3) Documentation: structured usage guidelines.
03 Semantic Translation & Overrides
We implemented a semantic naming structure to prevent duplicate components across brands, using brand-specific token overrides that connected Figma styles directly to the codebase to keep design and development in sync.
