Introduksjon

Design tokens er de minste byggesteinene i designsystemet. Det er navngitte variabler for visuelle verdier: farger, typografi, spacing, radius, skygger. I stedet for 16px eller #002776 skriver du --ix-spacing-sm eller --ix-color-foreground-main-default.

Poenget er at verdien bare står ett sted. Endrer vi den, endrer den seg overalt tokenet er i bruk, uten at noen må lete opp hver komponent og hver flate.

Hvorfor bruke tokens?

• Samme verdi over alt. Komponenter, flater og team henter fra samme kilde.
• Ett sted å endre. En justering slår gjennom med én gang.
• Felles språk. Designere og utviklere snakker om spacing-sm, ikke om «litt luft».
• Flere temaer på samme kode. Light og dark mode, og egne merkevarer, er samme tokens med andre verdier.

Tokens i praksis

• I Figma ligger de som variabler du velger fra, i stedet for at du skriver inn en verdi selv
• I kode eksponeres de som variabler i CSS og JSON
• I komponenter bruker vi bare semantiske eller kontekstuelle tokens, aldri rå verdier