Ga naar hoofdinhoud

Design Tokens

Met design tokens kun je veel sneller voldoen aan de huisstijl, omdat alle mogelijke opties al beschikbaar zijn gemaakt in handige bestandjes voor developers en designers.

Vroeger was een huisstijlgids de bron om kleurcodes te kopiëren. De nieuwe werkwijze is: vind de juiste design token, en koppel die in je design en code.

Groot voordeel: het design kan zich dan automatisch aanpassen, door een extra set design tokens. Bijvoorbeeld kleuren voor dark mode. Of fluid design, met kleine letters en compactere layout voor kleine schermen, en grote letters en een ruime layout voor groter schermen.

Ook handig: er zijn regelmatig updates aan de design tokens, en de designs kunnen dan zonder veel moeite de verbeteringen toepassen.

Code

In CSS gebruik je design tokens door een CSS variable te gebruiken in plaats van een gekopieerde waarde. Door de voorspelbare namen in het design system, is het vaak ook makkelijker in gebruik. Bijvoorbeeld:

.example-card {
    background: var(--rhc-color-lintblauw-50);
    border-radius: var(--rhc-border-radius-md);
    border: 1px solid var(--rhc-color-lintblauw-100);
    color: var(--rhc-color-lintblauw-500);
    font-family: var(--rhc-text-font-family-sans);
    font-size: var(--rhc-text-font-size-lg);
    font-weight: var(--rhc-text-font-weight-regular);
    line-height: var(--rhc-text-font-size-md);
    padding: var(--rhc-space-3xl);
}

De waarde van elke design token wordt aangeleverd in een CSS-bestand van het design system. Een prototype met HTML, ziet er bijvoorbeeld zo uit:

<!DOCTYPE html>
<html class="rhc-theme" lang="en" dir="ltr">
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@rijkshuisstijl-community/design-tokens/dist/index.css"
    />
  </head>
  <body>
    <div class="example-card">Hello, world!</div>
  </body>
</html>

Installatie

Installeer de laatste versie van design tokens in je project met npm of pnpm. Op deze manier kun je ook makkelijk updaten naar nieuwe versies:

npm install @rijkshuisstijl-communty/design-tokens@latest

Of:

pnpm add @rijkshuisstijl-communty/design-tokens@latest

Bekijk de npm package: @rijkshuisstijl-community/design-tokens

Design

Lees het Figma Stappenplan bij NL Design System over hoe je in het algemeen de Figma bibliotheek koppelt aan design tokens. Op deze manier kun je ook de Rijkshuisstijl Community Bibliotheek in Figma koppelen aan de design tokens. Gebruik de volgende URL als sync provider in Tokens Studio:

https://raw.githubusercontent.com/nl-design-system/rijkshuisstijl-community/refs/heads/main/proprietary/design-tokens/figma/figma.tokens.json

Bekijk de Design Tokens JSON op GitHub, als je die wilt kopiëren: figma.tokens.json in de rijkshuisstijl-community repository.

Changelog

Er komen regelmatig nieuwe versies uit van de design tokens. Lees de changelog van de design tokens om de ontwikkelingen te volgen.