Colors

You can either use colors directly, using a Sass function or CSS Custom Property, or more preferably, use the theme mechanism which abstracts color design tokens into usage contexts to help you work with light and dark mode.

Design tokens

Colors that are set with design tokens, which are located here: src/site/_data/design/tokens.json.

Core

Name and codes	Sass function	Custom Property	Color Utility Class	BG Utility Class
Primary #3740ff	`get-color('core-primary')`	`var('--color-core-primary')`	`.t-color-core-primary`	`.t-bg-core-primary`
Primary Glare #9da2ff	`get-color('core-primary-glare')`	`var('--color-core-primary-glare')`	`.t-color-core-primary-glare`	`.t-bg-core-primary-glare`
Primary Bright #f8faff	`get-color('core-primary-bright')`	`var('--color-core-primary-bright')`	`.t-color-core-primary-bright`	`.t-bg-core-primary-bright`
Primary Dim #2c333f	`get-color('core-primary-dim')`	`var('--color-core-primary-dim')`	`.t-color-core-primary-dim`	`.t-bg-core-primary-dim`
Secondary #e51661	`get-color('core-secondary')`	`var('--color-core-secondary')`	`.t-color-core-secondary`	`.t-bg-core-secondary`
Secondary Shade #9c166b	`get-color('core-secondary-shade')`	`var('--color-core-secondary-shade')`	`.t-color-core-secondary-shade`	`.t-bg-core-secondary-shade`
Secondary Glare #ee518a	`get-color('core-secondary-glare')`	`var('--color-core-secondary-glare')`	`.t-color-core-secondary-glare`	`.t-bg-core-secondary-glare`
Secondary Bright #fef5fa	`get-color('core-secondary-bright')`	`var('--color-core-secondary-bright')`	`.t-color-core-secondary-bright`	`.t-bg-core-secondary-bright`
Secondary Dim #3e2d39	`get-color('core-secondary-dim')`	`var('--color-core-secondary-dim')`	`.t-color-core-secondary-dim`	`.t-bg-core-secondary-dim`
Tertiary #6001ff	`get-color('core-tertiary')`	`var('--color-core-tertiary')`	`.t-color-core-tertiary`	`.t-bg-core-tertiary`
Tertiary Glare #d7aefb	`get-color('core-tertiary-glare')`	`var('--color-core-tertiary-glare')`	`.t-color-core-tertiary-glare`	`.t-bg-core-tertiary-glare`
Tertiary Bright #faf6fe	`get-color('core-tertiary-bright')`	`var('--color-core-tertiary-bright')`	`.t-color-core-tertiary-bright`	`.t-bg-core-tertiary-bright`
Tertiary Dim #352e3f	`get-color('core-tertiary-dim')`	`var('--color-core-tertiary-dim')`	`.t-color-core-tertiary-dim`	`.t-bg-core-tertiary-dim`
Quaternary #007b83	`get-color('core-quaternary')`	`var('--color-core-quaternary')`	`.t-color-core-quaternary`	`.t-bg-core-quaternary`
Quaternary Glare #78d9ec	`get-color('core-quaternary-glare')`	`var('--color-core-quaternary-glare')`	`.t-color-core-quaternary-glare`	`.t-bg-core-quaternary-glare`
Quaternary Bright #f4fcfe	`get-color('core-quaternary-bright')`	`var('--color-core-quaternary-bright')`	`.t-color-core-quaternary-bright`	`.t-bg-core-quaternary-bright`
Quaternary Dim #26373d	`get-color('core-quaternary-dim')`	`var('--color-core-quaternary-dim')`	`.t-color-core-quaternary-dim`	`.t-bg-core-quaternary-dim`
Brand #3fc4ff	`get-color('core-brand')`	`var('--color-core-brand')`	`.t-color-core-brand`	`.t-bg-core-brand`

State

Name and codes	Sass function	Custom Property	Color Utility Class	BG Utility Class
Good #0d652d	`get-color('state-good')`	`var('--color-state-good')`	`.t-color-state-good`	`.t-bg-state-good`
Good Bright #e9f6ed	`get-color('state-good-bright')`	`var('--color-state-good-bright')`	`.t-color-state-good-bright`	`.t-bg-state-good-bright`
Good Dim #283532	`get-color('state-good-dim')`	`var('--color-state-good-dim')`	`.t-color-state-good-dim`	`.t-bg-state-good-dim`
Good Glare #e2faed	`get-color('state-good-glare')`	`var('--color-state-good-glare')`	`.t-color-state-good-glare`	`.t-bg-state-good-glare`
Info #174ea6	`get-color('state-info')`	`var('--color-state-info')`	`.t-color-state-info`	`.t-bg-state-info`
Info Glare #3074e2	`get-color('state-info-glare')`	`var('--color-state-info-glare')`	`.t-color-state-info-glare`	`.t-bg-state-info-glare`
Info Bright #deeafd	`get-color('state-info-bright')`	`var('--color-state-info-bright')`	`.t-color-state-info-bright`	`.t-bg-state-info-bright`
Info Dim #2c333f	`get-color('state-info-dim')`	`var('--color-state-info-dim')`	`.t-color-state-info-dim`	`.t-bg-state-info-dim`
Warn #c34900	`get-color('state-warn')`	`var('--color-state-warn')`	`.t-color-state-warn`	`.t-bg-state-warn`
Warn Bright #fff5e3	`get-color('state-warn-bright')`	`var('--color-state-warn-bright')`	`.t-color-state-warn-bright`	`.t-bg-state-warn-bright`
Warn Dim #3b372b	`get-color('state-warn-dim')`	`var('--color-state-warn-dim')`	`.t-color-state-warn-dim`	`.t-bg-state-warn-dim`
Warn Glare #fffcf2	`get-color('state-warn-glare')`	`var('--color-state-warn-glare')`	`.t-color-state-warn-glare`	`.t-bg-state-warn-glare`
Bad #a50e0e	`get-color('state-bad')`	`var('--color-state-bad')`	`.t-color-state-bad`	`.t-bg-state-bad`
Bad Bright #fce8e8	`get-color('state-bad-bright')`	`var('--color-state-bad-bright')`	`.t-color-state-bad-bright`	`.t-bg-state-bad-bright`
Bad Dim #3b2d30	`get-color('state-bad-dim')`	`var('--color-state-bad-dim')`	`.t-color-state-bad-dim`	`.t-bg-state-bad-dim`
Bad Glare #ffe9e8	`get-color('state-bad-glare')`	`var('--color-state-bad-glare')`	`.t-color-state-bad-glare`	`.t-bg-state-bad-glare`
Update #3740ff	`get-color('state-update')`	`var('--color-state-update')`	`.t-color-state-update`	`.t-bg-state-update`
Update Glare #9da2ff	`get-color('state-update-glare')`	`var('--color-state-update-glare')`	`.t-color-state-update-glare`	`.t-bg-state-update-glare`
Update Bright #f8faff	`get-color('state-update-bright')`	`var('--color-state-update-bright')`	`.t-color-state-update-bright`	`.t-bg-state-update-bright`
Update Dim #2c333f	`get-color('state-update-dim')`	`var('--color-state-update-dim')`	`.t-color-state-update-dim`	`.t-bg-state-update-dim`

Shades

Name and codes	Sass function	Custom Property	Color Utility Class	BG Utility Class
Dark #191919	`get-color('shades-dark')`	`var('--color-shades-dark')`	`.t-color-shades-dark`	`.t-bg-shades-dark`
Dim #202124	`get-color('shades-dim')`	`var('--color-shades-dim')`	`.t-color-shades-dim`	`.t-bg-shades-dim`
Charcoal #303136	`get-color('shades-charcoal')`	`var('--color-shades-charcoal')`	`.t-color-shades-charcoal`	`.t-bg-shades-charcoal`
Gray #585b63	`get-color('shades-gray')`	`var('--color-shades-gray')`	`.t-color-shades-gray`	`.t-bg-shades-gray`
Gray Bright #a5a7af	`get-color('shades-gray-bright')`	`var('--color-shades-gray-bright')`	`.t-color-shades-gray-bright`	`.t-bg-shades-gray-bright`
Gray Glare #d2d3d7	`get-color('shades-gray-glare')`	`var('--color-shades-gray-glare')`	`.t-color-shades-gray-glare`	`.t-bg-shades-gray-glare`
Light #f8f9fa	`get-color('shades-light')`	`var('--color-shades-light')`	`.t-color-shades-light`	`.t-bg-shades-light`
Light Bright #ffffff	`get-color('shades-light-bright')`	`var('--color-shades-light-bright')`	`.t-color-shades-light-bright`	`.t-bg-shades-light-bright`

Code

Name and codes	Sass function	Custom Property	Color Utility Class	BG Utility Class
Primary #183691	`get-color('code-primary')`	`var('--color-code-primary')`	`.t-color-code-primary`	`.t-bg-code-primary`
Primary Glare #007aa2	`get-color('code-primary-glare')`	`var('--color-code-primary-glare')`	`.t-color-code-primary-glare`	`.t-bg-code-primary-glare`
Primary Bright #4dd3ff	`get-color('code-primary-bright')`	`var('--color-code-primary-bright')`	`.t-color-code-primary-bright`	`.t-bg-code-primary-bright`
Secondary #a71d5d	`get-color('code-secondary')`	`var('--color-code-secondary')`	`.t-color-code-secondary`	`.t-bg-code-secondary`
Secondary Glare #d22575	`get-color('code-secondary-glare')`	`var('--color-code-secondary-glare')`	`.t-color-code-secondary-glare`	`.t-bg-code-secondary-glare`
Secondary Bright #e776aa	`get-color('code-secondary-bright')`	`var('--color-code-secondary-bright')`	`.t-color-code-secondary-bright`	`.t-bg-code-secondary-bright`
Tertiary #9f1c59	`get-color('code-tertiary')`	`var('--color-code-tertiary')`	`.t-color-code-tertiary`	`.t-bg-code-tertiary`
Tertiary Glare #ca2471	`get-color('code-tertiary-glare')`	`var('--color-code-tertiary-glare')`	`.t-color-code-tertiary-glare`	`.t-bg-code-tertiary-glare`
Tertiary Bright #e3609d	`get-color('code-tertiary-bright')`	`var('--color-code-tertiary-bright')`	`.t-color-code-tertiary-bright`	`.t-bg-code-tertiary-bright`
Quaternary #385d34	`get-color('code-quaternary')`	`var('--color-code-quaternary')`	`.t-color-code-quaternary`	`.t-bg-code-quaternary`
Quaternary Glare #52894c	`get-color('code-quaternary-glare')`	`var('--color-code-quaternary-glare')`	`.t-color-code-quaternary-glare`	`.t-bg-code-quaternary-glare`
Quaternary Bright #9cc598	`get-color('code-quaternary-bright')`	`var('--color-code-quaternary-bright')`	`.t-color-code-quaternary-bright`	`.t-bg-code-quaternary-bright`

Highlights

Name and codes	Sass function	Custom Property	Color Utility Class	BG Utility Class
Magenta #ff00b8	`get-color('highlights-magenta')`	`var('--color-highlights-magenta')`	`.t-color-highlights-magenta`	`.t-bg-highlights-magenta`
Green #128500	`get-color('highlights-green')`	`var('--color-highlights-green')`	`.t-color-highlights-green`	`.t-bg-highlights-green`
Purple #7600ae	`get-color('highlights-purple')`	`var('--color-highlights-purple')`	`.t-color-highlights-purple`	`.t-bg-highlights-purple`

Theme usage

Colors that are set with themes (dark/light), which are located here: src/site/_data/design/themes.js.

Go ahead and toggle the current theme to see how they change.

Backgrounds

Utility class	Sass mixin	Sass function
`bg-core-bg`	`@include apply-utility('bg', 'core-bg')`	`get-utility-value('bg', 'core-bg')`
`bg-dark-bg`	`@include apply-utility('bg', 'dark-bg')`	`get-utility-value('bg', 'dark-bg')`
`bg-mid-bg`	`@include apply-utility('bg', 'mid-bg')`	`get-utility-value('bg', 'mid-bg')`
`bg-highlight-interact-bg`	`@include apply-utility('bg', 'highlight-interact-bg')`	`get-utility-value('bg', 'highlight-interact-bg')`
`bg-accent-bg`	`@include apply-utility('bg', 'accent-bg')`	`get-utility-value('bg', 'accent-bg')`
`bg-action-bg`	`@include apply-utility('bg', 'action-bg')`	`get-utility-value('bg', 'action-bg')`
`bg-action-bg-hover`	`@include apply-utility('bg', 'action-bg-hover')`	`get-utility-value('bg', 'action-bg-hover')`
`bg-action-bg-alt`	`@include apply-utility('bg', 'action-bg-alt')`	`get-utility-value('bg', 'action-bg-alt')`
`bg-action-bg-primary`	`@include apply-utility('bg', 'action-bg-primary')`	`get-utility-value('bg', 'action-bg-primary')`
`bg-active-bg`	`@include apply-utility('bg', 'active-bg')`	`get-utility-value('bg', 'active-bg')`
`bg-check-bg`	`@include apply-utility('bg', 'check-bg')`	`get-utility-value('bg', 'check-bg')`
`bg-check-bg-active`	`@include apply-utility('bg', 'check-bg-active')`	`get-utility-value('bg', 'check-bg-active')`
`bg-floating-ribbon-bg`	`@include apply-utility('bg', 'floating-ribbon-bg')`	`get-utility-value('bg', 'floating-ribbon-bg')`
`bg-primary-box-bg`	`@include apply-utility('bg', 'primary-box-bg')`	`get-utility-value('bg', 'primary-box-bg')`
`bg-quaternary-box-bg`	`@include apply-utility('bg', 'quaternary-box-bg')`	`get-utility-value('bg', 'quaternary-box-bg')`
`bg-secondary-box-bg`	`@include apply-utility('bg', 'secondary-box-bg')`	`get-utility-value('bg', 'secondary-box-bg')`
`bg-reversed-bg`	`@include apply-utility('bg', 'reversed-bg')`	`get-utility-value('bg', 'reversed-bg')`
`bg-state-info-bg`	`@include apply-utility('bg', 'state-info-bg')`	`get-utility-value('bg', 'state-info-bg')`
`bg-state-warn-bg`	`@include apply-utility('bg', 'state-warn-bg')`	`get-utility-value('bg', 'state-warn-bg')`
`bg-state-good-bg`	`@include apply-utility('bg', 'state-good-bg')`	`get-utility-value('bg', 'state-good-bg')`
`bg-state-bad-bg`	`@include apply-utility('bg', 'state-bad-bg')`	`get-utility-value('bg', 'state-bad-bg')`
`bg-state-update-bg`	`@include apply-utility('bg', 'state-update-bg')`	`get-utility-value('bg', 'state-update-bg')`
`bg-tertiary-box-bg`	`@include apply-utility('bg', 'tertiary-box-bg')`	`get-utility-value('bg', 'tertiary-box-bg')`

Text Colors

	Utility class	Sass mixin	Sass function
Sample	`color-core-text`	`@include apply-utility('color', 'core-text')`	`get-utility-value('color', 'core-text')`
Sample	`color-dark-text`	`@include apply-utility('color', 'dark-text')`	`get-utility-value('color', 'dark-text')`
Sample	`color-mid-text`	`@include apply-utility('color', 'mid-text')`	`get-utility-value('color', 'mid-text')`
Sample	`color-highlight-text`	`@include apply-utility('color', 'highlight-text')`	`get-utility-value('color', 'highlight-text')`
Sample	`color-highlight-text-alt`	`@include apply-utility('color', 'highlight-text-alt')`	`get-utility-value('color', 'highlight-text-alt')`
Sample	`color-accent-text`	`@include apply-utility('color', 'accent-text')`	`get-utility-value('color', 'accent-text')`
Sample	`color-action-text`	`@include apply-utility('color', 'action-text')`	`get-utility-value('color', 'action-text')`
Sample	`color-action-text-alt`	`@include apply-utility('color', 'action-text-alt')`	`get-utility-value('color', 'action-text-alt')`
Sample	`color-action-text-primary`	`@include apply-utility('color', 'action-text-primary')`	`get-utility-value('color', 'action-text-primary')`
Sample	`color-active-text`	`@include apply-utility('color', 'active-text')`	`get-utility-value('color', 'active-text')`
Sample	`color-brand-text`	`@include apply-utility('color', 'brand-text')`	`get-utility-value('color', 'brand-text')`
Sample	`color-primary-box-text`	`@include apply-utility('color', 'primary-box-text')`	`get-utility-value('color', 'primary-box-text')`
Sample	`color-quaternary-box-text`	`@include apply-utility('color', 'quaternary-box-text')`	`get-utility-value('color', 'quaternary-box-text')`
Sample	`color-secondary-box-text`	`@include apply-utility('color', 'secondary-box-text')`	`get-utility-value('color', 'secondary-box-text')`
Sample	`color-reversed-text`	`@include apply-utility('color', 'reversed-text')`	`get-utility-value('color', 'reversed-text')`
Sample	`color-state-info-text`	`@include apply-utility('color', 'state-info-text')`	`get-utility-value('color', 'state-info-text')`
Sample	`color-state-warn-text`	`@include apply-utility('color', 'state-warn-text')`	`get-utility-value('color', 'state-warn-text')`
Sample	`color-state-good-text`	`@include apply-utility('color', 'state-good-text')`	`get-utility-value('color', 'state-good-text')`
Sample	`color-state-bad-text`	`@include apply-utility('color', 'state-bad-text')`	`get-utility-value('color', 'state-bad-text')`
Sample	`color-state-update-text`	`@include apply-utility('color', 'state-update-text')`	`get-utility-value('color', 'state-update-text')`
Sample	`color-tertiary-box-text`	`@include apply-utility('color', 'tertiary-box-text')`	`get-utility-value('color', 'tertiary-box-text')`

Colors

Design tokens

Core

Primary

Primary Glare

Primary Bright

Primary Dim

Secondary

Secondary Shade

Secondary Glare

Secondary Bright

Secondary Dim

Tertiary

Tertiary Glare

Tertiary Bright

Tertiary Dim

Quaternary

Quaternary Glare

Quaternary Bright

Quaternary Dim

Brand

State

Good

Good Bright

Good Dim

Good Glare

Info

Info Glare

Info Bright

Info Dim

Warn

Warn Bright

Warn Dim

Warn Glare

Bad

Bad Bright

Bad Dim

Bad Glare

Update

Update Glare

Update Bright

Update Dim

Shades

Dark

Dim

Charcoal

Gray

Gray Bright

Gray Glare

Light

Light Bright