Color tokens

Contrast at a glance

Measured live from the tokens on this page, in the current theme.

Roles

Use these in components and pages. Each role is shown resolved in both themes.

Backgrounds

Token	Dark	Light
--color-bg-pageDefault page background. Department Black unless a reader switches to light.		manila/100
--color-bg-surfaceCards, fields and raised panels.		manila/100
--color-bg-mutedQuiet fills: hover states, wells, table stripes.		black/10
--color-bg-inverseHigh-contrast blocks that flip against the page.		black/100
--color-bg-accentEmbargo Red fields. Rare, and text on it must be large and bold.		red/100
--color-bg-accent-subtleTinted red backgrounds for highlights.		red/10
--color-bg-emphasisBeaurocracy Blue fields, for emphasis in limited form.		blue/100

Text

Token	Dark	Light
--color-text-primaryBody copy and headings.		black/100
--color-text-secondarySupporting copy, metadata.		black/75
--color-text-mutedPlaceholders, captions and de-emphasised hints.		black/65
--color-text-inverseText on bg/inverse.		manila/100
--color-text-accentRed text that still passes AA.		red/700
--color-text-linkInline links (always underlined as well).		blue/100
--color-text-on-accentText on Embargo Red (large bold only).		manila/100
--color-text-on-emphasisText on Beaurocracy Blue.		manila/100

Borders

Token	Dark	Light
--color-border-subtleDividers and quiet outlines.		black/20
--color-border-defaultHairline rules, field and outline-button borders.		black/100
--color-border-focusKeyboard focus ring. Blue, so focus never reads as an error.		blue/100
--color-border-accentAnnotation lines: grids, clear space, measurements.		red/100

Actions

Token	Dark	Light
--color-action-primary-bgPrimary button fill.		black/100
--color-action-primary-bg-hoverPrimary hover.		black/90
--color-action-primary-bg-pressedPrimary pressed.		black/75
--color-action-primary-textPrimary label.		manila/100
--color-action-secondary-bgSecondary button fill.		black/10
--color-action-secondary-bg-hoverSecondary hover.		black/20
--color-action-secondary-bg-pressedSecondary pressed.		black/30
--color-action-secondary-textSecondary label.		black/100
--color-action-disabled-bgDisabled control fill.		black/10
--color-action-disabled-textDisabled label.		black/40

Feedback

Token	Dark	Light
--color-feedback-danger-bgError backgrounds.		red/10
--color-feedback-danger-fgError text, icons and borders.		red/700
--color-feedback-success-bgApproved, filed, complete. Ledger Green.		green/100
--color-feedback-success-fgText on success.		black/100
--color-feedback-info-bgNotices and neutral information.		blue/10
--color-feedback-info-fgInfo text and icons.		blue/100
--color-feedback-warning-bgNeeds attention soon. Safety Yellow.		yellow/100
--color-feedback-warning-fgWarning text and icons.		black/100

Primitives

The raw palette: the brand colors with the tints the manual specifies. A few interface steps not in the manual (labelled in tokens.json) fill gaps for text contrast and dark fills. Reach for a role first.