---
title: "När ett designsystem betalar sig"
description: "Vad ett designsystem består av, hur en kontroll i bygget ser till att det följs, och vid vilken storlek det tjänar in tiden det kostade."
url: https://torn.studio/sv/insikter/nar-designsystemet-betalar-sig
locale: sv
published: 2026-08-27
---

# När ett designsystem betalar sig

> **Kort svar:** Ett designsystem består av tokens för färg, typografi och avstånd, komponenter byggda av dem, och en kontroll i bygget som fäller kod med råa värden. Enligt vår erfarenhet tjänar det in sig runt tionde sidan, eller andra gången ett varumärke ska ändras över hela sajten.

Ett designsystem beskrivs oftast som en samling komponenter. Viktigare är regeln om var värdena får definieras, eftersom det är den som avgör om systemet fortfarande stämmer om ett halvår.

## Vad består systemet av?

Fyra lager, och det sista är det som skiljer ett system från en samling filer.

- Tokens: varje färg, avstånd, radie och steg i typskalan definierat på ett ställe
- Primitiver: knappar, kort, rubriker och fält byggda av tokens
- Block: färdiga sektioner som sidorna sätts ihop av
- En kontroll i bygget som stoppar råa värden i sidkoden

## Kontrollen gör att systemet följs

Ett system som bara finns som dokument glider isär, eftersom det alltid går fortare att skriva en färgkod än att leta upp rätt token. Den här sajten kör den kontrollen: ett byggsteg läser koden och fäller bygget vid det första råa hex- eller pixelvärdet utanför designsystemet. Då finns valet inte längre.

## Kontrasten räknas innan färgen används

Varje färgpar i systemet kontrolleras mot WCAG AA, som kräver minst 4,5:1 för brödtext. Räknas det på tokennivå kan en sida längre fram aldrig bli oläslig, eftersom kombinationen som skulle orsaka det inte existerar.

## Vid vilken storlek lönar det sig?

Under fem sidor kostar ett system mer än det ger. Vid tio sidor går det ungefär jämnt ut. Vid 30 sidor och nio språk är det skillnaden mellan en dags och en veckas arbete när något ska ändras överallt. Den kalkylen gjorde vi själva för den här sajten.

## Små skärmar hör till systemet

Varje komponent formges för 320 pixlar först och växer uppåt. Testerna kör varje sidtyp i nio bredder från 320 pixlar och uppåt, och en sida som skapar horisontell scroll fäller bygget. Det är billigare än att laga en trasig telefonlayout efter lansering.

**Läs vidare**

- [Hur lång tid tar en webbplats byggd med AI?](https://torn.studio/sv/insikter/hur-lang-tid-tar-en-webbplats)
- [Så håller du kvaliteten när AI skriver koden](https://torn.studio/sv/insikter/kvalitet-nar-ai-skriver-koden)
- [Ett designsystem som håller över tid](https://torn.studio/sv/tjanster/design-och-varumarke)

## Vanliga frågor

### Behöver en liten webbplats ett designsystem?

Under fem sidor räcker en samling konventioner. Från tio sidor och uppåt tjänar systemet in tiden det kostade, särskilt om sajten ska växa eller finnas på flera språk.

### Vad skiljer ett designsystem från en varumärkesmanual?

Manualen beskriver hur det ska se ut. Systemet är koden som gör det. En manual i PDF kan aldrig fälla ett bygge, och det är just den funktionen som håller uttrycket samlat över tid.

### Hur hanteras mörkt läge?

Varje token får ett värde för ljust läge och ett för mörkt. Kontrasten räknas på båda, så det ena temat kan aldrig bli sämre än det andra.

### Vem äger designsystemet efter lansering?

Det gör ni, och det ligger i ert repo. Det är byggt så att en annan utvecklare kan ta över: värdena på ett ställe, komponenterna dokumenterade och kontrollen som en del av bygget.

### Hur ofta behöver ett designsystem göras om?

Sällan i sin helhet. Tokens byts när varumärket ändras och komponenter tillkommer löpande. Ett system som behöver skrivas om vartannat år var byggt för en enskild kampanj.

### Går det att införa ett system på en befintlig sajt?

Ja, en sidtyp i taget. Börja med tokens och de mest använda komponenterna, slå på kontrollen för de mappar som är omgjorda, och utöka därifrån.