Color

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--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)
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	#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-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-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.