Intro

Lupine was broken on both sides, Figma and front end, and its token architecture couldn't take another brand. The easy path was to keep patching it. I stopped. Patching a broken contract only makes the next brand more expensive.

I rebuilt it as Boiler Room from the token structure, with WOLF as the reference brand for design and engineering. Sister brands followed. It now grows with every company Ariston acquires. Leadership then asked to roll it out group-wide, because the contract could take the next brand, not because the library looked finished.

Role

Lead Product Designer

Scope

Multi-brand platform

Scale

4 live, 11 planned

Problem: Symptoms

I saw the same three problems in almost every meeting: the system was a dead end, teams couldn’t stop shipping while it was fixed, and teams had lost faith in it.

1

Components had drifted across products for years. No single source of truth. No clear owner. Just an accumulation of patches nobody planned for.

2

9 products. 9 roadmaps. All depending on the same system. And none of them able to stop and wait for it to be fixed.

3

When components fail often enough, teams stop reporting bugs and start building around them. That's when you know the trust is gone.

Root cause

Craft and token architecture were misaligned, but the deeper gap was what the system was for. A design system is a contract: first with designers, now with agents too. Lupine had no documentation and no working model, so nobody could read the contract, let alone keep it.

Designers reached for the value they liked, not the role it played. Switch the brand or the theme below, and only the role holds up.

Two cards, one appearance. A copied primitive stays the same in light and dark. A named role resolves a different paint for each.

Light appearance. Both buttons hold.

Direct Value

Brand and theme cannot rewrite it.

neutral-600
Light
Dark

Named Role

Brand and theme resolve the value.

primary-background-default
Light
Dark

Last chance

A new product line was coming. That was the only window. Product owners were skeptical. The last system had lasted a year and a half. Developers were skeptical too. They had already found workarounds. The work was not design-driven. They fixed things on their own. There was no proof this rebuild would hold.

I proposed a roadmap and did the groundwork first, so product owners, designers, managers, and engineers could see how the new system would work before they committed. Lupine went into managed descent. Migration windows sat on their release plans, not mine.

Products migrate one at a time from Lupine to Boiler Room while others stay on their release plan.

  • Connectivity

    live

  • Project Hub

    2.4

  • Project Center

    Q3

  • System Planner

    critical

  • System Management

    critical

Architecture

I placed one bet before the rebuild: a system survives its author or it doesn’t survive at all.

The faster path looked like a new token architecture on top of the old design. It would have failed. Teams were on MUI, overwriting everything, and nobody had documented the tokens. It was safer and cheaper to rebuild the token architecture against the existing design, then change the look through token values after rebranding.

Tokens as common Language

Tokens carry meaning, not values. Name the role, and dark mode, brand, and density come for free.

Map the Org, not the components

The system’s structure mirrored how teams actually worked.

From Library to Literacy

The goal wasn’t more components. It was teams who could read the system without me in the room.

Built with Engineering, not for it

Designed in the same language engineering shipped in, so handoff stopped being translation.

The contract

Anatomy

The contract has to work without me in the room. Every choice a designer can make lives inside the component, and the same choices travel to code untouched. Fewer variants was the cost. Flexibility in the contract was the return.

Properties carry the decisions

The designer chooses inside it. Every option is one the system already approved, so nothing goes off-system.

Variant
Size
States
Selected
Label
Start icon
End icon

The same property, now a call.

Developers read it as typed props, agents as a schema. The choices are identical, the surface is not.

1

Button({

2

variant: "primary",

3

size: "large",

4

state: "default",

5

selected: false,

6

label: "Button",

7

startIcon: "chevron",

8

endIcon: "chevron",

9

})

What rendersButton
  1. Figma and code share one vocabulary. When both sides use the same names, nothing gets translated.
  2. Components were rebuilt so our MCP connector can hand them to AI tools as a typed schema.

Tokens

The component never names a color. It names a role. Brand and theme resolve the value underneath, so one contract dresses every brand. Same brands and appearance control as Root cause. There, only the named role held. Here every component uses a role.

WOLF. First segment selected. Checkbox unchecked. Radio Field unselected.

Chip

Contribution

A contribution model and real documentation let any team extend it correctly on their own. What was one person’s knowledge became a shared capability.

Contribution

+6 this month

  • Toggle Button· updatedConnectivitymerged
  • Combobox· newSystem Managementmerged
  • Data Table· updatedProject Hubmerged
  1. An open garden: any team can plant something. The design system team holds the keys to the gate.
  2. Every contribution passes the same review before it merges.

Handoff

The handoff is the behavior, not the values. The Figma variable and the shipped value are the same value, so nothing gets translated and nothing drifts. Every interaction is already decided. Use the component and watch what behavior engineering still has to implement.

Queued

Tabs are waiting on Connectivity.

Behavior

dismiss timing by lengthpause on hoverstack orderqueue ceilingcollapse beyond threefocus returnaria-live politenessreduced motion

Agent

The contract is callable. The running component already settled the behavior. Making it callable only closes the remaining choices, so an agent picks from the values the contract allows and cannot render off-system.

1

Toast({

2

variant: "success"

3

title: "Merged into Connectivity"

4

body: "Accordion is live for every team."

5

})

Three props. Everything else stays in the component.

Results

Outcome

Boiler Room replaced Lupine as the group-wide design system. Migration is still in flight: 5 of 9 products live, the rest on their roadmaps.

100%

Theming

Token-as-language made dark mode and brand themes default behavior, not per-product fixes.

5 of 9

Migration

Products live on Boiler Room. The rest migrate on their roadmaps.

4 of 11

Brands

On the contract today. The rest of the group's brands are lined up to follow, and each new acquisition joins the same pipeline.

2, down from 3–4

Front-end per team

After it landed, engineers were relocated. Using the system got easier and faster.