Design Tokens
Design tokens are a tech-agnostic way to store variables. Variable naming convention follows CTI (Category / Type / Item) structure.
Coming soon
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 |
---|
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
Primary
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
Secondary
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
Tertiary
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
Neutral
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
Transparent
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
Inverse
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
High_contrast
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-background -high_contrast-_) color.background.high_contrast_ |
... |
#232d35 |
#e2e5e9 |
No alpha for this color yet
Backdrop
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
Brand
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
Danger
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
Success
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
Warning
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
Discovery
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
Information
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
Pink
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
Red
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
Orange
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
Yellow
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
Green
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
Grey
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
Blue
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
Ultramarine
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
Purple
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
Teal
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
Lime
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
Minimal
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
Subtle
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
Moderate
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
Bold
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
Strong
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
Contrast
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
Hovered
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
Focused
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-border -focused-_) color.border.focused_ |
... |
#007acd |
#3d85ca |
No alpha for this color yet
Brand
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
Inverse
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
Danger
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
Warning
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
Success
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
Discovery
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
Information
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
Pink
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
Red
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
Orange
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
Yellow
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
Green
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
Grey
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
Blue
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
Ultramarine
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
Purple
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
Teal
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
Lime
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
Primary
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
Secondary
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
Tertiary
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
Inverse
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
Brand
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
Danger
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
Warning
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
Success
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
Information
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
Discovery
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
Pink
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -pink-primary) color.text.pinkprimary |
... |
No alpha for this color yet
Red
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -red-primary) color.text.redprimary |
... |
No alpha for this color yet
Orange
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -orange-primary) color.text.orangeprimary |
... |
No alpha for this color yet
Yellow
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -yellow-primary) color.text.yellowprimary |
... |
No alpha for this color yet
Green
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -green-primary) color.text.greenprimary |
... |
No alpha for this color yet
Grey
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -grey-primary) color.text.greyprimary |
... |
No alpha for this color yet
Blue
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -blue-primary) color.text.blueprimary |
... |
No alpha for this color yet
Ultramarine
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -ultramarine-primary) color.text.ultramarineprimary |
... |
No alpha for this color yet
Purple
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -purple-primary) color.text.purpleprimary |
... |
No alpha for this color yet
Teal
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -teal-primary) color.text.tealprimary |
... |
No alpha for this color yet
Lime
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-text -lime-primary) color.text.limeprimary |
... |
No alpha for this color yet
Color Icons
Tertiary
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
Secondary
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
Primary
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
Inverse
Name | Description | Preview light | Preview dark |
---|---|---|---|
var(-color-icon -inverse-primary) color.icon.inverseprimary |
... |
#ffffff |
#15191d |
No alpha for this color yet
Brand
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
Danger
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
Pink
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
Red
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
Orange
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
Yellow
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
Green
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
Grey
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
Blue
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
Ultramarine
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
Purple
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
Teal
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
Lime
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.
Grey
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) |
Pink
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
Red
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) |
Orange
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) |
Yellow
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
Green
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) |
Blue
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) |
Ultramarine
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
Purple
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) |
Teal
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
Lime
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
Engie
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.
Brand
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) |
Neutral
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) |
Danger
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) |
Success
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) |
Warning
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) |
Discovery
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) |
Information
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) |
Gradient
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