A tokenized design system supporting 11 brands with full dark & light mode

The challenge: scalability and consistency

Eleven brands, and every one followed a different logic. Components weren't shared between teams, so even a small change took ages to ship — first detecting everywhere a component was used, then fixing it manually, team by team. The company needed one tokenized design system holding all 11 brands together, each with its own identity and a full dark and light mode, on a shared underlying structure.

As Design System Lead — and the only dedicated design system designer — my job was as much organizational as technical: closing the gap between business, brand, product and development, with 8 product designers plus brand and production teams all consuming the same system.

One token architecture, 22 themes

The system is built on Figma native variables: a single token architecture that resolves to 11 brands × light and dark mode. A component is designed once and renders correctly in all 22 combinations — which means a fix or improvement lands everywhere at once, replacing the old brand-by-brand manual hunt.

Auditing for accessibility

Alongside the token work, I led a full audit and refactor of the component library against WCAG AA criteria — rooted in the foundations (color, type, spacing) and carried through every component. Fixing at the component level means every brand built on the system inherits the fix automatically.

Bringing AI into the workflow

To make the system usable beyond systems experts, I created a Claude skill — shared across the whole organization — that helps any team ideate and quickly prototype while staying on brand: it follows the design system's rules, guidelines and styles automatically. I also wrote guidelines for adapting AI agents to work within the system, so the guardrails hold as tooling evolves.

The outcome

A consistent, WCAG AA–aligned foundation running underneath all 11 brands in both light and dark mode — one change now propagates across every brand instead of being re-fixed team by team — plus an AI-assisted ideation workflow used across the company. Getting there took close collaboration with brand, product and development to agree which fixes were safe to apply silently and which needed sign-off, so the changes stuck system-wide rather than as one-off patches.