Basics

Colours

The colour palette provides a colour structure for your website, which you will be able to adapt to the colours of your digital brand. Theming for the all-of-government (AOG) palette is being worked on now, and will be available in the near future.

Colour choice for the design system was based on a survey of the palettes used on websites of 15 core New Zealand government agencies. We grouped these colours by hue and brightness, and discovered they fell into distinct categories. These categories formed the basis of our colour structure.

Colour contrast

Accessible colour contrast ratios help people with sight and colour vision conditions to understand coloured text and design features. In New Zealand, over 8% of men have some form of colour-blindness, and so do some women. Others have vision affected by colour contrast and sizing conditions.

The contrast ratio of text and interactive elements in your website must meet the NZ Government Web Accessibility Standard, specifically the Web Content Accessibility Guidelines ( WCAG) 2.1 to level AA. The AOG design system has been built to meet these standards.

To ensure compliance, only use the variables in the context they are designed for.

Greys suite

The Slate in this grey palette is used for all text and core UI, such as borders of text input fields and checkboxes. The suite of grey tints can be used for a variety of graphic elements.

Slate

#2A2A2A

Dark grey

#363636

Mid grey

#595959

Light grey

#D3D3D3

Off white

#F4F4F4

Brand colours

Once theming is released, you will be able to customise this palette to express your digital brand.

Primary

#23CBA5

Primary 2

#24A882

A WCAG 3:1 contrast accessible colour for clickable elements and other objects that describe function.

Primary 3

#078766

A WCAG 4.5:1 contrast accessible colour for text.

UI colours

This range has been carefully selected to meet the Web Accessibility Standard for the design system’s user interface.

Focus

#B53CDE

Only use this colour to indicate focus, such as moving from element to element.

Link

#005DBB

We suggest using a blue hue to highlight link text, since this is common usage.

Link active

#000C48

This ‘link active’ colour can be a darker tint of the ‘link text’ colour.

Link visited

#4C2C92

We recommend a purple hue to show a link has been visited.

Alerts

These colours are used for alerts, such as confirming success with text input, warnings, and error messages. This ‘traffic light’ palette is commonly used for this purpose. To avoid confusing the user, don’t use these colours — or tints of them — for any other purpose.

Error

#B10E1E

Warning

#D47500

Success

#088A20

Info

#1F1BFB

Text colours

These text and background colour combinations have been tested to meet the WCAG 2.1 text contrast requirements. For each of the background colours below, a list of compliant text colours is provided.

White

#ffffff

  • Black #000000
  • Slate #2A2A2A
  • Dark grey #363636
  • Mid grey #595959
  • Primary 3 #078766
  • Link #005DBB
  • Link active #000C48
  • Link visited #4C2C92
  • Error #B10E1E
  • Success #088A20

Dark grey

#363636

  • Light grey #D3D3D3
  • Off-white #F4F4F4
  • Primary #23CBA5
  • White #FFFFFF

Black

#000000

  • Light grey #D3D3D3
  • Off-white #F4F4F4
  • Primary #23CBA5
  • Primary 2 #24A882
  • Primary 3 #078766
  • White #FFFFFF

Slate

#2a2a2a

  • Light grey #D3D3D3
  • Off-white #F4F4F4
  • Primary #23CBA5
  • Primary 2 #24A882
  • White #FFFFFF

Dark grey

#363636

  • Light grey #D3D3D3
  • Off-white #F4F4F4
  • Primary #23CBA5
  • White #FFFFFF

Mid grey

#595959

  • Light grey #D3D3D3
  • Off-white #F4F4F4
  • White #FFFFFF

Light grey

#d3d3d3

  • Black #000000
  • Slate #2A2A2A
  • Dark grey #363636
  • Mid grey #595959

Off-white

#f4f4f4

  • Black #000000
  • Slate #2A2A2A
  • Dark grey #363636
  • Mid grey #595959
  • Link #005DBB
  • Link active #000C48
  • Link visited #4C2C92

Primary

#23CBA5

  • Black #000000
  • Slate #2A2A2A
  • Dark grey #363636

Primary 2

#24A882

  • Black #000000
  • Slate #2A2A2A

Primary 3

#078766

  • White #FFFFFF

Core government brand colours

These colours are part of the core all-of-government brand and should only be used as shown.

White

#FFFFFF

Dark grey

#363636

Black

#000000

Get in touch

If you’ve got a question, idea, or suggestion, email the Design System (DS) team at info@digital.govt.nz, use our AOG-DS Slack app, or discuss Colours on 'GitHub issues'.