Colours

Within the design system, colours serve as a fundamental element, playing a crucial role in shaping the visual identity and user experience. The below section details the primary and secondary palettes, and tonal variations to provide a comprehensive understanding of their use.

Primary Palette

The primary palette consists of three colours: Prussian Blue, Feta, and Forest Green. These colours are used to create a consistent visual identity across the design system. Prussian Blue is used for headings and navigation links, Feta for section backgrounds, and Forest Green for CTA buttons.

Prussian Blue

#01364A

u-primary-font

Headings, Nav Links Text Colour

	16px	24px
Heading text	Pass	Pass
Navigation links	Pass	Pass

Feta

#F8FEFA

u-primary-bgcolor

Section background colour

	16px	24px
Heading text	Pass	Pass
Navigation links	Pass	Pass

Forest Green

219d3D

u-primary-cta-bgcolor

CTA button background colour

		UI
on Feta background		Pass

White

#FFFFFF

u-primary-cta-font

Text colour in CTA button

		UI
on Forest Green		Pass

Secondary Palette

The secondary palette consists of three colours: Fiord, Prussian Blue and White Smoke. Fiord is used for body text, while White Smoke and Prussian Blue are used for section backgrounds.

Fiord

#475C6C

u-secondary-font

Body text colour

	16px	24px
on Feta	Pass	Pass
on White Smoke	Pass	Pass
on Prussian Blue	Fail	Fail

White Smoke

#F9F9F9

u-secondary-bgcolor-smoke

Section background colour

	16px	24px
Heading text	Pass	Pass
Navigation links	Pass	Pass
CTA Buttons	Pass	Pass

Prussian Blue

#01364A

u-secondary-bgcolor-blue

Section background colour

	16px	24px
Body text - light blue	Pass	Pass
Body text - smoke	Fail	Fail
CTA Buttons	Pass	Pass

Tonal Variation

The tonal variation uses Alice Blue. It is for body text on Prussian Blue background.

Alice Blue

#E8F9FF

u-text-on-prussian

Body text for prussian blue bgcolor

	16px	24px
on Prussian Blue	Pass	Pass