Ga naar hoofdinhoud

Start-thema

Start-thema en basis-tokens

Vanuit NL Design System bieden we het 'Start-thema' aan. De stijl van dit Start-thema hebben we vastgelegd in een set aan 'basis-tokens'. Deze basis-tokens leven op het 'Common' niveau.

Op deze pagina lees je wat het Start-thema is, welke stijlkeuzes er zijn gemaakt en hoe de basis-tokens werken.

Doel van het Start-thema

Met het Start-thema bieden we organisaties een stevig 'startpunt'. Het thema bevat toegankelijke en gebruiksvriendelijke standaarden, zodat je stap voor stap de huisstijl van jouw organisatie kunt doorvoeren. Zo kun je direct aan de slag met een consistente en inclusieve huisstijl, zonder alles zelf op te hoeven bouwen.

Stijl van het Start-thema: een donkerblauw vlak met witte letters ‘Start-thema. Eenvoudig en neutraal.’ Rechts een illustratie van Nederland in dezelfde kleur.

Stijl van het Start-thema

De stijl is bewust eenvoudig en neutraal. Toch zijn er duidelijke keuzes gemaakt voor typografie, kleuren en iconen.

Typografie

Als lettertype is gekozen voor IBM Plex Sans, een open source-lettertype dat voldoet aan onze richtlijnen voor typografie. Leuk detail: het is ontworpen door Mike Abbink van het Nederlandse bureau Bold Monday.

De tekst IMB Plex Sans wordt afgebeeld met het lettertype IBM Plex Sans.

Kleur

De kleuren in het Start-thema bestaan uit blauw- en grijstinten, aangevuld met signaalkleuren. Alle combinaties voldoen aan de richtlijnen voor kleur. Denk daarbij aan voldoende contrast voor tekstkleur ten opzichte van de achtergrondkleur. Maar ook voldoende contrast voor niet-textuele content.

Ook is er direct een dark-mode beschikbaar.

Twee cirkels. De linker is donkerblauw de rechter is donkergrijs.

Iconen

Functionele iconen

Tabler logo met op de achtergrond allerlei verschillende iconen uit deze set.

Voor functionele iconen gebruiken we een selectie uit de Tabler iconenset. Deze open-source set bevat meer dan 3100 outline iconen en mag ook binnen jouw organisatie worden gebruikt.

Let op: deze set wordt niet door NL Design System beheerd. Je bent zelf verantwoordelijk voor het gebruik. Mis je een icoon? Dan kun je deze zelf toevoegen.

Aangezien de originele iconen uit lijnen van 2px bestaan die niet meeschalen met het formaat, hebben we ze omgezet naar vaste vormen (outline stroke). Dit sluit aan bij onze richtlijnen rondom iconen.

Toptaak iconen

Gemeente iconen logo met op de achtergrond allerlei verschillende iconen uit deze set.

Voor toptaak iconen maken we gebruik van de outline-versie van de OpenGemeenten iconenset. Deze set met meer dan 200 iconen is open source en mag je vrij gebruiken.

Ook deze set valt buiten ons beheer. Mis je een icoon? Neem dan contact op met OpenGemeenten.

Basis-tokens

De stijlkeuzes van het Start-thema zijn vastgelegd in een set aan basis-tokens. Deze tokens bevinden zich op het 'Common' niveau.

Je kunt het Start-thema volledig afstemmen op de huisstijl van jouw organisatie door andere waarden toe te kennen aan de basis-tokens.

De afbeelding toont een blauwe en groene primaire knop. Daarboven staan de verwijzingen vanuit de verschillende token niveau's.

Daarom is het handig om het doel en de toepassing van deze basis-tokens goed te begrijpen.

Doel van de basis-tokens

Met de basis-tokens bieden we organisaties een 'basis-set' van Common tokens. Door organisatieoverstijgend uit dezelfde bron te werken, worden componenten eenvoudig uitwisselbaar tussen organisaties.

De afbeelding toont 4 knoppen. Ze verschillen van kleur, lettertype en de mate waarin de hoeken zijn afgerond.

Omdat we verschillende huisstijlen willen ondersteunen, is de set bewust ruim opgezet. Het is makkelijker om ongebruikte tokens later te verwijderen dan telkens nieuwe toe te moeten voegen.

Goed om te weten

Naamgeving

De basis-tokens zijn voorzien van duidelijke, voorspelbare namen. Die naamgeving is opgebouwd uit de volgende lagen:

  • Prefix (basis)
  • Groep (optioneel, bijvoorbeeld text of space)
  • Eigenschap (bijvoorbeeld font-family, font-size of border-width)
  • Optie (bijvoorbeeld default, bold, sm, md of lg)

Dat resulteert in naamgeving zoals:

  • basis.text.font-family.default
  • basis.text.font-family.monospace
  • basis.text.font-weight.default
  • basis.text.font-weight.bold
  • basis.text.font-size.md
  • basis.text.font-size.lg
  • basis.text.line-height.md
  • basis.text.line-height.lg
  • basis.space.inline.md
  • basis.space.inline.lg
  • basis.space.block.md
  • basis.space.block.lg
  • basis.size.md
  • basis.size.lg
  • basis.size.icon.md
  • basis.size.icon.lg
  • basis.border-radius.md
  • basis.border-radius.lg
  • basis.border-width.md
  • basis.border-width.lg
  • basis.box-shadow.md
  • basis.box-shadow.lg

Onderling verwijzen

Omdat we uiteenlopende huisstijlen willen ondersteunen, is de set basis-tokens ruim opgezet. Het Start-thema zelf is eenvoudig gehouden. Daarom verwijzen sommige basis-tokens naar andere basis-tokens.

Voorbeeld A

  • basis.text.font-family.default heeft als waarde IBM Plex Sans, sans-serif.
  • basis.heading.font-family heeft als waarde {basis.text.font-family.default}.

Gebruikt jouw organisatie één lettertype voor zowel tekst als koppen? Dan hoef je enkel de waarde van basis.text.font-family.default aan te passen.

Wil je koppen een ander lettertype geven? Dan pas je basis.heading.font-family afzonderlijk aan.

De afbeelding toont 2 voorbeelden. Links wordt voor tekst en headings hetzelfde lettertype gebruikt. Rechts wordt voor de headings een andere lettertype gebruikt.

Voorbeeld B

  • basis.color.accent-1.color-default heeft als waarde #1B59A4.
  • basis.color.accent-2.color-default heeft als waarde {basis.color.accent-1.color-default}.
  • basis.color.accent-3.color-default heeft als waarde {basis.color.accent-1.color-default}.

Heeft jouw organisatie één huisstijlkleur? Dan volstaat het om accent-1 aan te passen.

Zijn er meerdere huisstijlkleuren? Dan kun je accent-2 en accent-3 individueel instellen en de verwijzingen loslaten.

De afbeelding toont 2 voorbeelden. Links worden basis-tokens 'accent-2' en 'accent-3' gevuld door 'accent-1'. Rechts hebben basis-tokens 'accent-1', 'accent-2' en 'accent-3' verschillende kleuren.

Speciale groepen

Binnen de basis-tokens zijn enkele speciale groepen aangewezen. Deze hebben extra aandacht gekregen omdat hiervoor specifieke richtlijnen zijn of omdat wijzigingen hierin snel grote invloed hebben op de huisstijl.

basis.heading.* : Stijl van alle koppen.

basis.form-control.* : Stijl van alle formulier-elementen zoals Text Input en Text Area. Maar ook Checkbox en Radio Button.

basis.focus.* : Stijl van de focus state.

Tip

Het asterisk-symbool (*) betekent dat dit geldt voor alle tokens die met deze termen beginnen. basis.heading.* dekt dus basis.heading.font-family, basis.heading.font-weight etcetera.

Tip

De naamgeving van deze speciale groepen wijkt bewust af van de algemene structuur. Ze sluiten aan op de naamgeving van de Component tokens, zodat ze beter herkenbaar zijn.

Basis-tokens voor typografie

Voor typografie zijn er basis-tokens beschikbaar voor het instellen van:

  • Lettertype (font-family)
  • Lettergewicht (font-weight)
  • Lettergrootte (font-size)
  • Regelhoogte (line-height)

Lettertype

basis.text.font-family.default : Standaard lettertype voor tekst.

basis.text.font-family.monospace : Voor tekst die als code wordt weergegeven.

Lettergewicht

basis.text.font-weight.default : Standaard gewicht voor reguliere tekst.

basis.text.font-weight.bold : Gewicht voor vetgedrukte tekst.

Lettergrootte

Er zijn zeven basis-tokens beschikbaar om lettergrootte te bepalen:

  • basis.text.font-size.sm
  • basis.text.font-size.md
  • basis.text.font-size.lg
  • basis.text.font-size.xl
  • basis.text.font-size.2xl
  • basis.text.font-size.3xl

De waarden van deze tokens zijn in rem genoteerd zodat tekst automatisch schaalt als men behoefte heeft aan grotere of kleinere letters.

Regelhoogte

Voor elke lettergrootte is er een corresponderende basis-token voor regelhoogte beschikbaar:

  • basis.text.line-height.sm
  • basis.text.line-height.md
  • basis.text.line-height.lg
  • basis.text.line-height.xl
  • basis.text.line-height.2xl
  • basis.text.line-height.3xl

De waarden zijn 'unitless' (zonder eenheid) genoteerd, zodat de regelhoogte automatisch meebeweegt met de gekozen lettergrootte.

Basis-tokens voor kleur

Voor kleur (color) is een uitgebreide set basis-tokens beschikbaar, geïnspireerd op Radix. De kleuren zijn volledig aanpasbaar naar wens van jouw organisatie.

Tip

Het instellen van kleuren vergt wat tijd, maar daarna hoef je je geen zorgen meer te maken over kleurcontrast. Op het Common niveau zijn deze namelijk al goed geregeld. Heeft jouw organisatie geen specifieke kleurvoorschriften? Dan kun je de standaardwaarden uit het Start-thema prima laten staan.

De basis-tokens voor kleur zijn te verdelen in de volgende onderdelen:

  • Twee assen: Doel en toepassing.
  • Twee sets: Default en Inverse.
  • Twee modi: Light en Dark.

Laten we beginnen met de eerste as.

As 1: Doel

Kleur gebruik je altijd met een bepaald doel of intentie. Bijvoorbeeld:

  • Huisstijl
  • Interactie
  • Signaal (feedback)
  • Structuur

Voor deze doelen gebruiken we de volgende termen:

  • default
  • accent-1
  • accent-2
  • accent-3
  • action-1
  • action-2
  • disabled
  • info
  • negative
  • positive
  • warning
  • highlight
  • selected

De afbeelding toont as 1, enkele termen verticaal uitgelijnd. Horizontaal zijn de termen van as 2 niet goed zichtbaar.

Default

Gebruik default als je kleuren inzet voor structuur, bijvoorbeeld bij componenten zoals Paragraph, Heading of Table.

De afbeelding toont de componenten Heading, Paragraph, Divider en Tabel allen met eenvoudige grijze tot donkergrijze kleuren.

Accent-1, accent-2 en accent-3

Gebruik accent als je vanuit de huisstijl kleur wilt inzetten. Bijvoorbeeld bij componenten zoals Page Header of Page Footer. Standaard verwijzen accent-2 en accent-3 naar accent-1.

De afbeelding toont de componenten Page Header en Page Footer op basis van een blauwe kleur.

Heeft jouw organisatie meerdere huisstijlkleuren? Dan kun je accent-2 en accent-3 los van elkaar instellen.

De afbeelding toont de componenten Page Header en Page Footer op basis van een violet kleur.

Action-1 en action-2

Gebruik action om kleuren toe te wijzen aan interactieve elementen. Bijvoorbeeld bij componenten zoals Button, Link, Breadcrumb Navigation of Page Number Navigation.

  • action-1 is standaard bedoeld voor knoppen.
  • action-2 verwijst standaard naar action-1 en wordt gebruikt voor andere interactieve componenten.

De afbeelding toont de componenten Button, Link, Breadcrumb Navigation en Page Number Navigation op basis van een blauwe kleur.

Gebruik je meerdere interactiekleuren? Dan kun je action-2 apart instellen.

De afbeelding toont de componenten Button, Link, Breadcrumb Navigation en Page Number Navigation. De knoppen zijn groen. Alle andere interactieve componenten zijn blauw.

Disabled

Gebruik disabled om inactieve elementen visueel aan te duiden. Bijvoorbeeld bij componenten zoals Breadcrumb Navigation, Page Number Navigation en Progress List. Voor elementen die disabled zijn, worden vaak lichtere kleuren gebruikt. Let erop dat de tekst- en achtergrondkleur nog wel genoeg contrast hebben.

De afbeelding toont de componenten Breadcrumb Navigation, Page Number Navigation en Progress List met grijze kleuren.

Info, Negative, Warning, Positive

Gebruik deze basis-tokens voor signalen of feedback:

  • info: Informatief signaal of neutraal.
  • negative: Negatief signaal, foutmelding of kritieke situatie.
  • warning: Waarschuwend signaal of risico.
  • positive: Positief signaal, bevestiging of geslaagde actie.

Denk hierbij aan componenten zoals Alert, Progress List of Status Badge.

De afbeelding toont de componenten Alert, Progress List en Status Badge met rode, groene, oranje en blauwe signaalkleuren.

Highlight & Selected
  • highlight: Gebruik dit om iets te markeren of uit te lichten, bijvoorbeeld met de Mark component.
  • selected: Gebruik dit voor actieve selecties, bijvoorbeeld in een Combobox of Table.

As 2: Toepassing

Naast het doel gebruik je kleuren ook afhankelijk van de toepassing. Denk aan:

  • Achtergrond
  • Voorgrond (tekst en iconen)
  • Kaders en lijnen

Voor deze toepassingen gebruiken we de volgende termen, waarin ook status en hiërarchie zijn meegenomen:

  • Achtergrond:
    • bg-document
    • bg-subtle
    • bg-default
    • bg-hover
    • bg-active
  • Kaders en lijnen:
    • border-subtle
    • border-default
    • border-hover
    • border-active
  • Voorgrond:
    • color-subtle
    • color-default
    • color-hover
    • color-active
    • color-document

De afbeelding toont as 1, enkele termen verticaal uitgelijnd. Horizontaal zijn de termen van as 2 ook goed zichtbaar.

Hieronder lees je per toepassing wat het betekent, inclusief richtlijnen die zorgen voor voldoende kleurcontrast.

bg-document

Algemene achtergrondkleur.

bg-subtle

Alternatieve achtergrondkleur ten opzichte van bg-document, meestal iets donkerder.

bg-default

Standaard achtergrondkleur voor getinte componenten in standaardstatus.

bg-hover

Achtergrondkleur bij 'hover' status van getinte of transparante componenten.

bg-active

Achtergrondkleur bij 'active' of 'selected' status van getinte of transparante componenten.

border-subtle

Subtiele lijnkleur, inzetbaar als er geen contrastverhouding van 3:1 vereist is.

border-default

Standaard lijnkleur. Moet een contrastverhouding van 3:1 of meer hebben met bg-default.

border-hover

Lijnkleur bij 'hover' status. Moet een contrastverhouding van 3:1 of meer hebben met bg-hover.

border-active

Lijnkleur voor 'active' of 'selected' status. Moet een contrastverhouding van 3:1 of meer hebben met bg-active.

color-default

Standaard tekstkleur. Moet een contrastverhouding van 4.5:1 of meer hebben met bg-default.

color-hover

Tekstkleur bij 'hover' status. Moet een contrastverhouding van 4.5:1 of meer hebben met bg-hover.

color-active

Tekstkleur bij 'active' of 'selected' status. Moet een contrastverhouding van 4.5:1 of meer hebben met bg-active.

color-subtle

Alternatieve, subtielere voorgrondkleur ten opzichte van color-document. Moet een contrastverhouding van 4.5:1 of meer hebben met bg-subtle.

color-document

Algemene voorgrondkleur. Moet een contastverhouding van 4.5:1 of meer hebben met bg-subtle.

Combinatie van As 1 en As 2

Door termen van As 1 (doel) en As 2 (toepassing) te combineren, resulteert dat in naamgeving zoals:

  • basis.color.accent-1.bg-document
  • basis.color.accent-1.bg-subtle
  • basis.color.accent-1.bg-default
  • basis.color.accent-1.bg-hover
  • basis.color.accent-1.bg-active
  • basis.color.accent-1.border-subtle
  • basis.color.accent-1.border-default
  • basis.color.accent-1.border-hover
  • basis.color.accent-1.border-active
  • basis.color.accent-1.color-default
  • basis.color.accent-1.color-hover
  • basis.color.accent-1.color-active
  • basis.color.accent-1.color-subtle
  • basis.color.accent-1.color-document

Inverse set

Als we het hierbij zouden laten, zouden alle componenten subtiel getint blijven. Maar soms wil je juist componenten 'stevig' neerzetten. Denk aan een primaire knop die echt de aandacht moet trekken, of een Page Footer die je visueel duidelijk wilt scheiden van de content erboven.

De afbeelding toont de componenten Button en Page Footer zijn 2 keer afgebeeld. Links hebben ze subtiele kleuren, rechts hebben ze een stevige kleurstelling.

Daarom is er ook een 'inverse' set tokens beschikbaar:

  • basis.color.accent-1-inverse.bg-document
  • basis.color.accent-1-inverse.bg-subtle
  • basis.color.accent-1-inverse.bg-default
  • etcetera
Tip

Wil je dat een primaire knop en een secundaire knop dezelfde kleur delen? Zorg er dan voor dat *.inverse.bg-default overeenkomt met *.color-default en *.border-default.

De afbeelding toont 2 keer 2 knoppen van het primaire en secondaire type. Links met blauwe kleuren. Rechts met groene kleuren. Bij de primaire knop is de kleur toegepast op de achtergrond. Bij de secondaire knop is de kleur toegepast op de tekst en de rand.

Onderstaande afbeelding laat zien hoe de basis-tokens voor kleur binnen een interface worden gebruikt. Uiteraard zitten hier bij een uiteindelijke implementatie Component tokens tussen.

  • basis.color.default.bg-subtle wordt gebruikt voor de lichtgrijze achtergrond.
  • basis.color.default.bg-document wordt gebruikt voor de witte achtergrond die visueel boven op de lichtgrijze achtergrond ligt.
  • basis.color.default.border-subtle wordt gebruikt voor de lichtgrijze rand rondom de witte achtergrond.
  • basis.color.positive.bg-default wordt gebruikt voor de lichtgroene achtergrond van de melding.
  • basis.color.positive.border-default wordt gebruikt voor de groene rand rondom de melding.
  • basis.color.positive.color-default wordt gebruikt voor het groene icoon van de melding.
  • basis.color.positive.color-document wordt gebruikt voor de donkergroene tekst van de melding.
  • basis.heading.color wordt gebruikt voor de kop.
  • basis.color.default.color-document wordt gebruikt voor de paragraaf.
  • basis.color.action-2.color-default wordt gebruikt voor de link.
  • basis.color.action-1-inverse.bg-default wordt gebruikt voor de achtergrond van de knop.
  • basis.color.action-1-inverse.color-default wordt gebruikt voor de tekst van de knop.

Visueel voorbeeld van de uitleg die voorafgaand aan de afbeelding wordt beschreven.

Transparant

Er is een specifieke basis-token beschikbaar voor transparantie: basis.color.transparent. Deze token zorgt ervoor dat transparantie eenduidig wordt vertaald naar verschillende outputformaten, zoals CSS of design tools.

Focus

De focusstatus in het Start-thema is visueel krachtig: felgeel gecombineerd met zwart en een zwart-wit gestreepte rand.

Deze kleurwaarden zijn bewust 'hard-coded', zodat de focus status altijd afwijkt van alle andere content. Dit bevordert de toegankelijkheid.

Bij formulieren vermijden we een gele achtergrond om verwarring met auto-complete te voorkomen.

Basis-tokens voor ruimte

Voor ruimtelijke indeling (space) binnen en tussen componenten zijn basis-tokens beschikbaar. Deze tokens zijn gebaseerd op het 'spacing concept' dat we bij NL Design System aanhouden.

Dit zorgt voor tokens met termen zoals inline, block, text, column en row, gecombineerd met opties op basis van 't-shirt sizing':

  • basis.space.inline.sm
  • basis.space.inline.md
  • basis.space.inline.lg
  • basis.space.block.sm
  • basis.space.block.md
  • basis.space.block.lg
  • basis.space.text.sm
  • basis.space.text.md
  • basis.space.text.lg
  • basis.space.column.sm
  • basis.space.column.md
  • basis.space.column.lg
  • basis.space.row.sm
  • basis.space.row.md
  • basis.space.row.lg
  • etcetera
Tip

Er zijn ook tokens voor ruimte beschikbaar met de termen min en max. Hiermee bereiden we ons voor op de mogelijkheid om ruimte vloeiend te laten groeien afhankelijk van de grootte van een scherm. Vooralsnog worden deze tokens niet gebruikt.

Basis-tokens voor afmeting

Wil je componenten een specifieke afmeting (size) geven? Ook daar zijn basis-tokens voor beschikbaar. En ook hier wordt gebruikgemaakt van t-shirt sizing.

  • basis.size.sm
  • basis.size.md
  • basis.size.lg
  • etcetera

Afmeting van iconen

Voor het formaat van iconen is er een specifieke set aan basis-tokens beschikbaar:

  • basis.size.icon.sm
  • basis.size.icon.md
  • basis.size.icon.lg
  • etcetera
Tip

Voor het Start-thema is de waarde van deze tokens als volgt bepaald:

font-size × line-height = formaat van icoon

De waarde is vastgelegd in rem. Hierdoor schaalt een icoon mee wanneer men behoefte heeft aan grotere letters.

Afmeting van interactieve componenten

Interactieve elementen zoals knoppen en links hebben baat bij een minimale afmeting. Dit maakt ze beter bruikbaar, vooral voor mensen met motorische beperkingen of bij gebruik van touchscreens.

Daarvoor zijn de volgende twee tokens beschikbaar:

  • basis.pointer-target.min-block-size
  • basis.pointer-target.min-inline-size
Tip

De minimale afmeting die WCAG voorschrijft is 24×24 CSS-pixels, maar als best practice wordt een afmeting van 44×44 pixels aangeraden. Voor het Start-thema gaan we nog een stapje verder en gebruiken we een waarde van 48px.

Basis-tokens voor afgeronde hoeken

Voor afgeronde hoeken (border-radius) zijn de volgende basis-tokens beschikbaar:

  • basis.border-radius.sm
  • basis.border-radius.md
  • basis.border-radius.lg
  • basis.border-radius.round

Basis-tokens voor kader- of lijndikte

Voor kader- of lijndikte (border-width) zijn de volgende basis-tokens beschikbaar:

  • basis.border-width.sm
  • basis.border-width.md
  • basis.border-width.lg

Basis-tokens voor schaduw

Voor schaduw (box-shadow) zijn de volgende basis-tokens beschikbaar:

  • basis.box-shadow.sm
  • basis.box-shadow.md
  • basis.box-shadow.lg

Aanvullingen op basis-tokens

We hopen dat de set basis-tokens voldoende mogelijkheden biedt voor jouw organisatie. Mis je design tokens op het Common niveau? Dan kun je zelf extra tokens toevoegen met een prefix van jouw organisatie.

Heb je vragen of suggesties? Deel ze gerust via de GitHub Discussion voor Basis-tokens.

Help deze documentatie te verbeteren

Om ervoor te zorgen dat deze documentatie nuttig, relevant en up-to-date is, kun je een wijziging voorstellen via GitHub.

Vragen

Heb je een vraag? Twijfel niet en neem contact op met het kernteam.