Als ontwerpers en ontwikkelaars over design tokens praten, haken anderen vaak af. Onterecht, want het idee is eenvoudig. Een design token is een ontwerpkeuze met een naam. In plaats van “#3A2BFF” zeg je “de kleur voor de primaire actie”. Die naam maakt een keuze herbruikbaar, uitlegbaar en controleerbaar.
Waarom een naam zoveel uitmaakt
Een hexcode zegt niets over waarom hij er staat. Als een marketeer, ontwikkelaar of AI-tool alleen kleurwaarden krijgt, moet iedereen raden welke kleur waarvoor bedoeld is. Het resultaat ken je: drie net verschillende paarsen op dezelfde website, en een knop die opeens in de accentkleur staat.
Een token legt de bedoeling vast. Verandert de merkkleur, dan pas je één waarde aan en volgen alle toepassingen. Belangrijker nog: iedereen spreekt dezelfde taal, van ontwerper tot ontwikkelaar.
Basiswaarden en rollen
Goede tokensets bestaan uit minstens twee lagen.
Core tokens
De basiswaarden van je merk: de kleuren in je palet, de lettertypen, een afstandsschaal, de duur van animaties. Ze beschrijven wat er beschikbaar is, bijvoorbeeld color.iris of space.4.
Semantic tokens
Rollen die naar die basiswaarden verwijzen: action.primary, text.secondary, surface.inverse. Ze beschrijven waarvoor een waarde dient. In het dagelijks werk gebruik je vooral deze laag. Zo kun je later besluiten dat de primaire actie een andere kleur krijgt, zonder iedere knop afzonderlijk te zoeken.
Grotere systemen voegen soms een derde laag toe met component tokens, zoals de achtergrond van één specifieke knop. Begin daar pas mee als het echt nodig is. Iedere extra laag is ook extra onderhoud.
Het DTCG-formaat
De Design Tokens Community Group werkt aan een gedeeld uitwisselformaat voor tokens. Op 28 oktober 2025 verscheen versie 2025.10 als stabiele specificatie. Het is een rapport van een W3C Community Group, geen formele W3C-standaard, maar het geeft tools en teams een gezamenlijke basis. Een kleine set tokens ziet er zo uit:
{
"color": {
"volt": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0.227, 0.169, 1],
"hex": "#3A2BFF"
},
"$description": "Brand colour volt."
}
},
"action": {
"primary": {
"$type": "color",
"$value": "{color.volt}",
"$description": "The next step. One per view."
}
},
"space": {
"4": {
"$type": "dimension",
"$value": { "value": 16, "unit": "px" },
"$description": "Base distance inside components."
}
}
}Een paar dingen vallen op. Ieder token heeft een $type en een $value, en optioneel een $description. Een semantic token verwijst met accolades naar een ander token, zoals {color.volt}. En de beschrijving is gewone taal, zodat ook mensen en agents begrijpen waarvoor het token dient.
Let op bij het overzetten tussen tools. Niet ieder programma ondersteunt alle onderdelen van 2025.10 al volledig. Een exportknop bewijst nog niet dat er niets verloren gaat, dus controleer de uitkomst.
Wat heeft een marketeer eraan?
Meer dan je zou denken. Tokens zijn de reden dat een template, een webpagina en een gegenereerde LinkedIn-afbeelding dezelfde kleuren en verhoudingen gebruiken. Als je Figma-bibliotheek, Canva Brand Kit, templates en website uit dezelfde bron worden gevoed, hoef jij niet meer te controleren of iedereen het juiste groen gebruikt.
Tokens helpen ook bij briefings. Vraag je een bureau om een campagne, dan geef je geen losse kleurcodes mee maar een bestand met rollen en beschrijvingen. Het bureau ziet direct welke kleur voor acties is, welke voor achtergronden en welke alleen als accent. Dat scheelt correctierondes en discussie achteraf.
En een ontwikkelaar?
Tokens worden omgezet naar CSS-variabelen, thema’s of platformspecifieke formaten. Je bouwt componenten op rollen in plaats van vaste waarden. Dat maakt een donkere modus, een submerk of een merkvernieuwing beheersbaar. Coding agents profiteren op dezelfde manier: een instructie als “gebruik altijd action.primary voor de hoofdknop” is ondubbelzinnig.
Valkuilen
- Te veel tokens. Als niemand meer weet welke te kiezen, help je niemand.
- Namen naar uiterlijk in plaats van functie. blue-button veroudert bij de eerste merkwijziging.
- Geen beschrijvingen. Zonder uitleg blijft het een lijst getallen.
- Geen eigenaar. Tokens zonder beheer lopen snel uit elkaar.
Tokens zijn geen doel op zich. Ze zorgen dat goede ontwerpkeuzes overleven buiten het hoofd van de ontwerper.
Op deze website doen we het zelf ook zo. Alle kleuren, maten en animatieduren komen uit één tokenbestand, dat zowel de stijl van de site als de documentatie op onze pagina over designsystemen voedt.
