Skip to content

Fourteen brands. One token system.

Bosch, Siemens and Gaggenau among them, a whole appliance portfolio shipping from one shared token layer instead of fourteen separate UI stacks.

Design SystemandDesign OpsforBSH Home Appliances

Intro

Fourteen appliance brands shipping into thirty markets, each on its own UI stack, drifting further apart every release.

The engagement spanned design system and design ops, working across the central team and the brand teams, from token architecture to the operating model that keeps it moving.

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

Challenge

Every brand built its own UI. Consistency was bought back by hand: meetings, reviews, reconciliation. A coordination tax, paid on every release.

The tax compounded. Each release meant another round of cross-brand alignment; each new market, another set of surfaces to keep in line. The portfolio was drifting apart faster than coordination could pull it back.

Grid of colour and UI tokens on a designer's screen
Brand identity as a token decision (placeholder image).

Token Architecture

One token layer, read by every brand. Each brand's look lives in the tokens, so brand identity became a token decision, not another copy of the code.

Underneath the tokens sit shared component foundations. Each brand ships its own expression on common behaviour. The look changes per brand; the components underneath do not.

  • One pipeline keeping Figma variables and production tokens in sync
  • Component foundations shared by every brand team
  • Governance that lets central and brand teams ship in parallel
Interface design components laid out on a display
Shared foundations under each brand (placeholder image).
Engineer working with code on multiple screens
One layer feeding Figma and code (placeholder image).

Design Ops

Architecture alone doesn't hold a portfolio together, the operating model does. Governance drew clear lines between what the central team owns and what brand teams decide, so both could ship in parallel instead of queueing behind each other.

A contribution flow let brand teams propose changes back into the shared layer, and adoption moved brand by brand, each team onboarding when its roadmap allowed, none forced into a big-bang cutover.

Product team collaborating at a shared workspace
Brand teams shipping from one system (placeholder image).
Designer reviewing a layout on a large monitor
A brand switch became a setting (placeholder image).

Outcome

What teams design and what ships now match, portfolio-wide. It's the same architecture we install today. This case is the blueprint.

Recommendations

His visionary approach and attention to detail were instrumental in laying the foundation for a new design language, supporting a diverse range of 14 different brands under the BSH umbrella.
Benedikt SperlLead Frontend Engineer · BSH
Moving a screen between our brands used to mean a redesign. Now it's a token switch, the system does the work our coordination meetings used to.
Illustrative placeholderBrand Design Lead
My team ships brand-correct UI without re-deriving it every sprint. Design and code finally speak the same language.
Illustrative placeholderHead of Frontend

Results

Results

~99%
design-code parity, up from ~10%
−30%
design-to-production cycle time
−95%
handoff errors between design and code
14 brands
one token layer across 30 markets and 100M+ users

Deets

Deets

Industry
Multi-brand · Consumer & IoT
Scope
  • Design system
  • Design ops
  • Token architecture
  • Governance
Stack
  • W3C design tokens
  • Figma variables + libraries
  • Style Dictionary
  • Web Components
  • Component mapping
Credits
  • Florian Gampert, Design systems
  • Brand product teams, Adoption

This shape of work, installed in your product in 90 days.

Apply for your Strategy Call
Florian & Sascha · on every Install