Design Tokens

Design tokens are a tech-agnostic way to store variables. Variable naming convention follows CTI (Category / Type / Item) structure.

npm (tag) Fluid Licence

Installation

We introduce Design Tokens thanks to style dictionary.
Design Tokens are available from @engie-group/fluid-design-tokens package.

npm install @engie-group/fluid-design-tokens

Feel free to contribute with your own token export.

Colors

Base colors

Primary

Example Name Token
Blue-corporate
#009de9
var(--nj-color-base-blue-corporate)
color.base.blue-corporate.light
White
#ffffff
var(--nj-color-base-white)
color.base.white.light

Secondary

Example Name Token
Green-java
#6ed2b1
var(--nj-color-base-green-java)
color.base.green-java.light
Orange-crusta
#f78a31
var(--nj-color-base-orange-crusta)
color.base.orange-crusta.light
Purple
#1f106d
var(--nj-color-base-purple)
color.base.purple.light
Red-mandy
#e74a50
var(--nj-color-base-red-mandy)
color.base.red-mandy.light
Yellow-bright-sun
#fbdb3c
var(--nj-color-base-yellow-bright-sun)
color.base.yellow-bright-sun.light

Accent

Example Name Token
Green
#009934
var(--nj-color-base-green)
color.base.green.light
Orange
#e07602
var(--nj-color-base-orange)
color.base.orange.light
Red
#cc0033
var(--nj-color-base-red)
color.base.red.light

Additional

Example Name Token
Blue-allports
#0b74c0
var(--nj-color-base-blue-allports)
color.base.blue-allports.light
Blue-bigstone
#0f1e29
var(--nj-color-base-blue-bigstone)
color.base.blue-bigstone.light
Blue-rhino
#2b485c
var(--nj-color-base-blue-rhino)
color.base.blue-rhino.light
Blue-venice
#005288
var(--nj-color-base-blue-venice)
color.base.blue-venice.light
Cerise
#e62b87
var(--nj-color-base-cerise)
color.base.cerise.light
Green-fun
#69af23
var(--nj-color-base-green-fun)
color.base.green-fun.light
Green-pine
#007873
var(--nj-color-base-green-pine)
color.base.green-pine.light
Green-riogrande
#becd00
var(--nj-color-base-green-riogrande)
color.base.green-riogrande.light
Violet
#552382
var(--nj-color-base-violet)
color.base.violet.light
Violet-eggplant
#910f7d
var(--nj-color-base-violet-eggplant)
color.base.violet-eggplant.light
Yellow
#faca08
var(--nj-color-base-yellow)
color.base.yellow.light

Theme

Example Name Token
Danger
#cc0033
var(--nj-color-base-danger)
color.base.danger.light
Light
#ffffff
var(--nj-color-base-light)
color.base.light.light
Primary
#009de9
var(--nj-color-base-primary)
color.base.primary.light
Success
#009934
var(--nj-color-base-success)
color.base.success.light
Warning
#e07602
var(--nj-color-base-warning)
color.base.warning.light

Gray

Example Name Token
100
#f5f5f5
var(--nj-color-base-gray-100)
color.base.gray.100.light
200
#eeeeee
var(--nj-color-base-gray-200)
color.base.gray.200.light
300
#e0e0e0
var(--nj-color-base-gray-300)
color.base.gray.300.light
400
#bdbdbd
var(--nj-color-base-gray-400)
color.base.gray.400.light
500
#9e9e9e
var(--nj-color-base-gray-500)
color.base.gray.500.light
600
#757575
var(--nj-color-base-gray-600)
color.base.gray.600.light
700
#616161
var(--nj-color-base-gray-700)
color.base.gray.700.light
800
#424242
var(--nj-color-base-gray-800)
color.base.gray.800.light
900
#212121
var(--nj-color-base-gray-900)
color.base.gray.900.light

Type colors

Backdrop

Example Name Token
Modal
#000000
var(--nj-color-backdrop-modal)
color.backdrop.modal.light

Background

Example Name Token
Body
#ffffff
var(--nj-color-background-body)
color.background.body.light
Components
#ffffff
var(--nj-color-background-components)
color.background.components.light
Disabled
#e0e0e0
var(--nj-color-background-disabled)
color.background.disabled.light
Hr
#e0e0e0
var(--nj-color-background-hr)
color.background.hr.light

Border

Example Name Token
Input
#9e9e9e
var(--nj-color-border-input)
color.border.input.light

Icon

Example Name Token
Input
#757575
var(--nj-color-icon-input)
color.icon.input.light

Placeholder

Example Name Token
Input
#9e9e9e
var(--nj-color-placeholder-input)
color.placeholder.input.light

Size

Font size

Example Value Token
Peta 4.75rem var(--nj-size-font-peta)
size.font.peta
Tera 3.375rem var(--nj-size-font-tera)
size.font.tera
Giga 2.25rem var(--nj-size-font-giga)
size.font.giga
Mega 1.75rem var(--nj-size-font-mega)
size.font.mega
Kilo 1.5rem var(--nj-size-font-kilo)
size.font.kilo
Hecto 1.25rem var(--nj-size-font-hecto)
size.font.hecto
Deca 1.125rem var(--nj-size-font-deca)
size.font.deca
Base 1rem var(--nj-size-font-base)
size.font.base
Deci .875rem var(--nj-size-font-deci)
size.font.deci
Centi .75rem var(--nj-size-font-centi)
size.font.centi

Border size

Example Value Token
Width 1px var(--nj-size-border-width)
size.border.width
Radius .25rem var(--nj-size-border-radius)
size.border.radius

Height size

button
Example Value Token
Small 2rem var(--nj-size-height-button-small)
size.height.button.small
Normal 2.75rem var(--nj-size-height-button-normal)
size.height.button.normal
Large 3.75rem var(--nj-size-height-button-large)
size.height.button.large
Example Value Token
Small 3.5rem var(--nj-size-height-navbar-small)
size.height.navbar.small
Normal 6rem var(--nj-size-height-navbar-normal)
size.height.navbar.normal

Icon size

Example Value Token
S 18px var(--nj-size-icon-s)
size.icon.s
M 24px var(--nj-size-icon-m)
size.icon.m
L 36px var(--nj-size-icon-l)
size.icon.l
Xl 48px var(--nj-size-icon-xl)
size.icon.xl

Space size

Example Value Token
1 8px var(--nj-size-space-1)
size.space.1
2 16px var(--nj-size-space-2)
size.space.2
3 24px var(--nj-size-space-3)
size.space.3
4 32px var(--nj-size-space-4)
size.space.4
5 48px var(--nj-size-space-5)
size.space.5
6 64px var(--nj-size-space-6)
size.space.6
7 96px var(--nj-size-space-7)
size.space.7

Weight

Font

Example Value Token
Light 300 var(--nj-weight-font-light)
weight.font.light
Normal 400 var(--nj-weight-font-normal)
weight.font.normal
Bold 700 var(--nj-weight-font-bold)
weight.font.bold
Black 900 var(--nj-weight-font-black)
weight.font.black

Shadow

Example Name Token
2-dp var(--nj-shadow-level-2-dp)
shadow.level.2-dp.light
4-dp var(--nj-shadow-level-4-dp)
shadow.level.4-dp.light
6-dp var(--nj-shadow-level-6-dp)
shadow.level.6-dp.light
8-dp var(--nj-shadow-level-8-dp)
shadow.level.8-dp.light
16-dp var(--nj-shadow-level-16-dp)
shadow.level.16-dp.light
24-dp var(--nj-shadow-level-24-dp)
shadow.level.24-dp.light

Elevation z-index

Example Value Token
Dropdown 1000 var(--nj-elevation-dropdown)
.elevation.dropdown
Sticky 1020 var(--nj-elevation-sticky)
.elevation.sticky
Fixed 1030 var(--nj-elevation-fixed)
.elevation.fixed
Modal-backdrop 1040 var(--nj-elevation-modal-backdrop)
.elevation.modal-backdrop
Modal 1050 var(--nj-elevation-modal)
.elevation.modal
Popover 1060 var(--nj-elevation-popover)
.elevation.popover
Tooltip 1070 var(--nj-elevation-tooltip)
.elevation.tooltip