Ga naar hoofdinhoud

Basis-tokens

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

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

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.

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

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. Maar als je een eenvoudig thema hebt, is het mogelijk om basis-tokens onderling naar elkaar te laten verwijzen. Dit gebeurt bijvoorbeeld ook bij het Start-thema.

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 ander 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.

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

Er zijn twee basis-tokens beschikbaar voor lettertype: het standaard-lettertype en een lettertype waarmee code goed leesbaar is.

  • basis.text.font-family.default
  • basis.text.font-family.monospace

Default

Standaard lettertype voor tekst.

Monospace

Voor tekst die als code wordt weergegeven.

Lettergewicht

Er zijn twee basis-tokens beschikbaar om lettergewicht te bepalen: het standaard gewicht en een gewicht om tekst vetgedrukt te maken.

  • basis.text.font-weight.default
  • basis.text.font-weight.bold

Default

Standaard gewicht voor reguliere tekst.

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
  • basis.text.font-size.4xl
Tip

Bij het Start-thema zijn de waarden van deze tokens 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
  • basis.text.line-height.4xl

Gebruik 'unitless' (eenheidsloze) waarden voor deze tokens.

Tip

Door gebruik te maken van unitless waarden beweegt de regelhoogte mee 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.

De afbeelding toont een grid van verschillende kleuren, onder de kleuren staan de namen van de basis-tokens en hun waarde.

Tip

Het instellen van kleuren vergt wat tijd. Maar het voordeel is dat als je kleurcontrast op het Common niveau goed regelt, je je daar op Component niveau geen zorgen meer over hoeft te maken. 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

Voor het aanbrengen van 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.

Accent-1

De belangrijke huisstijlkleur van de organisatie.

Accent-2

De tweede huisstijlkleur van de organisatie. Als de organisatie deze heeft.

Accent-3

De derde huisstijlkleur van de organisatie. Als de organisatie deze heeft.

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

Tip

Bij het Start-thema verwijzen accent-2 en accent-3 naar accent-1. 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

Bedoeld voor knoppen.

Action-2

Bedoeld voor overige interactieve componenten.

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

Tip

Bij het Start-themaverwijst action-2 naar action-1. Heeft jouw organisatie meerdere interactiekleuren? Dan kun je action-2 los van action-1 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

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.

Signaalkleuren

Gebruik deze basis-tokens voor signalen of feedback.

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.

Info

Voor een informatief of neutraal signaal.

Warning

Voor een waarschuwend signaal of risico.

Negative

Voor een negatief signaal, foutmelding of kritieke situatie.

Positive

Voor een positief signaal, bevestiging of geslaagde actie.

Highlight

Om iets te markeren of uit te lichten.

Bijvoorbeeld met de Mark component.

Selected

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.

Background Document

Algemene achtergrondkleur.

Background Subtle

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

Background Default

Standaard achtergrondkleur voor getinte componenten in standaardstatus.

Background Hover

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

Background 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 contrastverhouding 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, die twee keer zijn 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.

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':

Block

De ruimte binnen componenten, boven of onder tekst.

  • basis.space.block.sm
  • basis.space.block.md
  • basis.space.block.lg
  • etcetera

Inline

De ruimte binnen componenten, voor of na tekst.

  • basis.space.inline.sm
  • basis.space.inline.md
  • basis.space.inline.lg
  • etcetera

Row

De verticale ruimte tussen componenten.

  • basis.space.row.sm
  • basis.space.row.md
  • basis.space.row.lg
  • etcetera

Column

De horizontale ruimte tussen componenten.

  • basis.space.column.sm
  • basis.space.column.md
  • basis.space.column.lg
  • etcetera

Text

De ruimte binnen componenten, tussen tekst en iconen.

  • basis.space.text.sm
  • basis.space.text.md
  • basis.space.text.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.

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 een specifieke set basis-tokens beschikbaar:

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

Het aantal basis-tokens voor icoonformaten komt overeen met het aantal basis-tokens voor lettergrootte en regelhoogte. Hierdoor kun je iconen eenvoudig afstemmen op de tekst die ernaast staat. Voor het Start-themais de relatie tussen deze tokens als volgt vastgelegd:

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 de mate waarmee hoeken worden afgerond zijn 5 basis-tokens beschikbaar.

  • basis.border-radius.none
  • 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 zijn 4 basis-tokens beschikbaar.

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

Basis-tokens voor schaduw

Voor schaduw van componenten zijn 4 basis-tokens beschikbaar.

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

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.

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.

Heading

Stijl van alle koppen.

  • basis.heading.font-family
  • basis.heading.font-weight
  • basis.heading.color
  • etcetera

Form Control

Stijl van alle formulier-elementen zoals Text Input en Text Area. Maar ook Checkbox en Radio Button.

  • basis.form-control.font-family
  • basis.form-control.font-weight
  • basis.form-control.background-color
  • etcetera

Focus

Stijl van de focus state.

  • basis.focus.background-color
  • basis.focus.color
  • basis.focus.outline-color
  • basis.focus.inverse.outline-color
Tip

De 'focus' status 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.

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.