Colour

Blues

• Waitemata: primary blue. For site headers, headings, large card backgrounds, primary CTAs, mega menus.
• Azure: secondary/accent blue. For CTAs, headings and sub-headings, occasional backgrounds.
• Mahina:  secondary/accent blue. For separators, text decoration, filter and facet components.

Accents

• The website does not use the brand accent colours in layouts and components.
• Brand accent colours are introduced using imagery, and campaign collateral.
• The secondary blues, Azure and Mahina, function as accent colours, used intentionally on separators, CTAs, FABs, and text decorations.

Tints

• The website utilises 5%, 10%, 20% and 30% tints of Waitemata. These colours are used to define or separate content blocks, and alternating page or component sections (e.g. zebra striping). Tints are also combined with graphic elements, such as the Waipapa graphic, to add texture.

Greys

• The website uses a range of greys for form controls and components; for backgrounds, separators and related elements, tints of the brand blues are recommended.

Colour, in UX Basics

The primary colour palette, accents, tints, and gradients.

Header, in UI Components

Headers establish structure, brand and identity, and provide global navigation.