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.

Når et designsystem betaler sig

Torn StudioUdgivet 2026-08-273 min. læsning

Torn Studio er et AI-bureau, der bygger websites, digitale produkter og indhold. Utraditionelt.

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.

Grundlag

Hvad denne artikel hviler på — en måling vi lavede, en dateret kilde eller en beslutning vi traf og hvad den kostede.

Beslutning2026-08-26
Kontrast er en byggeport: en test beregner ved hver ændring hvert tilladt par af tekst og flade ud fra tokenfilen og fælder bygget under WCAG AA 4,5:1.
Hvad det kostede: En farve, der ser bedre ud, men måler dårligere, kan ikke sendes i produktion, så en del af paletten er lukket af regnestykket, og hver ændring i skalaen koster en ny kørsel og ofte en justering af de omkringliggende tokens.

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.

Næste skridt

Læs videre

Gå i dybden

Arbejd med os