Stellar — a token-driven, multibrand design system

Summary

Problem

A large, multi-year BioNTech digital programme — corporate website plus the Comirnaty sub-brand — had grown messy: many designers had passed through, with no maintenance approach and no traceable design decisions. A key internal sales tool (the OBA app) was failing and behind schedule.

What I did

Rescued the failing app by rebuilding it on components and a first token setup, then scaled that proven approach into Stellar — a token-driven, multibrand design system spanning every digital touchpoint. Pioneered Token Studio in September 2022, roughly nine months before Figma shipped native variables.

Outcome

A mature, versioned design system (DS 1.0 → 4.0) reaching 230 fully-tokenized core styles, 139 core plus 400+ local components, and a 650+ icon library — serving a nine-surface digital ecosystem, with a token architecture and semantic naming convention built to scale across brands, modes, and touchpoints.

Context

An enterprise-scale, multi-year BioNTech programme delivered through Merkle — a unified digital ecosystem spanning nine product surfaces (corporate website, webshop, HCP portal, CIAM, commercial, praxis, PPP, mailings, chatbot, survey) and serving an organisation of 200+ consultants and 20+ UX designers. The work ran as a multi-year arc: from a legacy situation in 2021, through building a core component toolset and migrating ten legacy sites, to a full ecosystem and the versioned Stellar design system (DS 1.0 → 4.0). I joined ~14 months in, staffed full-time for 18 months. I initiated the token/variable approach and led the Stellar design system — setup, maintenance, and documentation — with Johannes van Mierlo as my tandem partner throughout. I didn't hold a senior title at the time; I earned the autonomy to lead these decisions by working above my level and gaining the team's trust.

The challenge

The project was a jungle to navigate. Many designers had worked on it before me, there was no clear maintenance approach, and design decisions were hard to trace. Ramping up fast on something this large and this messy was the first hurdle. The most acute symptom was the OBA app — an internal sales-enablement tool (letting reps interact with GPs, schedule calls and meetings, and track performance) — which had been built as flat UI mockups with no auto layout and no components. Every change took ages, and the project had fallen behind schedule.

Key decisions

Rescued the failing app, and initiated the token approach there.

I picked up the OBA app and redesigned it into a mature UI — rebuilt on auto layout and components, with the first token/variable structure to make iteration fast instead of painful. This turned a behind-schedule project around, and it's where the token approach that later defined Stellar began.

Led the scale-up into Stellar — a token-driven, multibrand system.

I led Stellar — its setup, maintenance, and documentation — with Johannes van Mierlo as my tandem partner throughout. A versioned design system (DS 1.0 → 4.0), it unified multiple brands and products under one token-driven source of truth. By DS4.0 the token architecture was structured as Base → Brand (BioNTech / Comirnaty) → Mode (light / dark) → Touchpoint, with a semantic naming convention (role · type · prominence · interaction) — 4 token groups across 17 token sets. We adopted Token Studio in September 2022 — roughly nine months before Figma launched native variables at Config 2023 — to solve this multibrand, multi-mode theming before native tooling for it existed. The system reached 230 fully-tokenized core styles (zero local styles), 139 core and 400+ local components, serving nine product surfaces.

Initiated the accessibility push and designed the icon library.

Two contributions that were specifically mine: I initiated the move to add proper focus states and make the sites more accessible (a WCAG-oriented improvement that became a formal milestone), and I designed the system's icon library — 650+ icons across 5 sizes and 3 styles, totalling 8,600+ variants.

Embedded it through documentation and developer handoff.

I helped redefine the documentation and dev-handover approach, including a multi-day workshop in Zurich, so the system was maintainable and the design-to-engineering handoff actually worked. The client gave positive feedback on the result.

Outcome & reflection

The system matured across versions (DS 1.0 → 4.0) into a thoroughly tokenized, well-documented foundation — 230 core styles with zero local styles, 139 core and 400+ local components, a 650+ icon library — serving a nine-surface ecosystem for an organisation of 200+ consultants. The token architecture and semantic naming convention were built to scale across brands, modes, and touchpoints, with a documentation and dev-handoff approach the client valued.

Reflection. What I'm proudest of is initiating the token approach and leading a mature, scalable, well-documented design system at that scale and complexity — before I held the title to match. I earned the autonomy by working above my level and gaining the team's trust, and it set the pattern for how I've approached design systems ever since, through to the architecture lead role at Victorinox.