Color

Contrast at a glance

Measured live from the tokens on this page.

Roles

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

Backgrounds

Token	Light	Dark
--color-bg-pageDefault page background.	neutral/50
--color-bg-surfaceCards, fields and raised panels.	neutral/0
--color-bg-mutedQuiet fills: hover states, wells, table stripes.	neutral/100
--color-bg-inverseHigh-contrast blocks that flip against the page.	neutral/900
--color-bg-accentTomato fields. Text on it must be large and bold.	tomato/500
--color-bg-accent-subtleTinted Tomato backgrounds for highlights.	tomato/100
--color-bg-warmBurlap panels for warm, editorial moments.	burlap/500

Text

Token	Light	Dark
--color-text-primaryBody copy and headings.	neutral/900
--color-text-secondarySupporting copy, metadata.	neutral/600
--color-text-mutedPlaceholders and de-emphasised hints.	neutral/500
--color-text-inverseText on bg/inverse.	neutral/50
--color-text-accentTomato-coloured text that still passes AA on light backgrounds.	tomato/700
--color-text-linkInline links.	water/700
--color-text-on-accentText on Tomato fields (large bold only).	neutral/50

Borders

Token	Light	Dark
--color-border-subtleDividers and quiet outlines.	neutral/300
--color-border-defaultHairline rules, field and outline-button borders.	neutral/900
--color-border-focusKeyboard focus ring. Water, so focus never reads as an error.	water/500
--color-border-accentTomato emphasis borders.	tomato/500

Actions

Token	Light	Dark
--color-action-primary-bgPrimary button fill.	tomato/500
--color-action-primary-bg-hoverPrimary hover.	tomato/600
--color-action-primary-bg-pressedPrimary pressed.	tomato/700
--color-action-primary-textPrimary label.	neutral/50
--color-action-secondary-bgSecondary button fill.	neutral/900
--color-action-secondary-bg-hoverSecondary hover.	neutral/700
--color-action-secondary-bg-pressedSecondary pressed.	neutral/600
--color-action-secondary-textSecondary label.	neutral/50
--color-action-disabled-bgDisabled control fill.	neutral/200
--color-action-disabled-textDisabled label.	neutral/500

Feedback

Token	Light	Dark
--color-feedback-danger-bgError backgrounds.	tomato/100
--color-feedback-danger-fgError text, icons and borders.	tomato/700
--color-feedback-success-bgSuccess backgrounds.	vine/500
--color-feedback-success-fgSuccess text and icons.	neutral/900
--color-feedback-info-bgInfo backgrounds.	water/100
--color-feedback-info-fgInfo text and icons.	water/700
--color-feedback-warning-bgWarning backgrounds.	burlap/500
--color-feedback-warning-fgWarning text and icons.	neutral/900

Primitives

The raw palette. Brand colors are labelled. Reach for a role first; use a primitive directly only for illustration or one-off graphics.