Colors
Color provides an intuitive way of communicating information to users.
Usage
Color can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual continuity.
Principles
Use color meaningfully.
When color is used sparingly to highlight important elements, it can help create a user interface that is fluid and intuitive.
Use color to indicate interactivity.
It is a good idea to choose one color to indicate elements of your application that are interactive. For example, many web pages use blue text to denote a hyperlink.
Palettes
Those colors are common for websites and Ui kits. They can be used for secondary buttons or for layouts. Don't use 'Dark' color for texts. Use Gray Dark 80 for texts in light backgrounds or Michelin Blue For background you can use Midnight Blue / Dark Blue / Michelin Blue / White or Gray Light 05
White and Gray Light
White
#FFFFFF
Gray light 05 - [light]
#F2F2F2
Gray light 10 - [light]
#E5E5E5
Gray light 20 - [light]
#CCCCCC
Gray light 30 - [light]
#B2B2B2
Gray light 40 - [light]
#999999
Gray light 50 - [light]
#7F7F7F
Black and Gray Dark
Black
#000000
Gray dark 90 - [dark]
#0D0D0D
Gray dark 80 - [dark]
#1A1A1A
Gray dark 70 - [dark]
#333333
Gray dark 60 - [dark]
#404040
Gray dark 50 - [dark]
#4D4D4D
Gray dark 40 - [dark]
#666666
Primary colors are the colors displayed most frequently across the apps.
The primary colors are the official Michelin Blue color and the White color.
Blue Primary
Primary Blue has a dark and a light variant to create constrast between UI elements.
Primary blue - [light]
#27509B
White
#FFFFFF
Dark variants :
Primary blue - Dark 03 - [dark]
#3A61A6
Primary blue - Dark 02 [dark]
#6182BB
Primary blue - Dark 01 [dark]
#87A4D0
Light variants :
Primary blue - Light 03 [light]
#AEC5E5
Primary blue - Light 02 [light]
#C1D6EF
Primary blue - Light 01 [light]
#D4E7FA
Yellow secondary
Michelin Yellow is used as color accent such as buttons, etc.
Primary Yellow
#FCE500
Dark variants:
Primary Yellow - Dark 03 [dark]
#FCE817
Primary Yellow - Dark 02 [dark]
#FDED44
Primary Yellow - Dark 01 [dark]
#FDF271
Light variants:
Primary Yellow - Light 03 [light]
#FEF79E
Primary Yellow - Light 02 [light]
#FEF984
Primary Yellow - Light 01 [light]
#FEFCCB
Tertiary colors
Tertiary colors are darken colors of the Michelin Blue, used especially for backgrounds (immersive)
Michelin Dark Blue - [dark]
#00205B
Michelin Midnight Blue
#000C34
By Universe
Michelin purple engaged - [light]
#582C83
Michelin Generous Green
#84BD00
Michelin Sustainable Grey
#53565A
Michelin Red for Gastronomy
#BD2333
Michelin Sky Blue
#1095F9
Michelin Green for Travel
#17A78F
Status colors are used to attract the user’s attention to specific components of the interface. They can be used for Validation, errors and Warnings.
Valid colors
Valid
#2E7D32
Valid Dark
#92C18F
Valid Light
#E8F5E5
Warning colors
Warning
#F9A825
Warning Dark
#FCD286
Warning Light
#FDECC0
Danger or Error colors
Danger
#B71C1C
Danger Dark
#DD8880
Danger Light
#F4CEC2