Figma changelog
Op deze pagina vind je een overzicht van alle wijzigingen in onze Figma bibliotheken.
Ben je afnemer van de bibliotheken? Dan zie je hier welke updates zijn doorgevoerd, zodat je ze waar nodig ook kunt doorvoeren in de bibliotheek van jouw organisatie. Zo blijf je up-to-date met de laatste versie van de bibliotheek.
Wil je meer weten over hoe je deze changelog gebruikt? Bekijk dan de uitleg over de changelog voor Figma bibliotheken. En wil je weten wat de versienummers precies betekenen? Lees dan over versiebeheer.
Hulpvideo's
11.1.0
16 februari 2026
Type toegevoegd aan Community component 'Alert' van Utrecht
We hebben Community component 'Alert' van Utrecht uitgebreid met Type 'Default'. Hiermee is dit component meer in lijn met de mogelijkheden in code en de weergave in Storybook.
Bekijk de video 'Changelog: Type toegevoegd aan Community component 'Alert' van Utrecht' waarin wordt uitgelegd hoe je dit zelf kunt doen.
11.0.0
12 februari 2026
Community component 'Paragraph' van Utrecht aangepast
Community component 'Paragraph' van gemeente Utrecht is aangepast.
We hebben Community component 'Paragraph' van Utrecht in lijn gebracht met de opbouw van andere componenten in de Figma bibliotheek. Hiermee is dit component ook meer in lijn met de weergave in Storybook.
Bekijk de video 'Changelog: Community component 'Paragraph' van Utrecht aangepast' waarin wordt uitgelegd hoe je dit zelf kunt doen.
Tip: Heb je een Figma-bestand waarin je dit component gebruikt? Zorg er dan voor dat je de huidige versie van dat bestand opslaat voordat je de update met wijzigingen vanuit de bibliotheek accepteert. Dit doe je door de huidige versie toe te voegen aan de Version History en deze een duidelijke naam te geven, bijvoorbeeld: 'Voorafgaand aan release 11.0.0'. Daarna kun je zonder zorgen de update accepteren en je bestand up-to-date brengen met de nieuwe versie.
10.0.1
11 februari 2026
Tokenset hernoemd van Community component 'Data Summary' van Den Haag
Tokenset data-list is hernoemd naar data-summary.
Wat moet je doen?
- Open Tokens Studio.
- Ga naar de tokenset
data-list. - Hernoem deze tokenset naar
data-summary - Voer daarna de gebruikelijke stappen uit: Pull Request maken en Versienummer wijzigen.
10.0.0
9 februari 2026
Verschillende formulier componenten toegevoegd en opgeschoond
Er zijn meerdere formuliergerelateerde componenten en tokens opgeschoond en op elkaar afgestemd. Wat begon bij de toevoeging van de Checkbox Group component, heeft geleid tot meerdere verbeteringen in verschillende componenten. Omdat er veel samenhangende wijzigingen zijn gedaan, lichten we deze release toe in een video.
Bekijk de video 'Changelog: Update verschillende formulier componenten' waarin wordt uitgelegd hoe je dit zelf kunt doen.
Hieronder vind je een overzicht van alle componenten en de bijbehorende design tokens die je nodig hebt om deze wijzigingen correct over te nemen.
ToDo component 'Form Field Label Suffix' is gewijzigd in de ToDo bibliotheek.
- Bekijk Form Field Label Suffix in de NL Design System - ToDo Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"todo": {
"form-field-label-suffix": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"margin-inline-start": {
"$type": "dimension",
"$value": "{basis.space.inline.sm}"
}
}
}
}
De volgende tokens zijn toegevoegd:
- Token
utrecht.form-field-label.margin-block-endis toegevoegd aan Form Field Label component. - Token
utrecht.checkbox.margin-inline-endis toegevoegd aan Checkbox component. - Token
utrecht.radio-button.margin-inline-endis toegevoegd aan Radio Button component.
De waarde van de volgende tokens zijn gewijzigd:
- Waarde van token
utrecht.form-field-description.margin-block-endis gewijzigd van0pxnaar common tokenbasis.space.block.lg. - Waarde van token
utrecht.form-field-error-message.margin-block-endis gewijzigd van0pxnaar common tokenbasis.space.block.lg.
Controleer of deze wijzigingen ook wenselijk zijn voor het thema van jouw organisatie. Zo niet, dan hoef je deze niet over te nemen.
De description [code-only] is bij de volgende tokens verwijderd:
utrecht.form-field-description.margin-block-endutrecht.form-field-description.margin-block-startutrecht.form-field-error-message.margin-block-endutrecht.form-field-error-message.margin-block-start
Community component 'Fieldset' van gemeente Utrecht is toegevoegd aan de bibliotheek.
- Bekijk Fieldset in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"utrecht": {
"form-fieldset": {
"margin-block-end": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
},
"margin-block-start": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
},
"invalid": {
"border-inline-start-color": {
"$type": "color",
"$value": "{basis.color.negative.border-default}"
},
"border-inline-start-width": {
"$type": "dimension",
"$value": "{basis.border-width.md}"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
}
},
"legend": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"margin-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"margin-block-start": {
"$type": "dimension",
"$value": "0px"
},
"disabled": {
"color": {
"$type": "color",
"$value": "{basis.color.disabled.color-subtle}"
}
}
},
"section": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
}
}
}
}
}
9.1.0
27 januari 2026
Community component 'Password Input' van Amsterdam toegevoegd
Community component 'Password Input' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
- Bekijk Password Input in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"ams": {
"password-input": {
"background-color": {
"$type": "color",
"$value": "{basis.form-control.background-color}"
},
"border-color": {
"$type": "color",
"$value": "{basis.form-control.border-color}"
},
"border-style": {
"$type": "other",
"$value": "solid",
"$description": "[code-only]"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.form-control.border-width}"
},
"color": {
"$type": "color",
"$value": "{basis.form-control.color}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.form-control.font-family}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.form-control.font-size}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.form-control.font-weight}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.form-control.line-height}"
},
"outline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.form-control.padding-block-start}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.form-control.padding-inline-start}"
},
"placeholder": {
"color": {
"$type": "color",
"$value": "{basis.form-control.placeholder.color}"
}
},
"disabled": {
"color": {
"$type": "color",
"$value": "{basis.form-control.disabled.color}"
},
"cursor": {
"$type": "other",
"$value": "disabled",
"$description": "[code-only]"
}
},
"hover": {
"box-shadow": {
"$type": "boxShadow",
"$value": {
"x": "0",
"y": "0",
"blur": "0",
"color": "{basis.form-control.hover.border-color}",
"spread": "{basis.form-control.hover.border-width}",
"type": "innerShadow"
}
}
},
"invalid": {
"border-color": {
"$type": "color",
"$value": "{basis.form-control.invalid.border-color}"
},
"hover": {
"border-color": {
"$type": "color",
"$value": "{basis.color.negative.border-hover}"
},
"box-shadow": {
"$type": "boxShadow",
"$value": {
"x": "0",
"y": "0",
"blur": "0",
"color": "{basis.color.negative.border-hover}",
"spread": "{basis.form-control.hover.border-width}",
"type": "innerShadow"
}
}
}
}
}
}
}
9.0.0
27 januari 2026
Community componenten 'Task Card' en 'Task Navigation' van Den Haag aangepast
Community componenten 'Task Card' (Action Multiple) en 'Task Navigation' (Action Single) van gemeente Den Haag zijn aangepast.
De volgende tokens zijn toegevoegd:
denhaag.action.context.gapdenhaag.action.context.lg.gapdenhaag.action.actions.gap
Token denhaag.action.border-style is aangevuld met description [code-only].
De volgende tokens zijn hernoemd:
denhaag.action.link.icon.colornaardenhaag.action.link-icon.colordenhaag.action.link.icon.widthnaardenhaag.action.link-icon.widthdenhaag.action.warning.icon.colornaardenhaag.action.warning-icon.colordenhaag.action.warning.icon.widthnaardenhaag.action.warning-icon.width
De volgende tokens zijn verwijderd:
denhaag.action.font-familiydenhaag.action.font-sizedenhaag.action.font-weightdenhaag.action.line-height
De waarde van de volgende tokens zijn gewijzigd:
- Waarde van token
denhaag.action.date.gapis gewijzigd van{basis.space.row.md}naar{basis.space.column.md}. - Waarde van token
denhaag.action.date.warning.gapis gewijzigd van{basis.space.row.md}naar{basis.space.column.md}. - Waarde van token
denhaag.action.single.details.gapis gewijzigd van{basis.space.row.md}naar{basis.space.column.md}. - Waarde van token
denhaag.action.single.details.lg.gapis gewijzigd van{basis.space.row.md}naar{basis.space.column.xl}.
Daarnaast is de opzet van deze Figma componenten aangepast en uitgebreid. Daarom adviseren we om deze componenten over te nemen alsof het nieuwe componenten zijn.
Controleer hierbij wel of de wijzigingen van design token waarden ook wenselijk zijn voor het thema van jouw organisatie. Zo niet, dan kun je hier je huidige waarden invullen.
Let op!
Heb je de 'oude' versie van deze componenten gebruikt in een prototype? Plaats de nieuwe versie ernaast en neem tekstuele 'overrides' over. Vervolgens kun je de 'oude' versie verwijderen uit je prototype.
- Bekijk Task Card in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"denhaag": {
"action": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.default.border-subtle}"
},
"border-style": {
"$type": "other",
"$value": "solid",
"$description": "[code-only]"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.border-width.sm}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"gap": {
"$type": "dimension",
"$value": "{basis.space.row.md}"
},
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.xl}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.xl}"
},
"padding-inline-end": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"lg": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.column.xl}"
},
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.xl}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.xl}"
}
},
"actions": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.row.md}"
}
},
"content": {
"bold": {
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
}
}
},
"context": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.row.md}"
},
"lg": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.column.xl}"
}
}
},
"date": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"gap": {
"$type": "dimension",
"$value": "{basis.space.column.md}"
},
"warning": {
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-default}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
},
"gap": {
"$type": "dimension",
"$value": "{basis.space.column.md}"
}
}
},
"details": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.row.md}"
},
"lg": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.column.xl}"
}
}
},
"link-icon": {
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-default}"
},
"width": {
"$type": "dimension",
"$value": "{basis.size.icon.md}"
}
},
"warning-icon": {
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-default}"
},
"width": {
"$type": "dimension",
"$value": "{basis.size.icon.md}"
}
}
}
}
}
- Bekijk Task Navigation in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"denhaag": {
"action": {
"single": {
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-inline-end": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-hover}"
}
},
"details": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.column.md}"
},
"lg": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.column.xl}"
}
}
}
}
}
}
}
8.4.0
26 januari 2026
Community component 'Navigation Bar' van Utrecht aangepast
Community component 'Navigation Bar' van gemeente Utrecht is aangepast.
De volgende tokens zijn toegevoegd:
utrecht.nav-bar.content.background-colorutrecht.nav-bar.content.color
De waarden van de volgende tokens zijn gewijzigd:
- Waarde van token
utrecht.nav-bar.content.max-inline-sizeis gewijzigd van1184pxnaar{basis.page.max-inline-size}. - Waarde van token
utrecht.nav-bar.link.padding-block-endis gewijzigd van{basis.space.block.md}naar{basis.space.block.lg}. - Waarde van token
utrecht.nav-bar.link.padding-block-startis gewijzigd van{basis.space.block.md}naar{basis.space.block.lg}.
Daarnaast is de opzet van de Figma component aangepast en uitgebreid. Daarom adviseren we om de component over te nemen alsof het een nieuw component betreft.
Controleer hierbij wel of de wijzigingen van design token waarden ook wenselijk zijn voor het thema van jouw organisatie. Zo niet, dan kun je hier je huidige waarden invullen.
- Bekijk Navigation Bar in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"utrecht": {
"nav-bar": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-subtle}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"content": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-subtle}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"max-inline-size": {
"$type": "dimension",
"$value": "{basis.page.max-inline-size}"
}
},
"link": {
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-inline-end": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
}
}
}
}
}
8.3.1
22 januari 2026
Helper componenten hernoemd
Helper componenten zijn hernoemd naar 'Helper_*'.
In de Figma bibliotheek zitten enkele handige 'Helper' componenten. Tot nu toe waren veel van deze componenten verborgen, omdat hun naam met een '.' begon. Dit zorgde er echter ook voor dat deze componenten niet naar voren kwamen bij het gebruik van de 'Swap Library' functionaliteit. En die stap heb je juist nodig wanneer je een nieuw component wilt overnemen uit de NL Design System - Bibliotheek. Daarom hebben we ze niet langer verborgen én de naamgeving van deze componenten aangepast.
- Bekijk de 'Helpers' in de NL Design System - Bibliotheek.
- Pas dezelfde naamgeving toe op de Helper componenten in de bibliotheek van jouw organisatie. Je herkent ze aan de prefix 'Helper_'.
- Publiceer de bibliotheek.
- Accepteer de update in de ToDo Bibliotheek van jouw organisatie.
Goed om te weten
Het viel ons op dat de meeste Helper componenten in de ToDo Bibliotheek keurig de nieuwe naam kregen, met uitzondering van '.Page Heading'. Deze zul je daarom handmatig via de 'Swap Instance' functionaliteit moeten inwisselen voor 'Helper_Page-Heading'. Tip: zoek in de ToDo Bibliotheek op de term '.Page Heading' om deze snel te vinden en in te wisselen.
Laat het ons vooral weten als je hier hulp bij kunt gebruiken.
8.3.0
21 januari 2026
Community component 'Calendar' van Utrecht toegevoegd
Community component 'Calendar' van gemeente Utrecht is toegevoegd aan de bibliotheek.
- Bekijk Calendar in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"utrecht": {
"calendar": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-document}"
},
"width": {
"$type": "dimension",
"$value": "fit-content",
"$description": "[code-only]"
},
"icon": {
"size": {
"$type": "dimension",
"$value": "{basis.size.icon.md}"
}
},
"navigation": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-default}"
},
"padding-block-end": {
"$type": "dimension",
"$value": "0px"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"label": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
}
}
},
"table": {
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"days-item-day": {
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.border-width.sm}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-default}"
},
"size": {
"$type": "dimension",
"$value": "{basis.pointer-target.min-inline-size}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-active}"
}
},
"disabled": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.disabled.color-default}"
}
},
"emphasis": {
"background-color": {
"$type": "color",
"$value": "{basis.color.highlight.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.highlight.color-default}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
}
},
"focus": {
"background-color": {
"$type": "color",
"$value": "{basis.focus.background-color}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.focus.color}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-hover}"
}
},
"is-today": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.action-1.border-default}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-default}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
}
},
"out-of-the-month": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.disabled.color-subtle}"
}
},
"selected": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.color-default}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
}
}
},
"weeks-item": {
"width": {
"$type": "dimension",
"$value": "{basis.pointer-target.min-inline-size}"
}
}
}
}
},
"todo": {
"calendar": {
"table": {
"days-item-day": {
"disabled": {
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
}
}
}
}
}
}
}
8.2.0
21 januari 2026
Community component 'Date Input' van Amsterdam toegevoegd
Community component 'Date Input' van Amsterdam is toegevoegd aan de bibliotheek.
- Bekijk Date Input in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
Goed om te weten
Voor de tokens ams.date-input.padding-block en ams.date-input.padding-inline is gekozen voor een waarde uit de speciale groep 'form-control'. Het gaat om de waarden basis.form-control.padding-block-start en basis.form-control.padding-inline-start. Uiteraard mag je hier zelf een keuze in maken.
{
"ams": {
"date-input": {
"background-color": {
"$type": "color",
"$value": "{basis.form-control.background-color}"
},
"border-color": {
"$type": "color",
"$value": "{basis.form-control.border-color}"
},
"border-style": {
"$type": "other",
"$value": "solid",
"$description": "[code-only]"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.form-control.border-width}"
},
"color": {
"$type": "color",
"$value": "{basis.form-control.color}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.form-control.font-size}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.form-control.font-family}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.form-control.font-weight}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.form-control.line-height}"
},
"min-block-size": {
"$type": "dimension",
"$value": "{basis.pointer-target.min-block-size}"
},
"min-inline-size": {
"$type": "dimension",
"$value": "10rem"
},
"outline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.form-control.padding-block-start}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.form-control.padding-inline-start}"
},
"calendar-picker-indicator": {
"background-image": {
"$type": "other",
"$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")",
"$description": "[code-only]"
},
"cursor": {
"$type": "other",
"$value": "default",
"$description": "[code-only]"
}
},
"disabled": {
"border-color": {
"$type": "color",
"$value": "{basis.form-control.disabled.border-color}"
},
"color": {
"$type": "color",
"$value": "{basis.form-control.disabled.color}"
},
"cursor": {
"$type": "other",
"$value": "disabled",
"$description": "[code-only]"
},
"calendar-picker-indicator": {
"background-image": {
"$type": "other",
"$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")",
"$description": "[code-only]"
}
}
},
"hover": {
"box-shadow": {
"$type": "boxShadow",
"$value": "None"
},
"calendar-picker-indicator": {
"background-image": {
"$type": "other",
"$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")",
"$description": "[code-only]"
}
}
},
"invalid": {
"border-color": {
"$type": "color",
"$value": "{basis.form-control.invalid.border-color}"
},
"hover": {
"border-color": {
"$type": "color",
"$value": "{basis.color.negative.border-hover}"
},
"box-shadow": {
"$type": "boxShadow",
"$value": "None"
}
}
}
}
}
}
8.1.0
16 januari 2026
Number Badge ingewisseld bij Community component 'Side Navigation' van Den Haag
Number Badge component is ingewisseld bij Community component 'Side Navigation' van gemeente Den Haag.
- Ga naar de pagina van Side Navigation.
- Selecteer sub-component '__link'.
- Bij de Figma properties zet je 'Show Number Badge' op 'True'.
- Selecteer de 'utrecht-number-badge' bij alle varianten.
- Wissel 'utrecht-number-badge' via de Swap Instance funtionaliteit om voor 'nl-number-badge'.
- Selecteer sub-component '__link' nu weer als geheel.
- Bij de Figma properties zet je 'Show Number Badge' terug naar 'False'.
- Voer daarna de gebruikelijke stappen uit: Versienummer wijzigen, Bibliotheek publiceren en de wijzigingen accepteren in de relevante Figma bestanden.
Bekijk de video 'Changelog: Number Badge inwisselen bij Side Navigation' waarin we laten zien hoe je dit zelf kunt doen.
8.0.0
15 januari 2026
Bugfix: design token hernoemd van Community component 'Heading'
Token ams.heading.inverse-color is hernoemd naar ams.heading.inverse.color bij Community component 'Heading' van gemeente Amsterdam.
- Ga naar de pagina van Heading.
- Open Tokens Studio.
- Ga naar de tokenset 'heading/amsterdam'.
- Wijzig de naam van
ams.heading.inverse-colornaarams.heading.inverse.color. - Klik op 'Apply to page' zodat de wijziging op de hele pagina wordt doorgevoerd.
- Selecteer voor alle zekerheid de frames 'Tokens - Heading', 'ams-heading' en 'Documentatie - Heading' en klik vervolgens op 'Apply to selection'.
- Voer daarna de gebruikelijke stappen uit: Pull Request maken, Versienummer wijzigen, Bibliotheek publiceren en de wijzigingen accepteren in de relevante Figma bestanden.
Bekijk de video 'Changelog: Heading token hernoemen' waarin we laten zien hoe je dit zelf kunt doen.
7.0.0
14 januari 2025
Community component 'Modal Dialog' van Amsterdam toegevoegd
Community component 'Modal Dialog' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
Daarnaast is de todo-modal-dialog verwijderd uit de ToDo Bibliotheek, inclusief alle bijbehorende design tokens.
Wat moet je doen?
- Ga naar de pagina 'Modal Dialog' in de ToDo Bibliotheek.
- Verwijder de volledige pagina.
- Publiceer de ToDo Bibliotheek.
- Ga naar de algemene Bibliotheek.
- Open Tokens Studio.
- Ga naar de tokenset
modal-dialog. - Vervang de todo tokens door de onderstaande design tokens van Amsterdam.
- Voeg de Modal Dialog component van Amsterdam toe aan de bibliotheek van jouw organisatie.
- Voer daarna de gebruikelijke stappen uit: Pull Request maken, Versienummer wijzigen, Bibliotheek publiceren en de wijzigingen accepteren in de relevante Figma bestanden.
{
"ams": {
"dialog": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-document}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.default.border-subtle}"
},
"border-style": {
"$type": "other",
"$value": "solid",
"$description": "[code-only]"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.border-width.sm}"
},
"gap": {
"$type": "dimension",
"$value": "0px"
},
"inline-size": {
"$type": "dimension",
"$value": "328px"
},
"max-block-size": {
"$type": "dimension",
"$value": "80vh",
"$description": "[code-only]"
},
"max-inline-size": {
"$type": "dimension",
"$value": "640px"
},
"medium": {
"inline-size": {
"$type": "dimension",
"$value": "640px"
},
"max-block-size": {
"$type": "dimension",
"$value": "80vh",
"$description": "[code-only]"
}
},
"backdrop": {
"background-color": {
"$type": "color",
"$value": "rgba(36,36,36,0.2)"
}
},
"header": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.column.xl}"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.xl}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"medium": {
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.xl}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
}
}
},
"body": {
"padding-block": {
"$type": "dimension",
"$value": "0px"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"medium": {
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
}
}
},
"footer": {
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.3xl}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"medium": {
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.3xl}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
}
}
}
}
},
"todo": {
"dialog": {
"border-radius": {
"$type": "dimension",
"$value": "{basis.border-radius.lg}"
},
"box-shadow": {
"$type": "boxShadow",
"$value": "{basis.box-shadow.lg}"
}
}
}
}
6.8.0
14 januari 2025
Community component 'Description List' van Amsterdam toegevoegd
Community component 'Description List' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
- Bekijk Description List in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"ams": {
"description-list": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"column-gap": {
"$type": "dimension",
"$value": "{basis.space.column.3xl}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"grid-template-columns": {
"$type": "other",
"$value": "auto 1fr",
"$description": "[code-only]"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"row-gap": {
"$type": "dimension",
"$value": "{basis.space.row.xl}"
},
"description": {
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
}
},
"inverse": {
"color": {
"$type": "color",
"$value": "{basis.color.default-inverse.color-document}"
}
},
"medium": {
"grid-template-columns": {
"$type": "other",
"$value": "1fr 2fr",
"$description": "[code-only]"
}
},
"narrow": {
"grid-template-columns": {
"$type": "other",
"$value": "1fr 4fr",
"$description": "[code-only]"
}
},
"section": {
"column-gap": {
"$type": "dimension",
"$value": "{basis.space.column.xl}"
}
},
"term": {
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
}
},
"wide": {
"grid-template-columns": {
"$type": "other",
"$value": "1fr 1fr",
"$description": "[code-only]"
}
}
}
}
}
6.7.1
23 december 2025
Link naar documentatie over iconen aangepast
- Bekijk 'Icons' in de NL Design System - Bibliotheek.
- Pas in het frame 'Documentatie - Icons' de link 'Meer informatie over deze iconen' aan naar: https://www.nldesignsystem.nl/richtlijnen/stijl/iconen/
Dit is uiteraard niet nodig als je een eigen iconenset gebruikt.
6.7.0
23 december 2025
Candidate component 'Button' toegevoegd
Candidate component 'Button' is toegevoegd aan de bibliotheek.
- Bekijk Button in de NL Design System - Bibliotheek.
- Open Tokens Studio.
- Ga naar de tokenset
button. - Hernoem deze tokenset naar
components/button/utrecht - Dupliceer de tokenset die nu 'utrecht' als naam heeft en geef deze de naam
components/button/nl. - Positioneer de 'nl' tokenset boven de 'utrecht' tokenset.
- Vervang de design tokens in de 'nl' tokenset voor onderstaande design tokens.
{
"nl": {
"button": {
"border-radius": {
"$type": "dimension",
"$value": "{basis.border-radius.md}"
},
"column-gap": {
"$type": "dimension",
"$value": "{basis.space.text.xs}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"min-block-size": {
"$type": "dimension",
"$value": "{basis.pointer-target.min-block-size}"
},
"min-inline-size": {
"$type": "dimension",
"$value": "{basis.pointer-target.min-inline-size}"
},
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.md}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.md}"
},
"padding-inline-end": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"focus": {
"background-color": {
"$type": "color",
"$value": "{basis.focus.background-color}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.focus.color}"
}
},
"icon": {
"size": {
"$type": "dimension",
"$value": "{basis.size.icon.md}"
}
},
"icon-only": {
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.md}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.md}"
},
"padding-inline-end": {
"$type": "dimension",
"$value": "{basis.space.inline.md}"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "{basis.space.inline.md}"
}
},
"default": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.default.border-default}"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.border-width.sm}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.default.border-active}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-active}"
}
},
"disabled": {
"background-color": {
"$type": "color",
"$value": "{basis.color.disabled.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.disabled.border-subtle}"
},
"color": {
"$type": "color",
"$value": "{basis.color.disabled.color-subtle}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.default.border-hover}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-hover}"
}
},
"pressed": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default-inverse.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default-inverse.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default-inverse.color-active}"
}
},
"disabled": {
"background-color": {
"$type": "color",
"$value": "{basis.color.disabled-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.disabled-inverse.color-subtle}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default-inverse.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default-inverse.color-hover}"
}
}
}
},
"primary": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-width": {
"$type": "dimension",
"$value": "{nl.button.default.border-width}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.color-default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{nl.button.default.font-size}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{nl.button.default.font-weight}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{nl.button.default.line-height}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.color-active}"
}
},
"disabled": {
"background-color": {
"$type": "color",
"$value": "{basis.color.disabled.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.disabled.border-subtle}"
},
"color": {
"$type": "color",
"$value": "{basis.color.disabled.color-subtle}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.color-hover}"
}
},
"pressed": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.action-1.border-default}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.action-1.border-active}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-active}"
}
},
"disabled": {
"background-color": {
"$type": "color",
"$value": "{basis.color.disabled.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.disabled.border-subtle}"
},
"color": {
"$type": "color",
"$value": "{basis.color.disabled.color-subtle}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.action-1.border-hover}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-hover}"
}
}
},
"negative": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.color-hover}"
}
},
"pressed": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.negative.border-default}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.negative.border-active}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.negative.border-hover}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-hover}"
}
}
}
},
"positive": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.color-hover}"
}
},
"pressed": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.positive.border-default}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.positive.border-active}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.positive.border-hover}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-hover}"
}
}
}
}
},
"secondary": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.action-1.border-default}"
},
"border-width": {
"$type": "dimension",
"$value": "{nl.button.default.border-width}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{nl.button.default.font-size}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{nl.button.default.font-weight}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{nl.button.default.line-height}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.action-1.border-active}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-active}"
}
},
"disabled": {
"background-color": {
"$type": "color",
"$value": "{basis.color.disabled.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.disabled.border-subtle}"
},
"color": {
"$type": "color",
"$value": "{basis.color.disabled.color-subtle}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.action-1.border-hover}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-hover}"
}
},
"pressed": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.color-active}"
}
},
"disabled": {
"background-color": {
"$type": "color",
"$value": "{basis.color.disabled-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.disabled-inverse.color-subtle}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.color-hover}"
}
}
},
"negative": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.negative.border-default}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.negative.border-active}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.negative.border-hover}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-hover}"
}
},
"pressed": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.color-hover}"
}
}
}
},
"positive": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.positive.border-default}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.positive.border-active}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.positive.border-hover}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-hover}"
}
},
"pressed": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.color-hover}"
}
}
}
}
},
"subtle": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-width": {
"$type": "dimension",
"$value": "0px"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{nl.button.default.font-size}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{nl.button.default.font-weight}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{nl.button.default.line-height}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-active}"
}
},
"disabled": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.disabled.color-subtle}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-hover}"
}
},
"pressed": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.color-active}"
}
},
"disabled": {
"background-color": {
"$type": "color",
"$value": "{basis.color.disabled-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.disabled-inverse.color-subtle}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1-inverse.color-hover}"
}
}
},
"negative": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-hover}"
}
},
"pressed": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative-inverse.color-hover}"
}
}
}
},
"positive": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-hover}"
}
},
"pressed": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.color-default}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.bg-active}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.color-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.bg-hover}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive-inverse.color-hover}"
}
}
}
}
}
}
}
}
6.6.1
19 december 2025
Bugfix: schaduw hersteld bij Community component 'Table' van Utrecht
Schaduw bij Table component is hersteld.
- Bekijk Table in de NL Design System - Bibliotheek.
- Ga binnen het frame 'Documentatie - Table' naar de sectie 'Responsive gedrag'.
- In de voorbeelden vind je de fixed layers 'utrecht-table-container-shadow-right' en 'utrecht-table-container-shadow-left'.
- Selecteer layer 'utrecht-table-container-shadow-right' en hernoem deze naar 'table-container-box-shadow-inline-end'.
- Zet in de Figma properties 'Clip content' uit.
- Selecteer layer 'utrecht-table-container-shadow-left' en hernoem deze naar 'table-container-box-shadow-inline-start'.
- Zet in de Figma properties 'Clip content' uit.
- Ga naar het frame 'Demo - Table'.
- Selecteer layer 'utrecht-table-container-shadow-right' en hernoem deze naar 'table-container-box-shadow-inline-end'.
- Zet in de Figma properties 'Clip content' uit.
6.6.0
18 december 2025
Community component 'Status Badge' van Utrecht toegevoegd
Community component 'Status Badge' van gemeente Utrecht is toegevoegd aan de bibliotheek.
- Bekijk Status Badge in de NL Design System - Bibliotheek.
- Open Tokens Studio.
- Ga naar de tokenset
status-badge. - Hernoem deze tokenset naar
components/status-badge/todo - Dupliceer de tokenset die nu 'todo' als naam heeft en geef deze de naam
components/status-badge/utrecht. - Positioneer de 'utrecht' tokenset boven de 'todo' tokenset.
- Vervang de design tokens in de 'utrecht' tokenset voor onderstaande design tokens.
{
"utrecht": {
"status-badge": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-radius": {
"$type": "dimension",
"$value": "{basis.border-radius.sm}"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.border-width.sm}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-default}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"letter-spacing": {
"$type": "letterSpacing",
"$value": "0px"
},
"min-block-size": {
"$type": "dimension",
"$value": "{basis.size.xs}"
},
"min-inline-size": {
"$type": "dimension",
"$value": "{basis.size.sm}"
},
"padding-block": {
"$type": "dimension",
"$value": "0px"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.sm}"
},
"text-transform": {
"$type": "textCase",
"$value": "None"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-default}"
}
},
"danger": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-default}"
}
},
"error": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-default}"
}
},
"inactive": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-default}"
}
},
"invalid": {
"background-color": {
"$type": "color",
"$value": "{basis.color.negative.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.negative.color-default}"
}
},
"neutral": {
"background-color": {
"$type": "color",
"$value": "{basis.color.info.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.info.color-default}"
}
},
"safe": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-default}"
}
},
"success": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-default}"
}
},
"valid": {
"background-color": {
"$type": "color",
"$value": "{basis.color.positive.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.positive.color-default}"
}
},
"warning": {
"background-color": {
"$type": "color",
"$value": "{basis.color.warning.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.warning.color-default}"
}
}
}
}
}
6.5.0
17 december 2025
Community component 'Breadcrumb Navigation' van Amsterdam toegevoegd
Community component 'Breadcrumb Navigation' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
- Bekijk Breadcrumb Navigation in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"ams": {
"breadcrumb": {
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"separator": {
"background-image": {
"$type": "other",
"$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")",
"$description": "[code-only]"
},
"block-size": {
"$type": "dimension",
"$value": "0.750rem"
},
"inline-size": {
"$type": "dimension",
"$value": "0.750rem"
},
"margin-inline": {
"$type": "dimension",
"$value": "{basis.space.column.lg}"
}
},
"link": {
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-default}"
},
"outline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"text-decoration-line": {
"$type": "textDecoration",
"$value": "underline"
},
"text-underline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"text-decoration-thickness": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"hover": {
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-hover}"
},
"text-decoration-line": {
"$type": "textDecoration",
"$value": "None"
}
}
}
}
}
}
6.4.0
16 december 2025
Community component 'Navigation List' van Rijkshuisstijl Community toegevoegd
Community component 'Navigation List' van de Rijkshuisstijl Community is toegevoegd aan de bibliotheek.
- Bekijk Navigation List in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"rhc": {
"navigation-list": {
"item": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.default.border-subtle}"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.border-width.sm}"
},
"column-gap": {
"$type": "dimension",
"$value": "{basis.space.column.xl}"
},
"min-height": {
"$type": "dimension",
"$value": "{basis.pointer-target.min-block-size}"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-hover}"
}
},
"focus": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
}
},
"content": {
"column-gap": {
"$type": "dimension",
"$value": "{basis.space.column.md}",
"$description": "[code-only]"
},
"row-gap": {
"$type": "dimension",
"$value": "{basis.space.row.sm}",
"$description": "[code-only]"
}
},
"description": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-subtle}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
}
},
"icon-end": {
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-default}"
}
},
"icon-start": {
"background-color": {
"$type": "color",
"$value": "{basis.color.accent-1-inverse.bg-default}"
},
"border-radius": {
"$type": "dimension",
"$value": "{basis.border-radius.round}"
},
"color": {
"$type": "color",
"$value": "{basis.color.accent-1-inverse.color-default}"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.md}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.md}"
},
"size": {
"$type": "dimension",
"$value": "{basis.size.icon.md}"
}
},
"label": {
"color": {
"$type": "color",
"$value": "{basis.heading.color}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
}
}
}
}
}
}
6.3.0
8 december 2025
Community component 'File Input' van Amsterdam toegevoegd
Community component 'File Input' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
- Bekijk File Input in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"ams": {
"file-input": {
"background-color": {
"$type": "color",
"$value": "{basis.form-control.background-color}"
},
"border-color": {
"$type": "color",
"$value": "{basis.form-control.border-color}"
},
"border-style": {
"$type": "other",
"$value": "dashed",
"$description": "[code-only]"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.form-control.border-width}"
},
"color": {
"$type": "color",
"$value": "{basis.form-control.color}"
},
"cursor": {
"$type": "other",
"$value": "default",
"$description": "[code-only]"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.form-control.font-family}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.form-control.font-size}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.form-control.font-weight}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.form-control.line-height}"
},
"outline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.xl}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"disabled": {
"color": {
"$type": "color",
"$value": "{basis.form-control.disabled.color}"
},
"cursor": {
"$type": "other",
"$value": "disabled",
"$description": "[code-only]"
}
},
"button": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.action-1.border-default}"
},
"border-style": {
"$type": "other",
"$value": "solid",
"$description": "[code-only]"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.border-width.sm}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-default}"
},
"cursor": {
"$type": "other",
"$value": "default",
"$description": "[code-only]"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"margin-inline-end": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}",
"$description": "[code-only]"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"disabled": {
"color": {
"$type": "color",
"$value": "{basis.color.disabled.color-subtle}"
},
"cursor": {
"$type": "other",
"$value": "disabled",
"$description": "[code-only]"
}
},
"hover": {
"box-shadow": {
"$type": "boxShadow",
"$value": "None"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-hover}"
}
}
}
}
}
}
6.2.0
8 december 2025
Community component 'Figure' van Amsterdam toegevoegd
Community component 'Figure' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
- Bekijk Figure in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"ams": {
"figure": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.row.md}"
},
"caption": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"inverse": {
"color": {
"$type": "color",
"$value": "{basis.color.default-inverse.color-document}"
}
}
}
}
}
}
6.1.0
8 december 2025
Community component 'Dot Badge' van Rijkshuisstijl Community toegevoegd
Community component 'Dot Badge' van de Rijkshuisstijl Community is toegevoegd aan de bibliotheek.
- Bekijk Dot Badge in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"rhc": {
"dot-badge": {
"block-size": {
"$type": "dimension",
"$value": "{basis.size.3xs}"
},
"border-radius": {
"$type": "dimension",
"$value": "{basis.border-radius.round}"
},
"color": {
"$type": "color",
"$value": "{basis.color.accent-1-inverse.bg-default}"
},
"inline-size": {
"$type": "dimension",
"$value": "{basis.size.3xs}"
}
}
}
}
6.0.0
8 december 2025
Community component 'Avatar' van Amsterdam toegevoegd
Community component 'Avatar' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
Daarnaast is de todo-avatar verwijderd uit de ToDo Bibliotheek, inclusief alle bijbehorende design tokens.
Wat moet je doen?
- Ga naar de pagina 'Avatar' in de ToDo Bibliotheek.
- Verwijder de volledige pagina.
- Publiceer de ToDo Bibliotheek.
- Ga naar de algemene Bibliotheek.
- Open Tokens Studio.
- Ga naar de tokenset
avatar. - Vervang de todo tokens door de onderstaande design tokens van Amsterdam.
- Voeg de Avatar component van Amsterdam toe aan de bibliotheek van jouw organisatie.
- Voer daarna de gebruikelijke stappen uit: Pull Request maken, Versienummer wijzigen, Bibliotheek publiceren en de wijzigingen accepteren in de relevante Figma bestanden.
{
"ams": {
"avatar": {
"aspect-ratio": {
"$type": "other",
"$value": "1 / 1",
"$description": "[code-only]"
},
"background-color": {
"$type": "color",
"$value": "{basis.color.accent-1-inverse.bg-default}"
},
"border-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"border-style": {
"$type": "other",
"$value": "solid",
"$description": "[code-only]"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.border-width.sm}"
},
"color": {
"$type": "color",
"$value": "{basis.color.accent-1-inverse.color-default}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"inline-size": {
"$type": "dimension",
"$value": "{basis.pointer-target.min-inline-size}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"padding-block": {
"$type": "dimension",
"$value": "0px"
},
"padding-inline": {
"$type": "dimension",
"$value": "0px"
},
"has-image": {
"inline-size": {
"$type": "dimension",
"$value": "{basis.pointer-target.min-inline-size}"
}
}
}
}
}
5.2.2
1 december 2025
Bugfix: waarde van design tokens aangepast van Community component 'Data Badge' van Utrecht
De waarde van design tokens utrecht.data-badge.padding-block en nl.data-badge.padding-block is aangepast van 'None' naar '0px'.
- Ga naar de pagina van Data Badge.
- Open Tokens Studio.
- Ga naar de tokenset 'data-badge/utrecht'.
- Wijzig de waarde van
utrecht.data-badge.padding-blockvanNonenaar0px. - Ga naar de tokenset 'data-badge/nl'.
- Wijzig de waarde van
nl.data-badge.padding-blockvanNonenaar0px - Klik op 'Apply to page' zodat de wijziging op de hele pagina wordt doorgevoerd.
- Voer daarna de gebruikelijke stappen uit: Pull Request maken, Versienummer wijzigen, Bibliotheek publiceren en de wijzigingen accepteren in de relevante Figma bestanden.
5.2.1
1 december 2025
Bugfix: design token juist gekoppeld aan Candidate component 'Heading'
Juiste font-weight token is gekoppeld aan Candidate component 'Heading' level 4.
- Ga naar de pagina van Heading.
- Selecteer het frame 'nl-heading'.
- Open Tokens Studio.
- Ga naar de tab 'Inspect'.
- Activeer 'Deep inspect'.
- Vervang
utrecht.heading-4.font-weightdoornl.heading.level-4.font-weight.
5.2.0
24 november 2025
Community component 'Tabs' van Amsterdam en Den Haag toegevoegd
Community componenten 'Tabs' van gemeente Amsterdam en Den Haag zijn toegevoegd aan de bibliotheek.
- Bekijk Tabs in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
- Let op dat je per organisatie een aparte tokenset aanmaakt. Voor Amsterdam 'components/tabs/amsterdam' en voor Den Haag 'components/tabs/den-haag'. We hanteren hierbij een alfabetische volgorde.
Amsterdam:
codevoorbeeld{
"ams": {
"tabs": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.row.3xl}"
},
"button": {
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-default}"
},
"cursor": {
"$type": "other",
"$value": "pointer",
"$description": "[code-only]"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"outline-offset": {
"$type": "other",
"$value": "0px",
"$description": "[code-only]"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"hover": {
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-hover}"
},
"box-shadow": {
"$type": "boxShadow",
"$value": {
"x": "0",
"y": "-{basis.border-width.lg}",
"blur": "0",
"spread": "0",
"color": "{ams.tabs.button.color}",
"type": "innerShadow"
}
}
},
"disabled": {
"color": {
"$type": "color",
"$value": "{basis.color.disabled.color-subtle}"
},
"cursor": {
"$type": "other",
"$value": "not-allowed",
"$description": "[code-only]"
}
},
"selected": {
"box-shadow": {
"$type": "boxShadow",
"$value": {
"x": "0",
"y": "-{basis.border-width.lg}",
"blur": "0",
"spread": "0",
"color": "{ams.tabs.button.color}",
"type": "innerShadow"
}
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
}
}
},
"list": {
"box-shadow": {
"$type": "boxShadow",
"$value": {
"x": "0",
"y": "-{basis.border-width.sm}",
"blur": "0",
"spread": "0",
"color": "{basis.color.default.border-subtle}",
"type": "innerShadow"
}
}
}
}
}
}
Den Haag:
codevoorbeeld{
"denhaag": {
"tabs": {
"border-color": {
"$type": "color",
"$value": "{basis.color.default.border-subtle}"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.border-width.sm}"
},
"border-style": {
"$type": "other",
"$value": "solid",
"$description": "[code-only]"
},
"width": {
"$type": "dimension",
"$value": "100%",
"$description": "[code-only]"
},
"tab": {
"background-color": {
"$type": "color",
"$value": "{basis.color.transparent}"
},
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-default}"
},
"cursor": {
"$type": "other",
"$value": "pointer",
"$description": "[code-only]"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-inline-end": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"outline": {
"$type": "other",
"$value": "0px",
"$description": "[code-only]"
},
"hover": {
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-hover}"
}
},
"focus": {
"color": {
"$type": "color",
"$value": "{basis.focus.color}"
}
},
"selected": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
}
}
},
"tab-indicator": {
"border-color": {
"$type": "color",
"$value": "{basis.color.default.border-active}"
},
"border-width": {
"$type": "dimension",
"$value": "{basis.border-width.lg}"
},
"bottom": {
"$type": "other",
"$value": "0px",
"$description": "[code-only]"
}
},
"tab-panel": {
"outline": {
"$type": "other",
"$value": "0px",
"$description": "[code-only]"
},
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.3xl}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.3xl}"
},
"padding-inline-end": {
"$type": "dimension",
"$value": "0px"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "0px"
}
}
}
}
}
5.0.1
21 november 2025
Bugfix: waarde van design token aangepast van Community component 'Page Number Navigation' van Utrecht
'curly-braces' zijn toegevoegd aan de waarde van design token utrecht.pagination.relative-link.disabled.color.
- Ga naar de pagina van Page Number Navigation.
- Open Tokens Studio.
- Ga naar de tokenset 'page-number-navigation/utrecht'.
- Wijzig de waarde van de design token
utrecht.pagination.relative-link.disabled.colorvanbasis.color.disabled.color-subtlenaar{basis.color.disabled.color-subtle}. Wanneer er wordt gevraagd waar deze wijziging doorgevoerd moet worden kies je voor 'Page'. - Klik op 'Apply to page' zodat de wijziging op de hele pagina wordt doorgevoerd.
- Voer daarna de gebruikelijke stappen uit: Pull Request maken, Versienummer wijzigen, Bibliotheek publiceren en de wijzigingen accepteren in de relevante Figma bestanden.
5.0.0
19 november 2025
ToDo component 'Case Card' aangepast
- Verschillende design tokens toegevoegd.
- Naamgeving in het property panel aangepast.
- Teksten in het documentatie-frame bijgewerkt.
Met deze aanpassingen is het gemakkelijker om de oude Case Card te verwijderen en in te wisselen voor de aangepaste versie uit de Figma bibliotheek.
- Bekijk Case Card in de NL Design System - ToDo Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"todo": {
"case-card": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-2.bg-default}"
},
"border-radius": {
"$type": "dimension",
"$value": "{basis.border-radius.sm}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"min-block-size": {
"$type": "dimension",
"$value": "192px"
},
"min-inline-size": {
"$type": "dimension",
"$value": "328px"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.2xl}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.3xl}"
},
"row-gap": {
"$type": "dimension",
"$value": "{basis.space.row.lg}"
},
"description": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
}
},
"heading": {
"color": {
"$type": "color",
"$value": "{basis.heading.color}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.heading.font-family}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.xl}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.heading.font-weight}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.xl}"
}
},
"metadata": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
}
},
"icon": {
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-default}"
},
"size": {
"$type": "dimension",
"$value": "{basis.size.icon.md}"
}
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-2.bg-active}"
}
},
"focus": {
"background-color": {
"$type": "color",
"$value": "{basis.focus.background-color}"
},
"color": {
"$type": "color",
"$value": "{basis.focus.color}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-2.bg-hover}"
}
},
"decoration": {
"folder": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-2.bg-active}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-2.bg-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.action-2.bg-active}"
}
},
"focus": {
"background-color": {
"$type": "color",
"$value": "{basis.focus.background-color}"
}
}
},
"paper": {
"background-color": {
"$type": "color",
"$value": "#ffffff"
}
}
},
"archived": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-default}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"description": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
}
},
"heading": {
"color": {
"$type": "color",
"$value": "{basis.heading.color}"
}
},
"metadata": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
}
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-hover}"
}
},
"decoration": {
"folder": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-active}"
},
"active": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-active}"
}
},
"hover": {
"background-color": {
"$type": "color",
"$value": "{basis.color.default.bg-active}"
}
}
}
}
}
}
}
}
4.2.1
14 november 2025
Bugfix: layernaam hersteld naar originele naam
Eerder maakten we gebruik van een script om de documentatie van de design tokens te automatiseren. Dit script paste ook de namen van de layers aan. Het script is niet langer beschikbaar. Daarnaast zijn er verkeerde layernamen bij componenten terechtgekomen... oeps. We hebben alle layernamen voor de documentatie van de design tokens (links van de componenten) hersteld naar de originele naam: Design Token Documentation Item.
- Selecteer de layers van de design token documentatie.
- Kies in het Figma property-panel voor 'Reset specific changes'.
- Kies voor 'Reset name'.
Bekijk de video 'Changelog: Lagen hernoemen' waarin we laten zien hoe je dit zelf kunt doen.
4.2.0
3 november 2025
Community component 'Image' van Utrecht toegevoegd
Community component 'Image' van gemeente Utrecht is toegevoegd aan de bibliotheek.
- Bekijk de video 'Changelog: utrecht-image toevoegen' waarin wordt uitgelegd hoe je dit zelf kunt doen.
4.1.1
31 oktober 2025
Bugfix: verouderde Figma Style weggewerkt
Verouderde Figma Style uit Todo Bibliotheek weggewerkt.
Avatar
- Ga naar het documentatie frame.
- Selecteer de link 'https://www.nldesignsystem.nl/avatar'.
- Kies voor 'Reset instance'. Hierdoor wordt de verouderde Figma Style uit deze link verwijderd.
- Herstel de tekst en de link naar 'https://www.nldesignsystem.nl/avatar'.
Form Field Label
- Ga naar het documentatie frame.
- Selecteer de link 'https://www.nldesignsystem.nl/form-field-label'.
- Kies voor 'Reset instance'. Hierdoor wordt de verouderde Figma Style uit deze link verwijderd.
- Herstel de tekst en de link naar 'https://www.nldesignsystem.nl/form-field-label'.
Page Footer
- Ga naar de component.
- Wissel onder 'Selection colors' Figma Style
nl/colors/linkin voorlink.
4.1.0
14 oktober 2025
Community component 'Card as Link' van Amsterdam toegevoegd
Community component 'Card as Link' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
- Bekijk Card as Link in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"ams": {
"card": {
"outline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"heading": {
"margin-block-end": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
}
},
"heading-group": {
"gap": {
"$type": "dimension",
"$value": "{basis.space.row.sm}"
},
"margin-block-end": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
}
},
"image": {
"margin-block-end": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
}
},
"link": {
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-default}"
},
"text-decoration-line": {
"$type": "textDecoration",
"$value": "None"
},
"text-decoration-thickness": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"text-underline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"hover": {
"color": {
"$type": "color",
"$value": "{basis.color.action-2.color-hover}"
},
"text-decoration-line": {
"$type": "textDecoration",
"$value": "underline"
}
}
}
}
}
}
4.0.0
19 september 2025
Community component 'Side Navigation' van Den Haag hernoemd
'Side Navigation' Community component van gemeente Den Haag is, inclusief design tokens, hernoemd van sidenav naar side-navigation.
- Ga naar de Side Navigation component in Figma
- Selecteer de Figma component en hernoem deze van 'denhaag-sidenav' naar 'denhaag-side-navigation'.
- Open Tokens Studio.
- Ga naar de tokenset 'side-navigation'.
- Pas de naam van de design tokens aan. Doe dit door met de rechtermuisknop op de tekst 'sidenav' te klikken en voor 'rename' te kiezen. Doe dit bij elke design token type. Wanneer er wordt gevraagd waar deze wijziging doorgevoerd moet worden kies je voor 'Page'.
- Klik op 'Apply to page' zodat de wijziging op de hele pagina wordt doorgevoerd.
- Voer daarna de gebruikelijke stappen uit: Pull Request maken, Versienummer wijzigen, Bibliotheek publiceren en de wijzigingen accepteren in de relevante Figma bestanden.
3.2.0
17 september 2025
Community component 'Data Summary' van Den Haag toegevoegd
Community component 'Data Summary' van gemeente Den Haag is toegevoegd aan de bibliotheek.
- Bekijk Data Summary in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"denhaag": {
"description-list": {
"border-color": {
"$type": "color",
"$value": "{basis.color.default.border-subtle}"
},
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"margin-block-end": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
},
"margin-block-start": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
},
"padding-inline-end": {
"$type": "dimension",
"$value": "0px"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "0px"
},
"caption": {
"color": {
"$type": "color",
"$value": "{basis.heading.color}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.xl}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.heading.font-family}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.xl}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.heading.font-weight}"
},
"margin-block-end": {
"$type": "dimension",
"$value": "{basis.space.row.xl}"
}
},
"detail": {
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.sm}"
}
},
"title": {
"color": {
"$type": "color",
"$value": "{basis.color.default.color-document}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
},
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.sm}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
}
},
"lg": {
"padding-inline-end": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"padding-inline-start": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"detail": {
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
}
},
"title": {
"padding-block-end": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"padding-block-start": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
}
}
}
}
}
}
3.1.0
16 september 2025
Design tokens voor margin toegevoegd aan Tokens frame
Design tokens voor 'margin' zijn toegevoegd aan de design token documentatie in Figma.
Om een completer beeld te geven van de beschikbare design tokens per component, zijn er design tokens voor 'margin' toegevoegd aan de design token documentatie in Figma.
- Bekijk de video 'Changelog: Margin tokens toevoegen' waarin wordt uitgelegd hoe je dit zelf kunt doen.
Hieronder staat een lijst van componenten waaraan design tokens voor margin zijn toegevoegd. Bij de meeste componenten zijn twee design tokens voor margin toegevoegd. Hiervoor kun je onderstaande code gebruiken:
codevoorbeeld"margin-block-end": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
},
"margin-block-start": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
},
Er zijn enkele componenten waar vier design tokens voor margin zijn toegevoegd. Achter die componenten staat tussen haakjes (4). Hiervoor kun je onderstaande code gebruiken:
codevoorbeeld"margin-block-end": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
},
"margin-block-start": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
},
"margin-inline-end": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
},
"margin-inline-start": {
"$type": "dimension",
"$value": "0px",
"$description": "[code-only]"
},
Lijst van componenten die van margin tokens zijn voorzien. Elk component linkt naar een omgeving waar de design tokens te bekijken zijn.
- Accordion
- Action Group
- Alert
- Blockquote (4)
- Codeblock (4)
- Figure
- Form Field
- Form Field Description
- Form Field Error Message
- Headings 1 tot 6
- Link List
- Note (Spotlight Section)
- Page Number Navigation (Pagination)
- Pre Heading
- Radio Button
- Separator
- Side Navigation (4)
- Table
3.0.0
15 september 2025
Community component 'Icon' van Utrecht toegepast binnen Utrecht componenten
utrecht-icon community component is toegepast binnen enkele Utrecht componenten.
De Icon component is later aan de Figma bibliotheek toegevoegd en is nu met terugwerkende kracht verwerkt in de Utrecht componenten die deze in de code gebruiken.
Let op!
Door deze wijziging worden 'property overrides' waarbij een ander icoon is gekozen, teruggezet. Heb je in een prototype de Button of Link van Utrecht gebruikt en daar een specifiek icoon aan toegevoegd? Dan moet je dit na de update opnieuw instellen. Maak daarom eerst een back-up door in Figma een versie toe te voegen aan de Version History van het bestand, voordat je de bibliotheek-update accepteert.
- Bekijk de video 'Changelog: utrecht-icon hergebruiken in Utrecht componenten' waarin wordt uitgelegd hoe je dit zelf kunt doen.
- Publiceer de Bibliotheek.
- Accepteer de aanpassingen in de ToDo Bibliotheek.
- Herstel de iconen (search, chevron-down) van de Page Header als je deze gebruikt voor je prototypes.
- Publiceer de ToDo Bibliotheek.
2.12.0
11 september 2025
Bugfix: design token description juist gekoppeld bij Community component 'Link' van Utrecht
Design token description voor Link component is omgewisseld en juist gekoppeld.
Klein foutje ontdekt voor de Link component. De description [code-only] was aan de verkeerde design token toegevoegd. Daarnaast waren nog niet alle descriptions aan de design token documentatie lijst gekoppeld.
- Bekijk de video 'Changelog: Link design token description' waarin wordt uitgelegd hoe je dit zelf kunt doen.
2.11.0
10 september 2025
Bugfix: design token gelijkgetrokken met code bij Community component 'Note' van Utrecht
Note (Spotlight Section) border-width is gelijkgetrokken met code.
Community component Note (Spotlight Section) van Utrecht heeft wel design tokens voor border-width en border-color. Maar deze zijn niet specifiek voor 1 zijde. In Figma was dit wel zo opgezet. Vooralsnog trekken we dit gelijk door de Figma component meer in lijn te brengen met de huidige situatie in code.
- Bekijk de video 'Changelog: Note (Spotlight Section) border-width' waarin wordt uitgelegd hoe je dit zelf kunt doen.
Mocht je voor jouw organisatie wel aan 1 zijde een border willen plaatsen, maak dit dan kenbaar in de GitHub Discussion voor Note. In de tussentijd kun je een design token met de prefix van jouw organisatie toevoegen. Denk daarbij aan een design tokens zoals voorbeeld.spotlight-section.border-inline-start-width (linkerzijde) of voorbeeld.spotlight-section.border-block-start-width (bovenzijde).
2.10.0
8 september 2025
Figma property gelijkgetrokken voor tekst
Figma-property voor tekst is op zoveel mogelijk plekken gelijkgetrokken.
In Figma kun je componenten voor elkaar inwisselen via de 'Swap Instance' functionaliteit. Als de propertynaam voor tekst niet overeenkomt tussen twee componenten, springt deze terug naar de standaardtekst die meekomt vanuit de bibliotheek. Hierdoor kun je geschreven teksten in prototypes verliezen.
Om dit te voorkomen willen we de naam van de property voor tekst zoveel mogelijk gelijk trekken. Hiervoor gebruiken we de term 'Text'. Zo blijven teksten netjes op hun plek bij het inwisselen van componenten. Daarnaast is er dan een eenduidige manier van naamgeving voor dit propertytype, wat eerder al is vastgelegd in de Figma hygiene.
- Open de NL Design System - Bibliotheek.
-
Pas de property naam aan naar 'Text' bij de volgende componenten:
- Accordion: 'Label' wordt 'Text'.
- Blockquote: 'Children' wordt 'Text'.
- Button: 'Children' wordt 'Text'.
- Code (Community component van Utrecht): 'Children' wordt 'Text'.
- Code Block (Community component van Utrecht): 'Children' wordt 'Text'.
- Data Badge (Community component van Utrecht): 'Children' wordt 'Text'.
- Form Field Description: 'Children' wordt 'Text'.
- Form Field Error Message: 'Children' wordt 'Text'.
- Heading (Community component van Amsterdam): 'Children' wordt 'Text'.
- Heading (alle zes Community componenten van Utrecht): 'Children' wordt 'Text'.
- Link (Community component van Utrecht): 'Children' wordt 'Text'.
- Login Link: 'Label' wordt 'Text'.
- Mark (Candidate component): 'Mark' wordt 'Text'.
- Mark (Community component van Utrecht): 'Children' wordt 'Text'.
- Number Badge (Community component van Utrecht): 'Value' wordt 'Text'.
- Ordered List: 'Children' wordt 'Text'.
- Paragraph (Community component van Utrecht. Inclusief 'Lead' en 'Small print'): 'Children' wordt 'Text'.
- Pre-heading: 'Children' wordt 'Text'.
- Skip Link (Community component van Utrecht): 'Children' wordt 'Text'.
- Text Input: 'Value' wordt 'Text'.
- Unordered List: 'Children' wordt 'Text'.
- Publiceer de Bibliotheek.
- Accepteer de aanpassingen in de ToDo Bibliotheek.
- Publiceer de ToDo Bibliotheek.
2.9.0
4 september 2025
Community component 'Image' van Amsterdam toegevoegd
Community component 'Image' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
- Bekijk Image in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design token.
{
"ams": {
"image": {
"aspect-ratio": {
"$type": "other",
"$value": "16 / 9",
"$description": "[code-only]"
}
}
}
}
- Nadat je de bibliotheek hebt gepubliceerd, open je de ToDo Bibliotheek.
- Ga naar de Card as Link component in Figma
- Selecteer de afbeelding van alle 4 de varianten.
- Gebruik de 'Swap Instance' functionaliteit om 'todo-image' in te wisselen voor 'ams-image'.
- Verwijder de pagina 'Image' in de ToDo Bibliotheek.
- Publiceer de ToDo Bibliotheek.
- Informeer afnemers van je bibliotheken dat ze vanaf nu de 'ams-image' kunnen gebruiken uit de algemene bibliotheek. Mocht het nodig zijn kunnen ook zij gebruik maken van de'Swap Instance' functionaliteit.
2.8.0
3 september 2025
Community component 'Button Group' van Utrecht hernoemd
'Button Group' Community component (incl. design tokens) hernoemd naar 'Action Group'.
- Ga naar de Action Group component in Figma
- Verwijder de notitie naast de pagina titel.
- Selecteer de Figma component en hernoem deze van 'utrecht-button-group' naar 'utrecht-action-group'.
- Open Tokens Studio.
- Ga naar de tokenset 'action-group'.
- Pas de naam van de design tokens aan. Doe dit door met de rechtermuisknop op de tekst 'button-group' te klikken en voor 'rename' te kiezen. Doe dit bij 'Color' én 'Dimension'. Wanneer er wordt gevraagd waar deze wijziging doorgevoerd moet worden kies je voor 'Page'.
- Klik op 'Apply to page' zodat de wijziging op de hele pagina wordt doorgevoerd.
- Voer daarna de gebruikelijke stappen uit: Pull Request maken, Versienummer wijzigen, Bibliotheek publiceren en de wijzigingen accepteren in de relevante Figma bestanden.
2.7.0
1 september 2025
Design token hernoemd van Community component 'Link List' van Utrecht
Design token utrecht.link-list.font-weight hernoemd naar utrecht.link-list.link.font-weight in Link List component.
- Ga naar de Link List component in Figma.
- Open Tokens Studio.
- Ga in de 'link-list' tokenset naar
utrecht.link-list.font-weight. - Wijzig de naam naar
utrecht.link-list.link.font-weight. - Kies in Tokens Studio voor 'Apply to page', zodat deze wijziging op deze pagina in Figma wordt doorgevoerd.
- Plaats design token
utrecht.link-list.link.font-weightop de juiste positie binnen de lijst aan gedocumenteerde design tokens binnen het frame 'Tokens - Link List'. - Plaats design token
utrecht.link-list.link.font-weightop de juiste positie binnen de json. Hiervoor gebruik je de JSON View binnen Tokens Studio. - Voer daarna de gebruikelijke stappen uit: Pull Request maken, Versienummer wijzigen, Bibliotheek publiceren en de wijzigingen accepteren in de relevante Figma bestanden.
2.6.0
1 september 2025
Bugfix: waarde van design tokens omgeruild
Waarde van 'focus-outline-color' en 'box-shadow-color' omgekeerd.
- Bekijk de Common Tokens voor Focus.
- Open Tokens Studio.
- Ga in de 'common' tokenset op zoek naar de focus kleuren.
- Wijzig de waarde van
basis.focus.outline-colornaar#0b0c0cof een donkere kleur naar keuze. - Wijzig de waarde van
basis.focus.inverse.outline-colornaar#ffffffof een lichte kleur naar keuze. - Kies in Tokens Studio voor 'Apply to document', zodat deze wijziging overal in Figma wordt doorgevoerd.
- Voer daarna de gebruikelijke stappen uit: Pull Request maken, Versienummer wijzigen, Bibliotheek publiceren en de wijzigingen accepteren in de relevante Figma bestanden.
2.5.0
27 augustus 2025
Design tokens toegevoegd aan Community component 'Icon' van Utrecht
Ontbrekende design tokens zijn toegevoegd aan Community component 'Icon'.
- Bekijk de video 'Changelog: Aanvullende design tokens icon component' waarin wordt uitgelegd hoe je dit zelf kunt doen.
- Je kunt onderstaande tekst gebruiken voor je Pull Request.
De volgende tokens zijn toegevoegd aan Icon (community) component:
- `utrecht.icon.color`
- `utrecht.icon.inset-block-start`
- `utrecht.icon.baseline.inset-block-start`
2.4.0
25 augustus 2025
State toegevoegd aan Community component 'Button' van Utrecht
Pressed state is toegevoegd aan Community component 'Button'.
- Bekijk de video 'Figma Changelog: Pressed state voor button' waarin wordt uitgelegd hoe je dit zelf kunt doen.
- Je kunt onderstaande tekst gebruiken voor je Pull Request.
De volgende tokens zijn toegevoegd aan Button component:
- `utrecht.button.pressed.background-color`
- `utrecht.button.pressed.border-color`
- `utrecht.button.pressed.color`
- `utrecht.button.primary-action.pressed.background-color`
- `utrecht.button.primary-action.pressed.border-color`
- `utrecht.button.primary-action.pressed.color`
- `utrecht.button.secondary-action.pressed.background-color`
- `utrecht.button.secondary-action.pressed.border-color`
- `utrecht.button.secondary-action.pressed.color`
- `utrecht.button.subtle.pressed.background-color`
- `utrecht.button.subtle.pressed.border-color`
- `utrecht.button.subtle.pressed.color`
2.3.0
22 augustus 2025
Verschillende bugfixes doorgevoerd
Focus state is verwijderd uit Link component.
- Verwijder de variant voor 'Focus' state bij de Community component van Utrecht.
- Verwijder de documentatie over de 'Focus' state in het 'Documentatie' frame.
'Settings' icoon in lijn gebracht met de andere iconen (is niet langer een stroke).
- Selecteer de 'Shape' van het settings icoon.
- Kies via het contextuele menu voor 'Outline stroke'.
'Line-height' tokens toegepast om visuele voorbeelden van 'Icon' sizing.
- Open Tokens Studio.
- Controleer de 'Text' in de visuele voorbeelden van 'Icon' sizing. Je zult zien dat hier de basis-tokens voor 'font-size' al op zijn toegepast.
- Pas hier ook de bijbehorende basis-tokens voor 'line-height' op toe.
Design token todo.form-field-label.column-gap toegepast op juiste layer.
- Open Tokens Studio.
- Selecteer de todo-form-field-label component in de ToDo Bibliotheek.
- Verwijder het design token
todo.form-field-label.column-gapvan deze layer. - Publish de ToDo bibliotheek en accepteer de wijziging in de algemene bibliotheek.
- Controleer in de algemene bibliotheek of de token daadwerkelijk van de todo-form-field-label is verwijderd.
- Selecteer vervolgens de hogere layer genaamd 'label'.
- Pas hier juist design token
todo.form-field-label.column-gaptoe via het contextuele menu van Tokens Studio: kies voor 'Spacing' en vervolgens 'Gap'.
'Line-height' aangepast voor Number Badge component.
- Ga naar de pagina van de Number Badge en pas de line-height van de Candidate en Community component aan van 150% naar 100%. Doe dit direct in Figma zelf bij de Typography settings.
Toepassing van design tokens op Focus-ring component aangepast.
- Bij het toepassen van design tokens op de focus-ring component zijn enkele fouten gemaakt.
- Bekijk de video 'Bugfix: Focus-ring waarin wordt uitgelegd hoe je dit zelf kunt nalopen en verbeteren.
- Start met het aanpassen van de focus-ring component die je vindt onder 'Helpers'. Publish de wijzging en accepteer deze in de ToDo bibliotheek.
- Loop daarna de volgende componenten per bibliotheek na en voer de verbeteringen daar door:
NL Design System - Bibliotheek
- Accordion *
- Breadcrumb Navigation
- Button *
- Checkbox *
- Contact Timeline
- File
- Link
- Link List
- Login Link *
- Page Number Navigation *
- Radio Button
- Select *
- Side Navigation
- Skip Link
- Task Card
- Task Navigation
- Text Area *
- Text Input *
NL Design System - ToDo Bibliotheek
- Breadcrumb Navigation
- Card as Link *
- Case Card
- Icon Only Button *
- Listbox
- Main Navigation
- Page Number Navigation *
- Progress List *
- Switch *
- Toolbar Button *
Bij componenten aangeduid met een * zal ook een design token voor border-radius toegepast moeten worden.
2.2.0
20 augustus 2025
Community component 'Page Header' van Amsterdam toegevoegd
Community component 'Page Header' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
- Bekijk Page Header in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"ams": {
"page-header": {
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.3xl}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"medium": {
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.5xl}"
}
},
"wide": {
"padding-inline": {
"$type": "dimension",
"$value": "96px"
}
},
"brand-name": {
"color": {
"$type": "color",
"$value": "{basis.color.accent-1.color-document}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.xl}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.heading.font-weight}"
},
"text-wrap": {
"$type": "other",
"$value": "nowrap",
"$description": "[code-only]"
}
},
"logo-link": {
"column-gap": {
"$type": "dimension",
"$value": "{basis.space.column.xl}"
},
"outline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
}
},
"mega-menu-button": {
"cursor": {
"$type": "other",
"$value": "default",
"$description": "[code-only]"
},
"label": {
"open": {
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.bold}"
}
}
}
},
"menu": {
"column-gap": {
"$type": "dimension",
"$value": "{basis.space.column.3xl}"
},
"row-gap": {
"$type": "dimension",
"$value": "{basis.space.row.3xl}"
}
},
"menu-item": {
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-default}"
},
"column-gap": {
"$type": "dimension",
"$value": "{basis.space.text.xs}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"outline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.lg}"
},
"hover": {
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-hover}"
}
}
},
"menu-link": {
"text-decoration-line": {
"$type": "textDecoration",
"$value": "None"
},
"text-decoration-thickness": {
"$type": "textDecoration",
"$value": "auto",
"$description": "[code-only]"
},
"text-underline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"hover": {
"text-decoration-line": {
"$type": "textDecoration",
"$value": "underline"
}
}
},
"navigation": {
"column-gap": {
"$type": "dimension",
"$value": "{basis.space.column.4xl}"
},
"row-gap": {
"$type": "dimension",
"$value": "{basis.space.row.xl}"
}
}
}
}
}
2.1.0
19 augustus 2025
Community component 'Page Footer' van Amsterdam toegevoegd
Community component 'Page Footer' van gemeente Amsterdam is toegevoegd aan de bibliotheek.
- Bekijk Page Footer in de NL Design System - Bibliotheek.
- Hieronder vind je de bijbehorende design tokens.
{
"ams": {
"page-footer": {
"menu": {
"column-gap": {
"$type": "dimension",
"$value": "{basis.space.column.4xl}"
},
"padding-block": {
"$type": "dimension",
"$value": "{basis.space.block.xl}"
},
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.xl}"
},
"row-gap": {
"$type": "dimension",
"$value": "{basis.space.row.md}"
},
"medium": {
"padding-inline": {
"$type": "dimension",
"$value": "{basis.space.inline.5xl}"
}
},
"wide": {
"padding-inline": {
"$type": "dimension",
"$value": "96px"
}
}
},
"menu-link": {
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-default}"
},
"font-family": {
"$type": "fontFamilies",
"$value": "{basis.text.font-family.default}"
},
"font-size": {
"$type": "fontSizes",
"$value": "{basis.text.font-size.md}"
},
"font-weight": {
"$type": "fontWeights",
"$value": "{basis.text.font-weight.default}"
},
"line-height": {
"$type": "lineHeights",
"$value": "{basis.text.line-height.md}"
},
"outline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"text-decoration-line": {
"$type": "textDecoration",
"$value": "underline"
},
"text-decoration-thickness": {
"$type": "textDecoration",
"$value": "auto",
"$description": "[code-only]"
},
"text-underline-offset": {
"$type": "other",
"$value": "auto",
"$description": "[code-only]"
},
"hover": {
"color": {
"$type": "color",
"$value": "{basis.color.action-1.color-hover}"
},
"text-decoration-line": {
"$type": "textDecoration",
"$value": "None"
}
}
},
"spotlight": {
"background-color": {
"$type": "color",
"$value": "{basis.color.accent-1-inverse.bg-default}"
}
}
}
}
}
2.0.0
3 juli 2025
Allereerste Figma release gedaan 🎉
- Meer dan 20 nieuwe componenten, inclusief de Candidate componenten.
-
Componenten verdeling op orde.
- 'NL Design System - Bibliotheek' componenten met de status 'Community' en 'Candidate'.
- 'NL Design System - ToDo Bibliotheek' componenten met de status 'Help Wanted' of 'Experimental'.
- Community componenten hebben een stuk minder todo tokens. Voor de todo tokens die er nog wel zijn, zijn issues aangemaakt bij de betreffende organisatie.
- Figma hygiëne doorgevoerd op elk niveau (Pages, Layers, Properties, etcetera.)
- W3C DTCG format doorgevoerd op de tokens in JSON.
- W3C DTCG conventie voor design token type 'Dimension' doorgevoerd op tokens van het type Border width, Border radius, Sizing en Spacing.
- Nieuwe 'Cover' op basis van vernieuwde NL Design System huisstijl.
- 'Read me' pagina's toegevoegd.
- 'Estafettemodel badges' op basis van vernieuwde NL Design System huisstijl.
- Design tokens gedocumenteerd met nieuw 'Design Token Documentation Item'.
- 25 nieuwe toptaak iconen vanuit OpenGemeenten.
- Met deze release komen ook het 'Start-thema' en de 'basis-tokens' mee.
Zoals je ziet is er zoveel veranderd dat een verse installatie sneller is dan alles aan jouw kant stap voor stap aanpassen. We hebben een Figma migratie-stappenplan geschreven waarmee we je helpen om stap voor stap te migreren.