Skip to main content

Text Colours

Guidance​

Text colours utilise foundations to provide a flexible and accessible set of text colours. They can also be used for crafting custom components and are strictly to be used for text only.

Typography colours utilise brand colours and have specific use cases:

  • Body: A brand colour to be used for all body text.

  • Heading: A brand colour to be used for all heading text.

Text colours utilise system colours for when alternatives to typography colours are required:

  • White: An alternative to body and heading on dark backgrounds to meet accessibility contrast requirements.

  • Black: A consistent shade of black to be used when body text colour contrast isn’t sufficient on a light background.

  • Light: A lighter shade of black for sub-text to create visual hierarchy.

  • Disabled: Used to communicate non-interactive text.

  • Placeholder: Used for form input text to guide a user on the required input.

CSS Usage​

color: var(--typography-body-color);

ClassName Usage​

info

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

<p className="text-body">Text</p>

Typography​

Sample

Name

Tokens

Tailwind

Text​

Sample

Name

Tokens

Tailwind