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

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.

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. For normal body text and smaller design elements, a contrast ratio of at least 7 is required.

When you hover over the colour cards on this page, you will see a contrast ratio toggle appear on the top right corner of the card. Click on it to display the contrast ratios of the various colours displayed, against our black and white colours.

In all our materials, Carbon (our primary color) should be the main background color. This can include flat fills, gradients, textures, or patterns. For variety, Whitetail (neutral white) and Bright Halo (major accent) may also be used as alternative background colors — particularly for content blocks, cards, or sections requiring contrast and visual separation.

Maastricht Blue (our secondary color) can be used for impactful backgrounds in key sections or overlays that need visual weight without using black. Arterial Blood Red (tertiary) may be layered into textures or graphic treatments to add warmth or energy.
For text, always prioritize Carbon and Whitetail for maximum readability and contrast depending on the background color in use. These should be the go-to colors for body text and core content.

Bright Halo, our major accent color, is ideal for call-to-action areas, banners, buttons, and highlights. It can also be used for headings, links, form inputs, and other interactive elements when a bold visual cue is needed.

Apricot Iced Tea, the minor accent, should be applied sparingly — such as in hover states, subtle separators, secondary labels, or small UI details that benefit from a soft touch without distracting the viewer.

Below you see will the most commonly used types of gradients, which you can configure using our brand colours. You can export these gradients as SVG files, which you can open in graphic design programs, or as PNG files that can be imported into most apps. Web Developers can also copy the gradient in CSS syntax, so it can be used directly in CSS stylesheets.