Bayer Design System: Global Consistency, Local Flexibility
Bayer
The challenge: a global digital ecosystem
Bayer needed to transform its digital ecosystem to address a complex reality: over 80 markets, each with its own regulations, languages, and cultural sensitivities.
The goal was to create a global platform capable of generating corporate and product websites, adaptable to each local context, maximizing operational efficiency and team autonomy.
The challenge was twofold: to build a solid infrastructure while ensuring enough flexibility to allow multiple brand expressions under a single system.
Solution: a system to evolve, integrate, and grow
At Runroom, we took on the responsibility of defining and implementing the visual design and user experience of the entire platform, as well as the architecture, governance, and operations of the Design System that makes it possible.
Our team, consisting of a Design Team Lead and four Product Designers specialized in Design Systems, works continuously with Bayer’s product and technology teams to build a scalable, agnostic, and dynamic design infrastructure.
The Design System is built in Figma and implemented using React and Next.js, connected to a headless Drupal backend.
A system designed to evolve, integrate, and sustain the growth of the digital product across all markets.
How we work: Strategic Design and Operational Execution
The team combines strategic design and operational execution through different workflows:
- Squad tickets: collaboration with frontend and backend in two- or three-week sprints.
- Design maintenance: continuous updating and documentation of the system.
- Design support: support for agencies, accessibility reviews, and documentation.
- Onboardings: training for local teams and agencies.
- Theme requests: customization of visual themes by brand or product line.
- Continuous research: observing real system usage to detect friction points and opportunities.
This model allows the product to evolve continuously, supporting different markets through documentation, direct support, and the creation of themes that expand the system’s flexibility.
Since the launch, the platform has already been deployed in over 40 markets, progressing steadily to validate, learn, and adapt to local realities before each new implementation.
The big challenge of the project was to evolve from a very prescriptive mindset to a more neutral and scalable approach. Designing for dozens of markets, brands, and countries with completely different uses and contexts implies offering a consistent yet profoundly adaptable framework. That shift was fundamental to the project.
The balance between robustness and flexibility
One of the biggest challenges of the project has been finding the right balance between robustness and adaptability.
A system that is too rigid limits local expression, while one that is too flexible may compromise product consistency, leading to ad hoc developments, higher costs, and reduced efficiency.
Through continuous collaboration with Bayer's technical team and with Element, we are expanding the system's customization without compromising its stability or its ability to evolve.
A modular city
Designing this system has been like planning a modular city:
- The foundations (principles, tokens, and base components) ensure stability.
- Urban regulations (governance, documentation, and processes) ensure consistency.
- Each neighborhood (market or brand) can adapt to its context without breaking the common structure.
In our case, this modularity is materialized through an agnostic and stable core, upon which themes are applied, allowing different brand identities to be expressed without compromising the integrity of the product.
A design system brings order to chaos.
It’s not just a repository of components; it’s a shared language that connects people, tools, and processes.
Like any living organism, it evolves with the organization, learns from its usage, and is redefined with each iteration.
At Bayer, this design system not only accelerates the creation of new websites, but also reduces the demands from each local market, speeding up the design phases of new sites by over 50%, driving local autonomy, and consolidating a shared digital culture.
Learnings about Design Systems
- DesignOps is key to sustaining and scaling a system of this magnitude.
- Constant feedback from markets and local agencies drives its evolution.
- Flexibility comes at a cost, and managing it strategically prevents product fragmentation.
- Adoption depends on clarity: a good system is one that is easy to understand, use, and maintain.
- Success in Design Systems is not a deliverable, but a living system that remains useful, consistent, and human.
The true impact of this project doesn’t lie only in building a robust Design System, but in creating a shared language capable of connecting a global brand with the real needs of each market. We’ve demonstrated that coherence and flexibility are not opposing forces, but two pillars that, when orchestrated well, allow a digital product to scale in a sustainable, human-centered, and purposeful way.