Foundations

Colours

scss:Readyfigma:Ready

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
#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 (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.

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 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
#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 colour 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 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
#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 colour 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 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.

Primary-01


Primary-02

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