Design System

We built the multi-tenant design system that three energy brands run on today.

124

Components in the library, continuously maintained and visually tested

Independent brands on one platform: sparstrom, badenIT and Stadtwerke Weil am Rhein

Since 2022

Ongoing partnership, one of alm's longest engagements

Challenge

Every relaunch from zero

The subsidiaries' and brands' websites had grown over time, and every brand relaunch started almost from scratch technically. That scales neither in maintenance nor in brand consistency.

One system for all brands

A central component library and design system that runs the group's own presence and every subsidiary brand, each with its own themes, typography and brand identity.

One platform, many brands

Component library 124 components · central design tokens

sparstrom own theme
badenIT own theme
Stadtwerke Weil am Rhein own theme

Each brand is themed through design tokens, without duplicating components. The brand teams maintain their own content in Storyblok.

Solution

Platform

Themable design system

Central design tokens, recolored per brand without duplicating components.

Component library

React and Next.js, documented in Storybook, now 124 components strong.

Multi-tenant architecture

One frontend that currently runs sparstrom, badenIT and Stadtwerke Weil am Rhein, among others.

Content and quality

Storyblok as headless CMS

The brand teams maintain content themselves, decoupled from the technical platform.

Automated test pipelines

Playwright and Chromatic guard functionality and visual regression on every change.

Result

Three brands, one platform.

sparstrom, badenIT and Stadtwerke Weil am Rhein run on a shared technical foundation with 124 components. sparstrom started on its own platform and was later moved entirely into the badenova system without any noticeable impact on live operations. The platform keeps evolving, in Storyblok and in the component library.

“For me, open communication and transparency about effort are the basis of a trusting partnership. That is the case with alm. Our first ideas were not only validated but refined further by the team's technical know-how and industry knowledge.”