Design system development for multiple brands

One system, many brands

badenova's design system now carries 3 energy brands with 124 components. Systems like this do not come from a mood board; they come from close collaboration between design, engineering and the client.

We build component libraries with Storybook, design tokens for theming, and the documentation teams need to carry the system forward on their own.

The result: brand relaunches no longer start from zero, and consistency is no longer a matter of discipline but of architecture.

The typical situation

At badenova, every subsidiary had its own web presence, and every brand relaunch started almost from zero technically. At Alps Alpine, internal tools ran for years and needed to stay consistent, maintainable and extensible along the way.

How we approach it

• Design tokens and theming: Each brand gets its own theme without duplicating components.
• Component libraries in React, documented in Storybook and visually tested, with Chromatic at badenova and Storyshots at Alps Alpine.
• Built for handover: Internal teams carried the Alps Alpine library forward after the engagement ended.
• Clarity over effect: At quirion we built UI in a domain where trust matters more than visual effects.

The component library for Alps Alpine was built in 12 months; at quirion we were part of the frontend team for 2 years.

How it works

We build design systems in three phases. Each phase ends with a result you use to decide whether and how to continue.

1. Consulting and architecture, from one week: We capture which brands, products and teams the system has to carry and what theming and governance look like. The result is a decision paper with architecture, options and an effort estimate.
2. Prototyping and pre-study, typically 2–6 weeks: We test tokens and the component structure in a clickable prototype and assess what the build will take. The result is a clickable prototype, a risk assessment and a solid implementation plan.
3. Engineering and operations, months to years: We build the component library, test it visually and document it so your teams can carry the system forward themselves. The result is software in production, documented and ready to hand over to your team.

The component library for Alps Alpine was built in 12 months. With badenova we have been working since 2022 on a system that now has 124 components. You can find an overview of the phases under Services.

Technologies

These are the technologies we use in design system projects:

• Components: React and TypeScript, with Next.js and Emotion at badenova
• Theming: design tokens, one theme per brand
• Documentation: Storybook
• Visual regression: Chromatic at badenova, Storyshots at Alps Alpine
• Testing and CI: Jest, Playwright and GitHub Actions
• Design: Figma
• Content: Storyblok as headless CMS

For Alps Alpine we added Apollo and GraphQL to connect the existing backends.

Frequently asked questions