One design system for mosquito repellents and baby formula, washing powders and condoms. That was the brief behind HuskyX at Reckitt, and it is the reason our Tokens Studio setup looks the way it does. This article is about the architecture that makes 150+ markets, including 11 Power Brands, coexist inside a single tokenized system without flattening what makes each of them distinct.

The principle: control at the type level, not the instance level

The core decision came before any token was written. Every component in HuskyX dynamically inherits brand-specific properties, color, typography, spacing, and border radius, and that inheritance is controlled at the component-type level rather than per instance. A brand does not restyle a specific button on a specific page. It defines what "button" means for that brand, once, and every button in every layout follows.

We call the resulting philosophy "freedom in a box." Brands get real expressive range: their own palettes, their own type, their own shape language. What they do not get is the ability to create one-off exceptions that quietly erode consistency, accessibility, or the cost model. Components ship with multiple ready-made variants from the outset, and where something is truly needed beyond that, we support small, controlled CSS overrides. The box is generous. But it is still a box.

How that translates into Tokens Studio

In Tokens Studio, this architecture becomes a layered token structure. At the bottom sit the universal foundations: the unstyled base components, the atomic hierarchy of Components, Blocks, Sections, and Page Templates that the whole system is organized around. Above that sits the brand layer, where each brand's theme is expressed as a set of token values mapped onto the same underlying structure.

The same base product card, with no styling of its own, becomes four visibly different cards for four different brands purely through token resolution. Nothing about the card's anatomy, behavior, or accessibility changes. Only the brand layer does. When we show stakeholders one generic card next to its branded versions, the system explains itself better than any documentation could.

Getting there meant tokenizing 58 components into nearly 2,500 interconnected tokens. The interconnection is the point. A brand theme is not 2,500 independent decisions. It is a much smaller set of core decisions that cascade through reference tokens into every state, size, and variant, including right-to-left layouts for markets that need them.

The tooling had to grow with us

I will be honest about the constraint we hit: when we started, neither Figma nor Token Studio could handle a system of this scale. We sequenced tokenization late partly for that reason, and in the meantime I led consultations with both companies to help shape the features we needed. Watching the wider ecosystem move in the same direction, including attending Penpot Fest and seeing the Penpot and Tokens Studio collaboration around open token standards announced to a room full of people who cared about the same problems we did, reassured me that we were building on ground that the entire industry was about to stand on.

The payoff

The pipeline parses tokens from Tokens Studio directly into production CSS, more than 90% automated. Creating a fully custom-branded instance of HuskyX went from days to hours. Each brand operates its own verified theme under light central supervision, and any custom layout built within brand guidelines is WCAG 2.2 AA compliant by default, because compliance lives in the foundations, below anything a brand theme can touch.

That is what a multi-brand setup in Tokens Studio should do. Not just swap colors, but encode the boundary between what a brand may decide and what the system must guarantee.