Colours
Colour is a core component of our brand identity. It communicates personality, builds recognition, and enhances usability. Our colour system is designed to be flexible, accessible, and consistent across our website.
Primary colours
Our primary colours are the foundation of our visual identity. They reflect our brand personality and help ensure consistency, recognisability, and a cohesive user experience across all touchpoints.
Purpose:
- Use the primary red for key actions, and branding elements like the logo or key assets.
- Use the primary grey5 for secondary actions and background to make content stand out.
- Use the primary white for natural backgrounds.
- Do not use primary red as a solid background or for decoration.
Secondary colours
Our secondary colours complement the primary palette, offering greater flexibility for UI design. They provide depth and variety while helping to distinguish different components or content types.
Purpose:
- Use sparingly alongside primary colours to maintain brand consistency.
- Ideal for text, backgrounds, borders, secondary buttons, icons, data visualisation and focus states.
- Avoid using secondary colours for primary actions like CTAs or buttons.
Link
Our link colour palette ensures that links are recognisable, accessible, and consistent across our website.
Purpose:
- Use link colours help users identify interactive elements like navigation, inline text links and call to actions.
- Never use link colours for non-interactive text or accent surfaces.
Infographics
Our infographics colours are designed to bring data to life. These colours are selected to be distinct from one another, visually harmonious, and accessible to all users.
Purpose:
- Use these colours for bar charts, pie charts, line graphs, and other data-heavy visuals.
- Avoid using too many colours in a single visual; stick to 3-5 max for clarity.
Social
Our social media colour palette ensures consistent, brand-accurate representation on external platforms. These colours reflect the official brand colours of popular social media platforms.
Purpose:
- Social colours are primarily used for buttons to platforms.
- Do not modify colours in any other way; it must be always used as provided with the design specifications.
- Do not alter or mix these colours into our core palette.
Alert
Alert colours are used to communicate important messages in our interface - such as warnings or informational notes. These colours help users quickly understand the nature and urgency of a message.
Purpose:
- Use the alert colour on a background to attention-getting to communicate a warning message like alert banners.
- Do not use alert colours for decoration or non-functional elements or to indicate their meaning.
Error
Our error colours are designed to stand out and alert users to something that has gone wrong or requires correction. It ensures that errors are instantly recognisable and handled consistently across all interfaces.
Purpose:
- Use the error colour as a border or background to communicate problems that need user attention - such as validation issues, failed actions, etc.
- Do not use the error colour for decorative purposes to preserve its functional meaning.
Success
The success colours are used to communicate positive feedback. It helps users feel confident and informed when something has gone right in their interaction.
Purpose:
- Use the success colours as a border or background for confirmation messages, success toasts, and validated fields.
- Avoid overusing the success colour or applying it to non-functional elements.
Overlay
Overlay colours are used to create visual separation between the foreground and background elements - helping direct focus and reduce distractions.
Purpose:
- Use overlays to create focus on modals and popups such as the cookies banner.
- Avoid using semi-opaque or colourful overlays that could cause rough discernible or dark underlying content.