Colors

Our colors signify our brand but they also help users navigate through the interface. Every color has a a role and a meaning and should be used wisely. Here you'll learn how to use them in our digital products.

• Overview
• Common mistakes
• Accessibility
• Code

Overview

All colors available for ENGIE products.

Common mistakes

ENGIE Gradient

The gradient is a preponderant element of the Engie brand. It is mainly used on the gradient ray, or as a decorative element

The the gradient ray cannot use a color other than the gradient.

The gradient should be used on the gradient ray as a branding element.

The gradient colors do not meet accessibility rules and should reach a ratio of 4.5 for texts and 3.1 for interactive elements.

The 'blue bolt' with its contrast of 4.5 passes the accessibility requirements. This is the color to use for interactive elements.

Titles and texts do not have to be used with the gradient color. Flat background with gradient are also forbidden.

Black or ultramarine color are preferred for titles and texts. Ultramarine can be used as a flat background.

ENGIE Blue Logo

ENGIE’s historic blue is mainly used in the gradient and on the main logo.

The 'Blue Logo' color does not meet accessibility rules and should reach a ratio of 4.5 for texts and 3.1 for interactive elements.

The 'blue bolt' with its contrast of 4.5 passes the accessibility requirements and should be used instead.

Using the Blue Logo as the main color is a common mistake. Use the Blue Bolt instead.

The color 'Blue Logo' must only be used on the logotype.

Accessibility

We comply at least with WCAG AA standard contrast ratios. For further information, you can check color documentation on figma

* ⭐️ : Blue Bolt, or Blue 600, is the main color. It is used for important UI elements that need to stand out of the page: text links, buttons or any other action components.

Code

Please refer to the design tokens page.