Colors

Brand

The brand deep blue is used to reinforce our brand along with the design, in contrast with pure white.

Neutral colors

We use shades of the brand color to subtly distinguish texts and surfaces from one another. They are also used when we don't want to draw too much attention to an interaction or information such as notes or a disabled state.

Common usage

• Neutral Dark is our default text color (the color ID text can used for this purpose).
• Neutral Off is often used as a surface to provide an alternative to a pure white background.
• Neutral Lighter is used for box borders and dividers, where Neutral Light is used for borders of interactive elements (text input, etc.)

Alpha alternative

All neutral colors are also available as transparent shades of the brand color. Add the suffix -alpha to use them (example: neutral-dark-alpha).

Primary interaction color

We use a specific color to denote interactions such as links or buttons. The light and off shades provide an extra color to tint surface or borders of elements.

Semantic colors

These colors help the user understand the status of given information or action.

Informative

Success

Warning

Danger

Invalid

Flow statuses

Accent

We use accent colors to reinforce the brand and keep this attractive. We use these colors when brand awareness is high such as our website or marketing and sales material. They are mainly used as solid backgrounds, for graphic elements, or in illustrations.

These colors should not be used for semantic or interactive elements. See the semantic guidelines below for more information.

Green

Blue

Orange

Our offer

Packs (legacy)

Accessibility

All text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5s:1 color contrast between text and background for normal text, and 3:1 to large text.

You can test colors contrast with this online tool.