Skip to content

Color

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.gray750

color-base--hover#404244

Defined in src/application.json

Refers to color.gray650

Aimed to be replaced by `color.gray600` in future.

color-emphasized#000

Defined in src/application.json

Refers to color.black

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.blue600

'Progressive' Color and states

color-progressive--hover#447ff5

Defined in src/application.json

Refers to color.blue500

color-progressive--active#2a4b8d

Defined in src/application.json

Refers to color.blue700

color-progressive--focus#36c

Defined in src/application.json

Refers to color.blue600

color-destructive#d73333

Defined in src/application.json

Refers to color.red600

'Destructive' Color and states

color-destructive--hover#ff4242

Defined in src/application.json

Refers to color.red500

color-destructive--active#b32424

Defined in src/application.json

Refers to color.red700

color-destructive--focus#36c

Defined in src/application.json

Refers to color.blue600

color-visited#6b4ba1

Defined in src/application.json

Refers to color.purple600

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

color-destructive--visited#a55858

Defined in src/application.json

Refers to color.maroon500

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

color-error#d73333

Defined in src/application.json

Refers to color.red600

color-warning#edab00

Defined in src/application.json

Refers to color.yellow600

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

color-success#14866d

Defined in src/application.json

Refers to color.green600

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.gray750

color-content-added#36c

Defined in src/application.json

Refers to color.blue600

color-content-removed#a66200

Defined in src/application.json

Refers to color.yellow700

color-base--subtle

deprecated

#72777d

Defined in src/application.json

Refers to color.gray500

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

#d73333

Defined in src/components.json

Refers to color.destructive

Red ('new') Link color and states

#ff4242

Defined in src/components.json

Refers to color.destructive--hover

#b32424

Defined in src/components.json

Refers to color.destructive--active

#36c

Defined in src/components.json

Refers to color.destructive--focus

#a55858

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-interactive#eaecf0

Defined in src/application.json

Refers to color.gray200

background-color-interactive-subtle#f8f9fa

Defined in src/application.json

Refers to color.gray100

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.gray200

Components like TextInputs, Selects….

background-color-progressive#36c

Defined in src/application.json

Refers to color.blue600

background-color-progressive--hover#447ff5

Defined in src/application.json

Refers to color.blue500

background-color-progressive--active#2a4b8d

Defined in src/application.json

Refers to color.blue700

background-color-progressive--focus#36c

Defined in src/application.json

Refers to color.blue600

background-color-progressive-subtle#eaf3ff

Defined in src/application.json

Refers to color.blue100

background-color-destructive#d73333

Defined in src/application.json

Refers to color.red600

background-color-destructive--hover#ff4242

Defined in src/application.json

Refers to color.red500

background-color-destructive--active#b32424

Defined in src/application.json

Refers to color.red700

background-color-destructive--focus#36c

Defined in src/application.json

Refers to color.blue600

background-color-destructive-subtle#fee7e6

Defined in src/application.json

Refers to color.red100

background-color-error#d73333

Defined in src/application.json

Refers to color.red600

background-color-error--hover#ff4242

Defined in src/application.json

Refers to color.red500

background-color-error--active#b32424

Defined in src/application.json

Refers to color.red700

background-color-error-subtle#fee7e6

Defined in src/application.json

Refers to color.red100

background-color-warning-subtle#fef6e7

Defined in src/application.json

Refers to color.yellow100

background-color-success-subtle#d5fdf4

Defined in src/application.json

Refers to color.green100

background-color-notice-subtle#eaecf0

Defined in src/application.json

Refers to color.gray200

background-color-content-added#6d8af2

Defined in src/application.json

Refers to color.blue400

background-color-content-removed#ad822b

Defined in src/application.json

Refers to color.yellow650

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-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.gray200

background-color-neutral-subtle#f8f9fa

Defined in src/application.json

Refers to color.gray100

background-color-transparenttransparent

Defined in src/application.json

Refers to color.transparent

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.blue600

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.