About
Welcome to the Mediahuis Design System! Chameleon is used as a tool for Mediahuis digital products, creating consistency by linking UI elements to documentation (this site) and code.
In short
Mediahuis, as the name suggests, is a collection of a multitude of (media) brands. From a design system's perspective, this poses an exciting challenge. On the one hand, brands need to have the ability to express themselves through their dedicated branding. On the other hand, to be able to communicate effectively, all brands need to have the same building blocks at their disposal both on the design-side as on the development-side. These blocks are drop-in elements that need little or no config to adapt themselves to a particular use-case.
We decided to structure our system inspired by the Atomic Design's methodology. A modular design concept that has distinct stages (in our case: foundations, components, patterns, …) and is ordered in a hierarchical way to create interface design systems. By creating this collection of parts, designers can re-use them across projects. This re-use ensures consistency and allows our designers to focus on the more intricate and subtle changes that attribute to top-notch user experiences.
For developers, we provide React components that are tweakable by the props they implement. Using these components, this ensures that all created products have a streamlined look and feel. Another advantage is that this frees a developer so that they can focus on more technical advancements as opposed to having to worry about moving a button 2 pixels. Lastly, this ensures homogenous code-bases across different product teams, contributing to higher frontend-wide knowledge.
Our guiding principles
- Chameleon is open. While the design system is primarily maintained by a dedicated team, it is guided by the principles of the open source movement. Everyone is encouraged to contribute.
- Chameleon is inclusive. It's designed and built to be accessible to all, regardless of ability or situation.
- Chameleon is modular and flexible. The system's modularity ensures maximum flexibility in execution. Its components are designed to work seamlessly with each other, in whichever combination suits the needs of the user.
- Chameleon puts the user first. Using rigorous research into users' needs and desires, Chameleon is laser-focused on real people.
- Chameleon builds consistency. Every element and component of Chameleon was designed from the ground up to work elegantly together to ensure consistent, cohesive user experiences.