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.gray750
color-base-fixed	#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	#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	#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)
color-link-red	#d73333 Defined in src/components.json Refers to color.destructive Red ('new') Link color and states
color-link-red--hover	#ff4242 Defined in src/components.json Refers to color.destructive--hover
color-link-red--active	#b32424 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	#a55858 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-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	#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-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-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-transparent	transparent Defined in src/application.json Refers to color.transparent
background-color-inverted	#101418 Defined in src/application.json Refers to color.gray800
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.blue600
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.