The Colors are a big part of the Foyer identity. They are also useful for all the messages displayed over our interfaces. Here is an inventory to keep consistency.
Colors are used everywhere in our interfaces. Depending on where you will cross the path of Foyer Group, you will surely meet one of our palette.
Table of Contents
The brand colors are the ones you will meet on official documents, communication, website and applications. They are also part of the other palettes you will find throughout this document.
Those colors are variations of the original blue of Foyer. The good news with this original color is that it's already contrasted enough with light colors to comply with Accessibility standards.
How to use it?
This is the lightest version of the main brand color of Foyer. This version is used as background most of the time.
Takeaways
Design Token blue-foyer-lighter
CSS Token --fds-blue-foyer-lighter
Hexa #f0f5fa
RGB 240, 245, 250
Color compatibilities
Learn more about accessibility.
| Color | Contrast | AA | AAA |
|---|---|---|---|
| Blue Foyer Light | 4.19:1 | ≈ | ✗ |
| Blue Foyer | 7.82:1 | ✓ | ✓ |
| Blue Foyer Dark | 10.96:1 | ✓ | ✓ |
How to use it?
This is the light version of the main brand color of Foyer. This version is used to create depth on backgrounds, separators (little borders), or can be used within a gradient or for interactive elements has alternate color.
Takeaways
Design Token blue-foyer-light
Hexa #2667A2
RGB 38, 103, 162
Color compatibilities
Learn more about accessibility.
| Color | Contrast | AA | AAA |
|---|---|---|---|
| Blue Smoke Light | 5.6:1 | ✓ | ≈ |
| Blue Smoke | 5.2:1 | ✓ | ≈ |
| Blue Smoke Dark | 4.9:1 | ✓ | ≈ |
How to use it?
This is the main brand color of Foyer. This blue is used in the monochromic logo and also as the first color of some of our gradients.
Takeaways
Design Token blue-foyer
Hexa #004C92
RGB 0, 76, 146
Color compatibilities
Learn more about accessibility.
| Color | Contrast | AA | AAA |
|---|---|---|---|
| Blue Smoke Light | 8.6:1 | ✓ | ✓ |
| Blue Smoke | 7.4:1 | ✓ | ✓ |
| Blue Smoke Dark | 7.0:1 | ✓ | ✓ |
How to use it?
This is the dark variant of the main brand color of Foyer. This blue is used to create emphasis and can also be used as border or color for creating gradients.
Takeaways
Design Token blue-foyer-dark
Hexa #00417C
RGB 0, 65, 124
Color compatibilities
Learn more about accessibility.
| Color | Contrast | Pass AA | Pass AAA |
|---|---|---|---|
| Blue Smoke Light | 9.5:1 | ✓ | ✓ |
| Blue Smoke | 8.8:1 | ✓ | ✓ |
| Blue Smoke Dark | 8.2:1 | ✓ | ✓ |
How to use it?
This is the dark variant of the main brand color of Foyer. This blue is used to create emphasis and can also be used as border or color for creating gradients.
Takeaways
Design Token blue-foyer-darker
CSS Token --fds-blue-foyer-darker
Hexa #01213C
RGB 1, 33, 60
Color compatibilities
Learn more about accessibility.
This yellow in particular is both one of our interface color, and one of our product domain brand color ("mobilé"). We have allowed ourselves this deviation for very specific and rare needs.
How to use it?
This variant of the color is used for background mostly.
Takeaways
Design Token yellow-lighter
Hexa #FEFAE8
RGB 254, 250, 232
Color compatibilities
Learn more about accessibility.
How to use it?
This light version is usually used on dark background when the mobilé theme is used on texts or as background for accentuated elements.
Takeaways
Design Token yellow-light
Hexa #F9E176
RGB 249, 225, 118
Color compatibilities
Learn more about accessibility.
How to use it?
This color is the main color of the product. We can use it as main color when the mobilé theme is used.
Takeaways
Design Token yellow
Hexa #F5CE22
RGB 245, 206, 34
Color compatibilities
Learn more about accessibility.
How to use it?
This dark version is used for texts over white background.
Takeaways
Design Token yellow-dark
Hexa #DDB91F
RGB 221, 185, 31
Color compatibilities
Learn more about accessibility.
How to use it?
This darker version is used for small texts over white background, and in some cases for backgrounds in dark mode.
Takeaways
Design Token yellow-darker
Hexa #7B6711
RGB 123, 103, 17
Color compatibilities
Learn more about accessibility.
To keep strong and readable interfaces, we made some adjustments of the brand color to make it more vibrant and yet legible.
How to use it?
This is the lightest version of the main brand color of Foyer. This version is used as background most of the time. (some variants of buttons, boxes, etc.)
Takeaways
Design Token primary-lighter
CSS Token --fds-primary-lighter
Hexa #EAEEFA
RGB 234, 238, 250
Color compatibilities
Learn more about accessibility.
How to use it?
This is the light version of the main brand color of Foyer. This version is used to create depth on backgrounds, separators (little borders), or can be used within a gradient or for interactive elements has alternate color.
Takeaways
Design Token primary-light
Hexa #A9BCE9
RGB 169, 188, 233
Color compatibilities
Learn more about accessibility.
How to use it?
This is the main brand color of Foyer. This blue is used in the monochromic logo and also as the first color of some of our gradients.
Takeaways
Design Token primary
Hexa #2957C8
RGB 41, 87, 200
Color compatibilities
Learn more about accessibility.
How to use it?
This is the dark variant of the main brand color of Foyer. This blue is used to create emphasis and can also be used as border or color for creating gradients.
Takeaways
Design Token primary-dark
Hexa #0736A8
RGB 7, 54, 168
Color compatibilities
Learn more about accessibility.
How to use it?
This is the dark variant of the main brand color of Foyer. This blue is used to create emphasis and can also be used as border or color for creating gradients.
Takeaways
Design Token primary-darker
CSS Token --fds-primary-darker
Hexa #041D58
RGB 4, 29, 88
Color compatibilities
Learn more about accessibility.
Our light grey colors are mostly used for creating slight contrasts with a container, or discreet separators within our interfaces. Darker ones are used for common texts and their nuances. It's the more neutral color of the palette.
How to use it?
This is the lightest version of the main brand color of Foyer. This version is used as background most of the time.
Takeaways
Design Token feather-grey-lighter
CSS Token --fds-feather-grey-lighter
Hexa #F8F9FC
RGB 248, 249, 252
Color compatibilities
Learn more about accessibility.
How to use it?
This is the light version of the main brand color of Foyer. This version is used to create depth on backgrounds, separators (little borders), or can be used within a gradient or for interactive elements has alternate color.
Takeaways
Design Token feather-grey-light
Hexa #EAEEF6
RGB 234, 238, 246
Color compatibilities
Learn more about accessibility.
How to use it?
This is the main brand color of Foyer. This blue is used in the monochromic logo and also as the first color of some of our gradients.
Takeaways
Design Token feather-grey
Hexa #C4CEDE
RGB 196, 206, 222
Color compatibilities
Learn more about accessibility.
How to use it?
This is the dark variant of the main brand color of Foyer. This blue is used to create emphasis and can also be used as border or color for creating gradients.
Takeaways
Design Token feather-grey-dark
Hexa #67768E
RGB 103, 118, 142
Color compatibilities
Learn more about accessibility.
How to use it?
This is the dark variant of the main brand color of Foyer. This blue is used to create emphasis and can also be used as border or color for creating gradients.
Takeaways
Design Token feather-grey-darker
CSS Token --fds-feather-grey-darker
Hexa #454F5F
RGB 69, 79, 95
Color compatibilities
Learn more about accessibility.
System colors are the colors that are not directly linked to the identity of the brand Foyer. They are a way to alert, warn or highlight a message or type of content. They help conveying the status of a task, or the state of the system, for example, but are not the only way to bring the status information to the user.
The blue is used for neutral informative messages.
How to use it?
This light blue is mostly used as background, or for borders and slight separators.
Takeaways
Design Token info-lighter
Hexa #EDF6FF
RGB 237, 246, 255
Color compatibilities
Learn more about accessibility.
How to use it?
This blue is used as borders mostly.
Takeaways
Design Token info-light
Hexa #B9D8F4
RGB 185, 216, 244
Color compatibilities
Learn more about accessibility.
How to use it?
This blue is used to color icons of neutral informative banners.
Takeaways
Design Token info
Hexa #4C9ADF
RGB 76, 154, 223
Color compatibilities
Learn more about accessibility.
How to use it?
This blue is used for texts and icons.
Takeaways
Design Token info-dark
Hexa #3B7AB3
RGB 59, 122, 179
Color compatibilities
Learn more about accessibility.
How to use it?
This blue is used for texts and icons.
Takeaways
Design Token info-darker
Hexa #1A5A95
RGB 26, 90, 149
Color compatibilities
Learn more about accessibility.
The red is used for destructive action or blocking informative messages.
How to use it?
This red is used to highlight that something isn't right. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token danger-lighter
Hexa #FFF0F0
RGB 255, 240, 240
Color compatibilities
Learn more about accessibility.
How to use it?
This red is used to highlight that something isn't right. Mostly for borders or separators. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token danger-light
Hexa #F9C8CA
RGB 249, 200, 202
Color compatibilities
Learn more about accessibility.
How to use it?
This red is used for big texts over white, or coloring icons. The lighter, light and dark versions are used at some point for emphasis and interaction purpose.
Takeaways
Design Token danger
Hexa #ED5E63
RGB 237, 94, 99
Color compatibilities
Learn more about accessibility.
How to use it?
This dark red is used for texts on informative important messages.
Takeaways
Design Token danger-dark
Hexa #D14449
RGB 209, 68, 73
Color compatibilities
Learn more about accessibility.
How to use it?
This darkest red is used for small texts on informative important messages.
Takeaways
Design Token danger-darker
Hexa #A32C30
RGB 163, 44, 48
Color compatibilities
Learn more about accessibility.
Orange is used for informative messages to alert users about something important happening, but not necessarily blocking.
How to use it?
This orange is used to notify an user about a possible alert, caution or warning. The lighter variant is used for backgrounds mostly.
Takeaways
Design Token warning-lighter
Hexa #FEECD7
RGB 254, 236, 215
Color compatibilities
Learn more about accessibility.
How to use it?
This orange is used to notify an user about a possible alert, caution or warning. The light version is used for separators or borders mostly.
Takeaways
Design Token warning-light
Hexa #FBB54B
RGB 251, 181, 75
Color compatibilities
Learn more about accessibility.
How to use it?
This orange is used to notify an user about a possible alert, caution or warning. The orange is used for icon colorations, or for texts in combination with black.
Takeaways
Design Token warning
Hexa #FF9E00
RGB 255, 158, 0
Color compatibilities
Learn more about accessibility.
How to use it?
This orange is used to notify an user about a possible alert, caution or warning. This dark variant is for big texts.
Takeaways
Design Token warning-dark
Hexa #D18B00
RGB 209, 139, 0
Color compatibilities
Learn more about accessibility.
How to use it?
This orange is used to notify an user about a possible alert, caution or warning. This darkest variant is for all texts.
Takeaways
Design Token warning-darker
Hexa #975F09
RGB 151, 95, 9
Color compatibilities
Learn more about accessibility.
The green color is for positive actions or messages that usually provide a success in an action started by the user, or a positive status.
How to use it?
This green is used to indicate the correctness. The lighter version is used for background, mostly.
Takeaways
Design Token success-lighter
Hexa #E0F5F3
RGB 224, 245, 243
Color compatibilities
Learn more about accessibility.
How to use it?
This green is used to indicate the correctness. The light is used for borders and separators.
Takeaways
Design Token success-light
Hexa #95DACE
RGB 149, 218, 206
Color compatibilities
Learn more about accessibility.
How to use it?
This green is used to indicate the correctness. This green is used for big texts or icons.
Takeaways
Design Token success
Hexa #00A88C
RGB 0, 168, 140
Color compatibilities
Learn more about accessibility.
How to use it?
This green is used to indicate the correctness. The dark version is used for texts.
Takeaways
Design Token success-dark
Hexa #008670
RGB 0, 134, 112
Color compatibilities
Learn more about accessibility.
How to use it?
This green is used to indicate the correctness. The darkest version is used for small texts.
Takeaways
Design Token success-darker
Hexa #006353
RGB 0, 99, 83
Color compatibilities
Learn more about accessibility.
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token white
Hexa #FFFFFF
RGB 255, 255, 255
Color compatibilities
Learn more about accessibility.
How to use it?
Description coming soon. Takeaways are up-to-date in the meantime.
Takeaways
Design Token black
Hexa #000000
RGB 0, 0, 0
Color compatibilities
Learn more about accessibility.
For the moment, our illustration palette is in work in progress. You can find some information on the Illustrations page.
When comes the time to play with colors, accessibility is a real concern for us. Using contrasted enough colors, by keeping in mind people who also could have colorblind issues or hight contrast sensitivity, is an everyday work.
We are aware that some of our combinations of colors are not good enough, but good news is that we are working on it.
Here is the state of compatibility of our main colors.
Table of color compatibility.
We will work on improving those compatibility and doing more testing on color blindness.
If you are sensitive in a way or another and want to give feedback. Please contact us.