Skip to main content

System Colours

Guidance​

System colours provide neutral tones to build contrast and status specific tones to provide contextual or transactional feedback.

These include:

  • Status: Colours to support the communication of Error, Warning, Success and Information.

  • Neutral: A set of grey shades for building user interfaces.

  • Greyscale: A dark grey to provide a neutral alternative to brand colours.

CSS Usage​

color: var(--color-foundation-error-default);

ClassName Usage​

info

The tailwind classnames requires Tailwind CSS. Refer to the getting started documentation to add styling

<div className="bg-error"></div>

Grey Colours

Sample

Name

Tokens

Tailwind