# Designtokens: én kilde til farger og typografi

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

En merkevarefarge som finnes i førti filer, vil sprike. Et token finnes på ett sted som alle plattformer leser fra. Slik strukturerer du designtokens, gir dem varige navn og bruker dem i kode og designverktøy.

## The short version

- Designtokens er navngitte, plattformuavhengige verdier for designvalg som farger, skriftfamilier, størrelser, avstand, radier, skygger og bevegelsesvarighet.
- De fleste tokensystemer har tre nivåer: primitive tokens inneholder råverdier, semantiske tokens beskriver et formål, og komponenttokens knytter formål til bestemte deler.
- Formatet fra W3C Design Tokens Community Group lagrer tokens som JSON med egenskapene $value og $type, og refererer til andre tokens med krøllparenteser.
- Verktøy som Style Dictionary gjør én tokenfil om til egendefinerte CSS-egenskaper, JavaScript og ressurser for iOS og Android.
- Mørk modus og flere merkevarer håndteres ved å bytte verdiene bak semantiske tokens, mens komponentene forblir uendret.

**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](https://www.w3.org/community/design-tokens/) skriver dem som JSON, med egenskaper som starter med dollartegn så de ikke kolliderer med gruppenavn.

```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 fellesskapsgruppens format. Grupper kan nestes fritt; stien, som color.violet.700, blir tokenets navn.

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

Fargetokenene over som fargeprøver. Dette er råingredienser: ingenting sier ennå hvilken som er en knapp eller en overskrift.

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

| Nivå | Eksempelnavn | Verdi | Endres når |
| --- | --- | --- | --- |
| Primitivt | `color.violet.700` | `#6d28d9` | Paletten redesignes |
| Semantisk | `color.action.primary` | `{color.violet.700}` | En rolle får en annen farge |
| Semantisk | `color.text.default` | `{color.ink}` | Mørk modus, en ny merkevare |
| Komponent | `button.primary.background` | `{color.action.primary}` | Én komponent trenger et unntak |

Referanser i krøllparenteser er aliaser. Endrer du color.violet.700, følger hvert token som peker på det 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 hva en farge skal brukes til. Dette er nivået designere og utviklere bør snakke om.

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.

### Navn som eldes dårlig

- `color.purple` brukt til knapper
- `text.dark`, som er lys i mørk modus
- `spacing.16` brukt som layoutregel
- `blue2`, `blueNew`, `blueFinal`
- `hero.gradient.lisa` oppkalt etter en person

### Navn som varer

- `color.action.primary`
- `color.text.default`
- `space.section` som peker på `{space.16}`
- En nummerert skala fra for eksempel `blue.100` til `blue.900`
- `gradient.hero` med stoppene som tokens

Velg et mønster, som kategori, rolle, variant og tilstand, og skriv det ned i [profilguiden](https://gradiently.design/nb/guide/brand-style-guide). 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.

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

Generert resultat. Aliaser blir var()-referanser, så det semantiske nivået videreføres til nettleseren. Se [CSS-variabler for temaer](https://gradiently.design/nb/guide/css-custom-properties-theming).

Bruker du Tailwind v4, er `@theme`-blokken selv et tokennivå: hver `--color-*`-variabel blir hjelpeklasser. [Tailwind-farger](https://gradiently.design/nb/guide/tailwind-colors) 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.

```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 overstyringer, ingen komponentendringer. Gradienter fortjener også egne mørke verdier; [gradienter i mørk modus](https://gradiently.design/nb/guide/dark-mode-gradients) forklarer tilpasningen.

> **Tokens i designverktøy** Figma Variables støtter samlinger og moduser, som passer godt til primitive og semantiske tokens og lyse og mørke temaer. Behold tokenfilen som kilde og synkroniser inn i designverktøyet, ikke motsatt, ellers vil de to sprike innen en måned.

## Innføre designtokens

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. **Definer primitive tokens** Reduser dem til tydelige skalaer. Fargeskalaer i OKLCH holder trinnene jevne; se [OKLCH forklart](https://gradiently.design/nb/guide/oklch-explained).
3. **Legg til det semantiske nivået** Navngi roller: tekst, flate, kantlinje, handling og tilbakemelding. La hver peke på et primitivt token.
4. **Automatiser byggingen** Generer CSS og appressurser fra filen i byggeprosessen, aldri for hånd.
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](https://gradiently.design/nb/guide/brand-consistency) dekker den bredere praksisen.

## FAQ

### Hva er designtokens?

Navngitte verdier for designvalg som farger, skrifter, avstand, radier og bevegelse, lagret i én plattformuavhengig fil og gjort om til CSS, appkode og variabler i designverktøy.

### Hva er forskjellen på primitive og semantiske tokens?

Primitive tokens inneholder råverdier, som `color.violet.700`. Semantiske tokens beskriver et formål, som `color.action.primary`, og peker på et primitivt token.

### Er designtokens det samme som CSS-variabler?

Nei. Tokens er kilden, lagret i et nøytralt format som JSON; egendefinerte CSS-egenskaper er ett resultat som genereres fra dem, sammen med resultater til andre plattformer.

### Finnes det et standardformat for designtokens?

W3C Design Tokens Community Group publiserer et JSON-format med $value, $type og aliaser i krøllparenteser, som verktøy som Style Dictionary kan lese.

### Hvordan håndterer designtokens mørk modus?

Komponenter leser semantiske tokens, og et mørkt tema gir andre verdier til disse tokenene, så komponentene trenger ingen endringer.