Skip to content
Minimal white kitchen with built-in appliances

BSH Home Appliances

Multi-brand · Consumer & IoT

One token system behind BSH's 14-brand portfolio.

Bosch, Siemens and Gaggenau among the flagships, all shipping from one shared token layer instead of separate UI stacks.

Starting point

A portfolio on separate UI stacks that kept drifting apart.

Outcome

One shared token layer feeding Figma and production code.

Tech stack
  • W3C design tokens
  • Figma variables + libraries
  • Style Dictionary
  • Web Components
  • Code Connect
Credits
  • Florian Gampert — Design systems
  • Brand product teams — Adoption

Separate UI stacks, no shared language

Challenge

Each brand carried its own UI stack, and consistency was bought back in standing meetings, design reviews and reconciliation work, a coordination tax paid every release.

Modern kitchen with built-in connected appliances
One portfolio, many brand surfaces drifting apart (placeholder image).
Team gathered around a table coordinating work
Consistency held together by meetings, not by the code (placeholder image).

A shared layer with brands underneath

Approach

One token layer all brands read from, each brand's look sitting underneath, so brand identity became a token decision, not a separate copy of the code.

Grid of colour and UI tokens on a designer's screen
Brand identity expressed as a token decision (placeholder image).
Interface design components laid out on a display
Shared component foundations under each brand's theming (placeholder image).
Engineer working with code on multiple screens
One token layer feeding Figma and production code (placeholder image).
  • A Figma-to-code pipeline keeping variables and production tokens in sync
  • Component foundations used across all the brand product teams
  • Rules that let the central team and brand teams ship at the same time

Design-code parity from ~10% to ~99%

Outcome

What teams designed and what shipped finally matched. It's the same architecture we install today.

Product team collaborating at a shared workspace
Brand teams shipping from one shared system (placeholder image).
Designer reviewing a layout on a large monitor
Moving a screen between brands became a setting (placeholder image).
Cross-functional team working together in an office
Central and brand teams shipping in parallel (placeholder image).
~10% → ~99% parity
14 brands · 30 markets · 100M+ users
−30% cycle time
−95% handoff errors
Illustrative placeholder
We used to keep the whole portfolio consistent through sheer coordination, and it didn't scale. Once the token architecture was in place, moving a screen from one brand to another became a setting, not a redesign.