The complexity was mounting. Every new product page had to work across 17 brands, six breakpoints, and multiple regional requirements. As demand grew, our component count exploded, consistency broke down, and burnout loomed. We needed a reset.

We began by auditing the UK sites and quickly uncovered years of short-term fixes—redundant designs repeated across screens. Nothing had been built to scale.

Digging into our design system, LDX, revealed deeper problems. Brand-specific component variants had ballooned beyond what our small team could manage, especially without a dedicated design systems role.

Our colour system was another weak link. Inherited from an external agency, it had been approved as a brand guideline but was never designed to support a product design system. It lacked semantic structure, a full spectrum of tints and shades, and hadn’t accounted for accessibility—leading to inconsistent styles and diluted brand identities.

Typography was equally fragmented. No shared structure, inconsistent styles, and a type scale built for marketing headlines—making fast decisions unnecessarily hard.

When we compared our layouts and breakpoints to leading e-commerce sites, it became clear: our system wasn’t putting the product first. And without a defined aspect ratio for product imagery, inconsistent presentation and awkward layouts were inevitable.

We also found that merchandising elements like logos, badges, and decorative accents were added ad hoc, with no centralised source of truth. We didn’t just lack structure—we lacked the assets.

We traced the source of every colour and rebuilt them into per-brand primitive palettes. Inspired by systems like Uber Base, Decathlon Vitamin, and Tailwind CSS, we created a semantic structure for text, icons, borders, and backgrounds. With tokens stored as variables, we enabled scalable theme swapping across all partner brands.

We redefined typography. A tighter scale supported dense product content, with fewer semantic roles to reduce decision fatigue. Variables and mode switching handled brand-level customisation.

We reduced breakpoints from six to five for long-term simplicity. We introduced fixed image aspect ratios for better layout consistency and fine-tuned margins based on stakeholder feedback. Spacing was redefined using a consistent 4pt scale and implemented via tokens.

We also built a centralised asset library—logos, icons, and merchandising elements—by tracking down the source files from all three global regions and our internal digital design team. This gave us a clear, consolidated picture of what was actually in use, allowing us to establish a reliable source of truth.

We rebuilt core components to be responsive, scalable, and brand-flexible. We had used V0 on other projects and noticed that the designs it generated—based on the Shadcn UI library—resonated well with stakeholders. The familiarity of these patterns made them easier to accept and build consensus around, so we used them as the foundation for our component rebuild.

We used this as the foundation for our Figma rebuild—designing with visual structure, interaction states, and properties, all powered by a tokenised system. Mode switching let us use a single library across all brands. Introducing variables cut component variant count dramatically—up to 94% in some cases.

Quality Assurance

We didn’t just build—we tested every layer to prove it worked.

We validated the new system by rebuilding live pages across brands and testing every element. Brand modes were rigorously tested to ensure layout and visual fidelity.

We didn’t just build—we tested every layer to prove it worked.

We validated the new system by rebuilding live pages across brands and testing every element. Brand modes were rigorously tested to ensure layout and visual fidelity.

Theme switching became instant. Junior designers could reskin brands and migrate legacy files quickly. Documentation reduced dependency on meetings, and consistency improved across outputs.

The system proved its value when a complex, multi-brand checkout flow—over 300 views—was designed and delivered by a single designer (me). Work that would have previously required multiple contributors became possible solo—evidence that we hadn’t just scaled components, we’d scaled design capacity. It’s now being adopted across digital and product teams as the foundation for future work.

The complexity was mounting. Every new product page had to work across 17 brands, six breakpoints, and multiple regional requirements. As demand grew, our component count exploded, consistency broke down, and burnout loomed. We needed a reset.

We began by auditing the UK sites and quickly uncovered years of short-term fixes—redundant designs repeated across screens. Nothing had been built to scale.

Digging into our design system, LDX, revealed deeper problems. Brand-specific component variants had ballooned beyond what our small team could manage, especially without a dedicated design systems role.

Our colour system was another weak link. Inherited from an external agency, it had been approved as a brand guideline but was never designed to support a product design system. It lacked semantic structure, a full spectrum of tints and shades, and hadn’t accounted for accessibility—leading to inconsistent styles and diluted brand identities.

Typography was equally fragmented. No shared structure, inconsistent styles, and a type scale built for marketing headlines—making fast decisions unnecessarily hard.

When we compared our layouts and breakpoints to leading e-commerce sites, it became clear: our system wasn’t putting the product first. And without a defined aspect ratio for product imagery, inconsistent presentation and awkward layouts were inevitable.

We also found that merchandising elements like logos, badges, and decorative accents were added ad hoc, with no centralised source of truth. We didn’t just lack structure—we lacked the assets.

We traced the source of every colour and rebuilt them into per-brand primitive palettes. Inspired by systems like Uber Base, Decathlon Vitamin, and Tailwind CSS, we created a semantic structure for text, icons, borders, and backgrounds. With tokens stored as variables, we enabled scalable theme swapping across all partner brands.

We redefined typography. A tighter scale supported dense product content, with fewer semantic roles to reduce decision fatigue. Variables and mode switching handled brand-level customisation.

We reduced breakpoints from six to five for long-term simplicity. We introduced fixed image aspect ratios for better layout consistency and fine-tuned margins based on stakeholder feedback. Spacing was redefined using a consistent 4pt scale and implemented via tokens.

We also built a centralised asset library—logos, icons, and merchandising elements—by tracking down the source files from all three global regions and our internal digital design team. This gave us a clear, consolidated picture of what was actually in use, allowing us to establish a reliable source of truth.

We rebuilt core components to be responsive, scalable, and brand-flexible. We had used V0 on other projects and noticed that the designs it generated—based on the Shadcn UI library—resonated well with stakeholders. The familiarity of these patterns made them easier to accept and build consensus around, so we used them as the foundation for our component rebuild.

We used this as the foundation for our Figma rebuild—designing with visual structure, interaction states, and properties, all powered by a tokenised system. Mode switching let us use a single library across all brands. Introducing variables cut component variant count dramatically—up to 94% in some cases.

We didn’t just build—we tested every layer to prove it worked.

We validated the new system by rebuilding live pages across brands and testing every element. Brand modes were rigorously tested to ensure layout and visual fidelity.

Theme switching became instant. Junior designers could reskin brands and migrate legacy files quickly. Documentation reduced dependency on meetings, and consistency improved across outputs.

The system proved its value when a complex, multi-brand checkout flow—over 300 views—was designed and delivered by a single designer (me). Work that would have previously required multiple contributors became possible solo—evidence that we hadn’t just scaled components, we’d scaled design capacity. It’s now being adopted across digital and product teams as the foundation for future work.