Colours

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.

Be aware

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

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.

Primary 01

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

val

#ebf5de

scss

$color-primary-01-100

ios

ColorPrimary01100

andr

color_primary_01_100

es6

ColorPrimary01100

val

#c5e39e

scss

$color-primary-01-200

ios

ColorPrimary01200

andr

color_primary_01_200

es6

ColorPrimary01200

val

#9ed05f

scss

$color-primary-01-300

ios

ColorPrimary01300

andr

color_primary_01_300

es6

ColorPrimary01300

val

#78be20

scss

$color-primary-01-400

ios

ColorPrimary01400

andr

color_primary_01_400

es6

ColorPrimary01400

val

#46a610

scss

$color-primary-01-500

ios

ColorPrimary01500

andr

color_primary_01_500

es6

ColorPrimary01500

val

#188803

scss

$color-primary-01-600

ios

ColorPrimary01600

andr

color_primary_01_600

es6

ColorPrimary01600

val

#006902

scss

$color-primary-01-700

ios

ColorPrimary01700

andr

color_primary_01_700

es6

ColorPrimary01700

val

#035010

scss

$color-primary-01-800

ios

ColorPrimary01800

andr

color_primary_01_800

es6

ColorPrimary01800

val

#023618

scss

$color-primary-01-900

ios

ColorPrimary01900

andr

color_primary_01_900

es6

ColorPrimary01900

Primary 02 (beta colour to prepare the new version)

val

#eeeff1

scss

$color-primary-02-100

ios

ColorPrimary02100

andr

color_primary_02_100

es6

ColorPrimary02100

val

#cfd2d8

scss

$color-primary-02-200

ios

ColorPrimary02200

andr

color_primary_02_200

es6

ColorPrimary02200

val

#b3b7c1

scss

$color-primary-02-300

ios

ColorPrimary02300

andr

color_primary_02_300

es6

ColorPrimary02300

val

#8f94a3

scss

$color-primary-02-400

ios

ColorPrimary02400

andr

color_primary_02_400

es6

ColorPrimary02400

val

#6a7081

scss

$color-primary-02-500

ios

ColorPrimary02500

andr

color_primary_02_500

es6

ColorPrimary02500

val

#494f60

scss

$color-primary-02-600

ios

ColorPrimary02600

andr

color_primary_02_600

es6

ColorPrimary02600

val

#343b4c

scss

$color-primary-02-700

ios

ColorPrimary02700

andr

color_primary_02_700

es6

ColorPrimary02700

val

#242938

scss

$color-primary-02-800

ios

ColorPrimary02800

andr

color_primary_02_800

es6

ColorPrimary02800

val

#171b26

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

#e6e6e6

scss

$color-grey-100

ios

ColorGrey100

andr

color_grey_100

es6

ColorGrey100

val

#cccccc

scss

$color-grey-200

ios

ColorGrey200

andr

color_grey_200

es6

ColorGrey200

val

#b3b3b3

scss

$color-grey-300

ios

ColorGrey300

andr

color_grey_300

es6

ColorGrey300

val

#999999

scss

$color-grey-400

ios

ColorGrey400

andr

color_grey_400

es6

ColorGrey400

val

#808080

scss

$color-grey-500

ios

ColorGrey500

andr

color_grey_500

es6

ColorGrey500

val

#666666

scss

$color-grey-600

ios

ColorGrey600

andr

color_grey_600

es6

ColorGrey600

val

#4d4d4d

scss

$color-grey-700

ios

ColorGrey700

andr

color_grey_700

es6

ColorGrey700

val

#333333

scss

$color-grey-800

ios

ColorGrey800

andr

color_grey_800

es6

ColorGrey800

val

#191919

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 colours

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.

Information

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.

val

#daeff7

scss

$color-info-100

ios

ColorInfo100

andr

color_info_100

es6

ColorInfo100

val

#a7d9ed

scss

$color-info-200

ios

ColorInfo200

andr

color_info_200

es6

ColorInfo200

val

#73c3e2

scss

$color-info-300

ios

ColorInfo300

andr

color_info_300

es6

ColorInfo300

val

#3facd7

scss

$color-info-400

ios

ColorInfo400

andr

color_info_400

es6

ColorInfo400

val

#0b96cc

scss

$color-info-500

ios

ColorInfo500

andr

color_info_500

es6

ColorInfo500

val

#007bb4

scss

$color-info-600

ios

ColorInfo600

andr

color_info_600

es6

ColorInfo600

val

#005c91

scss

$color-info-700

ios

ColorInfo700

andr

color_info_700

es6

ColorInfo700

val

#003a5c

scss

$color-info-800

ios

ColorInfo800

andr

color_info_800

es6

ColorInfo800

val

#002a41

scss

$color-info-900

ios

ColorInfo900

andr

color_info_900

es6

ColorInfo900

Success

Informs the user that an operation was successful.

val

#ebf5de

scss

$color-success-100

ios

ColorSuccess100

andr

color_success_100

es6

ColorSuccess100

val

#c5e39e

scss

$color-success-200

ios

ColorSuccess200

andr

color_success_200

es6

ColorSuccess200

val

#9ed05f

scss

$color-success-300

ios

ColorSuccess300

andr

color_success_300

es6

ColorSuccess300

val

#78be20

scss

$color-success-400

ios

ColorSuccess400

andr

color_success_400

es6

ColorSuccess400

val

#46a610

scss

$color-success-500

ios

ColorSuccess500

andr

color_success_500

es6

ColorSuccess500

val

#188803

scss

$color-success-600

ios

ColorSuccess600

andr

color_success_600

es6

ColorSuccess600

val

#006902

scss

$color-success-700

ios

ColorSuccess700

andr

color_success_700

es6

ColorSuccess700

val

#035010

scss

$color-success-800

ios

ColorSuccess800

andr

color_success_800

es6

ColorSuccess800

val

#023618

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

#fdf1e8

scss

$color-warning-100

ios

ColorWarning100

andr

color_warning_100

es6

ColorWarning100

val

#f8d2b3

scss

$color-warning-200

ios

ColorWarning200

andr

color_warning_200

es6

ColorWarning200

val

#f4b27e

scss

$color-warning-300

ios

ColorWarning300

andr

color_warning_300

es6

ColorWarning300

val

#ef934a

scss

$color-warning-400

ios

ColorWarning400

andr

color_warning_400

es6

ColorWarning400

val

#ea7315

scss

$color-warning-500

ios

ColorWarning500

andr

color_warning_500

es6

ColorWarning500

val

#c65200

scss

$color-warning-600

ios

ColorWarning600

andr

color_warning_600

es6

ColorWarning600

val

#8c3500

scss

$color-warning-700

ios

ColorWarning700

andr

color_warning_700

es6

ColorWarning700

val

#531b00

scss

$color-warning-800

ios

ColorWarning800

andr

color_warning_800

es6

ColorWarning800

val

#360e00

scss

$color-warning-900

ios

ColorWarning900

andr

color_warning_900

es6

ColorWarning900

Danger

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

val

#fdeaea

scss

$color-danger-100

ios

ColorDanger100

andr

color_danger_100

es6

ColorDanger100

val

#f8bcbb

scss

$color-danger-200

ios

ColorDanger200

andr

color_danger_200

es6

ColorDanger200

val

#f38d8c

scss

$color-danger-300

ios

ColorDanger300

andr

color_danger_300

es6

ColorDanger300

val

#ef5f5c

scss

$color-danger-400

ios

ColorDanger400

andr

color_danger_400

es6

ColorDanger400

val

#ea302d

scss

$color-danger-500

ios

ColorDanger500

andr

color_danger_500

es6

ColorDanger500

val

#c61112

scss

$color-danger-600

ios

ColorDanger600

andr

color_danger_600

es6

ColorDanger600

val

#8c0003

scss

$color-danger-700

ios

ColorDanger700

andr

color_danger_700

es6

ColorDanger700

val

#530000

scss

$color-danger-800

ios

ColorDanger800

andr

color_danger_800

es6

ColorDanger800

val

#2d0000

scss

$color-danger-900

ios

ColorDanger900

andr

color_danger_900

es6

ColorDanger900

Secondary colours

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

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

val

#daeff7

scss

$color-secondary-blue-100

ios

ColorSecondaryBlue100

andr

color_secondary_blue_100

es6

ColorSecondaryBlue100

val

#a7d9ed

scss

$color-secondary-blue-200

ios

ColorSecondaryBlue200

andr

color_secondary_blue_200

es6

ColorSecondaryBlue200

val

#73c3e2

scss

$color-secondary-blue-300

ios

ColorSecondaryBlue300

andr

color_secondary_blue_300

es6

ColorSecondaryBlue300

val

#3facd7

scss

$color-secondary-blue-400

ios

ColorSecondaryBlue400

andr

color_secondary_blue_400

es6

ColorSecondaryBlue400

val

#0b96cc

scss

$color-secondary-blue-500

ios

ColorSecondaryBlue500

andr

color_secondary_blue_500

es6

ColorSecondaryBlue500

val

#007bb4

scss

$color-secondary-blue-600

ios

ColorSecondaryBlue600

andr

color_secondary_blue_600

es6

ColorSecondaryBlue600

val

#005c91

scss

$color-secondary-blue-700

ios

ColorSecondaryBlue700

andr

color_secondary_blue_700

es6

ColorSecondaryBlue700

val

#003a5c

scss

$color-secondary-blue-800

ios

ColorSecondaryBlue800

andr

color_secondary_blue_800

es6

ColorSecondaryBlue800

val

#002a41

scss

$color-secondary-blue-900

ios

ColorSecondaryBlue900

andr

color_secondary_blue_900

es6

ColorSecondaryBlue900

Secondary Green

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.

val

#ebf5de

scss

$color-secondary-green-100

ios

ColorSecondaryGreen100

andr

color_secondary_green_100

es6

ColorSecondaryGreen100

val

#c5e39e

scss

$color-secondary-green-200

ios

ColorSecondaryGreen200

andr

color_secondary_green_200

es6

ColorSecondaryGreen200

val

#9ed05f

scss

$color-secondary-green-300

ios

ColorSecondaryGreen300

andr

color_secondary_green_300

es6

ColorSecondaryGreen300

val

#78be20

scss

$color-secondary-green-400

ios

ColorSecondaryGreen400

andr

color_secondary_green_400

es6

ColorSecondaryGreen400

val

#46a610

scss

$color-secondary-green-500

ios

ColorSecondaryGreen500

andr

color_secondary_green_500

es6

ColorSecondaryGreen500

val

#188803

scss

$color-secondary-green-600

ios

ColorSecondaryGreen600

andr

color_secondary_green_600

es6

ColorSecondaryGreen600

val

#006902

scss

$color-secondary-green-700

ios

ColorSecondaryGreen700

andr

color_secondary_green_700

es6

ColorSecondaryGreen700

val

#035010

scss

$color-secondary-green-800

ios

ColorSecondaryGreen800

andr

color_secondary_green_800

es6

ColorSecondaryGreen800

val

#023618

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

#fdf1e8

scss

$color-secondary-orange-100

ios

ColorSecondaryOrange100

andr

color_secondary_orange_100

es6

ColorSecondaryOrange100

val

#f8d2b3

scss

$color-secondary-orange-200

ios

ColorSecondaryOrange200

andr

color_secondary_orange_200

es6

ColorSecondaryOrange200

val

#f4b27e

scss

$color-secondary-orange-300

ios

ColorSecondaryOrange300

andr

color_secondary_orange_300

es6

ColorSecondaryOrange300

val

#ef934a

scss

$color-secondary-orange-400

ios

ColorSecondaryOrange400

andr

color_secondary_orange_400

es6

ColorSecondaryOrange400

val

#ea7315

scss

$color-secondary-orange-500

ios

ColorSecondaryOrange500

andr

color_secondary_orange_500

es6

ColorSecondaryOrange500

val

#c65200

scss

$color-secondary-orange-600

ios

ColorSecondaryOrange600

andr

color_secondary_orange_600

es6

ColorSecondaryOrange600

val

#8c3500

scss

$color-secondary-orange-700

ios

ColorSecondaryOrange700

andr

color_secondary_orange_700

es6

ColorSecondaryOrange700

val

#531b00

scss

$color-secondary-orange-800

ios

ColorSecondaryOrange800

andr

color_secondary_orange_800

es6

ColorSecondaryOrange800

val

#360e00

scss

$color-secondary-orange-900

ios

ColorSecondaryOrange900

andr

color_secondary_orange_900

es6

ColorSecondaryOrange900

Secondary Red

Secondary Red is for discounts.

val

#fdeaea

scss

$color-secondary-red-100

ios

ColorSecondaryRed100

andr

color_secondary_red_100

es6

ColorSecondaryRed100

val

#f8bcbb

scss

$color-secondary-red-200

ios

ColorSecondaryRed200

andr

color_secondary_red_200

es6

ColorSecondaryRed200

val

#f38d8c

scss

$color-secondary-red-300

ios

ColorSecondaryRed300

andr

color_secondary_red_300

es6

ColorSecondaryRed300

val

#ef5f5c

scss

$color-secondary-red-400

ios

ColorSecondaryRed400

andr

color_secondary_red_400

es6

ColorSecondaryRed400

val

#ea302d

scss

$color-secondary-red-500

ios

ColorSecondaryRed500

andr

color_secondary_red_500

es6

ColorSecondaryRed500

val

#c61112

scss

$color-secondary-red-600

ios

ColorSecondaryRed600

andr

color_secondary_red_600

es6

ColorSecondaryRed600

val

#8c0003

scss

$color-secondary-red-700

ios

ColorSecondaryRed700

andr

color_secondary_red_700

es6

ColorSecondaryRed700

val

#530000

scss

$color-secondary-red-800

ios

ColorSecondaryRed800

andr

color_secondary_red_800

es6

ColorSecondaryRed800

val

#2d0000

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