Design system
Shipped
Designed in Figma by me, shipped as a package by engineering · Horizon Web, 2023 to now
The Core: one design system, thirty-two live sites
The group launches consumer sites at a high tempo. Before the system, every new site rebuilt the same pieces, and a bug fixed in one place survived in five others. The Core is the set of foundations every new screen starts from.
- 12product lines on the same foundations
- 32live sites across 9 entities
- 1skin per brand, one set of tokens underneath
01
In Figma
Tokens, component libraries with their variants and states, one set of foundations with a skin per brand on top, and the usage guidance that says when to use what. Every new screen starts there, from the landing page to the payment step.
02
In code
The engineering team built the npm package from it: React components and their behaviour, and every new site is assembled from that package. Design and code share one vocabulary, which is what shortens the handoff, and I pair with the engineers during build so the intent survives implementation.
03
Governance
I decide what enters the shared layer and what stays local to a brand. That is what keeps a system people use rather than route around. The legacy estate is moving onto it brand by brand, and every change is assessed for what it does to existing components and journeys before it ships.