Our Brand Colours

Our brand has its own special 'black' and 'white' colours. Mixing them in different proportions gives us our own 'grayscale' of appropriate neutral tones. You must also use our brand white and brand black colours when creating tint and shade variations of our main brand colours — see section below for some help creating appropriately mixed tints and shades. 

In the 2 cards below, move the sliders to mix the opposite colour and generate on-brand shades of gray.

Often, when applying colours to your design elements, you will want to ensure that there is sufficient contrast for text be legible, as well as for icons and logos to be clearly seen. This is specially important if targeting audiences that may have visual issues. 

At the bottom of the colour cards on this page, you will see 2 contrast rating labels. As you move the slider, you will be mixing the base colour of the card with either our brand black or brand white, which will give you a new colour. The contrast ratio and WCAG AAA rating of the current colour against the brand white is shown in the bottom left label. The bottom right label shows you the contrast ratio and  rating against our brand black.

The contrast ratio between 2 colours can be measured on a scale from 1 (no contrast at all) to 21 (maximum contrast between total white and total black). In order for large heading text to be legible, and large visual elements to be identifiable, there must be a contrast ratio of at least 4.5. This is considered a "AA" contrast rating. For normal body text and smaller design elements, a contrast ratio of at least 7 is required — that is a "AAA" rating. 

Our colours were carefully selected for greater appeal and recognition within our target markets.

Always use our primary colour for dark backgrounds, and our secondary colour or our white for light backgrounds. Our primary colour can also be used for headings on light backgrounds, and our secondary and first accent colours can be used for headings on dark backgrounds. Our black and white colours should be used for body text, as appropriate — i.e., black body text on light backgrounds, and vice-versa. 


Our primary and secondary colours should be used prominently when producing all materials. Our accent colour should be used sparingly — eg., use it for hover effects on call-to-action buttons and hyperlinks.

In the cards below, moving the slider to the left will allow you to add our brand white to the base colour, creating an on-brand tint variation. Moving the slider to the left adds our brand black and creates an on-brand shade variation. Always make sure the contrast ratings of the tint or shade you are generating are suitable for your specific usage.