Backgrounds

You can set the background colour of any element.

Primary Backgrounds

This colour serves as the foundational canvas upon which digital content is displayed and should be the most used background colour to create visual depth by breaking up and creating contrast with the Dark Primary colour.

This colour is used to reinforce brand identity by using the brand’s primary colour - Traditional Heritage Blue.

Preview the primary background on this page.

Secondary Backgrounds

Secondary background colours serve to complement the primary background colours and can be used to distinguish different sections or elements within a page. They add depth and hierarchy to the design, helping users navigate through content more easily.

Use secondary background colours for sections that require emphasis or separation from the primary background, especially on text-heavy pages.

Preview the alternate background on this page.

Preview the highlight background on this page.

Accent Backgrounds

Use accent backgrounds sparingly to avoid overwhelming the user.

Accent background colours draw attention to specific elements or actions within the interface such as call-to-action banners, special features or important messages. They may also be used to complement the Dark Primary background to create a sense of depth whilst maintaining a darker colour palette.

Preview the secondary background on this page.

Preview the accent background on this page.

Other Backgrounds

Use other backgrounds sparingly to avoid overwhelming the user.

Preview the primary-25 background on this page.

Preview the primary-75 background on this page.