# Byggde ett designsystem med 48 tokens på plattformens eget glasmaterial och skrev lintern som avvisar ett magiskt tal, en hårdkodad teckenstorlek eller en animering som ignorerar inställningen för reducerad rörelse.

augusti 2026

**Situation.** Ett gränssnitt som byggs genom att vyer läggs till samlar på sig värden: en hörnradie här, ett typsnitt på fjorton punkter där, en animation på två tiondels sekund någon annanstans. Vart och ett är rimligt för sig och tillsammans utgör de en design som inte går att ändra, eftersom det inte finns något som heter ”hörnradien” att ändra — det finns fyrtio av dem, lite olika, utspridda över femtio filer.

**Uppgift.** Det visuella ordförrådet måste reduceras till en namngiven uppsättning, uttryckt med plattformens eget material i stället för att uppfinnas på nytt, och försvaras av en kontroll så att det förblir reducerat.

**Handling.** Systemet består av fyrtioåtta tokens i sex grupper: avstånd, typografi, färg, radie, höjdnivå och rörelse. Färg och material bygger på plattformens semantiska färger och dess glasmaterial i stället för fasta värden, vilket är det som får gränssnittet att följa systemets utseende, accentfärgen och kontrastinställningarna utan någon kod som bevakar dem. Typografin mappas till plattformens textstilar så att den skalas med användarens storleksinställning i stället för att låsa ett punktvärde. Lintverktyget avvisar tre saker: en numerisk literal där en token för avstånd eller radie hör hemma, en hårdkodad teckenstorlek var som helst, och en animation som deklareras utan att respektera inställningen för minskad rörelse. Den tredje är den som annars skulle eroderas snabbast, eftersom en animation läggs till i ett ögonblick av finputsning och kontrollen av inställningen är den del som hoppas över — så regeln gör det omöjligt att skriva själva animationen utan den, i stället för att be någon komma ihåg den.

**Resultat.** Fyrtioåtta tokens beskriver hela gränssnittet, utseendet följer systemet och ingen av de tre erosionerna kan committas. Begränsningen är att ett tokensystem styr konsekvens och inte kvalitet — allt matchar nu, och att matcha är inte detsamma som att vara väldesignat, vilket är en bedömning som inget lintverktyg i det här projektet gör.

---

- Roll: Designsystemingenjör
- Kategorier: [Frontendutveckling](https://brand.engineer.company/sv/categories/frontend/), [Automatisering och CI/CD](https://brand.engineer.company/sv/categories/automation/), [Test och kvalitetssäkring](https://brand.engineer.company/sv/categories/testing/), [Designsystem och UI](https://brand.engineer.company/sv/categories/design-systems/), [UX/UI‑design](https://brand.engineer.company/sv/categories/ux-ui/)
- Tjänster: [Frontendutveckling](https://brand.engineer.company/sv/services/frontend-development/), [UI/UX‑design och designsystem](https://brand.engineer.company/sv/services/ui-ux-design/), [Varumärke, marknadsföring och SEO](https://brand.engineer.company/sv/services/brand-marketing/)

<https://brand.engineer.company/sv/portfolio/built-a-48-token-design-system-160/>
