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

Name	Value
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)
color-link-red	#d73333 Defined in src/components.json Refers to color.destructive Red ('new') Link color and states
color-link-red--hover	#fc493b Defined in src/components.json Refers to color.destructive--hover
color-link-red--active	#9f3526 Defined in src/components.json Refers to color.destructive--active
color-link-red--focus	#36c Defined in src/components.json Refers to color.destructive--focus
color-link-red--visited	#9f5555 Defined in src/components.json Refers to color.destructive--visited

Background colors

List of design token names, values and metadata for background-color

Name	Value
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-transparent	transparent Defined in src/application.json Refers to color.transparent
background-color-backdrop-light	rgba( 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-dark	rgba( 0, 0, 0, 0.65 ) Defined in src/application.json Refers to color.opacity-medium-dark
background-color-button-quiet--hover	rgba( 0, 24, 73, 0.027 ) Defined in src/components.json Refers to color.modifier-gray100-translucent
background-color-button-quiet--active	rgba( 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--hover	rgba( 255, 255, 255, 0.3 ) Defined in src/components.json Refers to color.opacity-low-light
background-color-tab-list-item-framed--active	rgba( 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

Name	Value
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.