Colors

Core palette

These are the primary colors 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 color, and can be used anywhere to accentuate our brand identity. True Green should be used for elements like large page Headings, Buttons and Links. Be cautious not to overuse this color.

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

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

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

For different combinations of text and background colors, refer to the Accessibility tables below.

Secondary palette

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

Neutral palette

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

While Darkest is our default text color, Deep Black should be considered for small text (≤ 14px), disclaimers or other situations where maximum contrast is required.

Our light palette is intended to be used primarily for background colors. Clear White can also be used as a text color to achieve accessible contrast on sections or components with darker backgrounds.

These tones may also be used for non-critical visual elements like container borders, page dividers. zebra-striping table rows, or otherwise to group or separate blocks of content.

Functional palette

These colors 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 colors:

• 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 color is explicitly not accessible, and should never be used for text. Similarly, any text or iconography overlaid on this color should be dark to meet an appropriate level of contrast.

While these colors 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 color only provides additional visual reinforcement of its intent.

For focus styles, we use Accent Blue to highlight the active element or field. This color should not be used in any other context.

Tints

As an alternative to the core and secondary palettes, Mesh provides a set of algorithmically generated tints for each color.

These tints should only be used as background colors, and never for text colors in any situation as they do not satisfy our accessibility standards on the majority of backgrounds.

True Green tints

Bright Green tints

Sage Green tints

Warm White tints

Sunset Pink tints

Accessibility tables

To ensure accessible use of our text colors on a range of backgrounds, refer to the tables below for minimum ratings against WCAG's accessibility standards. Colors that are not listed as a Foreground color should never be used as text.

Tints

True Green

Bright Green

Sage Green

Warm White

Sunset Pink

Neutrals (light)