Huisstijl toepassen

NL Portal is volledig thematiseerbaar via NL Design System design tokens. Eigen huisstijl toepassen is een configuratietaak — geen ontwikkelwerk.

---

Hoe het werkt

NL Portal-componenten zijn opgebouwd met NLDS-componenttokens. Door de Brand- en Common tokens van uw gemeente te definiëren, past de volledige interface automatisch aan:

Brand tokens (uw kleuren, lettertypes)
    ↓ koppelen aan
Common tokens (primaire kleur, achtergrond, tekst)
    ↓ worden overgenomen door
Component tokens (knopkleur, koptekstkleur, linkkleur)
    ↓ sturen
Alle NL Portal-componenten

---

Stap-voor-stap

Stap 1 — Maak een tokenbestand aan

In de frontend-template repository staat het bestand: /src/styles/nl-portal-design-tokens.css

Dit bestand bevat de design tokens die de standaardwaarden overschrijven. Begin met de Brand tokens van uw gemeente:

/* Brand tokens — uw gemeentekleuren */
--gemeente-naam-color-primary: #1234AB;
--gemeente-naam-color-secondary: #ABCDEF;
--gemeente-naam-font-family: 'Uw Gemeentelettertype', sans-serif;

Stap 2 — Koppel Brand tokens aan Common tokens

Wijs uw Brand tokens toe aan de NLDS-semantische laag:

/* Common tokens — semantische betekenis */
--nl-color-primary: var(--gemeente-naam-color-primary);
--nl-color-secondary: var(--gemeente-naam-color-secondary);

Stap 3 — Controleer het resultaat

Gebruik de browser-developer tools om te zien welk token een specifiek component aanstuurt. Selecteer een element → inspecteer de CSS-variabele in het rechterpaneel. De naam van het token is direct zichtbaar.

Voorbeeld: een knop toont --button-background-color: var(--nl-color-primary). Door --nl-color-primary te overschrijven met uw Brand token past de knopkleur automatisch aan.

Stap 4 — Refereer aan de Den Haag-implementatie

Gemeente Den Haag heeft een volledige NLDS-gebaseerde NL Portal-implementatie:

• Repository: Gemeente-DenHaag/nl-portal-libraries

• Tokenbestand als referentie: nl-portal-design-tokens.css

---

Welke tokens NL Portal gebruikt

NL Portal-componenten gebruiken de volgende NLDS-tokenlagen:

Token-categorie	Voorbeelden
Kleuren	--nl-color-primary, --nl-color-background, --nl-color-text
Typografie	--nl-font-family, --nl-font-size-body
Spacing	--nl-spacing-small, --nl-spacing-medium
Componenten	--button-background-color, --header-bar-background-color

Het meest volledige overzicht staat in het tokenbestand van de frontend-template: → nl-portal-design-tokens.css op GitHub

---

Toegankelijkheid

NLDS-componenten zijn ontworpen om te voldoen aan WCAG 2.1 niveau AA — de minimale toegankelijkheidseis voor overheidswebsites (Besluit digitale toegankelijkheid overheid). Door huisstijltokens toe te passen op NLDS-componenten, behoudt u deze toegankelijkheidsgarantie zolang u voldoende kleurcontrast handhaaft.

Controleer altijd het kleurcontrast van uw Brand tokens met een tool zoals de WebAIM Contrast Checker.

---

Figma

NLDS publiceert een Figma Community Library voor ontwerpers: → NL Design System Bibliotheek — Figma

Ontwerpers kunnen hiermee op basis van de NLDS-componenten een gemeentespecifiek prototype bouwen dat 1-op-1 overeenkomt met de implementatie in NL Portal.