Go to content Go to menu

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.

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-100
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.