Designtokens: én kilde til farger og typografi

Designtokens er navngitte verdier for alle designvalg en merkevare gjentar: farger, skrifttyper, skriftstørrelser, avstand, hjørneradier, skygger og animasjonsvarighet. I stedet for å skrive #5b21b6 i et stilark, en Figma-fil og en iOS-app, definerer du color.brand.700 én gang i én fil og genererer hver plattforms format fra den. Endre tokenet, så oppdateres alle produktene sammen. Denne ene sannhetskilden er hele poenget.

Slik ser et designtoken ut

Et token har et navn, en verdi og en type. Formatet fra W3C Design Tokens Community Group skriver dem som JSON, med egenskaper som starter med dollartegn så de ikke kolliderer med gruppenavn.

{
  "color": {
    "violet": {
      "100": { "$type": "color", "$value": "#ede9fe" },
      "500": { "$type": "color", "$value": "#8b5cf6" },
      "700": { "$type": "color", "$value": "#6d28d9" },
      "900": { "$type": "color", "$value": "#4c1d95" }
    },
    "ink": { "$type": "color", "$value": "#14121f" },
    "paper": { "$type": "color", "$value": "#faf8ff" }
  },
  "font": {
    "heading": { "$type": "fontFamily", "$value": ["Fraunces", "Georgia", "serif"] },
    "body": { "$type": "fontFamily", "$value": ["Inter", "system-ui", "sans-serif"] }
  },
  "radius": {
    "control": { "$type": "dimension", "$value": { "value": 10, "unit": "px" } }
  },
  "duration": {
    "quick": { "$type": "duration", "$value": { "value": 160, "unit": "ms" } }
  }
}

Primitive, semantiske og komponenttokens

En flat liste med farger er en palett, ikke et system. En struktur som holder i årevis, har tre nivåer som hvert refererer til nivået under. Komponenter bruker aldri råverdier direkte; de ber om et formål.

{
  "color": {
    "action": {
      "primary": { "$type": "color", "$value": "{color.violet.700}" },
      "primary-hover": { "$type": "color", "$value": "{color.violet.900}" }
    },
    "text": {
      "default": { "$type": "color", "$value": "{color.ink}" },
      "on-action": { "$type": "color", "$value": "{color.paper}" }
    },
    "surface": {
      "page": { "$type": "color", "$value": "{color.paper}" },
      "tint": { "$type": "color", "$value": "{color.violet.100}" }
    }
  }
}

Mange team stopper på to nivåer, primitivt og semantisk, og legger bare til komponenttokens der en komponent faktisk avviker. Da holder filen seg liten nok til å forstå.

Gi designtokens navn som varer

Navn varer lenger enn verdier. Et token kalt color.purple svikter den dagen merkevaren blir blågrønn; color.action.primary overlever. Gi semantiske tokens navn etter rolle, og la primitive navn beskrive verdien.

Velg et mønster, som kategori, rolle, variant og tilstand, og skriv det ned i profilguiden. Konsekvent navngivning betyr mer enn hvilket mønster du velger.

Fra tokenfil til CSS og apper

Tokenfilen leveres ikke slik den er. Et byggetrinn gjør den om til det hver plattform trenger. Style Dictionary er det mest brukte verktøyet med åpen kildekode til dette, og andre leser samme format. På nettet er resultatet vanligvis egendefinerte CSS-egenskaper.

:root {
  --color-violet-100: #ede9fe;
  --color-violet-700: #6d28d9;
  --color-violet-900: #4c1d95;
  --color-ink: #14121f;
  --color-paper: #faf8ff;

  --color-action-primary: var(--color-violet-700);
  --color-text-default: var(--color-ink);
  --color-surface-page: var(--color-paper);

  --font-heading: Fraunces, Georgia, serif;
  --radius-control: 10px;
  --duration-quick: 160ms;
}

.button {
  background: var(--color-action-primary);
  color: var(--color-paper);
  border-radius: var(--radius-control);
  transition: background var(--duration-quick) ease;
}

Bruker du Tailwind v4, er @theme-blokken selv et tokennivå: hver --color-*-variabel blir hjelpeklasser. Tailwind-farger viser hvordan du kobler inn en fargeskala. Samme fil kan også lage Swift-konstanter og Android-ressurser. Det er her tokens virkelig lønner seg for team som jobber på flere plattformer.

Mørk modus og flere merkevarer

Fordi komponenter bare leser semantiske tokens, er et tema bare et annet sett verdier for dette nivået. Mørk modus definerer color.text.default og color.surface.page på nytt; en annen merkevare gjør det samme med color.action.primary. Ingenting endres i komponentene.

@media (prefers-color-scheme: dark) {
  :root {
    --color-text-default: #e9e5f5;
    --color-surface-page: #0b0a14;
    --color-action-primary: var(--color-violet-500);
  }
}

[data-brand="harbour"] {
  --color-action-primary: #0f766e;
}

Innføre designtokens

1. 1

   Kartlegg det som finnes

   Samle alle farger, skriftstørrelser og avstandsverdier i bruk. Forvent nesten like verdier som skiller seg med ett heksadesimalt siffer.

2. 2

   Definer primitive tokens

   Reduser dem til tydelige skalaer. Fargeskalaer i OKLCH holder trinnene jevne; se OKLCH forklart.

3. 3

   Legg til det semantiske nivået

   Navngi roller: tekst, flate, kantlinje, handling og tilbakemelding. La hver peke på et primitivt token.

4. 4

   Automatiser byggingen

   Generer CSS og appressurser fra filen i byggeprosessen, aldri for hånd.

5. 5

   Beskytt systemet

   Bruk lintregler mot rå heksverdier i komponenter, så ny kode bruker tokens fra første dag.

Tokens holder produktet enhetlig, men merkevarer spriker også i grafikken utenfor det: innlegg, lysbilder og bannere. En merkevareprofil i Gradiently samler de samme valgene, fargepaletter, overskrifts- og brødtekstskrifter, logoer og stemme, så design fra Studio passer sammen. Gradiently fungerer også inne i ChatGPT, Claude og andre assistenter som støtter eksterne MCP-servere. En assistent med en API-nøkkel med avgrensede tilganger kan derfor lage design i merkevarens stil fra samme arbeidsområde. Enhetlig merkevare dekker den bredere praksisen.