En design token består av et navn og er knyttet opp mot en verdi. Den har gjerne også en beskrivelse som hjelper oss å forstå hva den kan brukes til.
Eksempel:
I koden ser den slik ut:
{
“name”: “token name”,
”$type”: "color",
”$value”: “fff000”,
”$description”: “An optional description, typically of the intended use”,
}
Design tokens er strukturert i et hierarkisk system der tokens refererer til hverandre på ulike nivåer. Denne strukturen skaper en fleksibel og skalerbar måte å håndtere designvalg på.
Kjernetokens, primitive tokens eller global tokens som det kan kalles forteller oss hva slags egenskaper og verdier som finnes. Disse typer tokens har ofte rå verdier, som HEX-kode, prosent, tallverdier, osv. Kjernetokens brukes aldri direkte i et design eller i en komponent, men refereres til av andre tokens, og fungerer som et fundament for de andre tokens-nivåene.
Aliastokens fungerer som et bindeledd mellom kjernetokens og semantiske tokens de stedene det er behov for å skille tokens med et ekstra lag. Aliastokens referer til kjernetokens, og blir selv referert til av semantiske tokens. De hjelper med å relatere tokens til en kontekst, og en kan ha flere nivåer av aliastokens ved behov. De hjelper designere og utviklere å navigere i designbiblioteket.
Semantiske tokens er de tokensene som brukes direkte på komponenter. De referer alltid til en aliastoken eller en kjernetoken, og har ikke en hardkodet verdi tilknyttet seg. Navnet til en semantisk token forteller om hvor og hvordan den skal bli brukt.
Kompositt-tokens brukes i prinsippet likt som semantiske tokens, men skiller seg likevel ut på flere måter. Vanlige semantiske tokens referer bare til en annen token, mens kompositt-tokens er består av flere tokens som refererer til forskjellige verdier eller tokens. Detter er litt komplisert, men et bruksområde er der en enkelt token-verdi i seg selv ikke gir et komplett resultat. Et bruksområde for kompositt-tokens er i styling av tekst. For å sette opp en tittel-tekst, så har du skrifttype, vekt, størrelse, kerning, osv. For å slippe å legge på hver av disse tokensene enkeltvis for at tittelen skal bli riktig, så kan en heller lage en kompositt-token som består av flere tokens-verdier, som sammen styler teksten slik du ønsker og gir et komplett resultat. Ved å bygge opp tokens i lag på denne måten, skapes et robust og vedlikeholdsvennlig designsystem som er enkelt å oppdatere og tilpasse over tid.
