Core

Colours

Stable

Values come from @checkatrade/tokens/css. Use semantic tokens in product UI; primitive ramps document the underlying palette.

Figma

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-tint

--color-background-surface-inverse-default

--color-background-surface-inverse-tint

Brand backgrounds

--color-background-brand-primary-tint

--color-background-brand-primary

--color-background-brand-primary-strong

--color-background-brand-secondary-tint

--color-background-brand-secondary

--color-background-brand-secondary-strong

--color-background-action-brand-primary

--color-background-action-brand-secondary

--color-background-action-inverse

Text

--color-text-body-default

--color-text-body-default-inverse

--color-text-body-secondary

--color-text-body-brand

--color-text-heading-default

--color-text-heading-default-inverse

--color-text-heading-brand-primary

--color-text-heading-brand-primary-strong

--color-text-heading-brand-secondary

--color-text-heading-brand-secondary-strong

Border

--color-border-default

--color-border-strong

--color-border-action-brand-secondary

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

Feedback

--color-feedback-success-tint

--color-feedback-success

--color-feedback-warning-tint

--color-feedback-warning

--color-feedback-error-tint

--color-feedback-error

--color-feedback-information-tint

--color-feedback-information

Global

--color-global-disabled

--color-global-disabled-base

--color-focus-ring

--color-focus-ring-inverse

--color-black-500

--color-white-500

Brand palette

Named brand and UI colour scales. Use semantic tokens where possible; these exist for component internals and brand expression.

Brand red (primary)

--brand-primary-100

--brand-primary-200

--brand-primary-300

--brand-primary-400

--brand-primary-500

Brand blue (secondary)

--brand-secondary-100

--brand-secondary-200

--brand-secondary-300

--brand-secondary-400

--brand-secondary-500

UI primary

--ui-primary-100

--ui-primary-200

--ui-primary-300

--ui-primary-400

--ui-primary-500

UI secondary

--ui-secondary-100

--ui-secondary-200

--ui-secondary-300

--ui-secondary-400

--ui-secondary-500

Neutral (semantic)

--colour-neutral-100

--colour-neutral-200

--colour-neutral-300

--colour-neutral-400

--colour-neutral-500

Messaging (legacy)

--colour-success-200

--colour-success-400

--colour-warning-200

--colour-warning-400

--colour-error-200

--colour-error-400

--colour-information-200

--colour-information-400

Primitive ramps

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

Grey

--color-grey-0

--color-grey-5

--color-grey-10

--color-grey-15

--color-grey-20

--color-grey-25

--color-grey-30

--color-grey-40

--color-grey-50

--color-grey-60

--color-grey-65

--color-grey-70

--color-grey-80

--color-grey-90

--color-grey-95

--color-grey-100

Red

--color-red-5

--color-red-10

--color-red-20

--color-red-30

--color-red-40

--color-red-50

--color-red-60

--color-red-70

--color-red-80

--color-red-90

--color-red-100

Blue

--color-blue-0

--color-blue-5

--color-blue-10

--color-blue-20

--color-blue-30

--color-blue-40

--color-blue-50

--color-blue-60

--color-blue-70

--color-blue-80

--color-blue-90

--color-blue-100

Green

--color-green-5

--color-green-10

--color-green-20

--color-green-30

--color-green-40

--color-green-50

--color-green-60

--color-green-70

--color-green-80

--color-green-90

--color-green-100

Orange

--color-orange-5

--color-orange-10

--color-orange-20

--color-orange-30

--color-orange-40

--color-orange-50

--color-orange-60

--color-orange-70

--color-orange-80

--color-orange-90

--color-orange-100

Crimson

--color-crimson-5

--color-crimson-10

--color-crimson-20

--color-crimson-30

--color-crimson-40

--color-crimson-50

--color-crimson-60

--color-crimson-70

--color-crimson-80

--color-crimson-90

--color-crimson-100