Design Tokens

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

Coming soon

People working on a new feature by assembling parts of an interface
npm (tag) 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

Secondary

Example Name Token

Accent

Example Name Token

Additional

Example Name Token

Theme

Example Name Token

Gray

Example Name Token

Type colors

Backdrop

Example Name Token

Background

Example Name Token

Border

Example Name Token
Minimal
#ebeef1
var(--nj-color-border-minimal)
color.border.minimal.light
Moderate
#9eadb8
var(--nj-color-border-moderate)
color.border.moderate.light
Bold
#60798b
var(--nj-color-border-bold)
color.border.bold.light
Strong
#435c6e
var(--nj-color-border-strong)
color.border.strong.light
Contrast
#232d35
var(--nj-color-border-contrast)
color.border.contrast.light
Hovered
#007acd
var(--nj-color-border-hovered)
color.border.hovered.light

Icon

Example Name Token
Tertiary
#778c9b
var(--nj-color-icon-tertiary)
color.icon.tertiary.light
Primary
#334551
var(--nj-color-icon-primary)
color.icon.primary.light

Placeholder

Example Name Token

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 {"md"=>"0", "sm"=>"0"} var(--nj-size-border-radius)
size.border.radius
Focus {"width"=>"2px", "offset"=>"2px"} var(--nj-size-border-focus)
size.border.focus

Height size

Icon size

Example Value Token
Sm 16px var(--nj-size-icon-sm)
size.icon.sm
Md 24px var(--nj-size-icon-md)
size.icon.md
Lg 32px var(--nj-size-icon-lg)
size.icon.lg
Xl 48px var(--nj-size-icon-xl)
size.icon.xl
Xxl 64px var(--nj-size-icon-xxl)
size.icon.xxl
3xl 80px var(--nj-size-icon-3xl)
size.icon.3xl
4xl 96px var(--nj-size-icon-4xl)
size.icon.4xl
5xl 112px var(--nj-size-icon-5xl)
size.icon.5xl
6xl 128px var(--nj-size-icon-6xl)
size.icon.6xl

Space size

Example Value Token
2 0.125rem var(--nj-size-space-2)
size.space.2
4 0.25rem var(--nj-size-space-4)
size.space.4
8 0.5rem var(--nj-size-space-8)
size.space.8
12 0.75rem var(--nj-size-space-12)
size.space.12
16 1rem var(--nj-size-space-16)
size.space.16
20 1.25rem var(--nj-size-space-20)
size.space.20
24 1.5rem var(--nj-size-space-24)
size.space.24
32 2rem var(--nj-size-space-32)
size.space.32
48 3rem var(--nj-size-space-48)
size.space.48
64 4rem var(--nj-size-space-64)
size.space.64
80 5rem var(--nj-size-space-80)
size.space.80
96 6rem var(--nj-size-space-96)
size.space.96
112 7rem var(--nj-size-space-112)
size.space.112

Weight

Font

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
Toast-container 1080 var(--nj-elevation-toast-container)
.elevation.toast-container
Toast 1080 var(--nj-elevation-toast)
.elevation.toast

Colors

Todo: Dark mode explanation

Color Background

Background color tokens comes with all the variations of backgrounds you might need. The most used are primary, secondary, tertiary and

Name Description Preview light Preview dark

var(-color-background -primary-_)

color.background.primary_

...

#ffffff

#15191d

var(-color-background -primary-hovered)

color.background.primaryhovered

...

#ebeef1

#1f262b

var(-color-background -primary-focused)

color.background.primaryfocused

...

#ebeef1

#1f262b

var(-color-background -primary-pressed)

color.background.primarypressed

...

#ccd4da

#2e3942

var(-color-background -primary-selected)

color.background.primaryselected

...

#e7eefc

#12263b

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -secondary--)

color.background.secondary-

...

#f6f8f9

#1a1f23

var(-color-background -secondary-hovered)

color.background.secondaryhovered

...

#ebeef1

#1f262b

var(-color-background -secondary-focused)

color.background.secondaryfocused

...

#ebeef1

#1f262b

var(-color-background -secondary-pressed)

color.background.secondarypressed

...

#ccd4da

#2e3942

var(-color-background -secondary-transparent)

color.background.secondarytransparent

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -tertiary--)

color.background.tertiary-

...

#ebeef1

#1f262b

var(-color-background -tertiary-hovered)

color.background.tertiaryhovered

...

#ccd4da

#2e3942

var(-color-background -tertiary-focused)

color.background.tertiaryfocused

...

#ccd4da

#2e3942

var(-color-background -tertiary-pressed)

color.background.tertiarypressed

...

#9eadb8

#425663

var(-color-background -tertiary-transparent)

color.background.tertiarytransparent

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -neutral-_)

color.background.neutral_

...

#60798b

#718492

var(-color-background -neutral-hovered)

color.background.neutralhovered

...

#435c6e

#97a5af

var(-color-background -neutral-focused)

color.background.neutralfocused

...

#435c6e

#97a5af

var(-color-background -neutral-pressed)

color.background.neutralpressed

...

#334551

#bcc4cb

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -transparent-_)

color.background.transparent_

...

transparent

transparent

var(-color-background -transparent-hovered)

color.background.transparenthovered

...

rgba(5, 43, 80, 0.08)

rgba(164, 211, 229, 0.07)

var(-color-background -transparent-focused)

color.background.transparentfocused

...

rgba(5, 43, 80, 0.08)

rgba(164, 211, 229, 0.07)

var(-color-background -transparent-pressed)

color.background.transparentpressed

...

rgba(0, 40, 70, 0.2)

rgba(168, 213, 247, 0.17)

var(-color-background -transparent-selected)

color.background.transparentselected

...

rgba(15, 85, 225, 0.1)

rgba(1, 112, 229, 0.15)

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -inverse-_)

color.background.inverse_

...

#ffffff

#15191d

var(-color-background -inverse-hovered)

color.background.inversehovered

...

#ebeef1

#1f262b

var(-color-background -inverse-focused)

color.background.inversefocused

...

#ebeef1

#1f262b

var(-color-background -inverse-pressed)

color.background.inversepressed

...

#ccd4da

#2e3942

var(-color-background -inverse-transparent)

color.background.inversetransparent

...

var(-color-background -inverse-contrast)

color.background.inversecontrast

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -high_contrast-_)

color.background.high_contrast_

...

#232d35

#e2e5e9

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -backdrop-_)

color.background.backdrop_

...

rgba(3, 42, 70, 0.54)

rgba(168, 213, 247, 0.17)

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -brand-_)

color.background.brand_

...

#007acd

#3d85ca

var(-color-background -brand-secondary)

color.background.brandsecondary

...

#f6f8fd

#111f2e

var(-color-background -brand-tertiary)

color.background.brandtertiary

...

var(-color-background -brand-hovered)

color.background.brandhovered

...

#005aa0

#77a6e1

var(-color-background -brand-focused)

color.background.brandfocused

...

#005aa0

#77a6e1

var(-color-background -brand-pressed)

color.background.brandpressed

...

#004478

#a9c4ee

var(-color-background -brand-transparent)

color.background.brandtransparent

...

var(-color-background -brand-high_contrast)

color.background.brandhigh_contrast

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -danger-_)

color.background.danger_

...

#db3735

#dd534b

var(-color-background -danger-secondary)

color.background.dangersecondary

...

#fff7f5

#321613

var(-color-background -danger-tertiary)

color.background.dangertertiary

...

var(-color-background -danger-hovered)

color.background.dangerhovered

...

#aa2424

#fa7e72

var(-color-background -danger-pressed)

color.background.dangerpressed

...

#7f1d1b

#ffaea3

var(-color-background -danger-focused)

color.background.dangerfocused

...

#aa2424

#fa7e72

var(-color-background -danger-transparent)

color.background.dangertransparent

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -success-_)

color.background.success_

...

#008836

#30934b

var(-color-background -success-secondary)

color.background.successsecondary

...

#f3faf4

#102313

var(-color-background -success-tertiary)

color.background.successtertiary

...

var(-color-background -success-hovered)

color.background.successhovered

...

#006725

#63b473

var(-color-background -success-pressed)

color.background.successpressed

...

#004d1c

#99d0a0

var(-color-background -success-transparent)

color.background.successtransparent

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -warning-_)

color.background.warning_

...

#ff8c47

#c3693a

var(-color-background -warning-secondary)

color.background.warningsecondary

...

#fff5ed

#2c1b12

var(-color-background -warning-tertiary)

color.background.warningtertiary

...

var(-color-background -warning-hovered)

color.background.warninghovered

...

#d96929

#f08750

var(-color-background -warning-pressed)

color.background.warningpressed

...

#bc5921

#ffb182

var(-color-background -warning-transparent)

color.background.warningtransparent

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -discovery-_)

color.background.discovery_

...

#9261b7

#9971b8

var(-color-background -discovery-secondary)

color.background.discoverysecondary

...

#faf7fc

#201d22

var(-color-background -discovery-tertiary)

color.background.discoverytertiary

...

var(-color-background -discovery-hovered)

color.background.discoveryhovered

...

#a377c5

#b697cf

var(-color-background -discovery-pressed)

color.background.discoverypressed

...

#9261b7

#d0bbe1

var(-color-background -discovery-transparent)

color.background.discoverytransparent

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -information-_)

color.background.information_

...

#007acd

#3d85ca

var(-color-background -information-secondary)

color.background.informationsecondary

...

#f6f8fd

#111f2e

var(-color-background -information-tertiary)

color.background.informationtertiary

...

var(-color-background -information-hovered)

color.background.informationhovered

...

#3c8cde

#77a6e1

var(-color-background -information-pressed)

color.background.informationpressed

...

#007acd

#a9c4ee

var(-color-background -information-transparent)

color.background.informationtransparent

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -pink-_)

color.background.pink_

...

#e01b78

#e44284

var(-color-background -pink-secondary)

color.background.pinksecondary

...

#fff4f9

#211d1e

var(-color-background -pink-tertiary)

color.background.pinktertiary

...

var(-color-background -pink-hovered)

color.background.pinkhovered

...

#963563

#f779ad

var(-color-background -pink-pressed)

color.background.pinkpressed

...

#5c3749

#fbaccc

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -red-_)

color.background.red_

...

#db3735

#dd534b

var(-color-background -red-secondary)

color.background.redsecondary

...

#fff7f5

#321613

var(-color-background -red-tertiary)

color.background.redtertiary

...

var(-color-background -red-hovered)

color.background.redhovered

...

#aa2424

#fa7e72

var(-color-background -red-pressed)

color.background.redpressed

...

#7f1d1b

#ffaea3

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -orange-_)

color.background.orange_

...

#bc5921

#c3693a

var(-color-background -orange-secondary)

color.background.orangesecondary

...

#fff5ed

#2c1b12

var(-color-background -orange-tertiary)

color.background.orangetertiary

...

var(-color-background -orange-hovered)

color.background.orangehovered

...

#8e441a

#f08750

var(-color-background -orange-pressed)

color.background.orangepressed

...

#693315

#ffb182

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -yellow-_)

color.background.yellow_

...

#ffcc59

#c59d4a

var(-color-background -yellow-secondary)

color.background.yellowsecondary

...

#fff7e0

#251e13

var(-color-background -yellow-tertiary)

color.background.yellowtertiary

...

var(-color-background -yellow-hovered)

color.background.yellowhovered

...

#6f551d

#c59d4a

var(-color-background -yellow-pressed)

color.background.yellowpressed

...

#533f18

#eabc5f

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -green-_)

color.background.green_

...

#008836

#30934b

var(-color-background -green-secondary)

color.background.greensecondary

...

#f3faf4

#102313

var(-color-background -green-tertiary)

color.background.greentertiary

...

var(-color-background -green-hovered)

color.background.greenhovered

...

#006725

#63b473

var(-color-background -green-pressed)

color.background.greenpressed

...

#004d1c

#99d0a0

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -grey-_)

color.background.grey_

...

#60798b

#718492

var(-color-background -grey-secondary)

color.background.greysecondary

...

#f6f8f9

#1a1f23

var(-color-background -grey-tertiary)

color.background.greytertiary

...

var(-color-background -grey-hovered)

color.background.greyhovered

...

#435c6e

#97a5af

var(-color-background -grey-pressed)

color.background.greypressed

...

#334551

#bcc4cb

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -blue-_)

color.background.blue_

...

#007acd

#3d85ca

var(-color-background -blue-secondary)

color.background.bluesecondary

...

#f6f8fd

#111f2e

var(-color-background -blue-tertiary)

color.background.bluetertiary

...

var(-color-background -blue-hovered)

color.background.bluehovered

...

#005aa0

#77a6e1

var(-color-background -blue-pressed)

color.background.bluepressed

...

#004478

#a9c4ee

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -ultramarine-_)

color.background.ultramarine_

...

#6372b2

#717fb5

var(-color-background -ultramarine-secondary)

color.background.ultramarinesecondary

...

#f6f7fb

#171d37

var(-color-background -ultramarine-tertiary)

color.background.ultramarinetertiary

...

var(-color-background -ultramarine-hovered)

color.background.ultramarinehovered

...

#44549b

#96a2cc

var(-color-background -ultramarine-pressed)

color.background.ultramarinepressed

...

#2b3d83

#bbc2df

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -purple-_)

color.background.purple_

...

#9261b7

#9971b8

var(-color-background -purple-secondary)

color.background.purplesecondary

...

#faf7fc

#201d22

var(-color-background -purple-tertiary)

color.background.purpletertiary

...

var(-color-background -purple-hovered)

color.background.purplehovered

...

#744299

#b697cf

var(-color-background -purple-pressed)

color.background.purplepressed

...

#533669

#d0bbe1

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -teal-_)

color.background.teal_

...

#008480

#328e8a

var(-color-background -teal-secondary)

color.background.tealsecondary

...

#f1fafa

#191f1f

var(-color-background -teal-tertiary)

color.background.tealtertiary

...

var(-color-background -teal-hovered)

color.background.tealhovered

...

#0a6361

#58b1ad

var(-color-background -teal-pressed)

color.background.tealpressed

...

#154948

#8bcfcb

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-background -lime-_)

color.background.lime_

...

#6c7d02

#78892a

var(-color-background -lime-secondary)

color.background.limesecondary

...

#f8fad5

#1e2010

var(-color-background -lime-tertiary)

color.background.limetertiary

...

var(-color-background -lime-hovered)

color.background.limehovered

...

#525f0a

#97ac37

var(-color-background -lime-pressed)

color.background.limepressed

...

#3e460e

#b7cd4f

No alpha for this color yet

Color Border

Name Description Preview light Preview dark

var(-color-border -minimal-light)

color.border.minimallight

...

var(-color-border -minimal-dark)

color.border.minimaldark

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -subtle-_)

color.border.subtle_

...

#ccd4da

#2e3942

var(-color-border -subtle-transparent)

color.border.subtletransparent

...

rgba(0, 40, 70, 0.2)

rgba(168, 213, 247, 0.17)

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -moderate-light)

color.border.moderatelight

...

var(-color-border -moderate-dark)

color.border.moderatedark

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -bold-light)

color.border.boldlight

...

var(-color-border -bold-dark)

color.border.bolddark

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -strong-light)

color.border.stronglight

...

var(-color-border -strong-dark)

color.border.strongdark

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -contrast-light)

color.border.contrastlight

...

var(-color-border -contrast-dark)

color.border.contrastdark

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -hovered-light)

color.border.hoveredlight

...

var(-color-border -hovered-dark)

color.border.hovereddark

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -focused-_)

color.border.focused_

...

#007acd

#3d85ca

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -brand-moderate)

color.border.brandmoderate

...

#7fadef

#04568e

var(-color-border -brand-bold)

color.border.brandbold

...

#007acd

#3d85ca

var(-color-border -brand-strong)

color.border.brandstrong

...

#005aa0

#77a6e1

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -inverse-_)

color.border.inverse_

...

#ffffff

#15191d

var(-color-border -inverse-focused)

color.border.inversefocused

...

#ffffff

#15191d

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -danger-subtle)

color.border.dangersubtle

...

#ffc5b9

#63221e

var(-color-border -danger-moderate)

color.border.dangermoderate

...

#ff8979

#95302c

var(-color-border -danger-bold)

color.border.dangerbold

...

#db3735

#dd534b

var(-color-border -danger-strong)

color.border.dangerstrong

...

#aa2424

#fa7e72

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -warning-subtle)

color.border.warningsubtle

...

#ffc89d

#542f1b

var(-color-border -warning-moderate)

color.border.warningmoderate

...

#ff8c47

#7e4425

var(-color-border -warning-bold)

color.border.warningbold

...

#bc5921

#c3693a

var(-color-border -warning-strong)

color.border.warningstrong

...

#8e441a

#f08750

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -success-subtle)

color.border.successsubtle

...

#aedfb3

#12401e

var(-color-border -success-moderate)

color.border.successmoderate

...

#63be74

#12602b

var(-color-border -success-bold)

color.border.successbold

...

#008836

#30934b

var(-color-border -success-strong)

color.border.successstrong

...

#006725

#63b473

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -discovery-subtle)

color.border.discoverysubtle

...

#deccec

#41324e

var(-color-border -discovery-moderate)

color.border.discoverymoderate

...

#bf9ed9

#694288

var(-color-border -discovery-bold)

color.border.discoverybold

...

#9261b7

#9971b8

var(-color-border -discovery-strong)

color.border.discoverystrong

...

#744299

#b697cf

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -information-subtle)

color.border.informationsubtle

...

#c0d4f9

#0f3a5e

var(-color-border -information-moderate)

color.border.informationmoderate

...

#7fadef

#04568e

var(-color-border -information-bold)

color.border.informationbold

...

#007acd

#3d85ca

var(-color-border -information-strong)

color.border.informationstrong

...

#005aa0

#77a6e1

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -pink-moderate)

color.border.pinkmoderate

...

#ff80bd

#7b4159

var(-color-border -pink-bold)

color.border.pinkbold

...

#e01b78

#e44284

var(-color-border -pink-strong)

color.border.pinkstrong

...

#963563

#f779ad

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -red-moderate)

color.border.redmoderate

...

#ff8979

#95302c

var(-color-border -red-bold)

color.border.redbold

...

#db3735

#dd534b

var(-color-border -red-strong)

color.border.redstrong

...

#aa2424

#fa7e72

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -orange-moderate)

color.border.orangemoderate

...

#ff8c47

#7e4425

var(-color-border -orange-bold)

color.border.orangebold

...

#bc5921

#c3693a

var(-color-border -orange-strong)

color.border.orangestrong

...

#8e441a

#f08750

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -yellow-moderate)

color.border.yellowmoderate

...

#d5a334

#655027

var(-color-border -yellow-bold)

color.border.yellowbold

...

#947023

#9d7d39

var(-color-border -yellow-strong)

color.border.yellowstrong

...

#6f551d

#c59d4a

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -green-moderate)

color.border.greenmoderate

...

#63be74

#12602b

var(-color-border -green-bold)

color.border.greenbold

...

#008836

#30934b

var(-color-border -green-strong)

color.border.greenstrong

...

#006725

#63b473

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -grey-moderate)

color.border.greymoderate

...

#9eadb8

#425663

var(-color-border -grey-bold)

color.border.greybold

...

#60798b

#718492

var(-color-border -grey-strong)

color.border.greystrong

...

#435c6e

#97a5af

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -blue-moderate)

color.border.bluemoderate

...

#7fadef

#04568e

var(-color-border -blue-bold)

color.border.bluebold

...

#007acd

#3d85ca

var(-color-border -blue-strong)

color.border.bluestrong

...

#005aa0

#77a6e1

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -ultramarine-moderate)

color.border.ultramarinemoderate

...

#9fa9d4

#3f508e

var(-color-border -ultramarine-bold)

color.border.ultramarinebold

...

#6372b2

#717fb5

var(-color-border -ultramarine-strong)

color.border.ultramarinestrong

...

#44549b

#96a2cc

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -purple-moderate)

color.border.purplemoderate

...

#bf9ed9

#694288

var(-color-border -purple-bold)

color.border.purplebold

...

#9261b7

#9971b8

var(-color-border -purple-strong)

color.border.purplestrong

...

#744299

#b697cf

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -teal-moderate)

color.border.tealmoderate

...

#3dbcb8

#275b59

var(-color-border -teal-bold)

color.border.tealbold

...

#008480

#328e8a

var(-color-border -teal-strong)

color.border.tealstrong

...

#0a6361

#58b1ad

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-border -lime-moderate)

color.border.limemoderate

...

#9db603

#4e581e

var(-color-border -lime-bold)

color.border.limebold

...

#6c7d02

#78892a

var(-color-border -lime-strong)

color.border.limestrong

...

#525f0a

#97ac37

No alpha for this color yet

Color Text

Name Description Preview light Preview dark

var(-color-text -primary-_)

color.text.primary_

...

#171d21

#fafafb

var(-color-text -primary-hovered)

color.text.primaryhovered

...

#007acd

#3d85ca

var(-color-text -primary-focused)

color.text.primaryfocused

...

#007acd

#3d85ca

var(-color-text -primary-pressed)

color.text.primarypressed

...

#005aa0

#77a6e1

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -secondary-light)

color.text.secondarylight

...

var(-color-text -secondary-dark)

color.text.secondarydark

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -tertiary-_)

color.text.tertiary_

...

#60798b

#718492

var(-color-text -tertiary-hovered)

color.text.tertiaryhovered

...

#007acd

#3d85ca

var(-color-text -tertiary-focused)

color.text.tertiaryfocused

...

#007acd

#3d85ca

var(-color-text -tertiary-pressed)

color.text.tertiarypressed

...

#005aa0

#77a6e1

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -inverse-_)

color.text.inverse_

...

#ffffff

#15191d

var(-color-text -inverse-hovered)

color.text.inversehovered

...

#ebeef1

#1f262b

var(-color-text -inverse-focused)

color.text.inversefocused

...

#ebeef1

#1f262b

var(-color-text -inverse-pressed)

color.text.inversepressed

...

#ccd4da

#2e3942

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -brand-primary)

color.text.brandprimary

...

var(-color-text -brand-high_contrast)

color.text.brandhigh_contrast

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -danger-primary)

color.text.dangerprimary

...

var(-color-text -danger-secondary)

color.text.dangersecondary

...

#7f1d1b

#ffaea3

var(-color-text -danger-high_contrast)

color.text.dangerhigh_contrast

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -warning-primary)

color.text.warningprimary

...

var(-color-text -warning-secondary)

color.text.warningsecondary

...

#693315

#ffb182

var(-color-text -warning-high_contrast)

color.text.warninghigh_contrast

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -success-primary)

color.text.successprimary

...

var(-color-text -success-secondary)

color.text.successsecondary

...

#004d1c

#99d0a0

var(-color-text -success-high_contrast)

color.text.successhigh_contrast

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -information-primary)

color.text.informationprimary

...

var(-color-text -information-secondary)

color.text.informationsecondary

...

#004478

#a9c4ee

var(-color-text -information-high_contrast)

color.text.informationhigh_contrast

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -discovery-primary)

color.text.discoveryprimary

...

var(-color-text -discovery-secondary)

color.text.discoverysecondary

...

#533669

#d0bbe1

var(-color-text -discovery-high_contrast)

color.text.discoveryhigh_contrast

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -pink-primary)

color.text.pinkprimary

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -red-primary)

color.text.redprimary

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -orange-primary)

color.text.orangeprimary

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -yellow-primary)

color.text.yellowprimary

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -green-primary)

color.text.greenprimary

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -grey-primary)

color.text.greyprimary

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -blue-primary)

color.text.blueprimary

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -ultramarine-primary)

color.text.ultramarineprimary

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -purple-primary)

color.text.purpleprimary

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -teal-primary)

color.text.tealprimary

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-text -lime-primary)

color.text.limeprimary

...

No alpha for this color yet

Color Icons

Name Description Preview light Preview dark

var(-color-icon -tertiary-light)

color.icon.tertiarylight

...

var(-color-icon -tertiary-dark)

color.icon.tertiarydark

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -secondary-_)

color.icon.secondary_

...

#60798b

#718492

var(-color-icon -secondary-hovered)

color.icon.secondaryhovered

...

#435c6e

#97a5af

var(-color-icon -secondary-focused)

color.icon.secondaryfocused

...

#435c6e

#97a5af

var(-color-icon -secondary-pressed)

color.icon.secondarypressed

...

#334551

#bcc4cb

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -primary-light)

color.icon.primarylight

...

var(-color-icon -primary-dark)

color.icon.primarydark

...

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -inverse-primary)

color.icon.inverseprimary

...

#ffffff

#15191d

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -brand-secondary)

color.icon.brandsecondary

...

var(-color-icon -brand-primary)

color.icon.brandprimary

...

#004478

#a9c4ee

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -danger-secondary)

color.icon.dangersecondary

...

var(-color-icon -danger-primary)

color.icon.dangerprimary

...

#7f1d1b

#ffaea3

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -pink-secondary)

color.icon.pinksecondary

...

var(-color-icon -pink-primary)

color.icon.pinkprimary

...

#5c3749

#fbaccc

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -red-secondary)

color.icon.redsecondary

...

var(-color-icon -red-primary)

color.icon.redprimary

...

#7f1d1b

#ffaea3

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -orange-secondary)

color.icon.orangesecondary

...

var(-color-icon -orange-primary)

color.icon.orangeprimary

...

#693315

#ffb182

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -yellow-secondary)

color.icon.yellowsecondary

...

var(-color-icon -yellow-primary)

color.icon.yellowprimary

...

#533f18

#eabc5f

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -green-secondary)

color.icon.greensecondary

...

var(-color-icon -green-primary)

color.icon.greenprimary

...

#004d1c

#99d0a0

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -grey-secondary)

color.icon.greysecondary

...

var(-color-icon -grey-primary)

color.icon.greyprimary

...

#334551

#bcc4cb

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -blue-secondary)

color.icon.bluesecondary

...

var(-color-icon -blue-primary)

color.icon.blueprimary

...

#004478

#a9c4ee

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -ultramarine-secondary)

color.icon.ultramarinesecondary

...

var(-color-icon -ultramarine-primary)

color.icon.ultramarineprimary

...

#2b3d83

#bbc2df

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -purple-secondary)

color.icon.purplesecondary

...

var(-color-icon -purple-primary)

color.icon.purpleprimary

...

#533669

#d0bbe1

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -teal-secondary)

color.icon.tealsecondary

...

var(-color-icon -teal-primary)

color.icon.tealprimary

...

#154948

#8bcfcb

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-icon -lime-secondary)

color.icon.limesecondary

...

var(-color-icon -lime-primary)

color.icon.limeprimary

...

#3e460e

#b7cd4f

No alpha for this color yet

Palette

You should not use those tokens directly. We provide them for reference.

Name Description Preview light Preview dark

var(-color-palette -grey-0)

color.palette.grey0

...

#ffffff

#15191d

var(-color-palette -grey-100)

color.palette.grey100

...

#f6f8f9

#1a1f23

var(-color-palette -grey-200)

color.palette.grey200

...

#ebeef1

#1f262b

var(-color-palette -grey-300)

color.palette.grey300

...

#ccd4da

#2e3942

var(-color-palette -grey-400)

color.palette.grey400

...

#9eadb8

#425663

var(-color-palette -grey-500)

color.palette.grey500

...

#778c9b

#5c7181

var(-color-palette -grey-600)

color.palette.grey600

...

#60798b

#718492

var(-color-palette -grey-700)

color.palette.grey700

...

#435c6e

#97a5af

var(-color-palette -grey-800)

color.palette.grey800

...

#334551

#bcc4cb

var(-color-palette -grey-900)

color.palette.grey900

...

#232d35

#e2e5e9

var(-color-palette -grey-1000)

color.palette.grey1000

...

#171d21

#fafafb

Grey alphas

Name Description Preview light Preview dark

var(-color-palette -grey-alpha-0)

color.palette.grey.alpha0

...

transparent

transparent

var(-color-palette -grey-alpha-100)

color.palette.grey.alpha100

...

rgba(30, 80, 105, 0.04)

rgba(188, 225, 229, 0.03)

var(-color-palette -grey-alpha-200)

color.palette.grey.alpha200

...

rgba(5, 43, 80, 0.08)

rgba(164, 211, 229, 0.07)

var(-color-palette -grey-alpha-300)

color.palette.grey.alpha300

...

rgba(0, 40, 70, 0.2)

rgba(168, 213, 247, 0.17)

var(-color-palette -grey-alpha-400)

color.palette.grey.alpha400

...

rgba(6, 45, 73, 0.39)

rgba(166, 222, 255, 0.31)

var(-color-palette -grey-alpha-500)

color.palette.grey.alpha500

...

rgba(3, 42, 70, 0.54)

rgba(179, 221, 251, 0.45)

Name Description Preview light Preview dark

var(-color-palette -pink-100)

color.palette.pink100

...

#fff4f9

#211d1e

var(-color-palette -pink-200)

color.palette.pink200

...

#ffe9f3

#2a2326

var(-color-palette -pink-300)

color.palette.pink300

...

#ffc1df

#45333a

var(-color-palette -pink-400)

color.palette.pink400

...

#ff80bd

#7b4159

var(-color-palette -pink-500)

color.palette.pink500

...

#fb3492

#c13c72

var(-color-palette -pink-600)

color.palette.pink600

...

#e01b78

#e44284

var(-color-palette -pink-700)

color.palette.pink700

...

#963563

#f779ad

var(-color-palette -pink-800)

color.palette.pink800

...

#5c3749

#fbaccc

var(-color-palette -pink-900)

color.palette.pink900

...

#34282e

#fddcea

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-palette -red-100)

color.palette.red100

...

#fff7f5

#321613

var(-color-palette -red-200)

color.palette.red200

...

#ffeae5

#411a16

var(-color-palette -red-300)

color.palette.red300

...

#ffc5b9

#63221e

var(-color-palette -red-400)

color.palette.red400

...

#ff8979

#95302c

var(-color-palette -red-500)

color.palette.red500

...

#f34e46

#c3423c

var(-color-palette -red-600)

color.palette.red600

...

#db3735

#dd534b

var(-color-palette -red-700)

color.palette.red700

...

#aa2424

#fa7e72

var(-color-palette -red-800)

color.palette.red800

...

#7f1d1b

#ffaea3

var(-color-palette -red-900)

color.palette.red900

...

#521814

#ffddd7

Red alphas

Name Description Preview light Preview dark

var(-color-palette -red-alpha-0)

color.palette.red.alpha0

...

transparent

transparent

var(-color-palette -red-alpha-100)

color.palette.red.alpha100

...

rgba(255, 55, 5, 0.04)

rgba(104, 16, 0, 0.35)

var(-color-palette -red-alpha-200)

color.palette.red.alpha200

...

rgba(255, 64, 19, 0.11)

rgba(197, 29, 1, 0.25)

var(-color-palette -red-alpha-300)

color.palette.red.alpha300

...

rgba(255, 48, 5, 0.28)

rgba(250, 51, 32, 0.34)

Name Description Preview light Preview dark

var(-color-palette -orange-100)

color.palette.orange100

...

#fff5ed

#2c1b12

var(-color-palette -orange-200)

color.palette.orange200

...

#ffeada

#372015

var(-color-palette -orange-300)

color.palette.orange300

...

#ffc89d

#542f1b

var(-color-palette -orange-400)

color.palette.orange400

...

#ff8c47

#7e4425

var(-color-palette -orange-500)

color.palette.orange500

...

#d96929

#a85a31

var(-color-palette -orange-600)

color.palette.orange600

...

#bc5921

#c3693a

var(-color-palette -orange-700)

color.palette.orange700

...

#8e441a

#f08750

var(-color-palette -orange-800)

color.palette.orange800

...

#693315

#ffb182

var(-color-palette -orange-900)

color.palette.orange900

...

#442312

#ffdfc8

Orange alphas

Name Description Preview light Preview dark

var(-color-palette -orange-alpha-0)

color.palette.orange.alpha0

...

transparent

transparent

var(-color-palette -orange-alpha-100)

color.palette.orange.alpha100

...

rgba(255, 130, 30, 0.08)

rgba(82, 30, 0, 0.38)

var(-color-palette -orange-alpha-200)

color.palette.orange.alpha200

...

rgba(255, 115, 8, 0.15)

rgba(142, 50, 0, 0.28)

var(-color-palette -orange-alpha-300)

color.palette.orange.alpha300

...

rgba(255, 114, 4, 0.39)

rgba(254, 106, 22, 0.27)

Name Description Preview light Preview dark

var(-color-palette -yellow-100)

color.palette.yellow100

...

#fff7e0

#251e13

var(-color-palette -yellow-200)

color.palette.yellow200

...

#ffeeb4

#2c2416

var(-color-palette -yellow-300)

color.palette.yellow300

...

#ffcc59

#43361d

var(-color-palette -yellow-400)

color.palette.yellow400

...

#d5a334

#655027

var(-color-palette -yellow-500)

color.palette.yellow500

...

#ab8327

#866b32

var(-color-palette -yellow-600)

color.palette.yellow600

...

#947023

#9d7d39

var(-color-palette -yellow-700)

color.palette.yellow700

...

#6f551d

#c59d4a

var(-color-palette -yellow-800)

color.palette.yellow800

...

#533f18

#eabc5f

var(-color-palette -yellow-900)

color.palette.yellow900

...

#362a13

#ffe299

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-palette -green-100)

color.palette.green100

...

#f3faf4

#102313

var(-color-palette -green-200)

color.palette.green200

...

#e2f3e3

#112b16

var(-color-palette -green-300)

color.palette.green300

...

#aedfb3

#12401e

var(-color-palette -green-400)

color.palette.green400

...

#63be74

#12602b

var(-color-palette -green-500)

color.palette.green500

...

#199d47

#1d7f3c

var(-color-palette -green-600)

color.palette.green600

...

#008836

#30934b

var(-color-palette -green-700)

color.palette.green700

...

#006725

#63b473

var(-color-palette -green-800)

color.palette.green800

...

#004d1c

#99d0a0

var(-color-palette -green-900)

color.palette.green900

...

#0a3315

#d4ebd6

Green alphas

Name Description Preview light Preview dark

var(-color-palette -green-alpha-0)

color.palette.green.alpha0

...

transparent

transparent

var(-color-palette -green-alpha-100)

color.palette.green.alpha100

...

rgba(35, 155, 35, 0.05)

rgba(7, 54, 0, 0.35)

var(-color-palette -green-alpha-200)

color.palette.green.alpha200

...

rgba(13, 155, 22, 0.12)

rgba(5, 97, 1, 0.25)

var(-color-palette -green-alpha-300)

color.palette.green.alpha300

...

rgba(2, 155, 18, 0.32)

rgba(3, 254, 35, 0.17)

Name Description Preview light Preview dark

var(-color-palette -blue-100)

color.palette.blue100

...

#f6f8fd

#111f2e

var(-color-palette -blue-200)

color.palette.blue200

...

#e7eefc

#12263b

var(-color-palette -blue-300)

color.palette.blue300

...

#c0d4f9

#0f3a5e

var(-color-palette -blue-400)

color.palette.blue400

...

#7fadef

#04568e

var(-color-palette -blue-500)

color.palette.blue500

...

#3c8cde

#1c73b6

var(-color-palette -blue-600)

color.palette.blue600

...

#007acd

#3d85ca

var(-color-palette -blue-700)

color.palette.blue700

...

#005aa0

#77a6e1

var(-color-palette -blue-800)

color.palette.blue800

...

#004478

#a9c4ee

var(-color-palette -blue-900)

color.palette.blue900

...

#0b2d4e

#dbe5f8

Blue alphas

Name Description Preview light Preview dark

var(-color-palette -blue-alpha-0)

color.palette.blue.alpha0

...

transparent

transparent

var(-color-palette -blue-alpha-100)

color.palette.blue.alpha100

...

rgba(30, 80, 205, 0.04)

rgba(1, 55, 114, 0.2)

var(-color-palette -blue-alpha-200)

color.palette.blue.alpha200

...

rgba(15, 85, 225, 0.1)

rgba(1, 112, 229, 0.15)

var(-color-palette -blue-alpha-300)

color.palette.blue.alpha300

...

rgba(3, 83, 231, 0.25)

rgba(0, 139, 253, 0.29)

Name Description Preview light Preview dark

var(-color-palette -ultramarine-100)

color.palette.ultramarine100

...

#f6f7fb

#171d37

var(-color-palette -ultramarine-200)

color.palette.ultramarine200

...

#eceef7

#17224b

var(-color-palette -ultramarine-300)

color.palette.ultramarine300

...

#ccd1e9

#25346e

var(-color-palette -ultramarine-400)

color.palette.ultramarine400

...

#9fa9d4

#3f508e

var(-color-palette -ultramarine-500)

color.palette.ultramarine500

...

#7986bf

#5d6ca7

var(-color-palette -ultramarine-600)

color.palette.ultramarine600

...

#6372b2

#717fb5

var(-color-palette -ultramarine-700)

color.palette.ultramarine700

...

#44549b

#96a2cc

var(-color-palette -ultramarine-800)

color.palette.ultramarine800

...

#2b3d83

#bbc2df

var(-color-palette -ultramarine-900)

color.palette.ultramarine900

...

#182663

#e1e4f1

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-palette -purple-100)

color.palette.purple100

...

#faf7fc

#201d22

var(-color-palette -purple-200)

color.palette.purple200

...

#f2ecf7

#28232c

var(-color-palette -purple-300)

color.palette.purple300

...

#deccec

#41324e

var(-color-palette -purple-400)

color.palette.purple400

...

#bf9ed9

#694288

var(-color-palette -purple-500)

color.palette.purple500

...

#a377c5

#875da9

var(-color-palette -purple-600)

color.palette.purple600

...

#9261b7

#9971b8

var(-color-palette -purple-700)

color.palette.purple700

...

#744299

#b697cf

var(-color-palette -purple-800)

color.palette.purple800

...

#533669

#d0bbe1

var(-color-palette -purple-900)

color.palette.purple900

...

#312838

#ebe1f2

Purple alphas

Name Description Preview light Preview dark

var(-color-palette -purple-alpha-0)

color.palette.purple.alpha0

...

transparent

transparent

var(-color-palette -purple-alpha-100)

color.palette.purple.alpha100

...

rgba(130, 55, 180, 0.04)

rgba(241, 105, 129, 0.05)

var(-color-palette -purple-alpha-200)

color.palette.purple.alpha200

...

rgba(93, 18, 155, 0.08)

rgba(232, 136, 196, 0.09)

var(-color-palette -purple-alpha-300)

color.palette.purple.alpha300

...

rgba(90, 0, 160, 0.20)

rgba(221, 139, 252, 0.22)

Name Description Preview light Preview dark

var(-color-palette -teal-100)

color.palette.teal100

...

#f1fafa

#191f1f

var(-color-palette -teal-200)

color.palette.teal200

...

#daf4f3

#1d2727

var(-color-palette -teal-300)

color.palette.teal300

...

#95dfdd

#243c3b

var(-color-palette -teal-400)

color.palette.teal400

...

#3dbcb8

#275b59

var(-color-palette -teal-500)

color.palette.teal500

...

#0a9994

#297a77

var(-color-palette -teal-600)

color.palette.teal600

...

#008480

#328e8a

var(-color-palette -teal-700)

color.palette.teal700

...

#0a6361

#58b1ad

var(-color-palette -teal-800)

color.palette.teal800

...

#154948

#8bcfcb

var(-color-palette -teal-900)

color.palette.teal900

...

#192f2f

#ccebea

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-palette -lime-100)

color.palette.lime100

...

#f8fad5

#1e2010

var(-color-palette -lime-200)

color.palette.lime200

...

#eef5a8

#242713

var(-color-palette -lime-300)

color.palette.lime300

...

#c7de43

#353b18

var(-color-palette -lime-400)

color.palette.lime400

...

#9db603

#4e581e

var(-color-palette -lime-500)

color.palette.lime500

...

#7d9200

#677525

var(-color-palette -lime-600)

color.palette.lime600

...

#6c7d02

#78892a

var(-color-palette -lime-700)

color.palette.lime700

...

#525f0a

#97ac37

var(-color-palette -lime-800)

color.palette.lime800

...

#3e460e

#b7cd4f

var(-color-palette -lime-900)

color.palette.lime900

...

#2a2e0e

#dfed90

No alpha for this color yet

Name Description Preview light Preview dark

var(-color-palette -engie-blue)

color.palette.engieblue

...

#00AAFF

#00AAFF

var(-color-palette -engie-green)

color.palette.engiegreen

...

#23d2b5

#23d2b5

No alpha for this color yet

Color Base

Base tokens map directly to the color palette and provides the brand color, the neutrals (variations of gray), the success, warning and danger theme colors and the Engie gradient.

You should only use these base tokens if you don’t find the appropriate semantic token for your usage.

Name Description Preview light Preview dark

var(-color-base -brand-100)

color.base.brand100

...

#f6f8fd

#111f2e

var(-color-base -brand-200)

color.base.brand200

...

#e7eefc

#12263b

var(-color-base -brand-300)

color.base.brand300

...

#c0d4f9

#0f3a5e

var(-color-base -brand-400)

color.base.brand400

...

#7fadef

#04568e

var(-color-base -brand-500)

color.base.brand500

...

#3c8cde

#1c73b6

var(-color-base -brand-600)

color.base.brand600

...

#007acd

#3d85ca

var(-color-base -brand-700)

color.base.brand700

...

#005aa0

#77a6e1

var(-color-base -brand-800)

color.base.brand800

...

#004478

#a9c4ee

var(-color-base -brand-900)

color.base.brand900

...

#0b2d4e

#dbe5f8

Brand alphas

Name Description Preview light Preview dark

var(-color-base -brand-alpha-0)

color.base.brand.alpha0

...

transparent

transparent

var(-color-base -brand-alpha-100)

color.base.brand.alpha100

...

rgba(30, 80, 205, 0.04)

rgba(1, 55, 114, 0.2)

var(-color-base -brand-alpha-200)

color.base.brand.alpha200

...

rgba(15, 85, 225, 0.1)

rgba(1, 112, 229, 0.15)

var(-color-base -brand-alpha-300)

color.base.brand.alpha300

...

rgba(3, 83, 231, 0.25)

rgba(0, 139, 253, 0.29)

Name Description Preview light Preview dark

var(-color-base -neutral-0)

color.base.neutral0

...

#ffffff

#15191d

var(-color-base -neutral-100)

color.base.neutral100

...

#f6f8f9

#1a1f23

var(-color-base -neutral-200)

color.base.neutral200

...

#ebeef1

#1f262b

var(-color-base -neutral-300)

color.base.neutral300

...

#ccd4da

#2e3942

var(-color-base -neutral-400)

color.base.neutral400

...

#9eadb8

#425663

var(-color-base -neutral-500)

color.base.neutral500

...

#778c9b

#5c7181

var(-color-base -neutral-600)

color.base.neutral600

...

#60798b

#718492

var(-color-base -neutral-700)

color.base.neutral700

...

#435c6e

#97a5af

var(-color-base -neutral-800)

color.base.neutral800

...

#334551

#bcc4cb

var(-color-base -neutral-900)

color.base.neutral900

...

#232d35

#e2e5e9

var(-color-base -neutral-1000)

color.base.neutral1000

...

#171d21

#fafafb

Neutral alphas

Name Description Preview light Preview dark

var(-color-base -neutral-alpha-0)

color.base.neutral.alpha0

...

transparent

transparent

var(-color-base -neutral-alpha-100)

color.base.neutral.alpha100

...

rgba(30, 80, 105, 0.04)

rgba(188, 225, 229, 0.03)

var(-color-base -neutral-alpha-200)

color.base.neutral.alpha200

...

rgba(5, 43, 80, 0.08)

rgba(164, 211, 229, 0.07)

var(-color-base -neutral-alpha-300)

color.base.neutral.alpha300

...

rgba(0, 40, 70, 0.2)

rgba(168, 213, 247, 0.17)

var(-color-base -neutral-alpha-400)

color.base.neutral.alpha400

...

rgba(6, 45, 73, 0.39)

rgba(166, 222, 255, 0.31)

var(-color-base -neutral-alpha-500)

color.base.neutral.alpha500

...

rgba(3, 42, 70, 0.54)

rgba(179, 221, 251, 0.45)

Name Description Preview light Preview dark

var(-color-base -danger-100)

color.base.danger100

...

#fff7f5

#321613

var(-color-base -danger-200)

color.base.danger200

...

#ffeae5

#411a16

var(-color-base -danger-300)

color.base.danger300

...

#ffc5b9

#63221e

var(-color-base -danger-400)

color.base.danger400

...

#ff8979

#95302c

var(-color-base -danger-500)

color.base.danger500

...

#f34e46

#c3423c

var(-color-base -danger-600)

color.base.danger600

...

#db3735

#dd534b

var(-color-base -danger-700)

color.base.danger700

...

#aa2424

#fa7e72

var(-color-base -danger-800)

color.base.danger800

...

#7f1d1b

#ffaea3

var(-color-base -danger-900)

color.base.danger900

...

#521814

#ffddd7

Danger alphas

Name Description Preview light Preview dark

var(-color-base -danger-alpha-0)

color.base.danger.alpha0

...

transparent

transparent

var(-color-base -danger-alpha-100)

color.base.danger.alpha100

...

rgba(255, 55, 5, 0.04)

rgba(104, 16, 0, 0.35)

var(-color-base -danger-alpha-200)

color.base.danger.alpha200

...

rgba(255, 64, 19, 0.11)

rgba(197, 29, 1, 0.25)

var(-color-base -danger-alpha-300)

color.base.danger.alpha300

...

rgba(255, 48, 5, 0.28)

rgba(250, 51, 32, 0.34)

Name Description Preview light Preview dark

var(-color-base -success-100)

color.base.success100

...

#f3faf4

#102313

var(-color-base -success-200)

color.base.success200

...

#e2f3e3

#112b16

var(-color-base -success-300)

color.base.success300

...

#aedfb3

#12401e

var(-color-base -success-400)

color.base.success400

...

#63be74

#12602b

var(-color-base -success-500)

color.base.success500

...

#199d47

#1d7f3c

var(-color-base -success-600)

color.base.success600

...

#008836

#30934b

var(-color-base -success-700)

color.base.success700

...

#006725

#63b473

var(-color-base -success-800)

color.base.success800

...

#004d1c

#99d0a0

var(-color-base -success-900)

color.base.success900

...

#0a3315

#d4ebd6

Success alphas

Name Description Preview light Preview dark

var(-color-base -success-alpha-0)

color.base.success.alpha0

...

transparent

transparent

var(-color-base -success-alpha-100)

color.base.success.alpha100

...

rgba(35, 155, 35, 0.05)

rgba(7, 54, 0, 0.35)

var(-color-base -success-alpha-200)

color.base.success.alpha200

...

rgba(13, 155, 22, 0.12)

rgba(5, 97, 1, 0.25)

var(-color-base -success-alpha-300)

color.base.success.alpha300

...

rgba(2, 155, 18, 0.32)

rgba(3, 254, 35, 0.17)

Name Description Preview light Preview dark

var(-color-base -warning-100)

color.base.warning100

...

#fff5ed

#2c1b12

var(-color-base -warning-200)

color.base.warning200

...

#ffeada

#372015

var(-color-base -warning-300)

color.base.warning300

...

#ffc89d

#542f1b

var(-color-base -warning-400)

color.base.warning400

...

#ff8c47

#7e4425

var(-color-base -warning-500)

color.base.warning500

...

#d96929

#a85a31

var(-color-base -warning-600)

color.base.warning600

...

#bc5921

#c3693a

var(-color-base -warning-700)

color.base.warning700

...

#8e441a

#f08750

var(-color-base -warning-800)

color.base.warning800

...

#693315

#ffb182

var(-color-base -warning-900)

color.base.warning900

...

#442312

#ffdfc8

Warning alphas

Name Description Preview light Preview dark

var(-color-base -warning-alpha-0)

color.base.warning.alpha0

...

transparent

transparent

var(-color-base -warning-alpha-100)

color.base.warning.alpha100

...

rgba(255, 130, 30, 0.08)

rgba(82, 30, 0, 0.38)

var(-color-base -warning-alpha-200)

color.base.warning.alpha200

...

rgba(255, 115, 8, 0.15)

rgba(142, 50, 0, 0.28)

var(-color-base -warning-alpha-300)

color.base.warning.alpha300

...

rgba(255, 114, 4, 0.39)

rgba(254, 106, 22, 0.27)

Name Description Preview light Preview dark

var(-color-base -discovery-100)

color.base.discovery100

...

#faf7fc

#201d22

var(-color-base -discovery-200)

color.base.discovery200

...

#f2ecf7

#28232c

var(-color-base -discovery-300)

color.base.discovery300

...

#deccec

#41324e

var(-color-base -discovery-400)

color.base.discovery400

...

#bf9ed9

#694288

var(-color-base -discovery-500)

color.base.discovery500

...

#a377c5

#875da9

var(-color-base -discovery-600)

color.base.discovery600

...

#9261b7

#9971b8

var(-color-base -discovery-700)

color.base.discovery700

...

#744299

#b697cf

var(-color-base -discovery-800)

color.base.discovery800

...

#533669

#d0bbe1

var(-color-base -discovery-900)

color.base.discovery900

...

#312838

#ebe1f2

Discovery alphas

Name Description Preview light Preview dark

var(-color-base -discovery-alpha-0)

color.base.discovery.alpha0

...

transparent

transparent

var(-color-base -discovery-alpha-100)

color.base.discovery.alpha100

...

rgba(130, 55, 180, 0.04)

rgba(241, 105, 129, 0.05)

var(-color-base -discovery-alpha-200)

color.base.discovery.alpha200

...

rgba(93, 18, 155, 0.08)

rgba(232, 136, 196, 0.09)

var(-color-base -discovery-alpha-300)

color.base.discovery.alpha300

...

rgba(90, 0, 160, 0.20)

rgba(221, 139, 252, 0.22)

Name Description Preview light Preview dark

var(-color-base -information-100)

color.base.information100

...

#f6f8fd

#111f2e

var(-color-base -information-200)

color.base.information200

...

#e7eefc

#12263b

var(-color-base -information-300)

color.base.information300

...

#c0d4f9

#0f3a5e

var(-color-base -information-400)

color.base.information400

...

#7fadef

#04568e

var(-color-base -information-500)

color.base.information500

...

#3c8cde

#1c73b6

var(-color-base -information-600)

color.base.information600

...

#007acd

#3d85ca

var(-color-base -information-700)

color.base.information700

...

#005aa0

#77a6e1

var(-color-base -information-800)

color.base.information800

...

#004478

#a9c4ee

var(-color-base -information-900)

color.base.information900

...

#0b2d4e

#dbe5f8

Information alphas

Name Description Preview light Preview dark

var(-color-base -information-alpha-0)

color.base.information.alpha0

...

transparent

transparent

var(-color-base -information-alpha-100)

color.base.information.alpha100

...

rgba(30, 80, 205, 0.04)

rgba(1, 55, 114, 0.2)

var(-color-base -information-alpha-200)

color.base.information.alpha200

...

rgba(15, 85, 225, 0.1)

rgba(1, 112, 229, 0.15)

var(-color-base -information-alpha-300)

color.base.information.alpha300

...

rgba(3, 83, 231, 0.25)

rgba(0, 139, 253, 0.29)

Name Description Preview light Preview dark

var(-color-base -gradient-light)

color.base.gradientlight

...

var(-color-base -gradient-dark)

color.base.gradientdark

...

No alpha for this color yet