Colours | Checkatrade Design System

Semantic

Purpose-driven tokens that adapt across themes. Prefer these over primitive values in product code.

Surface

--color-background-surface-neutral-default

--color-background-surface-neutral-soft

--color-background-surface-neutral-strong

--color-background-surface-inverse-default

--color-background-surface-inverse-soft

--color-background-surface-inverse-strong

Brand surfaces

--color-background-surface-brand-primary-default

--color-background-surface-brand-primary-soft

--color-background-surface-brand-primary-strong

--color-background-surface-brand-secondary-default

--color-background-surface-brand-secondary-soft

--color-background-surface-brand-secondary-strong

Action surfaces

--color-background-action-brand-primary

--color-background-action-brand-secondary

--color-background-action-inverse

Ink (text)

--color-ink-body-default

--color-ink-body-default-inverse

--color-ink-body-subtle

--color-ink-body-brand

--color-ink-heading-default

--color-ink-heading-default-inverse

--color-ink-heading-brand-primary

--color-ink-heading-brand-primary-strong

--color-ink-heading-brand-secondary

--color-ink-heading-brand-secondary-strong

Border

--color-border-default

--color-border-strong

--color-border-action-brand-secondary

--color-border-action-brand-secondary-inverse

Feedback surfaces

--color-background-surface-feedback-success

--color-background-surface-feedback-warning

--color-background-surface-feedback-error

--color-background-surface-feedback-information

Feedback ink

--color-ink-feedback-success

--color-ink-feedback-warning

--color-ink-feedback-error

--color-ink-feedback-information

Global

--color-global-disabled

--color-global-disabled-base

--color-focus-ring

--color-focus-ring-inverse

--color-black-500

--color-white-500

Primitive ramps

Raw colour values. Reference these only when no semantic token exists for the use case.

Grey

--color-grey-0

--color-grey-50

--color-grey-100

--color-grey-200

--color-grey-300

--color-grey-400

--color-grey-500

--color-grey-600

--color-grey-700

--color-grey-800

--color-grey-900

--color-grey-1000

Red

--color-red-50

--color-red-100

--color-red-200

--color-red-300

--color-red-400

--color-red-500

--color-red-600

--color-red-700

--color-red-800

--color-red-900

--color-red-1000

Blue

--color-blue-0

--color-blue-50

--color-blue-100

--color-blue-200

--color-blue-300

--color-blue-400

--color-blue-500

--color-blue-600

--color-blue-700

--color-blue-800

--color-blue-900

--color-blue-1000

Green

--color-green-50

--color-green-100

--color-green-200

--color-green-300

--color-green-400

--color-green-500

--color-green-600

--color-green-700

--color-green-800

--color-green-900

--color-green-1000

Orange

--color-orange-50

--color-orange-100

--color-orange-200

--color-orange-300

--color-orange-400

--color-orange-500

--color-orange-600

--color-orange-700

--color-orange-800

--color-orange-900

--color-orange-1000

Crimson

--color-crimson-50

--color-crimson-100

--color-crimson-200

--color-crimson-300

--color-crimson-400

--color-crimson-500

--color-crimson-600

--color-crimson-700

--color-crimson-800

--color-crimson-900

--color-crimson-1000