> **NL Design System is een project dat specialisten van verschillende > overheidsorganisaties laat samenwerken aan concrete oplossingen voor websites > en applicaties. Denk bijvoorbeeld aan code, ontwerp en richtlijnen.** Binnen de overheid is digitale dienstverlening de standaard geworden. Dit betekent dat veel organisaties zelf een website of webapplicatie moeten bouwen om hun diensten aan te bieden. Om dubbel werk te voorkomen is de NL design system community opgericht. Hiermee kunnen publieke organisaties samenwerken aan herbruikbare componenten en sneller eigen design systemen opzetten die voldoen aan toegankelijkheidseisen. Door organisatie-overstijgend samen te werken en de krachten te bundelen is het mogelijk om web-componenten te bouwen die **consistenter**, **gebruiksvriendelijker** en **toegankelijker** zijn. Toch is NL Design System meer dan een manier om een organisatiebrede component-library aan te leggen. Het bestaat namelijk uit de volgende onderdelen: - **Richtlijnen** voor hoe je de beste digitale diensten maakt, zoals voor het [maken van formulieren](https://nldesignsystem.nl/richtlijnen/formulieren/). - **Design kit** voor grafisch vormgevers en UX-ontwerpers. - **Componentenbibliotheek** voor ontwikkelaars. - Gedeelde **inzichten** over **toegankelijkheid**, opgenomen in die richtlijnen en in documentatie voor componenten. - Een methode om je **huisstijl** **toe te passen** op onze componenten ([design tokens](https://nldesignsystem.nl/handboek/design-tokens)). - Technische **infrastructuur** om werk efficiënt te testen, te delen en **uit te rollen** (zoals een voorbeeldrepository met Storybook en visuele regressietests). - **Stijlgids** om de huisstijl van je organisatie consistent te gebruiken. Al deze onderdelen hebben dit gedeelde doel: makkelijk consistente, toegankelijke en gebruiksvriendelijke websites en applicaties maken. ## Het Estafettemodel Het [NL Design System](https://nldesignsystem.nl/) is een **framework** waarmee organisaties hun eigen design system kunnen bouwen. Het belangrijkste voordeel is dat componenten die zijn gebouwd met dit framework eenvoudig kunnen worden uitgewisseld tussen verschillende design systems. Door middel van design tokens worden white-label componenten voorzien van een eigen huisstijl, waardoor dezelfde componentcode herbruikbaar is voor meerdere organisaties. Het Estafettemodel staat centraal in NL Design System: teams ontwikkelen componenten die anderen kunnen hergebruiken en verbeteren. Door samen te werken aan herbruikbare componenten maken we het mogelijk om over organisatiegrenzen heen consistentie en kwaliteit te bereiken en standaarden te creëren. Als je zelf een publieke organisatie bent, en je wilt een design systeem opzetten is dit waar je wilt beginnen. ## Hoogwaardige componenten Het implementeren van het NL Design System vergt wel enige inspanning van jou en je organisatie, maar levert uiteindelijk veel op. De tijd die je als developer voorheen besteedde aan het aanpassen of bouwen van specifieke front-end-oplossingen, kun je nu investeren in het verbeteren van centrale componenten. Alle verbeteringen die je aanbrengt, komen ten goede aan de hele organisatie, waardoor iedereen profiteert van jouw bijdragen. ## Extra tijd inplannen Wat natuurlijk wel vereist is, is dat er binnen jouw project extra tijd wordt vrijgemaakt voor de werkzaamheden die komen kijken bij het opzetten van alle tooling. Denk hierbij aan het inrichten van een design token pipeline (zoals Style Dictionary), het opzetten van Storybook als componenten-catalogus, en het configureren van de build- en testomgeving waarmee je thema en componenten worden gegenereerd, gevalideerd en gepubliceerd. Daarnaast vraagt het opzetten van een thema om afstemming binnen je organisatie: huisstijlrichtlijnen moeten worden vertaald naar design tokens, er moet gekozen worden welke componenten je als eerste overneemt of aanpast, en er moet een proces komen voor het beheren en updaten van het thema zodra nieuwe versies van onderliggende componenten verschijnen. Dit is werk dat niet naast de reguliere projectwerkzaamheden past, dus houd hier vanaf de start rekening mee in de planning en capaciteit van je team. Deze investering betaalt zich uiteindelijkd dubbel en dwars terug: eenmaal ingericht, kun je nieuwe componenten met relatief weinig moeite toevoegen en profiteer je van verbeteringen die door andere organisaties binnen het Estafettemodel worden aangedragen. ## Aan de slag Om NL Design System te gebruiken, dien je eerst een eigen thema voor jouw organisatie te ontwikkelen. Een thema bestaat uit design tokens die de basis vormen van jouw huisstijl: denk aan kleuren en typografie. ### Theme example repository Je kunt makkelijk beginnen met het bouwen van een eigen thema op basis van de [example template op Github](https://github.com/nl-design-system/example). Deze repository bevat al direct: - Twee example components - Een opzet met Storybook (componenten-catalogus) **[Example Repo van NL Design System »](https://github.com/nl-design-system/example)** ## Meeliften op een theme? Als developer vraag je je natuurlijk direct af, kan ik ook gebruik maken van NL Design System zonder dat ik een thema hoeft te bouwen voor mijn organisatie? Het antwoord is; op zich kan dat. Je moet alleen wel toestemming vragen aan de maker van het thema. Een voorbeeld is het [auteursrecht](https://nl-design-system.github.io/utrecht/storybook/?path=/docs/utrecht-toestemming-voor-gebruik--docs) van het Design System van gemeente Utrecht. ## Rijkshuisstijl Community De [Rijkshuisstijl Community](https://www.rijkshuisstijl-community.nl/) is een opensource community die een **concrete implementatie** van de Rijkshuisstijl heeft ontwikkeld als design system componenten. Een van de vele design systemen die is aangesloten bij het NL Design System framework. **Het verschil:** Waar NL Design System het framework is om een design system te bouwen, biedt Rijkshuisstijl Community direct bruikbare componenten die al zijn vormgegeven volgens de Rijkshuisstijl. Dit maakt het eenvoudiger om snel aan de slag te gaan met projecten die de Rijkshuisstijl moeten volgen. Als je zelf geen design system wilt opzetten, maar snel wilt bouwen met componenten die voldoen aan de Rijkshuisstijl, dan is dit de plek om te beginnen. ## Levende voorbeelden Een aantal goede voorbeelden van NL Design System implementaties en communities zijn: - [Storybook Rijkshuisstijl](https://rijkshuisstijl-community.vercel.app/?path=/docs/rhc-radio--docs) - [Storybook gemeente Utrecht](https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-alert-dialog--docs) - [Storybook gemeente Den Haag](https://nl-design-system.github.io/denhaag/?path=/docs/react-cards-case-card--docs) ## Community NL Design System wordt gemaakt en onderhouden door een open community. Waar je kunt meepraten en meedoen, lees je op [Community: NL Design System](../../communities/nl-design-system.md). ## Links - [Introductie NL Design System](https://nldesignsystem.nl/handboek/introductie/) - [Over NL Design System](https://nldesignsystem.nl/project/over-nl-design-system/) - [Website NL Design System](https://nldesignsystem.nl)