Colors

Mesh is a multi-brand design system, and as such, we are required to work with color in an agnostic manner. We do not refer to named colors from the nib Brand Guidelines, but instead use descriptive names that are more appropriate for digital products and accessible design. This allows us to maintain a consistent experience across our various brands, while still allowing for flexibility in how we apply color to our designs.

There are three categories of applications of color in Mesh: backgrounds, foregrounds (text and icons) and borders. We support only a limited set of colors for each of these applications, in particular for backgrounds where we support just two background colors.

Whilst this may seem extremely limiting, it is a deliberate choice to ensure accessibility and consistency across our designs. Instead of picking the background alone, you pick a sentiment and prominence for the element you are designing, and the system will automatically adjust the foreground and border colors to ensure they maintain an accessible contrast ratio. This allows us to maintain a consistent experience across our various brands, while still allowing for flexibility in how we apply color to our designs.

Sentiments and prominences

Sentiments are the mechanism by which we can apply stylistic color choices to components and elements. Some sentiments are common across all brands, such as

• default,
• hero,
• positive,
• negative,
• informative, and
• cautionary,

while others are more specific to the nib brand, such as sage, warm and sunset. Brands can also create their own unique sentiments. There is no requirement for uniformity of sentiments across brands.

Prominences are a way to adjust the intensity of a sentiment, with prominent being the most intense and muted being the least. The complete list of prominences includes:

• prominent,
• default,
• gentle, and
• muted.

Not all sentiments have all levels of prominence, but when they do, you can be assured that they will maintain an accessible contrast ratio between text and background colors.

Background colors

The two supported background colors are default and hover. The default background is used for the majority of our components and elements, while the hover background is reserved for hover states of interactive elements.

// Try changing the sentiment and prominence to see how the background adjusts
<ModeProvider sentiment="default" prominence="default">
  <Box background="default" foreground="default" padding={6}>
    Default
  </Box>
  <Box background="hover" foreground="default" padding={6}>
    Hover
  </Box>
</ModeProvider>

Foreground colors

There are more options for foreground colors to allow for more typographic flexibility in our designs. There are foreground tokens for prominence within the neutral palette (default, prominent, gentle and muted), as well as foreground tokens for more semantic purposes (brand, error, success, info, warning, selected and sentiment).

Border colors

Border colors take a similar approach to foreground colors, with tokens for prominence within the neutral palette (default, prominent, gentle and muted), as well as tokens for more semantic purposes (brand, error, success, info, warning, selected and sentiment). In addition, we have a focus border color that is used for focus states of interactive elements, an input border color that is used for form controls and some product-specific border colors (productBasic, productBronze, productSilver, productGold, productHospital, productExtras and productCombined).