Skip to content

Color

Text colors

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

Defined in src/modes/base.json

Refers to color.gray700

color-base--hover#404244

Defined in src/modes/base.json

Refers to color.gray650

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

color-emphasized#000

Defined in src/modes/base.json

Refers to color.black

color-subtle#54595d

Defined in src/modes/base.json

Refers to color.gray600

color-placeholder#72777d

Defined in src/modes/base.json

Refers to color.gray500

color-disabled#72777d

Defined in src/modes/base.json

Refers to color.gray500

color-inverted#fff

Defined in src/modes/base.json

Refers to color.white

color-progressive#36c

Defined in src/modes/base.json

Refers to color.blue600

'Progressive' Color and states

color-progressive--hover#447ff5

Defined in src/modes/base.json

Refers to color.blue500

color-progressive--active#2a4b8d

Defined in src/modes/base.json

Refers to color.blue700

color-progressive--focus#36c

Defined in src/modes/base.json

Refers to color.blue600

color-destructive#d73333

Defined in src/modes/base.json

Refers to color.red600

'Destructive' Color and states

color-destructive--hover#ff4242

Defined in src/modes/base.json

Refers to color.red500

color-destructive--active#b32424

Defined in src/modes/base.json

Refers to color.red700

color-destructive--focus#d73333

Defined in src/modes/base.json

Refers to color.red600

color-visited#6b4ba1

Defined in src/modes/base.json

Refers to color.purple

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

color-error#d73333

Defined in src/modes/base.json

Refers to color.red600

color-warning#edab00

Defined in src/modes/base.json

Refers to color.yellow600

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

color-success#14866d

Defined in src/modes/base.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/modes/base.json

Refers to color.gray700

color-base--subtle

deprecated

#72777d

Defined in src/modes/base.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/components.json

Refers to color.red600

Red ('new') Link color and states

#ff4242

Defined in src/components/components.json

Refers to color.red500

#b32424

Defined in src/components/components.json

Refers to color.red700

#d73333

Defined in src/components/components.json

Refers to color.red600

#a55858

Defined in src/components/components.json

Refers to color.maroon

Background colors

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

Defined in src/modes/base.json

Refers to color.white

background-color-interactive#eaecf0

Defined in src/modes/base.json

Refers to color.gray200

background-color-interactive-subtle#f8f9fa

Defined in src/modes/base.json

Refers to color.gray100

background-color-disabled#c8ccd1

Defined in src/modes/base.json

Refers to color.gray300

Components like Buttons, Checkboxes, Radios, ProgressBars….

background-color-disabled-subtle#eaecf0

Defined in src/modes/base.json

Refers to color.gray200

Components like TextInputs, Selects….

background-color-progressive#36c

Defined in src/modes/base.json

Refers to color.blue600

background-color-progressive--hover#447ff5

Defined in src/modes/base.json

Refers to color.blue500

background-color-progressive--active#2a4b8d

Defined in src/modes/base.json

Refers to color.blue700

background-color-progressive--focus#36c

Defined in src/modes/base.json

Refers to color.blue600

background-color-progressive-subtle#eaf3ff

Defined in src/modes/base.json

Refers to color.blue100

background-color-destructive#d73333

Defined in src/modes/base.json

Refers to color.red600

background-color-destructive--hover#ff4242

Defined in src/modes/base.json

Refers to color.red500

background-color-destructive--active#b32424

Defined in src/modes/base.json

Refers to color.red700

background-color-destructive--focus#d73333

Defined in src/modes/base.json

Refers to color.red600

background-color-destructive-subtle#fee7e6

Defined in src/modes/base.json

Refers to color.red100

background-color-error#d73333

Defined in src/modes/base.json

Refers to color.red600

background-color-error--hover#ff4242

Defined in src/modes/base.json

Refers to color.red500

background-color-error--active#b32424

Defined in src/modes/base.json

Refers to color.red700

background-color-error-subtle#fee7e6

Defined in src/modes/base.json

Refers to color.red100

background-color-warning-subtle#fef6e7

Defined in src/modes/base.json

Refers to color.yellow100

background-color-success-subtle#d5fdf4

Defined in src/modes/base.json

Refers to color.green100

background-color-notice-subtle#eaecf0

Defined in src/modes/base.json

Refers to color.gray200

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

Defined in src/modes/base.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/modes/base.json

Refers to color.opacity-medium-dark

background-color-transparentrgba( 255, 255, 255, 0 )

Defined in src/modes/base.json

Refers to color.transparent-light

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

Defined in src/components/components.json

Refers to color.modifier-gray100-translucent

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

Defined in src/components/components.json

Refers to color.modifier-gray200-translucent

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

Defined in src/components/components.json

Refers to color.blue600

background-color-primary--hover

deprecated

rgba( 51, 102, 204, 0.1 )

Defined in src/components/components.json

Refers to color.modifier-blue600-translucent

Deprecated: No replacement for this token. Only used in non-Codex products and design decision is to need to rely on background for this state. (use `color-modifier-blue600-translucent` instead)

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

Defined in src/components/components.json

Refers to color.opacity-low-light

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

Defined in src/components/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/modes/base.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.