nib Colours

Primary palette

These are the primary nib colours that should be used in all designs and serve to distinguish digital assets associated with our brand.

True Green should be used as the primary brand colour, and can be used anywhere to accentuate our brand identity. It should be used primarily for foreground elements like large page Headings, Buttons and Links. Be cautious not to overuse this colour.

Bright Green is our secondary brand colour. It should be used cautiously and sparingly as an accent colour due to it having an inaccessible colour contrast ratio on lighter backgrounds.

In most situations, Text should be used for body text and headings, and Clear White should be considered as the default background colour.

For key callouts or Sections styled to visually break up long blocks of content, True Green can be used as a background colour, as long as you ensure any content within those sections maintains an accessible contrast ratio. In this case, you should default to using Clear White as your text colour and use Bright Green in situations you would normally use True Green (i.e. large headings, links, etc.).

For further guidance on accessible combinations of text and background colours, refer to the Accessibility tables.

Secondary palette

The secondary palette is a collection of lighter colours that complement our primary palette. These can be used to create a more inviting experience, by softening elements of the page that may be otherwise dominated by the bold primary brand colours.

These should generally only be used as background colours, ensuring that foreground elements (text, iconography, links, interactive elements etc.) meet accessible contrast thresholds. For quick reference, True Green and Text are both acceptable foreground colours on each of these.

Neutral palette

In many cases, our brand colours may not be suitable for all applications. For these situations, Mesh includes a range of accessible neutral tones to create depth and distinction between elements on a page.

While Text is our default text colour, Text (Prominent) should be considered for small text (≤ 14px), disclaimers or other situations where maximum contrast is required.

If using colours from the Secondary palette (Sage Green , Sunset Pink , Warm White or Light Grey ) as background colours, Text (Gentle) or Text (Muted) may not meet accessible contrast thresholds. Refer to Accessibility tables for valid combinations.

Our light neutral palette is intended to be used primarily for background colours. These tones may also be used for non-critical visual elements like borders, page dividers, zebra-striping table rows, or otherwise to group or separate adjacent blocks of content.

Semantic palette

These colours have semantic meanings, and should be reserved for functional elements or messaging, such as indicating the outcome of an action or highlighting success or failure of a task or interaction. They should be used sparingly so as not to risk confusing their meaning.

A summary of how to use these functional colours:

• Success Green should only be used for success alerts or validating form inputs or results.
• Info Blue should only be used for information alerts or indicating additional help to forms.
• Error Red should only be used for error alerts or validating input or results.
• Warning Yellow should only be used for warning alerts. This colour is explicitly not accessible against light backgrounds, and should never be used for text on light-coloured backgrounds. Similarly, any text or iconography overlaid on this colour should be sufficiently dark to meet an appropriate level of contrast.

While these colours carry semantic meaning, for accessibility purposes, they should not be relied on to communicate intent. You must ensure your iconography, content and placement of any messaging carries enough meaning that the colour only provides additional visual reinforcement of its intent.

For focus styles, we use Focus Purple to highlight the active element or field, usually as an offset border surrounding the element. This colour should not be used in any other context.

Preferred "focus-visible" style

:focus-visible { outline: 3px solid #373666; outline-offset: 0.125em; }

Accessibility tables

To ensure accessible use of our text colours on a range of backgrounds, refer to the tables below for minimum ratings against WCAG's accessibility standards. Colours marked with "Insufficient contrast" should never be used for text or other foreground elements, and those only meeting "AA Large" standard should only be used for graphical elements or large text (font-size over 18pt/24px).

Understanding the Tables

Each column in the table represents a background colour, and each row corresponds to a foreground colour from the respective palette. Valid foreground colours can be used for text, icons, links and other interactive elements that need to be visually perceivable to the user.

For more guidance on designing for Accessibility, refer to our Accessibility Checklist.

Neutral backgrounds

Brand palette

Note that as a dark colour, True Green requires a specific inverted palette of foreground colours. This table outlines contrast relationships for foreground colours on Bright Green , Sage Green , Warm White and Sunset Pink .

Inverted palette

Extended palettes

Sometimes digital interfaces require nuances, variations or extensions of brand colours beyond the typical brand guidelines. If the palettes contained within this guide are insufficient for your purposes, please contact DesignOps or nib's brand team for further guidance.