Multi-Tenant Design System Architecture
Engineered a token-based system to service Net-A-Porter and Mr Porter from a single codebase. Achieved 100% component reusability across 3 languages.
The Challenge
What I walked into: Engineering said they couldn't build a single navigation component that would work for both brands because the visual differences were too significant.
The structural differences:
Net-A-Porter: Minimal, black header, no separators.
Mr Porter: Editorial, cream header, 4px horizontal lines and underlines.
Engineering's argument: One brand has structural elements (lines/separators) that the other doesn't. How do you build 'one component' that conditionally shows/hides structural layers?
The Breakthrough
I realized the 'structural' differences were just height differences.
In Figma, I built a frame layer between top and bottom rows:
Net-A-Porter: Frame height = 0px (invisible)
Mr Porter: Frame height = 4px (creates the horizontal divider)
The reveal: I showed engineering one Figma component where toggling themes transformed the navigation instantly without variant swapping. They bought into the entire system architecture immediately.
Research & Discovery
Phase 1: Token Architecture (Weeks 1-4)
I built 35 typography decision tokens (e.g., --Accordion-title-font, --PRODUCT-PRICE-FULL-PRICE-FONT) to encode brand personality at the component level.
Defined 3 color decision tokens for interactive elements to prevent hex value drift.
The architecture principle: Semantic tokens (what it means) → Decision tokens (how this component uses it) → Brand theme overrides (NAP vs MRP values).
Design Process
Component Library Build (Weeks 4-12): Built the complete set of e-commerce components (Nav, Product Cards, Forms) organized into Foundation, Component, and Template libraries.
Navigation Architecture: Built a structure where top/bottom rows and divider frames adjusted based on CSS variables (0px vs 4px).
Page Templates: Created 7 compositions (Homepage, PLP, PDP, Checkout) to teach composition and spacing rhythms.
Team Enablement: Led 5 designers through onboarding workshops and weekly reviews to scale the system across Arabic, Chinese, and Korean localizations.
Key Problems & Solutions
What I delivered: Complete component library, 35+ decision tokens, 3 Figma libraries, 7 page templates, and multi-language support (RTL).
Engineering validation: 'The token-level approach saved us months of work and technical debt.'
Team adoption: All 5 designers successfully used the system without breaking architecture.
System scalability: One library servicing 2 brands × 3 languages × 5 platforms. Maintenance burden reduced by ~80%.
Conclusion
What I'd Do Differently:
1. Build with logical CSS properties from day 1 to avoid painful RTL refactoring.
2. Establish component contribution process earlier to prevent one-off inconsistencies.
3. Document the 'why' behind architectural decisions, not just the 'how'.
Key Learnings:
Constraints breed creativity: The 'impossible' navigation requirement forced the frame height innovation.
Token architecture is architecture: It's not cosmetic; it's the foundation.
Showing > telling: A live demo convinced engineering faster than any spec doc.