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.
Palette
All colors available for ENGIE projects.
Download the sketch palettesave_alt
Logo color
#0af
Primary colors
#009de9
#ffffff
#0af - #23d2b5
Secondary colors
#6ed2b1
#f78a31
#1f106d
#e74a50
#fbdb3c
Accent colors
#009934
#e07602
#c03
Additional colors
#0f1e29
#0b74c0
#2b485c
#005288
#e62b87
#69af23
#007873
#becd00
#910f7d
#552382
#faca08
Color utility classes are available for setting color
and background-color
.
Within @engie-group/fluid-design-tokens/lib/css/tokens.css
, a full range of :root
css variables reactive to dark mode.
--nj-color-base-blue-corporate
--nj-color-base-blue-corporate-hover
--nj-color-base-blue-corporate-active
--nj-color-text-background-blue-corporate
Within _color.scss
and _color-dark.scss
, you’ll find our legacy color variables and Sass map. Here’s an example of the $colors
Sass map:
$colors: (
"white": $white,
"blue-corporate": $blue-corporate,
"blue-allports": $blue-allports,
"blue-venice": $blue-venice,
"green-java": $green-java,
"green-pine": $green-pine,
"red": $red,
"green": $green,
"orange": $orange,
"yellow": $yellow,
"purple": $purple,
"violet-eggplant": $violet-eggplant,
"violet": $violet,
"cerise": $cerise,
"green-fun": $green-fun,
"green-riogrande": $green-riogrande,
"blue-rhino": $blue-rhino,
"blue-bigstone": $blue-bigstone
);
Gradient
You can use ENGIE gradient in several cases (text, background, border).
--nj-color-base-gradient-primary
$gradient-primary: linear-gradient(135deg, $blue-engie 0%, #23d2b5 100%);
Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our scss/_color.scss
and scss/_color-dark.scss
file.
You can customize theme and expand sass map to get a full themed application.
Within @engie-group/fluid-design-tokens/lib/css/tokens.css
, a full range of :root
theme css variables reactive to dark mode.
--nj-color-base-primary
--nj-color-base-primary-hover
--nj-color-base-primary-active
--nj-color-text-background-primary
Grays
An expansive set of gray variables in @engie-group/fluid-design-tokens/lib/css/tokens.css
reactive to theme change, for consistent shades of gray across your project.
Within @engie-group/fluid-design-tokens/lib/css/tokens.css
, a full range of :root
css variables reactive to dark mode.
--nj-color-base-gray-100
--nj-color-base-gray-200
--nj-color-base-gray-300 ...
Within scss/_color.scss
and scss/_color-dark.scss
, you’ll find our legacy gray sass map.
$gray-100: #f5f5f5;
$gray-200: #eee;
$gray-300: #e0e0e0;
$gray-400: #bdbdbd;
$gray-500: #9e9e9e;
$gray-600: #757575;
$gray-700: #616161;
$gray-800: #454545;
$gray-900: #212121;
$gray-dark-100: #e0e0e0;
$gray-dark-200: #b8bfc3;
$gray-dark-300: #758590;
$gray-dark-400: #485d6c;
$gray-dark-500: #304759;
$gray-dark-600: #1a3447;
$gray-dark-700: #142938;
$gray-dark-800: #0f1e29;
$gray-dark-900: #081016;
Shades of black
An expansive set of black shades variables (rgba).
Within @engie-group/fluid-design-tokens/lib/css/tokens.css
, a black opacity range of :root
css variables non reactive to dark mode.
--nj-color-base-black-100: rgba(0,0,0, .12);
--nj-color-base-black-200: rgba(0,0,0, .26);
--nj-color-base-black-300: rgba(0,0,0, .38);
--nj-color-base-black-500: rgba(0,0,0, .54);
--nj-color-base-black-800: rgba(0,0,0, .87);
Legacy sass variables:
$black-100: rgba($black, 0.12);
$black-200: rgba($black, 0.26);
$black-300: rgba($black, 0.38);
$black-500: rgba($black, 0.54);
$black-800: rgba($black, 0.87);
Shades of white
An expansive set of white shades variables (rgba).
Within @engie-group/fluid-design-tokens/lib/css/tokens.css
, a white opacity range of :root
css variables non-reactive to dark mode.
--nj-color-base-white-100: rgba(255,255,255, .12);
--nj-color-base-white-300: rgba(255,255,255, .3);
--nj-color-base-white-500: rgba(255,255,255, .5);
--nj-color-base-white-700: rgba(255,255,255, .7);
Legacy sass variables:
$white-100: rgba($white, .12);
$white-300: rgba($white, .3);
$white-500: rgba($white, .5);
$white-700: rgba($white, .7);