ICTU, on behalf of the Ministry of the Interior and Kingdom Relations (BZK) — Not a design system you install — a shared architecture other Dutch government design systems are built on top of.
Started around 2019 as a proof-of-concept collaboration between Dutch government UX professionals; since 2020 it has been run by ICTU on behalf of BZK, with community governance as an explicit long-term goal rather than single-ministry ownership.
ICTU acts as coordinator on behalf of BZK, but no single org owns the components: member organizations (Utrecht, Den Haag, RVO, Amsterdam, Rotterdam, Tilburg, Logius and dozens more) each publish and maintain their own repos under the nl-design-system GitHub org and beyond, following a shared architecture and a staged relay model — contributions move from Help Wanted to Community to Candidate to Hall of Fame — rather than a single top-down roadmap.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
utrecht.space.block.md
Shared block-axis spacing step, reused verbatim across multiple independent member token sets
utrecht.space.inline.md
Shared inline-axis spacing step, tying horizontal spacing to type size
duo.color.blue.30
DUO's own brand primary blue — a member org's token, not a universal NL DS color
duo.color.yellow
DUO brand accent yellow
color.error
Error red reused verbatim by two independently maintained member token sets — a de facto, not enforced, convention
common.utrecht.action.busy.cursor
Shared non-color interaction token from the common/utrecht layer
Exactly what ships in nl-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.
# NL 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 ICTU, on behalf of the Ministry of the Interior and Kingdom Relations (BZK). "NL 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:** NL Design System **Owner:** ICTU, on behalf of the Ministry of the Interior and Kingdom Relations (BZK) **Official documentation:** https://nldesignsystem.nl/ --- ## Summary Not a design system you install — a shared architecture other Dutch government design systems are built on top of. ## Design tokens (illustrative) | Token | Value | Role | | --- | --- | --- | | `utrecht.space.block.md` | `16px` | Shared block-axis spacing step, reused verbatim across multiple independent member token sets | | `utrecht.space.inline.md` | `1ch` | Shared inline-axis spacing step, tying horizontal spacing to type size | | `duo.color.blue.30` | `#005ea5` | DUO's own brand primary blue — a member org's token, not a universal NL DS color | | `duo.color.yellow` | `#ffb612` | DUO brand accent yellow | | `color.error` | `#dc3545` | Error red reused verbatim by two independently maintained member token sets — a de facto, not enforced, convention | | `common.utrecht.action.busy.cursor` | `wait` | Shared non-color interaction token from the common/utrecht layer | ## Origin Started around 2019 as a proof-of-concept collaboration between Dutch government UX professionals; since 2020 it has been run by ICTU on behalf of BZK, with community governance as an explicit long-term goal rather than single-ministry ownership. ## Governance ICTU acts as coordinator on behalf of BZK, but no single org owns the components: member organizations (Utrecht, Den Haag, RVO, Amsterdam, Rotterdam, Tilburg, Logius and dozens more) each publish and maintain their own repos under the nl-design-system GitHub org and beyond, following a shared architecture and a staged relay model — contributions move from Help Wanted to Community to Candidate to Hall of Fame — rather than a single top-down roadmap. ## Known for - The Utrecht component library (@utrecht/*) acting as the de facto reference implementation — 100+ granular npm packages, ported to React, Vue, Angular, and plain web components. - A federated design-tokens model: a themes repo hosts independently maintained Style Dictionary token sets for dozens of municipalities and agencies, each resolving its own brand colors against a shared common token vocabulary. - A public, staged contribution pipeline (Help Wanted → Community → Candidate → Hall of Fame) letting any Dutch government org propose or adopt a component without central sign-off first. ## Underrated - The shared common/utrecht token layer (space, focus, action tokens) is reused byte-for-byte across independently maintained municipal token packages. - Several municipalities wire their Style Dictionary build directly to Tokens Studio Figma exports, giving designers a working Figma-to-code pipeline most single-vendor systems only promise. ## Watch out for - There is no single "NL Design System" library to npm-install — adopting it means picking a member implementation (Utrecht is most mature) or building your own theme against the shared architecture. - Maturity varies enormously by member: Utrecht ships versioned, tested packages, while several municipality repos are explicitly marked work-in-progress with hundreds of open issues each. ## Components worth studying - **@utrecht/button-react** — The canonical Button implementation in the Utrecht component library, one of the most widely consumed packages in the ecosystem. - **@utrecht/form-field-react** — Combines label, input, and validation-message wiring into one accessible form-field pattern, used across government-forms-heavy member sites. - **@utrecht/data-badge-react** — A small status/count badge — one of dozens of granular single-purpose packages that make up the library rather than one monolithic bundle. ## When to choose NL Design System Evaluate this as a shared architecture and token/contribution protocol, not a product. Dutch government bodies should look at which existing member (Utrecht, RVO, Logius) is closest to their needs and fork or theme it. Outside Dutch government, it's mainly a case study in federated, multi-tenant design-token governance. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of NL Design System by ICTU, on behalf of the Ministry of the Interior and Kingdom Relations (BZK) — Not a design system you install — a shared architecture other Dutch government design systems are built on top of. Lean into what it's known for: The Utrecht component library (@utrecht/*) acting as the de facto reference implementation — 100+ granular npm packages, ported to React, Vue, Angular, and plain web components. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [NL Design System docs](https://nldesignsystem.nl/) - [GitHub org](https://github.com/nl-design-system) - [Themes (design tokens) repo](https://github.com/nl-design-system/themes) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/nl-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
Evaluate this as a shared architecture and token/contribution protocol, not a product. Dutch government bodies should look at which existing member (Utrecht, RVO, Logius) is closest to their needs and fork or theme it. Outside Dutch government, it's mainly a case study in federated, multi-tenant design-token governance.
Where next
