Color

Text colors

Name	Value
color-base	`#202122` Defined in `src/codex-base.json` Refers to `color.gray700`
color-base--hover	`#404244` Defined in `src/codex-base.json` Refers to `color.gray650` Aimed to be replaced by `color.gray600` in future.
color-emphasized	`#000` Defined in `src/codex-base.json` Refers to `color.black`
color-subtle	`#54595d` Defined in `src/codex-base.json` Refers to `color.gray600`
color-placeholder	`#72777d` Defined in `src/codex-base.json` Refers to `color.gray500`
color-disabled	`#72777d` Defined in `src/codex-base.json` Refers to `color.gray500`
color-inverted	`#fff` Defined in `src/codex-base.json` Refers to `color.white`
color-progressive	`#36c` Defined in `src/codex-base.json` Refers to `color.blue600` 'Progressive' Color and states
color-progressive--hover	`#447ff5` Defined in `src/codex-base.json` Refers to `color.blue500`
color-progressive--active	`#2a4b8d` Defined in `src/codex-base.json` Refers to `color.blue700`
color-progressive--focus	`#36c` Defined in `src/codex-base.json` Refers to `color.blue600`
color-destructive	`#d33` Defined in `src/codex-base.json` Refers to `color.red600` 'Destructive' Color and states
color-destructive--hover	`#ff4242` Defined in `src/codex-base.json` Refers to `color.red500`
color-destructive--active	`#b32424` Defined in `src/codex-base.json` Refers to `color.red700`
color-destructive--focus	`#d33` Defined in `src/codex-base.json` Refers to `color.red600`
color-visited	`#6b4ba1` Defined in `src/codex-base.json` Refers to `color.purple` 'Visited' color. In combination with progressive. Used for default links.
color-error	`#d33` Defined in `src/codex-base.json` Refers to `color.red600`
color-warning	`#edab00` Defined in `src/codex-base.json` Refers to `color.yellow600` Note, this is only meant for warning icon for contrast reasons.
color-success	`#14866d` Defined in `src/codex-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/codex-base.json` Refers to `color.gray700`
color-base--subtle deprecated	`#72777d` Defined in `src/codex-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)
color-link-red	`#d33` Defined in `src/codex-components.json` Refers to `color.red600` Red ('new') Link color and states
color-link-red--hover	`#ff4242` Defined in `src/codex-components.json` Refers to `color.red500`
color-link-red--active	`#b32424` Defined in `src/codex-components.json` Refers to `color.red700`
color-link-red--focus	`#d33` Defined in `src/codex-components.json` Refers to `color.red600`
color-link-red--visited	`#a55858` Defined in `src/codex-components.json` Refers to `color.maroon`

Background colors

Name	Value
background-color-base	`#fff` Defined in `src/codex-base.json` Refers to `color.white`
background-color-interactive	`#eaecf0` Defined in `src/codex-base.json` Refers to `color.gray200`
background-color-interactive-subtle	`#f8f9fa` Defined in `src/codex-base.json` Refers to `color.gray100`
background-color-disabled	`#c8ccd1` Defined in `src/codex-base.json` Refers to `color.gray300` Components like Buttons, Checkboxes, Radios, ProgressBars….
background-color-disabled-subtle	`#eaecf0` Defined in `src/codex-base.json` Refers to `color.gray200` Components like TextInputs, Selects….
background-color-progressive	`#36c` Defined in `src/codex-base.json` Refers to `color.blue600`
background-color-progressive--hover	`#447ff5` Defined in `src/codex-base.json` Refers to `color.blue500`
background-color-progressive--active	`#2a4b8d` Defined in `src/codex-base.json` Refers to `color.blue700`
background-color-progressive--focus	`#36c` Defined in `src/codex-base.json` Refers to `color.blue600`
background-color-progressive-subtle	`#eaf3ff` Defined in `src/codex-base.json` Refers to `color.blue100`
background-color-destructive	`#d33` Defined in `src/codex-base.json` Refers to `color.red600`
background-color-destructive--hover	`#ff4242` Defined in `src/codex-base.json` Refers to `color.red500`
background-color-destructive--active	`#b32424` Defined in `src/codex-base.json` Refers to `color.red700`
background-color-destructive--focus	`#d33` Defined in `src/codex-base.json` Refers to `color.red600`
background-color-destructive-subtle	`#fee7e6` Defined in `src/codex-base.json` Refers to `color.red100`
background-color-error-subtle	`#fee7e6` Defined in `src/codex-base.json` Refers to `color.red100`
background-color-warning-subtle	`#fef6e7` Defined in `src/codex-base.json` Refers to `color.yellow100`
background-color-success-subtle	`#d5fdf4` Defined in `src/codex-base.json` Refers to `color.green100`
background-color-notice-subtle	`#eaecf0` Defined in `src/codex-base.json` Refers to `color.gray200`
background-color-backdrop-light	`rgba( 255, 255, 255, 0.65 )` Defined in `src/codex-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-dark	`rgba( 0, 0, 0, 0.65 )` Defined in `src/codex-base.json` Refers to `color.opacity-medium-dark`
background-color-transparent	`rgba( 255, 255, 255, 0 )` Defined in `src/codex-base.json` Refers to `color.transparent-light`
background-color-button-quiet--hover	`rgba( 0, 24, 73, 0.027 )` Defined in `src/codex-components.json` Refers to `color.modifier-gray100-translucent`
background-color-button-quiet--active	`rgba( 0, 24, 73, 0.082 )` Defined in `src/codex-components.json` Refers to `color.modifier-gray200-translucent`
background-color-input-binary--checked	`#36c` Defined in `src/codex-components.json` Refers to `color.blue600`
background-color-primary--hover deprecated	`rgba( 51, 102, 204, 0.1 )` Defined in `src/codex-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)

Accent color

Name Value

Name	Value
accent-color-base	`#36c` Defined in `src/codex-base.json` Refers to `color.accent`

accent-color-base

#36c

Defined in src/codex-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.

Deprecated token aliases

WARNING

The tokens below are not available in Codex. There are only available as deprecated aliases in WikimediaUI Base.

Name	Value
color-base--active deprecated	`#000` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.emphasized` Deprecated: Use `color-emphasized` instead.
color-base--inverted deprecated	`#fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.inverted` Deprecated: Use `color-inverted` instead.
color-base--emphasized deprecated	`#000` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.emphasized` Deprecated: Use `color-emphasized` instead.
color-base--disabled deprecated	`#72777d` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.disabled` Deprecated: Use `color-disabled` instead.
color-filled--disabled deprecated	`#fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.inverted` Deprecated: Use `color-inverted` instead.
color-accessory deprecated	`#54595d` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.subtle` Deprecated: Use `color-subtle` instead.
color-primary deprecated	`#36c` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.progressive` Deprecated: Use `color-progressive` instead.
color-primary--hover deprecated	`#447ff5` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.progressive--hover` Deprecated: Use `color-progressive--hover` instead.
color-primary--active deprecated	`#2a4b8d` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.progressive--active` Deprecated: Use `color-progressive--active` instead.
color-primary--focus deprecated	`#36c` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.progressive--focus` Deprecated: Use `color-progressive--focus` instead.

Name	Value
background-color-base--hover deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.interactive` Deprecated: Use `background-color-interactive` instead.
background-color-base--active deprecated	`#eaf3ff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.progressive-subtle` Deprecated: Use `background-color-progressive-subtle` instead.
background-color-base--disabled deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.disabled-subtle` Deprecated: Use `background-color-disabled-subtle` instead.
background-color-base--transparent deprecated	`rgba( 255, 255, 255, 0 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.transparent` Deprecated: Use `background-color-transparent` instead.
background-color-filled--disabled deprecated	`#c8ccd1` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.disabled` Deprecated: Use `background-color-disabled` instead.
background-color-framed deprecated	`#f8f9fa` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.interactive-subtle` Deprecated: Use `background-color-interactive-subtle` instead.
background-color-framed--hover deprecated	`#fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.base` Deprecated: Use `background-color-base` instead.
background-color-framed--active deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.interactive` Deprecated: Use `background-color-interactive` instead.
background-color-error--framed deprecated	`#fee7e6` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.error-subtle` Deprecated: Use `background-color-error-subtle` instead.
background-color-warning--framed deprecated	`#fef6e7` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.warning-subtle` Deprecated: Use `background-color-warning-subtle` instead.
background-color-success--framed deprecated	`#d5fdf4` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.success-subtle` Deprecated: Use `background-color-success-subtle` instead.
background-color-notice--framed deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.notice-subtle` Deprecated: Use `background-color-notice-subtle` instead.
background-color-primary deprecated	`#36c` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.progressive` Deprecated: Use `background-color-progressive` instead.
background-color-quiet deprecated	`rgba( 255, 255, 255, 0 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.transparent` Deprecated: Use `background-color-transparent` instead.
background-color-quiet--hover deprecated	`rgba( 0, 24, 73, 0.027 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.button.quiet--hover` Deprecated: Use `background-color-button-quiet--hover` instead.
background-color-quiet--active deprecated	`rgba( 0, 24, 73, 0.082 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.button.quiet--active` Deprecated: Use `background-color-button-quiet--active` instead.
background-color-message-notice deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.notice-subtle` Deprecated: Use `background-color-notice-subtle` instead.
background-color-message-error deprecated	`#fee7e6` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.error-subtle` Deprecated: Use `background-color-error-subtle` instead.
background-color-message-warning deprecated	`#fef6e7` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.warning-subtle` Deprecated: Use `background-color-warning-subtle` instead.
background-color-message-success deprecated	`#d5fdf4` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.success-subtle` Deprecated: Use `background-color-success-subtle` instead.
background-color-tabs-framed deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.interactive` Deprecated: Use `background-color-interactive` instead.
background-color-toolbar deprecated	`#fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.base` Deprecated: Use `background-color-base` instead.
background-color-tool--hover deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.interactive` Deprecated: Use `background-color-interactive` instead.
background-color-tool--active deprecated	`#36c` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.progressive` Deprecated: Use `background-color-progressive` instead.
background-color-tool--active-hover deprecated	`#447ff5` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.progressive--hover` Deprecated: Use `background-color-progressive--hover` instead.

Color ​

Text colors ​

Background colors ​

Accent color ​

Border and box-shadow colors ​