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.

Be aware

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

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.

Primary 01

The primary green is the essence of the brand LEROY MERLIN.

val

#eaf3e2

scss

$color-primary-01-100

ios

ColorPrimary01100

andr

color_primary_01_100

es6

ColorPrimary01100

val

#cbe3b5

scss

$color-primary-01-200

ios

ColorPrimary01200

andr

color_primary_01_200

es6

ColorPrimary01200

val

#add585

scss

$color-primary-01-300

ios

ColorPrimary01300

andr

color_primary_01_300

es6

ColorPrimary01300

val

#91c854

scss

$color-primary-01-400

ios

ColorPrimary01400

andr

color_primary_01_400

es6

ColorPrimary01400

val

#78be20

scss

$color-primary-01-500

ios

ColorPrimary01500

andr

color_primary_01_500

es6

ColorPrimary01500

val

#41a017

scss

$color-primary-01-600

ios

ColorPrimary01600

andr

color_primary_01_600

es6

ColorPrimary01600

val

#158110

scss

$color-primary-01-700

ios

ColorPrimary01700

andr

color_primary_01_700

es6

ColorPrimary01700

val

#0a601b

scss

$color-primary-01-800

ios

ColorPrimary01800

andr

color_primary_01_800

es6

ColorPrimary01800

val

#053e1f

scss

$color-primary-01-900

ios

ColorPrimary01900

andr

color_primary_01_900

es6

ColorPrimary01900

Primary 02

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.

val

#dbedea

scss

$color-primary-02-100

ios

ColorPrimary02100

andr

color_primary_02_100

es6

ColorPrimary02100

val

#a5d1cb

scss

$color-primary-02-200

ios

ColorPrimary02200

andr

color_primary_02_200

es6

ColorPrimary02200

val

#6eb4ad

scss

$color-primary-02-300

ios

ColorPrimary02300

andr

color_primary_02_300

es6

ColorPrimary02300

val

#379590

scss

$color-primary-02-400

ios

ColorPrimary02400

andr

color_primary_02_400

es6

ColorPrimary02400

val

#007574

scss

$color-primary-02-500

ios

ColorPrimary02500

andr

color_primary_02_500

es6

ColorPrimary02500

val

#035f64

scss

$color-primary-02-600

ios

ColorPrimary02600

andr

color_primary_02_600

es6

ColorPrimary02600

val

#044c53

scss

$color-primary-02-700

ios

ColorPrimary02700

andr

color_primary_02_700

es6

ColorPrimary02700

val

#063a44

scss

$color-primary-02-800

ios

ColorPrimary02800

andr

color_primary_02_800

es6

ColorPrimary02800

val

#062b35

scss

$color-primary-02-900

ios

ColorPrimary02900

andr

color_primary_02_900

es6

ColorPrimary02900

Greys

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
Icons
Backgrounds

val

#eeeef0

scss

$color-grey-100

ios

ColorGrey100

andr

color_grey_100

es6

ColorGrey100

val

#d3d2d6

scss

$color-grey-200

ios

ColorGrey200

andr

color_grey_200

es6

ColorGrey200

val

#bab6bc

scss

$color-grey-300

ios

ColorGrey300

andr

color_grey_300

es6

ColorGrey300

val

#a19ba2

scss

$color-grey-400

ios

ColorGrey400

andr

color_grey_400

es6

ColorGrey400

val

#887f87

scss

$color-grey-500

ios

ColorGrey500

andr

color_grey_500

es6

ColorGrey500

val

#6f676c

scss

$color-grey-600

ios

ColorGrey600

andr

color_grey_600

es6

ColorGrey600

val

#554f52

scss

$color-grey-700

ios

ColorGrey700

andr

color_grey_700

es6

ColorGrey700

val

#3c3738

scss

$color-grey-800

ios

ColorGrey800

andr

color_grey_800

es6

ColorGrey800

val

#222020

scss

$color-grey-900

ios

ColorGrey900

andr

color_grey_900

es6

ColorGrey900

val

#000000

scss

$color-grey-999

ios

ColorGrey999

andr

color_grey_999

es6

ColorGrey999

val

#ffffff

scss

$color-grey-000

ios

ColorGrey000

andr

color_grey_000

es6

ColorGrey000

Status colors

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.

Information

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.

val

#ecfcfd

scss

$color-info-100

ios

ColorInfo100

andr

color_info_100

es6

ColorInfo100

val

#b7eef5

scss

$color-info-200

ios

ColorInfo200

andr

color_info_200

es6

ColorInfo200

val

#84dbeb

scss

$color-info-300

ios

ColorInfo300

andr

color_info_300

es6

ColorInfo300

val

#54c4de

scss

$color-info-400

ios

ColorInfo400

andr

color_info_400

es6

ColorInfo400

val

#25a8d0

scss

$color-info-500

ios

ColorInfo500

andr

color_info_500

es6

ColorInfo500

val

#2282a8

scss

$color-info-600

ios

ColorInfo600

andr

color_info_600

es6

ColorInfo600

val

#1e5f82

scss

$color-info-700

ios

ColorInfo700

andr

color_info_700

es6

ColorInfo700

val

#18415d

scss

$color-info-800

ios

ColorInfo800

andr

color_info_800

es6

ColorInfo800

val

#102739

scss

$color-info-900

ios

ColorInfo900

andr

color_info_900

es6

ColorInfo900

Success

Informs the user that an operation was successful.

val

#eaf3e2

scss

$color-success-100

ios

ColorSuccess100

andr

color_success_100

es6

ColorSuccess100

val

#cbe3b5

scss

$color-success-200

ios

ColorSuccess200

andr

color_success_200

es6

ColorSuccess200

val

#add585

scss

$color-success-300

ios

ColorSuccess300

andr

color_success_300

es6

ColorSuccess300

val

#91c854

scss

$color-success-400

ios

ColorSuccess400

andr

color_success_400

es6

ColorSuccess400

val

#78be20

scss

$color-success-500

ios

ColorSuccess500

andr

color_success_500

es6

ColorSuccess500

val

#41a017

scss

$color-success-600

ios

ColorSuccess600

andr

color_success_600

es6

ColorSuccess600

val

#158110

scss

$color-success-700

ios

ColorSuccess700

andr

color_success_700

es6

ColorSuccess700

val

#0a601b

scss

$color-success-800

ios

ColorSuccess800

andr

color_success_800

es6

ColorSuccess800

val

#053e1f

scss

$color-success-900

ios

ColorSuccess900

andr

color_success_900

es6

ColorSuccess900

Warnings

Inform the user about risks or threats. It teels the user to be careful about something.

val

#fff5eb

scss

$color-warning-100

ios

ColorWarning100

andr

color_warning_100

es6

ColorWarning100

val

#ffdab2

scss

$color-warning-200

ios

ColorWarning200

andr

color_warning_200

es6

ColorWarning200

val

#ffc17d

scss

$color-warning-300

ios

ColorWarning300

andr

color_warning_300

es6

ColorWarning300

val

#ffab4b

scss

$color-warning-400

ios

ColorWarning400

andr

color_warning_400

es6

ColorWarning400

val

#fc961e

scss

$color-warning-500

ios

ColorWarning500

andr

color_warning_500

es6

ColorWarning500

val

#c86f21

scss

$color-warning-600

ios

ColorWarning600

andr

color_warning_600

es6

ColorWarning600

val

#974f20

scss

$color-warning-700

ios

ColorWarning700

andr

color_warning_700

es6

ColorWarning700

val

#6a351c

scss

$color-warning-800

ios

ColorWarning800

andr

color_warning_800

es6

ColorWarning800

val

#401f15

scss

$color-warning-900

ios

ColorWarning900

andr

color_warning_900

es6

ColorWarning900

Danger

This color informs the user of an error or that some operation went wrong.

val

#feedee

scss

$color-danger-100

ios

ColorDanger100

andr

color_danger_100

es6

ColorDanger100

val

#fab9bc

scss

$color-danger-200

ios

ColorDanger200

andr

color_danger_200

es6

ColorDanger200

val

#f38789

scss

$color-danger-300

ios

ColorDanger300

andr

color_danger_300

es6

ColorDanger300

val

#ea5d58

scss

$color-danger-400

ios

ColorDanger400

andr

color_danger_400

es6

ColorDanger400

val

#df382b

scss

$color-danger-500

ios

ColorDanger500

andr

color_danger_500

es6

ColorDanger500

val

#b42a27

scss

$color-danger-600

ios

ColorDanger600

andr

color_danger_600

es6

ColorDanger600

val

#8b2226

scss

$color-danger-700

ios

ColorDanger700

andr

color_danger_700

es6

ColorDanger700

val

#641b21

scss

$color-danger-800

ios

ColorDanger800

andr

color_danger_800

es6

ColorDanger800

val

#3e1219

scss

$color-danger-900

ios

ColorDanger900

andr

color_danger_900

es6

ColorDanger900

Secondary colors

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

Secondary Blue is mostly used for focus. Use the info swatch to highlight anything related to informational feedback for your users.

val

#ecfcfd

scss

$color-secondary-blue-100

ios

ColorSecondaryBlue100

andr

color_secondary_blue_100

es6

ColorSecondaryBlue100

val

#b7eef5

scss

$color-secondary-blue-200

ios

ColorSecondaryBlue200

andr

color_secondary_blue_200

es6

ColorSecondaryBlue200

val

#84dbeb

scss

$color-secondary-blue-300

ios

ColorSecondaryBlue300

andr

color_secondary_blue_300

es6

ColorSecondaryBlue300

val

#54c4de

scss

$color-secondary-blue-400

ios

ColorSecondaryBlue400

andr

color_secondary_blue_400

es6

ColorSecondaryBlue400

val

#25a8d0

scss

$color-secondary-blue-500

ios

ColorSecondaryBlue500

andr

color_secondary_blue_500

es6

ColorSecondaryBlue500

val

#2282a8

scss

$color-secondary-blue-600

ios

ColorSecondaryBlue600

andr

color_secondary_blue_600

es6

ColorSecondaryBlue600

val

#1e5f82

scss

$color-secondary-blue-700

ios

ColorSecondaryBlue700

andr

color_secondary_blue_700

es6

ColorSecondaryBlue700

val

#18415d

scss

$color-secondary-blue-800

ios

ColorSecondaryBlue800

andr

color_secondary_blue_800

es6

ColorSecondaryBlue800

val

#102739

scss

$color-secondary-blue-900

ios

ColorSecondaryBlue900

andr

color_secondary_blue_900

es6

ColorSecondaryBlue900

Secondary Green

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.

val

#eaf3e2

scss

$color-secondary-green-100

ios

ColorSecondaryGreen100

andr

color_secondary_green_100

es6

ColorSecondaryGreen100

val

#cbe3b5

scss

$color-secondary-green-200

ios

ColorSecondaryGreen200

andr

color_secondary_green_200

es6

ColorSecondaryGreen200

val

#add585

scss

$color-secondary-green-300

ios

ColorSecondaryGreen300

andr

color_secondary_green_300

es6

ColorSecondaryGreen300

val

#91c854

scss

$color-secondary-green-400

ios

ColorSecondaryGreen400

andr

color_secondary_green_400

es6

ColorSecondaryGreen400

val

#78be20

scss

$color-secondary-green-500

ios

ColorSecondaryGreen500

andr

color_secondary_green_500

es6

ColorSecondaryGreen500

val

#41a017

scss

$color-secondary-green-600

ios

ColorSecondaryGreen600

andr

color_secondary_green_600

es6

ColorSecondaryGreen600

val

#158110

scss

$color-secondary-green-700

ios

ColorSecondaryGreen700

andr

color_secondary_green_700

es6

ColorSecondaryGreen700

val

#0a601b

scss

$color-secondary-green-800

ios

ColorSecondaryGreen800

andr

color_secondary_green_800

es6

ColorSecondaryGreen800

val

#053e1f

scss

$color-secondary-green-900

ios

ColorSecondaryGreen900

andr

color_secondary_green_900

es6

ColorSecondaryGreen900

Secondary Orange

Secondary Orange is used for user's feedback like the ratings.

val

#fff5eb

scss

$color-secondary-orange-100

ios

ColorSecondaryOrange100

andr

color_secondary_orange_100

es6

ColorSecondaryOrange100

val

#ffdab2

scss

$color-secondary-orange-200

ios

ColorSecondaryOrange200

andr

color_secondary_orange_200

es6

ColorSecondaryOrange200

val

#ffc17d

scss

$color-secondary-orange-300

ios

ColorSecondaryOrange300

andr

color_secondary_orange_300

es6

ColorSecondaryOrange300

val

#ffab4b

scss

$color-secondary-orange-400

ios

ColorSecondaryOrange400

andr

color_secondary_orange_400

es6

ColorSecondaryOrange400

val

#fc961e

scss

$color-secondary-orange-500

ios

ColorSecondaryOrange500

andr

color_secondary_orange_500

es6

ColorSecondaryOrange500

val

#c86f21

scss

$color-secondary-orange-600

ios

ColorSecondaryOrange600

andr

color_secondary_orange_600

es6

ColorSecondaryOrange600

val

#974f20

scss

$color-secondary-orange-700

ios

ColorSecondaryOrange700

andr

color_secondary_orange_700

es6

ColorSecondaryOrange700

val

#6a351c

scss

$color-secondary-orange-800

ios

ColorSecondaryOrange800

andr

color_secondary_orange_800

es6

ColorSecondaryOrange800

val

#401f15

scss

$color-secondary-orange-900

ios

ColorSecondaryOrange900

andr

color_secondary_orange_900

es6

ColorSecondaryOrange900

Secondary Red

Secondary Red is for discounts.

val

#feedee

scss

$color-secondary-red-100

ios

ColorSecondaryRed100

andr

color_secondary_red_100

es6

ColorSecondaryRed100

val

#fab9bc

scss

$color-secondary-red-200

ios

ColorSecondaryRed200

andr

color_secondary_red_200

es6

ColorSecondaryRed200

val

#f38789

scss

$color-secondary-red-300

ios

ColorSecondaryRed300

andr

color_secondary_red_300

es6

ColorSecondaryRed300

val

#ea5d58

scss

$color-secondary-red-400

ios

ColorSecondaryRed400

andr

color_secondary_red_400

es6

ColorSecondaryRed400

val

#df382b

scss

$color-secondary-red-500

ios

ColorSecondaryRed500

andr

color_secondary_red_500

es6

ColorSecondaryRed500

val

#b42a27

scss

$color-secondary-red-600

ios

ColorSecondaryRed600

andr

color_secondary_red_600

es6

ColorSecondaryRed600

val

#8b2226

scss

$color-secondary-red-700

ios

ColorSecondaryRed700

andr

color_secondary_red_700

es6

ColorSecondaryRed700

val

#641b21

scss

$color-secondary-red-800

ios

ColorSecondaryRed800

andr

color_secondary_red_800

es6

ColorSecondaryRed800

val

#3e1219

scss

$color-secondary-red-900

ios

ColorSecondaryRed900

andr

color_secondary_red_900

es6

ColorSecondaryRed900

Secondary Yellow

Secondary Yellow is for illustrations and special offers.

val

#fff8e2

scss

$color-secondary-yellow-100

ios

ColorSecondaryYellow100

andr

color_secondary_yellow_100

es6

ColorSecondaryYellow100

val

#ffebaf

scss

$color-secondary-yellow-200

ios

ColorSecondaryYellow200

andr

color_secondary_yellow_200

es6

ColorSecondaryYellow200

val

#fee07d

scss

$color-secondary-yellow-300

ios

ColorSecondaryYellow300

andr

color_secondary_yellow_300

es6

ColorSecondaryYellow300

val

#fcd64c

scss

$color-secondary-yellow-400

ios

ColorSecondaryYellow400

andr

color_secondary_yellow_400

es6

ColorSecondaryYellow400

val

#f8cc1c

scss

$color-secondary-yellow-500

ios

ColorSecondaryYellow500

andr

color_secondary_yellow_500

es6

ColorSecondaryYellow500

val

#c9a21b

scss

$color-secondary-yellow-600

ios

ColorSecondaryYellow600

andr

color_secondary_yellow_600

es6

ColorSecondaryYellow600

val

#9c7b18

scss

$color-secondary-yellow-700

ios

ColorSecondaryYellow700

andr

color_secondary_yellow_700

es6

ColorSecondaryYellow700

val

#705613

scss

$color-secondary-yellow-800

ios

ColorSecondaryYellow800

andr

color_secondary_yellow_800

es6

ColorSecondaryYellow800

val

#46350d

scss

$color-secondary-yellow-900

ios

ColorSecondaryYellow900

andr

color_secondary_yellow_900

es6

ColorSecondaryYellow900

Secondary Purple

Secondary Purple is used for illustration purposes.

val

#efebfe

scss

$color-secondary-purple-100

ios

ColorSecondaryPurple100

andr

color_secondary_purple_100

es6

ColorSecondaryPurple100

val

#c7b0fa

scss

$color-secondary-purple-200

ios

ColorSecondaryPurple200

andr

color_secondary_purple_200

es6

ColorSecondaryPurple200

val

#a575f3

scss

$color-secondary-purple-300

ios

ColorSecondaryPurple300

andr

color_secondary_purple_300

es6

ColorSecondaryPurple300

val

#883be9

scss

$color-secondary-purple-400

ios

ColorSecondaryPurple400

andr

color_secondary_purple_400

es6

ColorSecondaryPurple400

val

#7000dd

scss

$color-secondary-purple-500

ios

ColorSecondaryPurple500

andr

color_secondary_purple_500

es6

ColorSecondaryPurple500

val

#5803b3

scss

$color-secondary-purple-600

ios

ColorSecondaryPurple600

andr

color_secondary_purple_600

es6

ColorSecondaryPurple600

val

#42058a

scss

$color-secondary-purple-700

ios

ColorSecondaryPurple700

andr

color_secondary_purple_700

es6

ColorSecondaryPurple700

val

#2e0663

scss

$color-secondary-purple-800

ios

ColorSecondaryPurple800

andr

color_secondary_purple_800

es6

ColorSecondaryPurple800

val

#1c053d

scss

$color-secondary-purple-900

ios

ColorSecondaryPurple900

andr

color_secondary_purple_900

es6

ColorSecondaryPurple900

Anatomy

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.

Primary-01

Primary-02

The design needs to be accessible to everyone and these swatches when combined properly are compliant with color contrast rules for accessibility

Colors

Primary colors

Primary 01

Primary 02

Greys

Status colors

Information

Success

Warnings

Danger

Secondary colors

Secondary Blue

Secondary Green

Secondary Orange

Secondary Red

Secondary Yellow

Secondary Purple

Anatomy