Bonnier multi-brand design system

Bonnier runs dozens of brands on a shared CMS: magazines, special-interest titles and news sites, across several countries. Each had grown its own design system, with its own components, naming and way of theming. The platform was shared; the design layer was not.

Every new feature was designed and built several times over, and the brands drifted further apart with each release. A button, a teaser or a byline could look and behave differently from one site to the next — invisible to readers, expensive for the organisation every sprint.

And a new problem was arriving fast: AI coding agents. Without an accurate, machine-readable design system they rebuild components that already exist, or invent ones that do not.

The brief: one design framework that every brand can run on — and that people and AI agents can build from — without the brands losing what makes them recognisable.

I lead the design side of the work, from architecture to production:

• Token architecture and governance — how primitives, brand overrides and semantic tokens relate, and which decisions belong to a brand versus the system
• The component library — atomic components built entirely on variables, from buttons and labels to teasers, bylines, fact boxes and article toolbars
• Design-to-code wiring — the variables-to-code sync and the Code Connect mappings, built alongside the developers so design decisions land correctly in production
• Brand onboarding — including the Claude skill that brings each live brand into the system and up to an accessible baseline
• AI taskforce — exploring how AI fits our design flow, hands-on with Figma Agent, Gemini, ChatGPT, Claude Code and our in-house AI platforms
• Sharing it — keeping colleagues across countries up to date on new Figma features, tools and workflows as they emerge

Day to day I work with developers, project managers, editors-in-chief and fellow UX designers. A design system only scales if the people around it think in it, so a large part of the role is teaching: I have trained other UX designers in the mindset — tokens before values, systems before screens — and given several internal presentations across Bonnier News on what a shared, scalable design system makes possible.

Start with atomic and semantic. In the first phase (Q1–Q3 2025) I rebuilt and standardised the UI components across 15+ Bonnier Publications brands with an atomic, semantic approach, and worked with the developers to make the same components shareable inside the Nuxt 3 CMS framework. That proved the model before it scaled to both organisations.

A brand is a set of values, not a fork. Every brand extends one base collection instead of copying the library. It overrides only what actually differs — colour scales, fonts, logo, button and label treatments, highlight colours, radii — and inherits everything else. Sub-brands that share a white-label look, like Bolig Magasinet, Magasinet Liv and Costume under WOMAN, extend that brand in turn and differ only by their logo.

Three layers, one direction. Primitives hold raw values: an 11-step colour scale per brand colour and every font family. Semantic tokens describe use — surface, text, highlight, button. Components only ever read semantic tokens, so a component never knows which brand it is rendering. Type works the same way: five roles (display, body, caption, button, menu) per brand, and fluid sizing from 375 to 1440 px comes built in.

Themes are just more modes. Light and dark are only the start. Because a brand is a set of variable modes, and we have practically unlimited modes available, any brand can get its own specific themes — for a section, a campaign or a special edition — without touching a single component.

Variables to code, through an API — not by hand. The Figma variables are the source of truth. Each brand’s variables sync to the codebase through a design token API, mapped per site, so a colour or font changed in Figma reaches production without anyone copying a hex value across.

Code Connect, so components are found, not rebuilt. Every component in the library is linked to its implementation with Code Connect. Developers see the real component and its props in Figma — and AI agents like Claude Code get an accurate map of what already exists, so they reuse components instead of hallucinating new ones.

A Claude skill that onboards brands: create-brand. Bringing a brand in used to be days of manual setup. I built a Claude skill that pulls an existing online brand into the system: it reads the brand’s real values from its live site, generates the colour scales, creates the primitives and wires the brand’s buttons, labels and fonts. It also checks the result against WCAG — where a brand colour fails contrast, like a bright yellow primary with white text, it inverts to dark text instead of shipping a failing component — so legacy brands land on a consistent, compliant baseline as they migrate.

Beyond product UI. The same variables and components carry across the whole Figma ecosystem — Design, Slides, Make and Buzz — so a brand stays consistent from product screens to presentations, prototypes and marketing assets. For Make, the tokens drive a React component package that works as a Make kit, so any page can be prototyped for any brand and theme with the real components.

One design framework now serves 30+ brands across Bonnier Publications and Bonnier News — and maintaining one system instead of 15+ separate ones is where the time goes back: a fix or a new component is designed, built and tested once, then lands in every brand, in every theme and at every size.

Adding a brand takes one to two working days — at most. Running the create-brand skill does the setup; the remaining time only goes on genuine judgement calls, like which of a brand’s colours should act as primary in specific scenarios. Every brand that comes in this way lands on an accessible baseline.

New content possibilities for the newsrooms. When every brand runs on the same components, a feature built for one brand is available to all of them. Editors get the same functionality across titles, which opens up new ways to package and target content for their readers — instead of waiting for their brand’s own version to be built.

And because tokens sync to code and components are linked through Code Connect, the design system is also the context AI agents work from, which keeps generated code on the system instead of beside it.