Design tokens uitgelegd, met een live JSON-naar-CSS-converter
Design tokens uitgelegd
Design tokens uitgelegd met voorbeelden (JSON, CSS, Tailwind) | We.Inc
Wat design tokens zijn, hoe het JSON-formaat van de W3C community group ze schrijft, en een live converter die token-JSON omzet naar CSS-variabelen en een Tailwind v4 @theme-blok.
Design tokens zijn benoemde ontwerpbeslissingen, zoals color.primary of space.md, opgeslagen als data zodat elk platform dezelfde waarden leest. Het formaat van de Design Tokens Community Group schrijft ze in JSON met $value en $type, en laat een token met accolades naar een ander token verwijzen. Tools zetten die JSON vervolgens om naar CSS-variabelen, Tailwind-thema's of appcode.
Tokenlagen die de meeste teams gebruiken
Laag
Voorbeeldnaam
Bevat
Basis (primitief)
Een ruwe waarde: een kleur, maat of lettertype
Semantisch (alias)
Een rol die naar een basistoken verwijst
Component
Een rol die beperkt is tot één component
De meeste uitleg stopt bij de definitie. Plak of bewerk hieronder token-JSON in het community group-formaat en zie terwijl u typt welke CSS custom properties en welk Tailwind v4-thema het oplevert, met aliassen omgezet naar var()-verwijzingen.
Bewerk de JSON aan de linkerkant. Groepen kunnen $type één keer instellen voor elk token erin.
Verwijs naar een ander token door het pad met punten tussen accolades te zetten, bijvoorbeeld {color.blue-500}.
Bekijk het CSS-tabblad voor :root-variabelen, of het Tailwind-tabblad voor een @theme-blok.
Kopieer de uitvoer naar uw stylesheet. Los eerst eventuele foutmeldingen onder de editor op.
Geef semantische tokens een naam naar hun functie (text, surface, danger) in plaats van hun uiterlijk (red, dark), zodat een rebranding alleen de basislaag verandert.
Houd basistokens buiten componenten. Componenten horen semantische namen te lezen, zodat dark mode en thema's de waarden eronder kunnen wisselen.
Bewaar tokens in één bestand onder versiebeheer en genereer daaruit de uitvoer voor elk platform.
Gebruik de aanbevolen extensie .tokens of .tokens.json zodat tools de bestanden herkennen.
Veelgestelde vragen
Wat is een design token?
Een design token is een naam gekoppeld aan een ontwerpwaarde, bijvoorbeeld color.text met een bijna zwarte kleur. Code en ontwerpbestanden gebruiken de naam, dus als u de waarde op één plek wijzigt, worden elke knop, pagina en app die ernaar verwijzen bijgewerkt.
Bestaat er een standaardformaat voor design tokens?
Ja. De Design Tokens Community Group bij het W3C publiceerde de Format Module 2025.10 op 28 oktober 2025 als definitief community group-rapport en noemt het stabiel. Het is een community group-rapport, geen W3C Recommendation.
Wat is het verschil tussen design tokens en CSS-variabelen?
Tokens zijn de brondata, los van welk platform dan ook. CSS custom properties zijn één mogelijke uitvoer. Hetzelfde tokenbestand kan ook Swift-, Android- of JavaScript-constanten genereren, wat CSS-variabelen alleen u niet kunnen geven.
Hoe werken design tokens samen met Tailwind CSS?
In Tailwind v4 declareert u themavariabelen binnen @theme, zoals --color-primary. Tailwind maakt daar utilities zoals bg-primary van en geeft ze ook uit als gewone CSS-variabelen op :root, zodat tokens en utilities gelijk blijven lopen.
Hoe worden kleuren in het tokenformaat geschreven?
In het 2025.10-formaat is een kleurwaarde een object met een colorSpace, zoals srgb, en een array met componenten van 0 tot 1, met optioneel alpha. De converter hier accepteert ook gewone strings, zodat u oudere tokenbestanden kunt plakken.
Waarom teams tokens invoeren
Zonder tokens staat de merkkleur blauw als hexcode op honderden plekken in CSS, mobiele apps en ontwerpbestanden. Wie hem wil wijzigen, moet zoeken en vervangen, en daarbij wordt er altijd één gemist.
Met tokens heeft dat blauw één naam en één thuis. Ontwerpers en ontwikkelaars praten over color.primary, en een buildstap schrijft de waarde in het eigen formaat van elk platform.
Het JSON-formaat lezen
Elk object met een $value is een token; elk ander object is een groep. Eigenschappen die met een dollarteken beginnen zijn gereserveerd door het formaat: $value, $type, $description, $deprecated en $extensions.
De specificatie definieert eenvoudige types zoals color, dimension, fontFamily, fontWeight, duration, cubicBezier en number, plus samengestelde types zoals shadow, border, transition, typography, strokeStyle en gradient. Dimensies en duren zijn objecten met een numerieke waarde en een eenheid.
Van tokens naar een werkend thema
Een kleine site kan tokens gewoon in CSS als custom properties bijhouden. Zodra u naar meer dan één platform uitlevert, of ontwerpt in een tool die tokens exporteert, genereert u de CSS beter uit JSON, zodat er één bron is.
Dark mode wordt dan een tweede set semantische waarden. De basiskleuren blijven hetzelfde, en de semantische laag wisselt naar welke basiskleur elke rol verwijst, binnen een media query voor het donkere schema of een data-attribuut.
Semantische tokens met een donker thema
Semantische waarden wisselen, basiswaarden behouden
De kaart leest alleen --surface en --text. Het donkere blok wijst die twee namen opnieuw toe, en de kaart volgt zonder enige wijziging in zijn eigen regels.
Een samengesteld token
Schaduwtoken in het community group-formaat
Samengestelde tokens groeperen meerdere waarden. Hier is de kleur zelf een alias, en de offsets gebruiken dimension-objecten.
Geen tokens gevonden. Een token is een object met een $value-eigenschap.
Dat is nog geen geldige JSON: {message}
Converter van token-JSON naar CSS
Bewerk het tokenbestand en de CSS-variabelen en het Tailwind-thema worden bijgewerkt terwijl u typt. Het startbestand wordt omgezet naar: