Get started

Find out how to start using the New Zealand Government Design System (NZGDS), whether you’re a designer, developer, content designer, product owner or project manager.

Designer

The design system gives designers a common visual style that you can apply flexibly to any government digital platform. Our visual style offers a clean aesthetic that meets the Web Accessibility Standard, along with a design consistency that promotes an effortless user experience.

Since you may need to customise the basic elements to follow your brand guidelines, we encourage you to make their look, feel, and usability as consistent as possible with the design system. And when you customise, make sure your visual elements continue to meet the Web Accessibility Standard.

For UX designers, we're working on tools to create high-fidelity prototypes. You can use these prototypes for user testing, and to help product owners and project managers visualise the end product.

Developer

Developers can pick and mix the building blocks for a webpage from the design system. Consistent UI components can slot into existing websites without conflicting with existing CSS. All components meet the Web Content Accessibility Guidelines (WCAG) 2.1.

Install instructions can be found on our GitHub project.

The design system currently provides components in:

• HTML and CSS (or Sass (SCSS))
• React, in JavaScript or TypeScript, with or without Styled Components
• Vue components, in JavaScript or TypeScript
• Mustache / Handlebars

Soon we will also be supporting:

• SilverStripe for SilverStripe 3 and 4.

More formats are under development, but if you have particular requirements please let us know via info@digital.govt.nz.

For browsers, the design system is supporting Internet Explorer v11 and latest versions of most other browsers. More information is available on our Github project.

Content Designer

Components and patterns in the design system help content designers by providing a tried and tested structure for content that users can easily follow, and that meets the Web Usability Standard. You can be confident that all form fields and templates meet the Web Accessibility Standard.

Guidance on how best to write for each component and pattern is integral to the design system. For example, you'll get specific guidance for writing labels, help text, and error messages that work for forms.

Product Owner and Project Manager

Using the design system’s tested components and basic elements can help speed up project delivery.

Prototypes can be easily produced at any stage to:

• demonstrate your product vision to stakeholders to get buy-in
• enable more accurate scoping and planning
• speed up the prototyping and testing cycle
• help you to visualise the end-product during development.

You can confidently promote your product as:

• meeting all accessibility requirements
• focussed on usability
• being at the forefront of international best practice.