Skip to content
On this page

Color

Text colors

NameValue
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

NameValue
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-lightrgba( 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-darkrgba( 0, 0, 0, 0.65 )

Defined in src/codex-base.json

Refers to color.opacity-medium-dark

background-color-transparentrgba( 255, 255, 255, 0 )

Defined in src/codex-base.json

Refers to color.transparent-light

background-color-button-quiet--hoverrgba( 0, 24, 73, 0.027 )

Defined in src/codex-components.json

Refers to color.modifier-gray100-translucent

background-color-button-quiet--activergba( 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

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

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

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