Multi-Brand Design System

One design system for AutoScout24’s brands in Europe and Canada, now used by 26 teams.

Principal Product Designer · AutoScout24 · 2022 to now · Team: UX team and front-end engineers

The problemWith no owner, every team solved the same problems its own way, and a newly acquired brand needed the same system. My partLed the system alongside my product work, and set up how designers and engineers contribute to it. Key decisionLet a new brand look different within the same system, with no separate library. Result26teams designing with it in Figma, inserting 30k components a week
Showcar foundations and components: typography styles, icons, form fields with an error state, toggles, checkboxes and radio buttons, colour tokens with contrast ratings, a blue colour scale, a car card, and the same tags and buttons themed for AutoScout24 and AutoTrader.ca.
Chapter 1. Context

A system nobody owned

When I took on leading Showcar, AutoScout24's design system, it had no owner. It was a loose collection of components, and adoption across the design team and engineering was patchy.

A new brand acquisition meant the company needed a system that worked across the company, and fast. I led the project alongside my product work, bringing in the wider UX team to contribute next to my own hands-on work.

Chapter 2. The problem

Design drift, and a second brand

Without an owner or a shared source of truth, every team solved the same problems in its own way. Signed-off designs would appear differently in production.

Additionally, a new requirement appeared: our design system had to support the newly acquired AutoTrader.ca in Canada, a company with a different brand. The acquisition only made sense if both businesses ran on one platform. To support that, the design system had to become far more complete, and it had to carry more than one brand.

Six confirmation modals from production, each built differently: yellow or outlined buttons in either order, full-width or compact buttons, left-aligned or centred titles, different close icons, and a dark primary button on an onboarding dialog.
The six modal styles found in production.
Chapter 3. Design

Built with the people who use it

I was leading Showcar alongside my product work, so I couldn’t build it all myself, and I didn’t want to. A system one person owns breaks the moment they’re busy. The bigger change was in how the organisation worked: Showcar had to become something designers and engineers across teams built together.

  • A way to contribute. I set up a contribution process: a dedicated Slack channel and a bi-monthly UI Guild call where designers could propose new components or changes to existing ones.
  • Components with the UX team. I worked with the UX team to design the components and write their documentation, so every addition shipped with guidance on how to use it.
  • Engineers who cared. I looked for the engineers who were passionate about the system and wanted to build it together, and made them part of the core group.
  • Tokens that match one to one. I created a token system that syncs Figma variables with the development tokens, so design and code always hold the same values. Switching brand became a change of token set rather than a redesign.
  1. ProposeA designer with a need brings it to the UI Guild or the Slack channel
  2. Quality gateThe community decides: a new component, or an update to an existing one
  3. Design and documentThe contributor designs it and writes the documentation
  4. BuildThe product development team adds it to the design system repo
Semantic and component tokens in Figma, with a column per brand mode (AS24, AS24-Future, ATCA). Each brand maps the same token to its own colour, for example surface brand is yellow for AS24 and red for ATCA. A menu shows the mode switcher: AS24, AS24-Future, ATCA, LM, GWAT, ATNL, AKNL and wireframe modes.
Brand themes as variable modes in Figma.
Showcar button documentation: a Do's panel (use primary and secondary buttons to show importance; use transparent buttons for less important actions), a Don'ts panel (avoid multiple primary CTAs in one section, don't use floating buttons inline, avoid super-wide CTAs), and guidance on when to use hug or fill width, each with live examples.
Every component ships with documentation.
Chapter 4. Impact

One system, many brands

26teams designing with it in Figma
30kcomponent inserts a week
<0.05%of inserts detached, across the most-used components

Showcar is now the default way AutoScout24 designs and builds. In Figma, 26 teams use it, inserting around 30,000 components a week. Designers almost never break away from it: across the most-used components, fewer than 1 in 2,000 inserts are detached, so what gets designed stays on the system.

In code, 38 components are fully implemented, underpinning more than 10 products, including search, the homepage, listing creation, dealer inventory and dealer account pages. Adding two new brands, AutoTrader.nl and gebrauchtwagen.at, took about two weeks of development.

Showcar components themed for AutoScout24: logo, tags and buttons, typography, form fields with an error state, a send button, toggles, checkboxes and radio buttons, notification banners, icons, surface colours with contrast ratings, a car card, chips, tabs, price labels and a check list.
Components
The AutoScout24 homepage built with Showcar: brand header and hero image, the search panel with body-type shortcuts, popular brands, and the sell-your-car module.
Homepage
Showcar components themed for AutoTrader.ca: logo, tags and buttons, typography, form fields with an error state, a send button, toggles, checkboxes and radio buttons, notification banners, icons, surface colours with contrast ratings, a car card, chips, tabs, price labels and a check list.
Components
The AutoTrader.ca homepage built with Showcar: brand header and hero image, the search panel with body-type shortcuts, popular brands, and the sell-your-car module.
Homepage
Showcar components themed for AutoTrader.nl: logo, tags and buttons, typography, form fields with an error state, a send button, toggles, checkboxes and radio buttons, notification banners, icons, surface colours with contrast ratings, a car card, chips, tabs, price labels and a check list.
Components
The AutoTrader.nl homepage built with Showcar: brand header and hero image, the search panel with body-type shortcuts, popular brands, and the sell-your-car module.
Homepage
Showcar components themed for gebrauchtwagen.at: logo, tags and buttons, typography, form fields with an error state, a send button, toggles, checkboxes and radio buttons, notification banners, icons, surface colours with contrast ratings, a car card, chips, tabs, price labels and a check list.
Components
The gebrauchtwagen.at homepage built with Showcar: brand header and hero image, the search panel with body-type shortcuts, popular brands, and the sell-your-car module.
Homepage
Chapter 5. What next

AI agents are becoming a customer for the design system

As AI changes how we work, the design system has a new kind of user: the agents the team builds with. Codex and Figma Make can produce a screen in minutes, but without the system to draw on, their output drifts.

So I’m moving Showcar’s documentation into GitHub, alongside the code, where agents can read it. With our platform team, I’m building an MCP server for the design system, so agents can look up the right components, tokens and usage rules as they work. The aim is the one Showcar has always had: what gets specified is what gets built, whether a designer or an agent is doing the building.

While the MCP server is in progress, my Figma Make kit already gives agents the rules. Both pages below were built in one shot from a single prompt, the second with the kit. They play side by side, so you can compare them as they scroll.

Without the kit: one prompt, one shot.
With my Figma Make kit: one prompt, one shot.

Want the full story?

Want to go deeper? I’m happy to walk you through the work, the decisions behind it and what I’d do differently.

sayhi@alitaylor.nl

© 2026 Ali Taylor