A multi-branded design system for Mediahuis

Mediahuis manages multiple brands, each with its own unique visual identity, which made achieving a uniform design approach particularly challenging. There was a clear need for a system that could respect the distinct look and feel of each brand while ensuring a consistent and cohesive user experience.

There was an urgent need to enhance the efficiency of design and development processes, allowing teams to work faster and more effectively without compromising quality.

A UI and CSS audit uncovered significant inconsistencies. We found 247 unique colors (including 60 different shades of gray), 75 unique font sizes, and more than 20 arbitrary breakpoints, highlighting a complete lack of uniformity. Consistency was virtually nonexistent.

A flexible system where tokens are modularly structured and semantically linked to specific UI contexts, such as components and patterns, ensuring consistency and scalability.

Support for multiple themes, including light, dark, and brand-specific variations, with tokens that automatically adapt based on context, brand identity, and usage scenarios.

A centrally managed system that synchronizes effortlessly with design and development tools, including version control and automatic updates, ensuring optimal collaboration and efficiency.

Thanks to Chameleon, design processes have been significantly accelerated, allowing designers to focus more on product evolution. Developers also benefit from an improved workflow, made possible by a standardized codebase and modular structure.

All brand values are fully aligned across all platforms, ensuring that users experience the same brand identity regardless of where they interact with it.

With its flexible and scalable structure, Chameleon allows for the seamless integration of new brands and innovations, making it ready for future growth and change.