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.
All colors available for ENGIE products.
Data visualization colors
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.
We comply at least with WCAG AA standard contrast ratios. For further information, you can check color documentation on figma
Accessible with black text
600 * ⭐
Accessible with white text
* ⭐️ : 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.
Please refer to the design tokens page.