Strukturering av tokens

Slik strukturer og endres Design Tokens.

Nivåer på design tokens

Nivå 1: Global tokens

Her settes alle verdier som er felles for alle brands i designsystemet. For eksempel verdier for avstander. Avstand på 16px blir oversatt til 1rem og får navnet layout-spacing-md.

Layout: beskriver hva slags token det er.

Spacing: beskriver hvor token skal brukes.

md (medium): sier noe om størrelsen.

Nivå 2: Brand tokens

Her settes alle verdier som er unikt for merkevaren. For eksempel fargepalett eller font. I Aneos tilfelle vil fargekoden #FFC328 få navnet color.palette.yellow-500. Fargene er satt i valører fra lys til mørk (yellow-100 til yellow-900).

Nivå 3: Light- og darkmode

Her defineres mer spesifikke bruksområder for tokens fra global eller brand. For eksempel kan vi hente opp color.palette.yellow-500 (#FFC328) fra Brand tokens og gi den et mer spesifikt bruksområde som color.background.accent. På denne måten kan vi referere til denne token hver gang vil ønsker en gitt bakgrunnsfarge.

Color beskriver hva slags token det er.

Background beskriver hvor token skal brukes.

Accent beskriver hva slags farge du kan forvente (accent er typisk brand fargen).

NB! Endring av design tokens

Endringer gjort i Global påvirker alle brands og fører alltid til breaking changes.

Endringer av navn på tokens i nivå 2 og 3 kan også føre til breaking changes.