Token Sets
Thematiq includes 39 token sets — pre-configured themes for Dutch government organizations. Each token set defines colors, typography, border radius, and other design tokens specific to that organization.
Find a set
The list holds over sixty sets. Type part of a name or id in the search field above Design token set. The list then shows only the sets that match, and the line beside the field says how many. Case and accents do not count: fryslan finds Fryslân. The set that is selected stays in the list, and searching changes nothing until you choose another set. Press Escape to see every set again.
Available Token Sets
| Organization | Primary Color | Logo |
|---|---|---|
| Rijkshuisstijl (National Government) | #154273 | Yes |
| Gemeente Amsterdam | #004699 | Yes |
| Gemeente Bodegraven-Reeuwijk | #0066CC | |
| Gemeente Borne | #003352 | |
| Gemeente Buren | #D41422 | |
| Demodam | #03A9F4 | |
| Gemeente Dinkelland | #006CB9 | |
| Gemeente Drechterland | #1B6E8C | Yes |
| Gemeente Duiven | #1D5B8F | |
| DUO | #004FA3 | |
| Gemeente Enkhuizen | #0055AD | |
| Gemeente Epe | #00549E | Yes |
| Gemeente Groningen | #154273 | |
| Gemeente Haarlem | #1457A3 | |
| Gemeente Haarlemmermeer | #068E8C | |
| Gemeente Hoorn | #09366C | Yes |
| Gemeente Horst aan de Maas | #125EA4 | |
| Gemeente Leiden | #d62410 | Yes |
| Gemeente Leidschendam Voorburg | #1E1B54 | |
| Gemeente Nijmegen | #157C68 | Yes |
| Noaberkracht | #4376fc | |
| Gemeente Noordoostpolder | #389003 | |
| Gemeente Noordwijk | #2C2276 | Yes |
| Provincie Zuid-Holland | #C42035 | Yes |
| Riddeliemers | #154273 | |
| Ridderkerk | #008937 | |
| Gemeente Stede Broec | #035935 | |
| Gemeente Tilburg | #003366 | Yes |
| Gemeente Tubbergen | #067432 | |
| Gemeente Venray | #2A8113 | |
| Gemeente Vught | #0088AD | |
| VNG (Vereniging Nederlandse Gemeenten) | #003865 | Yes |
| Gemeente Westervoort | #003C6B | |
| Gemeente Utrecht | #24578F | Yes |
| Gemeente Den Haag | #1a7a3e | Yes |
| Gemeente Rotterdam | #00811f | Yes |
| xxllnc | #333333 | Yes |
| Gemeente Zevenaar | #596E28 | |
| Gemeente Zwolle | #3A4F93 | |
| (EXAMPLE) Basisschool (fictional) | #B03A12 | Yes |
| (EXAMPLE) Voortgezet onderwijs (fictional) | #2D4FA0 | Yes |
| (EXAMPLE) College (fictional, mbo) | #7A1F6E | Yes |
| (EXAMPLE) Opleider (fictional) | #0E4D5C | Yes |
Token Set Sources
Token sets are sourced from the official NL Design System themes repository and individual organization design systems.
A nightly workflow (.github/workflows/sync-tokens.yml) keeps the upstream sets current. It runs scripts/sync-upstream-tokens.mjs, which works like this:
- It converts each upstream theme onto the
--nldesign-*vocabulary with the theme converter (js/lib/tokenConverter.js). - It reads a theme's style-dictionary sources, or its Tokens Studio export (
figma/*.tokens.json) when upstream publishes only that. - It only touches sets that came from upstream: the old raw sync, an earlier conversion, or a new organisation.
- A hand-authored or hand-resolved set, such as
zwolle, is never written. - Values you add to an upstream set are kept. They live in its "Local overrides" section.
- A colour in that section (
--nldesign-color-*) is pinned: the converter keeps it and repairs only the colours that depend on it. To pin one the first time, run the sync with--pin <slug>:--nldesign-color-primary=<value>; it writes the pin into the section. - A set is accepted only when
scripts/token-set-gate.shpasses with it in. Any other set stays as it was, and the PR names it.
You can run the same sync locally:
git clone --depth 1 https://github.com/nl-design-system/themes.git /tmp/themes
node scripts/sync-upstream-tokens.mjs /tmp/themes "$(git -C /tmp/themes rev-parse HEAD)" --report report.md
To convert one published theme by hand, run the converter on its built CSS:
npm run convert:theme -- path/to/theme.css --slug zwolle --name "Gemeente Zwolle" --write
- Colours written as
oklch()oroklab()become hex, the way Rijkshuisstijl 18 needs it. The report keeps the original value. - A theme with no primary-action colour, such as Zwolle's, takes the primary colour of the set's entry in
token-sets.json, as the nightly sync does for buren and venray. Pass--primary <hex>to use another one. - The command line does not repair contrast. A failing pair shows up in the gate, not as a changed colour.
After editing a set by hand, run bash scripts/token-set-gate.sh. It regenerates the dark variants, the contrast report, the token reference and the set counts in css/public-bridge.css. Then it runs the token-set tests.
Adding a New Token Set
To add support for a new organization:
- Create a CSS file at
css/tokens/{id}.csswith all required--nldesign-*variables - Add metadata to
token-sets.json(name, description, primary color) - Optionally add a logo SVG at
img/logos/{id}.svg
The admin dropdown picks up new token sets automatically — no PHP changes needed.
For detailed information on the token variable namespace, see the Token Architecture reference.
A leaf app's own picker (a builder tool inside another Conduction app, not the admin dropdown above) can enumerate this same catalogue and evaluate WCAG contrast without admin privileges via a small, closed, non-admin API — see the App Token-Set Selection contract for the endpoints, response shapes, and the scoped-application contract a shared client-side applier implements against.