Het NLDD Designsysteem geeft je de bouwstenen voor websites en applicaties van de Rijksoverheid. Toegankelijkheid, huisstijl en ontwerppatronen zitten erin.
Van informatiesites tot applicaties met veel interactie. Het is framework-onafhankelijk: het werkt in Angular, React en Vue, en net zo goed zonder framework. We onderhouden het systeem elke week, en breiden het regelmatig uit.
Toetsenbord, schermlezer, focus en contrast zitten in elk component. Je hoeft de regels niet uit je hoofd te kennen om ze goed toe te passen.
Vind je een probleem, dan lossen we het één keer op, in het component zelf. Kan het component het niet afdwingen, dan wordt het een regel in de linter. Met de volgende update hebben alle teams de verbetering, zonder dat ze er iets voor hoeven te doen.
Burgers herkennen de overheid aan hoe ze communiceert. Daarom bouwen we een kleurensysteem, een eigen iconenset en componenten die bij elkaar horen.
Elke organisatie kiest haar eigen kleur. De contrastwaarden, het gedrag en de toegankelijkheid blijven gelijk. Probeer het hier: deze pagina verandert mee.
Een thema zet de kleur op één plek. Knoppen, velden, keuzes en voortgang volgen vanzelf, met dezelfde contrastwaarden in licht en donker.
De componenten zijn web components: gewone HTML-elementen die de browser zelf begrijpt. Daarom werken ze in Angular, React en Vue, en net zo goed zonder framework. Jij kiest, het designsysteem past zich aan.
De API is zo eenvoudig dat je als designer zelf in de front-end aan de slag kunt. Er is ruimte waar je die nodig hebt, en vaste afspraken waar eenheid telt. Die afspraken zijn ook de guardrails voor een AI-assistent: die weet wat kan en wat niet.
Van een huis tot een microscoop, van een tulp tot een handdruk. Elk icoon is getekend volgens één stijlgids, zodat het past bij de Rijksoverheid-letter.
Niet elk team heeft een designer. Met de skills krijgt je AI-assistent de kennis van het systeem mee: de componenten, de patronen en de regels. Zo ontwerp je in code, en blijft het resultaat toegankelijk en herkenbaar.
De ontwerprichtlijnen en vijftien patronen, van home tot formulier en applicatie. Je assistent bouwt een pagina zoals wij hem zouden ontwerpen.
De regels gaan over toegankelijkheid, tekst en structuur. Niet over of je code netjes is, maar over of iemand je dienst kan gebruiken.
We leren elk jaar meer over welke patronen werken. Binnenkort testen we ook projecten die al live staan, zodat ze die inzichten meekrijgen.
Bouw je samen met een AI-assistent? Installeer dan de skills en vraag je assistent een bestaande pagina om te zetten naar het designsysteem.