Skip to content

Color

TIP

Some colors vary between light and dark modes. Use the color mode switcher in the site header to see the colors in the different modes. Using design tokens rather than raw hex codes will ensure you're automatically using the right color for the right mode.

Text colors

List of design token names, values and metadata for background-color
NameValue
color-base#202122

Defined in src/application.json

Refers to color.gray900

color-base-fixed#202122

Defined in src/application.json

Refers to color.gray900

color-base--hover#404244

Defined in src/application.json

Refers to color.gray700

color-emphasized#101418

Defined in src/application.json

Refers to color.gray1000

color-subtle#54595d

Defined in src/application.json

Refers to color.gray600

color-placeholder#72777d

Defined in src/application.json

Refers to color.gray500

color-disabled#72777d

Defined in src/application.json

Refers to color.gray500

color-inverted#fff

Defined in src/application.json

Refers to color.white

color-inverted-fixed#fff

Defined in src/application.json

Refers to color.white

The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes.

color-progressive#36c

Defined in src/application.json

Refers to color.blue700

'Progressive' Color and states

color-progressive--hover#4b77d6

Defined in src/application.json

Refers to color.blue600

color-progressive--active#233566

Defined in src/application.json

Refers to color.blue900

color-progressive--focus#36c

Defined in src/application.json

Refers to color.blue700

color-destructive#d73333

Defined in src/application.json

Refers to color.red600

'Destructive' Color and states

color-destructive--hover#fc493b

Defined in src/application.json

Refers to color.red500

color-destructive--active#9f3526

Defined in src/application.json

Refers to color.red800

color-destructive--focus#36c

Defined in src/application.json

Refers to color.blue700

color-visited#6a60b0

Defined in src/application.json

Refers to color.purple700

'Visited' color. In combination with progressive. Used for default links.

color-destructive--visited#9f5555

Defined in src/application.json

Refers to color.maroon700

Red link 'Visited' color. Used for visited red links.

color-error#d73333

Defined in src/application.json

Refers to color.red600

color-warning#eeb533

Defined in src/application.json

Refers to color.yellow300

Note, this is only meant for warning icon for contrast reasons.

color-success#177860

Defined in src/application.json

Refers to color.green700

Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White.

color-notice#202122

Defined in src/application.json

Refers to color.gray900

color-content-added#006400

Defined in src/application.json

Refers to color.green999

color-content-removed#8b0000

Defined in src/application.json

Refers to color.red999

color-base--subtle

deprecated

#54595d

Defined in src/application.json

Refers to color.gray600

Deprecated: Use `color-subtle` instead. Note, that `color-subtle` is using `color.gray600` instead of `color.gray500` now. (use `color-gray600` instead)

#d73333

Defined in src/components.json

Refers to color.destructive

Red ('new') Link color and states

#fc493b

Defined in src/components.json

Refers to color.destructive--hover

#9f3526

Defined in src/components.json

Refers to color.destructive--active

#36c

Defined in src/components.json

Refers to color.destructive--focus

#9f5555

Defined in src/components.json

Refers to color.destructive--visited

Background colors

List of design token names, values and metadata for background-color
NameValue
background-color-base#fff

Defined in src/application.json

Refers to color.white

Background Colors for static elements (for page layout, sections, etc.) from here on.

background-color-base-fixed#fff

Defined in src/application.json

Refers to color.white

The same as background-color-base in light mode, but does not change in dark mode. Use this for things that should be white in both modes.

background-color-neutral#eaecf0

Defined in src/application.json

Refers to color.gray100

background-color-neutral-subtle#f8f9fa

Defined in src/application.json

Refers to color.gray50

background-color-interactive#eaecf0

Defined in src/application.json

Refers to color.gray100

background-color-interactive-subtle#f8f9fa

Defined in src/application.json

Refers to color.gray50

background-color-disabled#c8ccd1

Defined in src/application.json

Refers to color.gray300

Components like Buttons, Checkboxes, Radios, ProgressBars….

background-color-disabled-subtle#eaecf0

Defined in src/application.json

Refers to color.gray100

Components like TextInputs, Selects….

background-color-inverted#101418

Defined in src/application.json

Refers to color.gray1000

background-color-progressive#36c

Defined in src/application.json

Refers to color.blue700

background-color-progressive--hover#4b77d6

Defined in src/application.json

Refers to color.blue600

background-color-progressive--active#233566

Defined in src/application.json

Refers to color.blue900

background-color-progressive--focus#36c

Defined in src/application.json

Refers to color.blue700

background-color-progressive-subtle#f1f4fd

Defined in src/application.json

Refers to color.blue50

background-color-destructive#d73333

Defined in src/application.json

Refers to color.red600

background-color-destructive--hover#fc493b

Defined in src/application.json

Refers to color.red500

background-color-destructive--active#9f3526

Defined in src/application.json

Refers to color.red800

background-color-destructive--focus#36c

Defined in src/application.json

Refers to color.blue700

background-color-destructive-subtle#ffe9e5

Defined in src/application.json

Refers to color.red50

background-color-error#d73333

Defined in src/application.json

Refers to color.red600

background-color-error--hover#fc493b

Defined in src/application.json

Refers to color.red500

background-color-error--active#9f3526

Defined in src/application.json

Refers to color.red800

background-color-error-subtle#ffe9e5

Defined in src/application.json

Refers to color.red50

background-color-warning-subtle#fdf2d5

Defined in src/application.json

Refers to color.yellow50

background-color-success-subtle#dff2eb

Defined in src/application.json

Refers to color.green50

background-color-notice-subtle#eaecf0

Defined in src/application.json

Refers to color.gray100

background-color-content-added#a3d3ff

Defined in src/application.json

Refers to color.blue999

background-color-content-removed#ffe49c

Defined in src/application.json

Refers to color.yellow999

background-color-transparenttransparent

Defined in src/application.json

Refers to color.transparent

background-color-backdrop-lightrgba( 255, 255, 255, 0.65 )

Defined in src/application.json

Refers to color.opacity-medium-light

Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask.

background-color-backdrop-darkrgba( 0, 0, 0, 0.65 )

Defined in src/application.json

Refers to color.opacity-medium-dark

background-color-button-quiet--hoverrgba( 0, 24, 73, 0.027 )

Defined in src/components.json

Refers to color.modifier-gray100-translucent

background-color-button-quiet--activergba( 0, 24, 73, 0.082 )

Defined in src/components.json

Refers to color.modifier-gray200-translucent

background-color-input-binary--checked#36c

Defined in src/components.json

Refers to color.blue700

background-color-tab-list-item-framed--hoverrgba( 255, 255, 255, 0.3 )

Defined in src/components.json

Refers to color.opacity-low-light

background-color-tab-list-item-framed--activergba( 255, 255, 255, 0.65 )

Defined in src/components.json

Refers to color.opacity-medium-light

Accent color

List of design token names, values and metadata for background-color
NameValue
accent-color-base#36c

Defined in src/application.json

Refers to color.accent

Border and box-shadow colors

For information on border colors visit Border and for box-shadow colors Box-shadow token page.