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

[Canonical HTML page](https://gradiently.design/da/guide/design-tokens)

En brandfarve, der bor i fyrre filer, vil glide fra hinanden. Et token bor ét sted, og hver platform læser fra det. Her er, hvordan du strukturerer design tokens, navngiver dem, så de holder, og sender dem videre til kode og designværktøjer.

## The short version

- Design tokens er navngivne, platformsneutrale værdier til designbeslutninger som farver, skriftfamilier, størrelser, afstande, radier, skygger og bevægelsestider.
- De fleste tokensystemer bruger tre lag: primitive tokens rummer rå værdier, semantiske tokens beskriver et formål, og komponenttokens anvender formål på bestemte dele.
- W3C Design Tokens Community Groups format gemmer tokens som JSON med egenskaberne $value og $type og henviser til andre tokens med tuborgklammer.
- Værktøjer som Style Dictionary omdanner én tokenfil til CSS-egenskaber, JavaScript samt iOS- og Android-ressourcer.
- Dark mode og flere brands bliver et spørgsmål om at skifte værdierne bag de semantiske tokens, mens komponenterne forbliver uændrede.

**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](https://www.w3.org/community/design-tokens/) har udgivet, skriver dem som JSON med egenskaber, der starter med et dollartegn, så de ikke kan kollidere med gruppenavne.

```json
{
  "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 tokens i community-gruppens format. Grupper kan indlejres frit; stien, som color.violet.700, bliver tokenets navn.

- color.violet.100: #ede9fe
- color.violet.500: #8b5cf6
- color.violet.700: #6d28d9
- color.violet.900: #4c1d95
- color.ink: #14121f
- color.paper: #faf8ff

Farvetokens ovenfor som farveprøver. Det er rå ingredienser: intet siger endnu, hvilken der er en knap eller en overskrift.

## 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.

| Lag | Eksempel på navn | Værdi | Ændrer sig, når |
| --- | --- | --- | --- |
| Primitivt | `color.violet.700` | `#6d28d9` | Paletten redesignes |
| Semantisk | `color.action.primary` | `{color.violet.700}` | En rolle flytter til en anden farve |
| Semantisk | `color.text.default` | `{color.ink}` | Dark mode, et nyt brand |
| Komponent | `button.primary.background` | `{color.action.primary}` | Én komponent har brug for en undtagelse |

Henvisninger i tuborgklammer er aliasser. Ændr color.violet.700, og hvert token, der peger på det, følger med.

```json
{
  "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}" }
    }
  }
}
```

Semantiske tokens beskriver, hvad en farve er til. Det er det lag, designere og udviklere bør tale i.

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.

### Navne, der ældes dårligt

- `color.purple` brugt til knapper
- `text.dark`, som er lys i dark mode
- `spacing.16` brugt som layoutregel
- `blue2`, `blueNew`, `blueFinal`
- `hero.gradient.lisa` opkaldt efter en person

### Navne, der holder

- `color.action.primary`
- `color.text.default`
- `space.section`, der peger på `{space.16}`
- En nummereret skala som `blue.100` til `blue.900`
- `gradient.hero` med sine stop som tokens

Vælg et mønster, for eksempel kategori, så rolle, så variant, så tilstand, og skriv det ned i din [brandstilguide](https://gradiently.design/da/guide/brand-style-guide). 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.

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

Genereret output. Aliasser bliver til var()-henvisninger, så det semantiske lag overlever ind i browseren. Se [CSS-variabler til temaer](https://gradiently.design/da/guide/css-custom-properties-theming).

Bruger du Tailwind v4, er `@theme`-blokken selv et tokenlag: hver `--color-*`-variabel bliver til utility-klasser. [Tailwind-farver](https://gradiently.design/da/guide/tailwind-colors) 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.

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

To tilsidesættelser, ingen ændringer i komponenter. Gradienter fortjener også deres egne mørke værdier; [gradienter i dark mode](https://gradiently.design/da/guide/dark-mode-gradients) forklarer, hvordan du justerer dem.

> **Tokens i designværktøjer** Figma Variables understøtter samlinger og tilstande, som passer fint til primitive og semantiske tokens og lyse og mørke temaer. Behold tokenfilen som kilde og synkronisér ind i designværktøjet, ikke omvendt, ellers er de to uenige inden for en måned.

## Sådan ruller du design tokens ud

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. **Definér primitiver** Reducer dem til tydelige skalaer. At bygge farverampe i OKLCH holder trinnene jævne; se [OKLCH forklaret](https://gradiently.design/da/guide/oklch-explained).
3. **Tilføj det semantiske lag** Navngiv roller: tekst, flade, kant, handling, feedback. Peg hver på en primitiv.
4. **Automatisér byggetrinnet** Generér CSS og appressourcer ud fra filen i dit build, aldrig i hånden.
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](https://gradiently.design/da/guide/brand-consistency) dækker den bredere vane.

## FAQ

### Hvad er design tokens?

Navngivne værdier til designbeslutninger som farver, skrifttyper, afstande, radier og bevægelse, gemt i én platformsneutral fil og omdannet til CSS, appkode og variabler i designværktøjer.

### Hvad er forskellen på primitive og semantiske tokens?

Primitive tokens rummer rå værdier, som `color.violet.700`. Semantiske tokens beskriver et formål, som `color.action.primary`, og peger på en primitiv.

### Er design tokens det samme som CSS-variabler?

Nej. Tokens er kilden, gemt i et neutralt format som JSON; brugerdefinerede CSS-egenskaber er ét output genereret ud fra dem, ved siden af output til andre platforme.

### Findes der et standardformat til design tokens?

W3C Design Tokens Community Group udgiver et JSON-format med $value, $type og aliasser i tuborgklammer, som værktøjer som Style Dictionary kan læse.

### Hvordan håndterer design tokens dark mode?

Komponenter læser semantiske tokens, og et mørkt tema leverer andre værdier til de tokens, så komponenter ikke behøver ændringer.