Branding Guidelines

Brand Colour Variables

  • brand-primary

    Main brand colour. Darker colours are preferrable. Avoid colours like grey which may cause some elements to appear inactive or disabled.

  • brand-secondary Accent brand colour. Choose a colour that contrasts well with brand-primary.

  • brand-primary-text / brand-secondary-text Some elements using brand-primary or brand-secondary as a background colour contain text. The default font colour of these elements is white (#fffff). To ensure good readability for users, it may be necessary to adjust the font colour using the brand-primary-text or brand-secondary-text variables. Aim for WCAG 2.0 level AA contrast ratio of 4.5:1. Tools are available online to check colour contrast ratios (for example: https://webaim.org/resources/contrastchecker/).

Use a PNG with a clear background. Ensure the logo is clearly visible against the brand-primary colour and when the system is in dark mode.

PreviousIntroductionNextProduct Behaviour Setup

Last updated