The rebrand is live!
💅 ğŸŽŠ
Read about it here
Skip to content

Colors

We use a combination of whitespace and color to aid usability and deliver clean experiences to end users. Color helps distinguish our brand, and delivers a consistent user experience across our various digital products. These colors have been adjusted from those in our brand guidelines to ensure they are appropriate for digital use.

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.

True Green

Token: trueGreen

Hex: #144a38

Bright Green

Token: brightGreen

Hex: #82e578

Clear White

Token: clearWhite

Hex: #ffffff

Darkest

Token: darkest

Hex: #434343

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.

Sage Green

Token: sageGreen

Hex: #c2d6b5

Warm White

Token: warmWhite

Hex: #f5f0d6

Sunset Pink

Token: sunsetPink

Hex: #fdd6bc

Lightest

Token: lightest

Hex: #f1f1f1

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.

Deep Black

Token: black

Hex: #141414

Darkest

Token: darkest

Hex: #434343

Darker

Token: darker

Hex: #636363

Dark

Token: dark

Hex: #8a8a8a

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.

Light

Token: light

Hex: #c7c7c7

Lighter

Token: lighter

Hex: #e4e4e4

Lightest

Token: lightest

Hex: #f1f1f1

Near White

Token: nearWhite

Hex: #fafafa

Clear White

Token: clearWhite

Hex: #ffffff

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.

Success Green

Token: success

Hex: #007800

Info Blue

Token: info

Hex: #005bb9

Error Red

Token: error

Hex: #c81414

Warning Yellow

Token: warning

Hex: #ffb400

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.

Accent Blue

Token: accent

Hex: #525199

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

True Green 80%

Token: trueGreen80

Hex: #436e60

True Green 60%

Token: trueGreen60

Hex: #729288

True Green 40%

Token: trueGreen40

Hex: #a1b7af

True Green 20%

Token: trueGreen20

Hex: #d0dbd7

Bright Green tints

Bright Green 80%

Token: brightGreen80

Hex: #9bea93

Bright Green 60%

Token: brightGreen60

Hex: #b4efae

Bright Green 40%

Token: brightGreen40

Hex: #cdf5c9

Bright Green 20%

Token: brightGreen20

Hex: #e6fae4

Sage Green tints

Sage Green 80%

Token: sageGreen80

Hex: #cedec4

Sage Green 60%

Token: sageGreen60

Hex: #dae6d3

Sage Green 40%

Token: sageGreen40

Hex: #e7efe1

Sage Green 20%

Token: sageGreen20

Hex: #f3f7f0

Warm White tints

Warm White 80%

Token: warmWhite80

Hex: #f7f3de

Warm White 60%

Token: warmWhite60

Hex: #f9f6e6

Warm White 40%

Token: warmWhite40

Hex: #fbf9ef

Warm White 20%

Token: warmWhite20

Hex: #fdfcf7

Sunset Pink tints

Sunset Pink 80%

Token: sunsetPink80

Hex: #fddec9

Sunset Pink 60%

Token: sunsetPink60

Hex: #fee6d7

Sunset Pink 40%

Token: sunsetPink

Hex: #feefe4

Sunset Pink 20%

Token: sunsetPink20

Hex: #fff7f2

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.

Background

Foreground

True Green

Bright Green

Deep Black

Darkest

Clear White

Success Green

Info Blue

Error Red

Warning Yellow

Clear White

-

AA Normal
AA Normal
AA Normal

True Green

-

AA Normal
AA Normal

Bright Green

-

AA Normal
AA Normal

Sage Green

-

AA Normal
AA Normal
AA Large
AA Large
AA Large

Warm White

-

AA Normal
AA Normal
AA Normal

Sunset Pink

-

AA Large
AA Normal
AA Large

Lightest

-

AA Normal
AA Normal
AA Normal

Tints

True Green

Background

Foreground

True Green

Bright Green

Deep Black

Darkest

Clear White

True Green 80%

-

AA Large
AA Large
AA Normal

True Green 60%

-

AA Normal
AA Large

True Green 40%

-

AA Normal
AA Normal

True Green 20%

-

AA Normal

Bright Green

Background

Foreground

True Green

Bright Green

Deep Black

Darkest

Clear White

Bright Green 80%

-

AA Normal

Bright Green 60%

-

Bright Green 40%

-

Bright Green 20%

-

Sage Green

Background

Foreground

True Green

Bright Green

Deep Black

Darkest

Clear White

Sage Green 80%

-

Sage Green 60%

-

Sage Green 40%

-

Sage Green 20%

-

Warm White

Background

Foreground

True Green

Bright Green

Deep Black

Darkest

Clear White

Warm White 80%

-

Warm White 60%

-

Warm White 40%

-

Warm White 20%

-

Sunset Pink

Background

Foreground

True Green

Bright Green

Deep Black

Darkest

Clear White

Sunset Pink 80%

-

Sunset Pink 60%

-

Sunset Pink 40%

-

Sunset Pink 20%

-

Neutrals (light)

Background

Foreground

True Green

Bright Green

Deep Black

Darkest

Clear White

Light

-

AA Normal
AA Normal

Lighter

-

Lightest

-

Near White

-

Clear White

-