Skip to content
On this page

Color

Text colors

List of design token names, values and metadata for background-color
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#d73333

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#d73333

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#d73333

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#d73333

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#d73333

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

List of design token names, values and metadata for background-color
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#d73333

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#d73333

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#d73333

Defined in src/codex-base.json

Refers to color.red600

background-color-error--hover#ff4242

Defined in src/codex-base.json

Refers to color.red500

background-color-error--active#b32424

Defined in src/codex-base.json

Refers to color.red700

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

List of design token names, values and metadata for background-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.

List of design token names, values and metadata for background-color
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.

List of design token names, values and metadata for background-color
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.