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-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-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.red600` Red ('new') Link color and states
color-link-red--hover	`#ff4242` Defined in `src/components.json` Refers to `color.red500`
color-link-red--active	`#b32424` Defined in `src/components.json` Refers to `color.red700`
color-link-red--focus	`#36c` Defined in `src/components.json` Refers to `color.blue600`
color-link-red--visited	`#a55858` Defined in `src/components.json` Refers to `color.maroon500`

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

Color ​

Text colors ​

Background colors ​

Accent color ​

Border and box-shadow colors ​

Color

Text colors

Background colors

Accent color

Border and box-shadow colors