---
title: "Når et designsystem betaler sig"
description: "Hvad et designsystem består af, hvordan kontrollen i byggeriet holder det sandt, og ved hvilken størrelse det tjener den investerede tid hjem."
url: https://torn.studio/da/indsigt/naar-designsystemet-betaler-sig
locale: da
published: 2026-08-27
---

# Når et designsystem betaler sig

> **Kort svar:** Et designsystem består af tokens til farve, typografi og afstand, komponenter bygget af dem, og en kontrol i byggeriet, der afviser kode med løse værdier. Vores erfaring fra egne projekter er, at det tjener sig hjem omkring tiende side, eller anden gang et brand skal ændres på hele sitet.

Et designsystem beskrives som regel som en samling komponenter. Den mere afgørende del er reglen om, hvor værdierne må bo, for det er den, der afgør, om systemet stadig passer om et halvt år.

## Hvad systemet faktisk består af

Fire lag, og det sidste er dét, der skiller et system fra en mappe med filer.

- Tokens: hver farve, afstand, radius og skriftstørrelse defineret ét sted
- Primitiver: knapper, kort, overskrifter og felter bygget af tokens
- Blokke: færdige sektioner, som siderne sættes sammen af
- En kontrol i byggeriet, der stopper rå værdier i sidekoden

## Kontrollen er dét, der gør systemet sandt

Et system, der kun findes som dokument, glider fra hinanden, fordi det altid går hurtigere at skrive en farvekode end at finde den rigtige token. Dette site kører den kontrol: et byggetrin læser koden og fælder byggeriet ved den første rå hex- eller pixelværdi uden for designsystemet. Derefter opstår spørgsmålet ikke længere.

## Kontrasten beregnes, før farven bruges

Hvert farvepar i systemet kontrolleres mod WCAG AA, der kræver mindst 4,5:1 for brødtekst. Beregnes det på tokenniveau, kan en senere side aldrig blive ulæselig, fordi den kombination, der ville forårsage det, ikke findes.

## Størrelsen hvor det betaler sig

Under fem sider koster et system mere, end det giver. Ved ti sider er det omtrent lige op. Ved 30 sider og ni sprog er det forskellen mellem en dags arbejde og en uge, når noget skal ændres alle steder, hvilket er det regnestykke, vi selv lavede for dette site.

## Små skærme hører til systemet

Hver komponent formgives til 320 pixels først og vokser opad. Testene kører hver sidetype i ni bredder fra 320 pixels, og en side, der skaber vandret scroll, fælder byggeriet. Det er billigere end at reparere et ødelagt mobillayout efter lanceringen.

**Læs videre**

- [Hvor lang tid tager en hjemmeside bygget med AI?](https://torn.studio/da/indsigt/hvor-lang-tid-tager-en-hjemmeside)
- [Sådan holder du kvaliteten, når AI skriver koden](https://torn.studio/da/indsigt/kvalitet-naar-ai-skriver-koden)
- [Et designsystem der holder over tid](https://torn.studio/da/ydelser/design-og-brand)

## Ofte stillede spørgsmål

### Har en lille hjemmeside brug for et designsystem?

Under fem sider rækker en samling konventioner. Fra ti sider og opefter tjener systemet den tid hjem, det kostede, især hvis sitet skal vokse eller findes på flere sprog.

### Hvad adskiller det fra en brandmanual?

Manualen beskriver, hvordan det skal se ud. Systemet er koden, der gør det. En PDF kan aldrig fælde et byggeri, og det er netop den funktion, der holder udtrykket samlet over tid.

### Hvordan håndteres mørk tilstand?

Hver token får én værdi til lys tilstand og én til mørk. Kontrasten beregnes på begge, så det ene tema aldrig kan blive dårligere end det andet.

### Hvem ejer designsystemet efter lanceringen?

Det gør I, og det ligger i jeres repo. Det er bygget, så en anden udvikler kan overtage: værdierne ét sted, komponenterne dokumenteret og kontrollen som en del af byggeriet.

### Hvor ofte skal et designsystem laves om?

Sjældent i sin helhed. Tokens skiftes, når brandet ændres, og komponenter kommer til undervejs. Et system, der skal skrives om hvert andet år, var bygget til én enkelt kampagne.

### Kan man indføre et system på et eksisterende site?

Ja, én sidetype ad gangen. Start med tokens og de mest brugte komponenter, slå kontrollen til for de mapper, der er lagt om, og udvid derfra.