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.