Build once. Scale across all brands.
One design system, one governance model, five racing brands, without duplicating a single component.
Formula 1's digital portfolio was growing fast. Formula 1, Formula 2, Formula 3, F1 Academy and future commercial ventures were each running on their own design foundations, and every new brand meant more duplicated components, more fragmented tokens and longer delivery timelines. We were brought in to design and roll out the Unified Design System (UDS), a shared foundation that lets every brand launch faster while still looking and feeling like itself.
London, UK
1950
Sports
3,700
One system for a growing brand family
The original F1 design system was built around a single brand, and it simply couldn't stretch to cover F2 and F3's rebrands or F1 Academy's launch without piling up design debt along the way. So we set out to build a system where accessibility, interaction patterns and core components are owned centrally, while each brand keeps control of its own visual expression through tokens. Core components get built once, brands inherit the functionality and apply their own styling on top, and new brands can now be onboarded in a fraction of the time it used to take.
Architecture built for inheritance, not duplication
We split the system into three layers: a foundation of shared primitives (colour structures, typography scales, spacing, elevation, motion), a library of core components (buttons, navigation, cards, forms, tables, content modules) and a brand layer that controls palette, typography and imagery per brand. The hardest technical problem was the token architecture, so we designed it around Figma's Extended Collections model, letting F2, F3 and future brands inherit from a shared parent system and only define what's actually different. Shared tokens stay centrally managed, changes cascade automatically, and scaling a new brand no longer means rebuilding the system from scratch.
3+
Brands unified onto one system
100+
Reduction in duplicated components
4x
Faster time-to-launch for F2 and F3 experiences
Governance that keeps the system honest
A design system doesn't scale on tooling alone, so we built a governance framework around a few clear principles: shared core, unique voices, build once, scale everywhere, and flexibility within guardrails. That gives everyone a straightforward way to answer the questions that come up every week: should this component be added, can a brand customise this pattern, does this request actually benefit the ecosystem or just one team. It's what's kept the system consistent as more brands and more teams have started pulling from it.
From Figma to production, without the manual handoff
Working closely with engineering, we integrated UDS with Supernova to bridge Figma and production code directly, syncing tokens, sharing component definitions and cutting out the manual translation between design and build. As multi-brand support matured, engineering separated brand-agnostic components from brand-specific implementations, so the technical architecture now mirrors the design one.
Built to work with AI tools, not around them
As AI-assisted design and development became part of the day to day, we made sure UDS wasn't a system AI tools had to guess their way around. Every component carries structured context through Figma's Code Connect, mapping design components directly to the real production code behind them. So when an AI coding assistant or agent needs to build an interface, it isn't inventing a button from scratch or estimating spacing. It's pulling from the same source of truth our engineers use.
We took this further by exposing design context through the Model Context Protocol (MCP), letting AI tools query live token values, component definitions and variable structures directly, rather than working from a screenshot or a page of documentation that's already gone stale. In practice, that means AI-generated interfaces stay on-brand and within the system's guardrails from the start, instead of needing to be corrected after the fact.
80+
Components mapped through Code Connect
3x
Faster AI-assisted prototyping turnaround
10x
Faster design-to-build handoff, from Figma component to shipped code
The long view
The biggest lesson from this project wasn't really about multibranded components. It was that scaling a design system is a governance and architecture problem first, and everything else follows from getting those two things right. Balancing consistency with flexibility meant every brand could keep its own personality while still pulling from the same well, and that's what makes the system worth the investment. F1 can now bring new brands online in weeks instead of months, and the foundation is built to keep paying off as the portfolio keeps growing.