Colors

Palettes

The palettes incorporate 2 sets of colors:

• 10 brand colors, based on Cegid’s iconic colors
• 12 extended colors, based on a custom list of additional tones

All palettes are divided in several shades, numbered from 0 to 100 and generated from one main color using Material Theme Builder to ensure accessibility (see Material’s color & accessibility guidelines for further informations).

These tokens are listed in the Color Palettes guideline.

Usages

To ensure consistency, we defined colors for the most common scenarios such as “displaying a main body text” or “displaying a background for a primary interactive element” and so on.

These tokens are listed in the Color Usage guideline, but not limited to them.

Semantic

Semantic guidance describes the intentions assigned to colors based on how they are used within the interface.

• Blue palette is used for informative purposes, such as giving hints or indicating a progression
• Green palette is used to communicate a positive or favorable outcome, such as a success feedback message after taking an action
• Orange palette is used to warn user on something they might need to know to take action, in order to prevent a mistake or an error from occurring
• Strawberry palette is used for errors states, to call out user’s attention on critical events that require immediate action, and for dangerous interactive elements leading to irreversible data deletion

Interaction States

The interaction states are variations of colors opacity used in overlay of interactive elements, to lighten or darken them according to how user are interacting with them:

• Resting (named Enabled or Default sometimes) is the default state of the element without interaction
• Disabled is the state of an element that has lost its interactive bevahior
• Hovered is the state of an element when the the cursor is above it
• Focused is the state of an element highlighted when browsing with a keyboard
• Selected is the state of an element picked by the user
• Activated is the state of an element highlighted by default or as an entry point
• Pressed is the state of an element when the user interacts with it
• Dragged is the state of an element when moved right after pressing it

These tokens are listed in the Interaction States guideline.

Data Visualisation

🚧 Data Visualisation will be detailed in a dedicated page.

Disambiguation

Some colors exists in various tones that may appear more or less close to each other. For a better understanding of how to use them, here’s a list of the palettes grouped by hues and the main usages suggested.

Blue tones

• Primary palette is made out from Cegid’s brand for interface elements, and can be replaced by clients in some products when using white label theming
• Blackberry palette is made out from Cegid’s brand for other usages such as enrichment for components colors, illustrations and data visualisation
• Blueberry palette is made out from Cegid’s brand for other usages such as enrichment for components colors, illustrations and data visualisation
• Blue palette is an extended set mostly used for informative purposes

Orange tones

• Secondary palette is made out from Cegid’s brand for interface elements, and can be replaced by clients in some products when using white label theming
• Gringerbread palette is made out from Cegid’s brand for other usages such as enrichment for components colors, illustrations and data visualisation
• Orange palette is an extended set mostly used for warning purposes
• Deep Orange palette is an extended set for other usages such as data visualisation or for decorative purposes

Red tones

• Strawberry palette is an extended set mostly used for critical purposes
• Tomato palette is made out from Cegid’s brand for other usages such as enrichment for components colors, illustrations and data visualisation

Yellow tones

• Bananabread palette is made out from Cegid’s brand for other usages such as enrichment for components colors, illustrations and data visualisation
• Yellow palette is an extended set for other usages such as data visualisation or for decorative purposes

Purple tones

• Plum palette is made out from Cegid’s brand for other usages such as enrichment for components colors, illustrations and data visualisation
• Deep Purple palette is an extended set for other usages such as data visualisation or for decorative purposes

Brown tones

• Lychee palette is made out from Cegid’s brand for other usages such as enrichment for components colors, illustrations and data visualisation
• Brown palette is an extended set for other usages such as data visualisation or for decorative purposes

Grey tones

• Neutral palette is made out from Cegid’s brand for interface elements, and can be replaced in some products when using white label theming
• Grey palette in some products when using white label theming, whereas
• Blue Grey palette is an extended set for other usages such as data visualisation or for decorative purposes

Accessibility

All shades are numbered from 0 to 100 within a palette, 0 being a pure black (#000000) and 100 being a pure white (#FFFFFF).

To ensure the minimum contrast accessibility, it must meet a contrast ratio of 4.5:1. In a same palette this can be easily achieved by keeping at least 50 steps between the text and its background color.

For example:

• A color numbered 30 don’t meet the accessibility requirements with pure black because there is only 30 steps between them.
• However, a color numbered 30 meets accessibility requirements when used with a shade numbered 80 (or higher) in the same palette because there is at least 50 steps between them (80-30 = 50).

Warning !

This rule does not apply for the following palettes:

• Primary
• Secondary
• Neutral

To ensure the minimum contrast accessibility requirements are fulfilled for any other combination than inside a same palette, please use an accessibility checker plugin or website such as:

• A11y Color Contrast Checker (plugin for Figma, free)
• Tanaguru Contrast-Finder (website, free)