Three structural problems made scaling impossible without fixing the foundations first.
Flat token model
A single tier of primitives meant one brand change had knock-on effects elsewhere. Teams hard-coded values to cope.
Manual handoff
Engineers copied brand colours and type specs by hand from Figma. Decisions were missed; rework was routine.
No component / pattern boundary
All UI routed through the DS before product teams could use it — a bottleneck that owned decisions belonging to product.
I evolved the model from a single tier of primitives to a three-tier hierarchy. The semantic layer was the key change — separating what a value is from what it does, so components could be themed independently without side-effects.
The retailer landing page was the layout every client shipped. White-labelling it meant colour, type, corner radius, button shape and even header layout had to vary per brand — while the components underneath stayed identical.
Same components, three token sets. Brand expression — colour, type, radius, button shape, header layout — lives entirely in the token layer, so a new brand is a delta file, not a fork of the layout.
I replaced the copy-paste handoff with an automated pipeline. Engineers stopped copying values from Figma; design changes propagated automatically, and silent drift was eliminated.
The harder problem wasn't components — it was keeping the system coherent across sixty client configurations and three years. I redefined what belonged in the shared system at all.
Components
Universal UI any user might meet anywhere — buttons, inputs, dialogs. Built to one standard, versioned centrally.
Patterns
Product-specific compositions carrying business logic. Teams iterate freely; proven patterns can be promoted into the library — earned, not assumed.
Adoption was led through contribution models, standing design reviews across product teams, and documentation written for designers new to the conventions — not mandates. The same governance model that handled 20% at the start handled 100% at scale, with no central bottleneck.
demonstrates
Diagnosing structural problems and redesigning foundations without discarding prior work.
Token depth: three tiers plus a default/override multi-brand model.
Governance thinking: redefining what belongs in a shared system to remove org bottlenecks.
Adoption leadership: onboarding teams through contribution and review, not mandates.
