Colours

Colours are defined as CSS custom properties in _4-colours.scss. Use the utility classes or var(--theme-*) directly in CSS. Do not use hardcoded hex or hsl values in components.

How to use

<p class="h-text-primary">Primary colour text</p>
<p class="h-text-error">Error colour text</p>

Or in CSS:

color: var(--theme-primary);
background-color: var(--theme-info);

Surface colours

Fixed values — same across all trusts.

Body

--theme-body

Default

--theme-default

h-text-default

Secondary

--theme-secondary

h-text-secondary

Subtle

--theme-subtle

Subtle text

--theme-subtletext

h-text-subtle

Status colours

Fixed values — same across all trusts.

Info

--theme-info

Success

--theme-success

h-text-success

Success tint

--theme-success-tint

Warning

--theme-warning

Warning tint

--theme-warning-tint

Error

--theme-error

h-text-error

Error tint

--theme-error-tint

Primary colours

These change per trust. Override in src/themes/{trust}.css.

Per-trust theming is not a supported feature for new trusts. For historical reasons a small number of older trusts have custom themes. We do not offer theming to new trusts — they use the default (NHS Blue). These themeable tokens and the theme switcher exist for development purposes only: so we can test changes and understand the impact on the handful of legacy trusts that do have a theme.

Primary

--theme-primary

h-text-primary

Primary tint

--theme-primary-tint

Primary shade 15

--theme-primary-shade-15

Primary shade 50

--theme-primary-shade-50

Highlight

--theme-highlight

h-text-highlight

Highlight tint

--theme-highlight-tint

Highlight tint 30

--theme-highlight-tint-30

Focus ring

--theme-focus-ring