Design Tokens
Design tokens are a tech-agnostic way to store variables. Variable naming convention follows CTI (Category / Type / Item) structure.
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
- CSS4 tokens:
@engie-group/fluid-design-tokens/lib/css/tokens.css
. CSS4 variable tokens - JSON tokens:
@engie-group/fluid-design-tokens/lib/json/tokens.json
. JSON tokens - SASS tokens:
@engie-group/fluid-design-tokens/lib/scss/tokens.scss
. CSS4 variable SASS support - FIGMA tokens: To define
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 |
navbar
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 |