Design tokens: én kilde til sandhed for farve og skrift

Design tokens er navngivne værdier til enhver designbeslutning, et brand gentager: farver, skrifttyper, skriftstørrelser, afstande, hjørneradier, skygger og animationstider. I stedet for at skrive #5b21b6 i et stylesheet, en Figma-fil og en iOS-app definerer du color.brand.700 én gang, i én fil, og genererer hver platforms format ud fra den. Ændr tokenet, og hvert produkt opdateres samtidig. Den enkelte kilde til sandhed er hele pointen.

Hvordan et design token ser ud

Et token har et navn, en værdi og en type. Det format, W3C Design Tokens Community Group har udgivet, skriver dem som JSON med egenskaber, der starter med et dollartegn, så de ikke kan kollidere med gruppenavne.

{
  "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 flad liste af farver er en palet, ikke et system. Den struktur, der holder i årevis, har tre lag, hvor hvert henviser til det nedenunder. Komponenter rører aldrig rå værdier; de beder 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 teams stopper ved to lag, primitivt og semantisk, og tilføjer kun komponenttokens, hvor en komponent virkelig afviger. Det holder filen lille nok til at kunne overskues.

Sådan navngiver du design tokens, så de holder

Navne overlever værdier. Et token kaldet color.purple går i stykker den dag, brandet bliver blågrønt; et token kaldet color.action.primary overlever det. Navngiv semantiske tokens efter rolle, og lad primitive navne beskrive værdien.

Vælg et mønster, for eksempel kategori, så rolle, så variant, så tilstand, og skriv det ned i din brandstilguide. Konsekvens i navngivningen betyder mere end, hvilket mønster du vælger.

Fra tokenfil til CSS og apps

Tokenfilen sendes ikke ud, som den er. Et byggetrin omdanner den til det, hver platform har brug for. Style Dictionary er det mest udbredte open source-værktøj til det, og andre læser samme format. Til nettet er resultatet som regel brugerdefinerede CSS-egenskaber.

: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;
}

Bruger du Tailwind v4, er @theme-blokken selv et tokenlag: hver --color-*-variabel bliver til utility-klasser. Tailwind-farver viser, hvordan du kobler en tokenrampe på. Den samme fil kan også producere Swift-konstanter og Android-ressourcer, og det er dér, tokens betaler sig for teams på flere platforme.

Dark mode og flere brands

Fordi komponenter kun læser semantiske tokens, er et tema blot et andet sæt værdier til det lag. Dark mode definerer color.text.default og color.surface.page om; et andet brand definerer color.action.primary om. Intet i komponenterne ændrer sig.

@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;
}

Sådan ruller du design tokens ud

1. 1

   Gør status over det, der findes

   Saml hver farve, skriftstørrelse og afstandsværdi, der er i brug. Forvent dubletter, der afviger med ét hex-ciffer.

2. 2

   Definér primitiver

   Reducer dem til tydelige skalaer. At bygge farverampe i OKLCH holder trinnene jævne; se OKLCH forklaret.

3. 3

   Tilføj det semantiske lag

   Navngiv roller: tekst, flade, kant, handling, feedback. Peg hver på en primitiv.

4. 4

   Automatisér byggetrinnet

   Generér CSS og appressourcer ud fra filen i dit build, aldrig i hånden.

5. 5

   Bevogt det

   Lint for rå hex-værdier i komponenter, så ny kode bruger tokens fra første dag.

Tokens holder produktet ensartet, men brands glider også fra hinanden i den grafik, der laves uden for det: opslag, slides, bannere. Et Gradiently-brandkit rummer de samme beslutninger, dine farvepaletter, overskrifts- og brødtekstskrifter, logoer og stemme, så designs lavet i Studio matcher. Og fordi Gradiently virker inde i ChatGPT, Claude og andre assistenter, der understøtter eksterne MCP-servere, kan en assistent med en afgrænset API-nøgle skabe designs i dit brands stil fra det samme workspace. Brandkonsistens dækker den bredere vane.