Mozaic offers an adaptive and scalable colour system. The colour palette has been divided into four categories: Primary colours, Secondary colours, Greys and Status colours.
You will discover that colours 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 colours.
For example, the success colour may not be green in another country, and the primary brand colour may not be usable for success with another brand.
It is why you should take special care to use the right colour variable for the right usage.
Primary colours are the brand colours. They are the key components for our users to live and adopt LEROY MERLIN's experience. These are the two primary colour 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.
Primary 02 (no longer maintened)
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 colours convey various levels of importance for feedback information, like errors or warnings. They can also highlight important pieces of information or some tips. Status colours can also inform the user that an operation has failed or succeeded.
This colour 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 colour informs the user of an error or that some operation went wrong.
Secondary colours are essential to your design. We need them on many occasions to accentuate our primary colours 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 colour 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 colour 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 colour swatches based on 9 values for primary and secondary colours. It means that you can use 9 values of the same colour to fit your design needs.
The design needs to be accessible to everyone and these swatches when combined properly are compliant with colour contrast rules for accessibility