Themes

Themes are used to customise your website’s colour and typography to align with your organisation’s branding. The example shows how you’ll be able to apply themes after the Design System comes out of Alpha.

Example themes

Select one of the following 3 theme options to see how Design System components adapt to different colour schemes. Anything you type in the text fields will remain when you switch between themes. No information is sent if you select the ‘Submit’ button.

Customising a theme

You can customise the Design System theme to follow your brand guidelines by altering the values in the Sass variables file.

We encourage you to make the look, feel, and usability of elements as consistent as possible with the Design System. And when you customise, make sure your visual elements continue to meet the NZ Government Web Accessibility Standard.

Colour

The colour palette provides a colour structure for your website. You’ll be able to adapt this to your digital brand’s colour requirements.

Read about the Design System colour structure

Typography

We’re investigating how to include font choice in the Design System to meet New Zealand language requirements. However, you may choose to use your own fonts on your website to align with your brand. If so, you’ll still need to make sure you meet the NZ Government Web Accessibility Standard.

Read about the typography of the Design System