# Colour

The importance of colour design stems from the significance of colour in the human mind.

It can create ideas, express messages, spark interest, and generate certain emotions.

# Colour palette

It’s important to check your brand colours against our accessibility guidelines, for example if you’re using white text on a coloured background.

When specifying colours for your brand, it's a good idea to understand the different colour harmonies available.

# Highlight colours

The colour of the UI on our sites and apps is made up of combinations of black, white, and the grey palette, but you can use highlight colours for your brand. Highlight colours are used sparingly.

For example, NBUX highlight colours are:

Primary

Copied to clipboard

Secondary

Copied to clipboard
Click a colour to copy its Hex code

# Communication Palette

Some elements require colour to portray different meanings to our customers, so we have developed a "communication palette" in addition to brand palettes. It specifies 3 contexts:

  • success
  • information
  • alert.

The colours pass WCAG AA accessibility standards. and we recommend that these colours remain the same regardless of brand due to their well-known usage and connotation in other products, both online and offline.

Success

Copied to clipboard
Click a colour to copy its Hex code
We use the success colour for positive messaging, e.g. for displaying successful actions (e.g. payments, adding a card, saving an address, updating a password). It is also the colour we use for Add to bag and Checkout buttons across each brand.

Information

Copied to clipboard
Click a colour to copy its Hex code
We use the info colour for standard hyperlinks, as well as informative messaging, e.g. helper text and icons. It’s also used in forms to show selected states for checkboxes, radio buttons, active text inputs, toggles and most other standard components.

Alert

Copied to clipboard
Click a colour to copy its Hex code
The alert colour is primarily used as a way to communicate important information to the customer, e.g. error messaging and actions that need to be addressed. We also use this colour to denote sale item pricing to drive urgency and bring attention.

# Grey Palette

Greys play an important part when designing our products and it is important that these are consistent across our UI, but also accessible. The grey palette provides 4 shades of grey giving us an ample variety for any situation.

Greys can be used to differentiate sections by adding them as a background colour. E.g. this document has a white header and uses Grey 100 for the page background.

Grey 100

Copied to clipboard

Grey 200

Copied to clipboard

Grey 300

Copied to clipboard

Grey 400

Copied to clipboard
Click a colour to copy its Hex code

# Black and white

We don’t actually use black or white in our designs and UI — the “white” we use is a very pale grey, and the “black” we use is a very dark grey.

White

Copied to clipboard

Black

Copied to clipboard
Click a colour to copy its Hex code

# Contrast Ratio

Insufficient colour constrast makes content hard to read for everyone. An online colour contrast calculator can help you accurately analyse the colour contrast in our products, ensuring that it meets optimal standards. The minimum contrast ratio of 4.5:1 is imperative in our products.

Note: The NBUX Colour Palette meets AA accessibility standards.

Colour.review - We use this online tool for checking colour contrast.

Stark - We use this Sketch plugin

# Reliance

Colour alone should not be relied on to convey a message. For example, certain types of colour blindness make it difficult or even impossible to see common red alert messages. Elements should be distinguishable using other design principles, without sole reliance on colour.

Last Updated: 10/6/2020, 8:34:39 AM