Department of Internal Affairs, New Zealand Government — An alpha, all-of-government component set built to make New Zealand's public services consistent and accessible.
Commissioned by Government Information Services at DIA, with the programme run out of DIA's Service Innovation Lab, and built with agency Springload starting 2019 (Crown copyright 2019, DIA). The codebase has stayed in public alpha — npm package @govtnz/ds still at v0.2.x — rather than reaching a 1.0 release.
Owned by the Department of Internal Affairs (Crown copyright, MIT-licensed) on behalf of the New Zealand Government. Feedback runs through GitHub issues and an NZGDS Slack channel rather than a published RFC process, consistent with alpha status.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
$g-theme-background-color
Default page/component background
$g-theme-color
Default body text color
$g-theme-link-color
Default link color
$g-theme-error-color
Error/critical text and border color
$g-theme-button-background-color
Primary button background
$g-theme-focus-ring-color
Focus ring outline, applied to all interactive elements
Exactly what ships in nz-design-system-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# New Zealand Government Design System — Design Style Reference > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Department of Internal Affairs, New Zealand Government. "New Zealand Government Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** New Zealand Government Design System **Owner:** Department of Internal Affairs, New Zealand Government **Official documentation:** https://design-system-alpha.digital.govt.nz/ --- ## Summary An alpha, all-of-government component set built to make New Zealand's public services consistent and accessible. ## Design tokens (illustrative) | Token | Value | Role | | --- | --- | --- | | `$g-theme-background-color` | `#ffffff` | Default page/component background | | `$g-theme-color` | `#2a2a2a` | Default body text color | | `$g-theme-link-color` | `#005ea5` | Default link color | | `$g-theme-error-color` | `#b10e1e` | Error/critical text and border color | | `$g-theme-button-background-color` | `#078766` | Primary button background | | `$g-theme-focus-ring-color` | `#b53cde` | Focus ring outline, applied to all interactive elements | ## Origin Commissioned by Government Information Services at DIA, with the programme run out of DIA's Service Innovation Lab, and built with agency Springload starting 2019 (Crown copyright 2019, DIA). The codebase has stayed in public alpha — npm package @govtnz/ds still at v0.2.x — rather than reaching a 1.0 release. ## Governance Owned by the Department of Internal Affairs (Crown copyright, MIT-licensed) on behalf of the New Zealand Government. Feedback runs through GitHub issues and an NZGDS Slack channel rather than a published RFC process, consistent with alpha status. ## Known for - Shipping the same component in multiple integration formats from one source — HTML, CSS/SCSS with CSS custom properties, React, and Vue (beta) — so agencies on different stacks can consume it. - Theming every component through CSS custom properties with SCSS fallbacks, so a theme can be swapped without recompiling Sass. - A distinctly high-visibility focus ring applied uniformly across every interactive component via one shared theme token. ## Underrated - The Alert component's four semantic border-color tokens (success/warning/error/info) are cleanly separated from the shared error-color token used elsewhere, keeping error styling consistent across forms and banners. - An unambiguous MIT license with an explicit Crown-copyright notice, which is more reuse-clarity than many public-sector design systems ship with. ## Watch out for - It has been in public alpha since 2019 with the npm package still at 0.2.x as of writing — there's no committed 1.0 timeline and no API-stability guarantee. - Vue and other integration paths are documented as beta quality; only the HTML/CSS and React outputs should be treated as reasonably solid. ## Components worth studying - **Button** — Styled via CSS custom properties with SCSS fallbacks, so themes override colors without recompiling Sass. - **Select** — A custom-styled native <select> element rather than a JS-driven listbox, preserving native keyboard and screen-reader behavior. - **Alert** — Ships success/warning/error/info variants distinguished by dedicated border-color tokens. ## When to choose New Zealand Government Design System Reasonable to evaluate if you're a NZ government agency needing a shared visual baseline on plain HTML/CSS or React and can tolerate alpha-stage churn. Treat the Vue path as experimental, and check current component coverage on the alpha site before committing. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of New Zealand Government Design System by Department of Internal Affairs, New Zealand Government — An alpha, all-of-government component set built to make New Zealand's public services consistent and accessible. Lean into what it's known for: Shipping the same component in multiple integration formats from one source — HTML, CSS/SCSS with CSS custom properties, React, and Vue (beta) — so agencies on different stacks can consume it. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [Design System (Alpha) docs](https://design-system-alpha.digital.govt.nz/) - [GitHub repo](https://github.com/GOVTNZ/govtnz-design-system) - [npm package](https://www.npmjs.com/package/@govtnz/ds) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/nz-design-system) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
If you're evaluating this system
Reasonable to evaluate if you're a NZ government agency needing a shared visual baseline on plain HTML/CSS or React and can tolerate alpha-stage churn. Treat the Vue path as experimental, and check current component coverage on the alpha site before committing.
Where next
