Tu colours

Colour palettes

Tu’s selection of colours are divided into distinct palettes. The available palettes are Brand, Interaction, Semantic and Monochrome. Tu’s core colours are white and black. The black is the colour associated with Tu by users, so it’s important to use this colour first and foremost.

Primary brand palette

Interaction palettes

The following colour palettes represent how the brand colours are used in interaction states.

Primary interaction palette

Secondary interaction palette

The following secondary colour palettes represent how the brand colours are used in interaction states.

Monochrome palette

The monochome palette is a group of colours that can provide text contrast and neutrality to designs.

Semantic palette

The semantic palette is a shared group of colours that help communicate key messages like errors, warnings, successes and understanding next steps. The consistent use of semantic colours keeps cognitive load low and makes for a unified and engaging user experience across our brands.

Error

Info

Success

Warning

Colour accessibility

To comply with the Web Content Accessibility Guidelines AA standard contrast ratios, choose colours from the Tu palette that have sufficient colour contrast between them so that people with low vision can see and use our products.

Primary palette accessibility

When using base or darker as a background colour, only use Monochrome White (#FFFFFF) for text.

When using light or lighter as a background colour, only use Monochrome Darker for text.

Further reading

• Accessibility guidance
• WCAG 2.2 colour contrast guidelines

Was this page helpful?