Colors
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
Brand Colors
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.
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.
Interface Colors
To keep strong and readable interfaces, we made some adjustments to the brand color to make it more vibrant and yet legible. This color is used for primary actions on the page, links, and sometimes information messages we want the user to focus on.
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 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-500
CSS Token --fds-feather-grey-500
Hexa #454F5F
RGB 69, 79, 95
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-600
CSS Token --fds-feather-grey-600
Hexa #454F5F
RGB 69, 79, 95
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-700
CSS Token --fds-feather-grey-700
Hexa #454F5F
RGB 69, 79, 95
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-800
CSS Token --fds-feather-grey-800
Hexa #454F5F
RGB 69, 79, 95
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-900
CSS Token --fds-feather-grey-900
Hexa #454F5F
RGB 69, 79, 95
Color compatibilities
Learn more about accessibility.
System Colors
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 never the only way to bring the status information to the user.
The red is used for destructive action or blocking informative messages.
Orange is used for informative messages to alert users about something important happening, but not necessarily blocking.
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.
Black & White
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.
Illustration Palette
For the moment, our illustration palette is in work in progress. You can find some information on the Illustrations page.
Accessibility
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.