Mozaic offers an adaptive and scalable color system. The color palette has been divided into four categories: Primary colors, Secondary colors,Greys and Status colors.
You will discover that colors are duplicated in some cases. This may seem strange to you, but we need to think about other brands and cultures to allow them to customize the colors.
For example, the success color may not be green in another country, and the primary brand color may not be usable for success with another brand.
It is why you should take special care to use the right color variable for the right usage.
Primary colors are the brand colors. They are the key components for our users to live and adopt LEROY MERLIN's experience. These are the two primary color palettes we use in this design system.
Click on the variables to copy them.
The primary green is the essence of the brand LEROY MERLIN.
The primary blue is the essence of the sub-brand LEROY MERLIN Campus.
Campus is a brand of leroymerlin.fr dedicated to the inhabitant learning, it provides many tutorials and DIY resources online and in-store.
We used the same principles to design our greyscale but greys are based on 11 values swatches. Greys have specific use cases for UI elements:
- Texts & Titles
Status colors convey various levels of importance for feedback information, like errors or warnings. They can also highlight important pieces of information or some tips. Status colors can also inform the user that an operation has failed or succeeded.
This color is used to highlight important pieces of information the user should be aware of.
Should only be used if the information does not represent a threat.
Informs the user that an operation was successful.
Inform the user about risks or threats. It teels the user to be careful about something.
This color informs the user of an error or that some operation went wrong.
Secondary colors are essential to your design. We need them on many occasions to accentuate our primary colors and to deliver a specific message such as discounts and special offers. These guidelines may vary depending on the country you live in.
Secondary Blue is mostly used for focus.
Use the info swatch to highlight anything related to informational feedback for your users.
In LEROY MERLIN case, this color is exactly the case as primary-01 but other brands or BU (business unit) should be able to change that.
Secondary Orange is used for user's feedback like the ratings.
Secondary Red is for discounts.
Secondary Yellow is for illustrations and special offers.
Secondary Purple is used for illustration purposes.
In this system, every color has a
dark and a
light variant that can be used to adapt to different usages from text to illustrations.
To have this flexibility, we designed color swatches based on 9 values for primary and secondary colors. It means that you can use 9 values of the same color to fit your design needs.
The design needs to be accessible to everyone and these swatches when combined properly are compliant with color contrast rules for accessibility