Link to Fluid's Microsoft Teams channel Link to the support page

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

All colors available for ENGIE products.

Brand

Blue Logo
Gradient
#00AAFF - #23D2B5

Main color

Blue Bolt

Functional colors

Success
Warning
Danger

Additional colors

Space Ultramarine
Teal Green
Purple Lavender
French Pink
Saffron Yellow
Apple Lime

Neutral colors

White
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Grey 600
Grey 700
Grey 800
Grey 900
Black

Data visualization colors

Lighter Yellow
Lighter Orange
Lighter Red
Lighter Pink
Lighter Purple
Lighter Blue
Lighter Ultramarine
Lighter Teal
Lighter Green
Lighter Lime
Darker Yellow
Darker Orange
Darker Red
Darker Pink
Darker Purple
Darker Blue
Darker Ultramarine
Darker Teal
Darker Green
Darker Lime

GBU colors

Energy Solutions
Network
Thermal & Supply
Renewable

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’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

100


AAA

200


AAA

300


AAA

400


AAA

500


AA

Accessible with black text

600 * ⭐


AA

700


AAA

800


AAA

900


AAA

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.

Code

Please refer to the design tokens page.