primary-100
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.
blue-foyer-lighter
blue-foyer-light
blue-foyer
blue-foyer-dark
blue-foyer-darker
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.
yellow-lighter
yellow-light
yellow
yellow-dark
yellow-darker
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.
primary-200
primary-300
primary-400
primary-500
primary-600
primary-700
primary-800
primary-900
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.
feather-grey-100
feather-grey-200
feather-grey-300
feather-grey-400
feather-grey-500
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.
feather-grey-600
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.
feather-grey-700
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.
feather-grey-800
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.
feather-grey-900
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.
danger-100
danger-200
danger-300
danger-400
danger-500
danger-600
danger-700
danger-800
danger-900
Orange is used for informative messages to alert users about something important happening, but not necessarily blocking.
warning-100
warning-200
warning-300
warning-400
warning-500
warning-600
warning-700
warning-800
warning-900
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.
success-100
success-200
success-300
success-400
success-500
success-600
success-700
success-800
success-900
Black & White
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.
black
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.