A modern website must be accessible to screen readers, display correctly on hundreds of screen sizes across multiple browsers, and function in four languages. When multiple teams are working on it, maintaining a consistent look and feel quickly becomes a challenge. We’ll show you how design tokens, web components, and Storybook ensure that your website looks cohesive and can be efficiently developed over time.
30.10.2026
Simon Gisler
When complex requirements involve multiple teams:
The demands placed on a modern website are high. It should be accessible and compatible with screen readers, function reliably on hundreds of different screen sizes across five browsers, and offer content in multiple languages.
Often, the work is divided among several teams. Imagine three teams developing the same website in parallel, with each building its own buttons, forms, and navigation elements. Even small differences in colors, spacing, or behavior will be noticed by your visitors.
At the same time, the workload increases because the same component is developed, tested, and maintained multiple times. A shared design system solves exactly this problem: Your website looks like it was built from a single mold, and efficiency doesn’t suffer as a result.
Your Benefits at a Glance
Test Early
Components can be tested in isolation before they are integrated into the website.
Multiple Brands and Themes
A single set of components covers various brands and visual styles.
A front end for all teams
All teams use the same building blocks and focus on their core competencies.
Custom-made
The UI is tailored exactly to your needs—no off-the-shelf, mass-produced solutions.
Design tokens and web components for maximum flexibility
Design tokens are the key design variables for your website. Colors, fonts, and spacing are defined in one place, and any change automatically affects all components. To create a new theme, simply define a new set of tokens; the components remain unchanged.
We implement the components themselves as Web Components. Thanks to the Stencil Library, they can be used independently of any framework or technology and can be seamlessly integrated into existing web applications or Integrate CMS. Whether it’s Magnolia, another platform, or a standalone application: The components work the same everywhere.
This ensures that all teams use the same components instead of developing them multiple times. Each team focuses on its core competencies, while the UI is developed centrally.
„We make changes to the visual design once—they take effect immediately across the entire website and for all teams.“
Storybook for dynamic documentation and rapid testing
Storybook is an interactive environment where all components—along with their variants and states—are visible. There, you can test components and their behavior without needing any Magnolia expertise and without having to enter content beforehand.
This allows you to provide quick feedback on the design implementation long before a component goes live. Content and design are clearly separated: The design is approved in Storybook, and then we integrate it into your CMS.
A single story displays a component across all themes, and different screen sizes can also be simulated directly. At the same time, Storybook serves as documentation that helps other teams understand the components and integrate them into their own projects.
Your benefit: You identify discrepancies early on, reduce coordination efforts, and have documentation that is always up to date.
Conclusion
Design tokens, web components, and Storybook provide a common foundation for your website. Your teams work with the same building blocks, changes are made centrally, and the result looks seamless. This approach quickly pays off, especially when dealing with multiple brands, languages, and teams.
Would you like to ensure a consistent design for your website across multiple teams and brands?
Antonio Tuor Partner, Senior Software Entwickler