Color

This page explains how to use color on the web. For print or other uses, see the Brand ➝ colors page.

The color palette is based on the existing brand colors, tweaked to increase vibrance and clarity in digital applications. Color contrast ratios should be checked with a tool like the webAIM contrast checker to ensure all text meets WCAG AA requirements.

A limited set of color tints and shades are available for element backgrounds, borders, icons, etc. These can also be used to increase contrast where appropriate, for example darkening a blue text link which appears on a light blue background.

MP Petrol

Step -1

Step 0

Step 1

Step 2

Step 3

MP Blue

Step -1

Step 0

Step 1

Step 2

Step 3

MP Green

Step -1

Step 0

Step 1

Step 2

Step 3

MP Rubine

Step -1

Step 0

Step 1

Step 2

Step 3

MP Charcoal

Step -1

Step 0

Step 1

Step 2

Step 3

MP Utility Blue

Step -1

Step 0

Step 1

Step 2

Step 3

MP Utility Gold

Step -1

Step 0

Step 1

Step 2

Step 3

SCSS function

Color can be applied via a SCSS function. The color() function takes two arguments, one for the color and one for the shade/tint. Like typography, this uses the 'step' syntax to lighten/darken the base color (step 0). For example:

.c-component {
  background: color('petrol', 'step-3');
  color: color('blue');
}

Utility classes

You can also use utility classes to apply color, with one set for the color property, and another for background-color:

<p class="u-blue">Blue text</p>
<div class="u-bg-petrol-step-3">Petrol step 3 background</p>