Designsystem

En ny kampanj ska smidas och någon frågar om det finns grafiska element att utgå från. Samtidigt uppdateras webben, men vilken blå färg är det egentligen som gäller – den från senaste presentationen, den som ligger på sajten eller den som varumärkesmanualen från 2019 säger?

Någon letar febrilt efter komponentbiblioteket. Någon annan försöker förstå varför samma knapp ser olika ut på två sidor. En tredje person sitter och bygger en annons från scratch – igen – trots att liknande material togs fram för bara tre veckor sedan.

Ingen gör fel. Alla försöker. Men alla utgår från olika versioner av "sanningen".

Känner du igen dig? Då är du definitivt inte ensam. Och det som saknas har ett namn: designsystem.

Låt oss börja med vad det inte är: det är inte en PDF med logotypregler som ingen hittar. Det är inte heller bara en samling färgkoder som någon designer sparade i ett dokument för tre år sedan.

Ett designsystem är ett levande, delat ramverk som samlar alla byggstenar ni behöver för att uttrycka ert varumärke konsekvent i digitala miljöer. Tänk på det som en perfekt kurerad garderob – allt har sin plats, allt matchar och vem som helst i teamet kan sätta ihop något som ser genomtänkt ut, utan att behöva fråga vad som hör ihop.

De visuella grunderna: Färgpalett med exakta färgkoder, typografi med tydliga regler för hierarki, logotyp med användningsregler och frizoner samt riktlinjer för bildstil.

Komponenter: Knappar, formulär, menyer, kort och andra färdigbyggda delar som kan återanvändas – definierade i olika tillstånd och responsiva varianter.

Principer och riktlinjer: Designprinciper som vägleder beslut, tillgänglighetsriktlinjer och ibland även tonalitet och riktlinjer för copy.

Kod (i mer avancerade system): Färdiga kodkomponenter som utvecklare kan använda direkt, med dokumentation som kopplar design till implementation.

Det viktiga att förstå? Ett designsystem är inte ett projekt med start och slut. Det är en levande produkt som växer med er organisation.

"Design låter som designerns jobb" – och ja, designern är central i att bygga systemet. Men effekten märks långt bortom designavdelningen. Det märks i din vardag.

Måndag: Marknad behöver en landningssida för en kommande kampanj. Designern börjar från scratch – letar upp färgkoder, typsnitt och bildstil från förra projektet. Hittar tre versioner. Väljer den som ser mest aktuell ut.

Tisdag: Utvecklaren får designen. En del av komponenterna ser ut som de som redan finns på sajten – men inte riktigt. Utvecklaren bygger nya varianter. Det tar extra tid.

Onsdag: Samtidigt skapar en kollega på marknad annonsmaterial i Canva. Personen använder de färger som ligger i Canvas varumärkeskit men de stämmer inte helt med det designern använde. Ingen märker det just nu.

Torsdag: VD:n ser landningssidan och undrar varför knapparna ser annorlunda ut jämfört med resten av sajten. Designern förklarar. Ett omtag görs.

Fredag: Kampanjen lanseras. Den ser okej ut men det tog tre gånger så lång tid som det borde. Och om du tittar noga ser annonsen, landningssidan och webbplatsen ut som om de kommer från tre olika företag.

Ingen enskild person gjorde fel. Systemet svek dem.

Designern öppnar designsystemet, väljer befintliga komponenter och sätter ihop sidan på en förmiddag. Utvecklaren monterar – inte bygger – eftersom komponenterna redan finns i kod. Marknad skapar annonsmaterial med rätt färger, mallar och riktlinjer. Allt hänger ihop. Kampanjen lanseras på halva tiden och ser ut som en del av samma varumärke oavsett kanal.

Med ett designsystem finns byggstenarna redan på plats. Designern designar snabbare. Utvecklaren bygger snabbare. Marknad producerar snabbare. Det kanske inte låter dramatiskt i ett enskilt projekt men multiplicera det med alla projekt under ett år och det blir väldigt märkbart.

Tänk på de varumärken du litar på mest. Oavsett kanal känns det som samma företag. Det händer inte av sig själv, det händer för att de har ett system. När ert uttryck varierar beroende på vem som producerade materialet försvinner igenkänningen. Och igenkänning är en förutsättning för förtroende.

Utan designsystem: lång onboarding, mycket frågor, mycket "så brukar vi göra" som aldrig dokumenterats. Med designsystem: "Här är systemet. Så här jobbar vi. Varsågod." Särskilt värdefullt om ni arbetar med externa partners såsom byråer, frilansare eller andra team.

Ju fler kanaler, kampanjer och team som tillkommer, desto svårare blir det att hålla ihop helheten. Ett designsystem ger er möjligheten att växa utan att uttrycket spretar. Fler händer kan jobba parallellt utan att kvaliteten sjunker.

Ni har lagt tid, energi och pengar på er visuella identitet. Utan ett system som säkerställer att den förvaltas konsekvent urholkas den långsamt. Inte genom en stor katastrof, utan genom tusen små avvikelser som tillsammans gör att varumärket tappar skärpa.

Alla behöver inte ett fullskaligt designsystem. Ambitionsnivån bör matcha var ni befinner er.

Dokumenterade färger, typsnitt, logotypregler och bildstil. Inga kodade komponenter – men en tydlig visuell referens som alla kan utgå från.

Passar er om ni är ett mindre team, saknar dokumenterade riktlinjer och vill skapa ordning utan att göra det till ett stort projekt. I praktiken: ett välstrukturerat dokument eller en delad Figma-fil. Tar dagar att sätta upp, inte månader.

Utöver de visuella riktlinjerna finns färdigbyggda designkomponenter som designers kan använda direkt – definierade i olika tillstånd och responsiva varianter.

Passar er om ni producerar regelbundet digitalt material, flera personer skapar design eller innehåll, ni arbetar med externa partners eller ni upplevt inkonsistens mellan sidor och kanaler.

Design och kod lever tillsammans. Varje designkomponent finns också som färdig kodkomponent. Systemet inkluderar dokumentation, principer, tillgänglighetsriktlinjer och ofta även tonalitet.

Passar er om ni har en komplex digital närvaro med flera sajter eller plattformar, design- och utvecklingsteam jobbar parallellt, eller ni skalar snabbt och behöver den enda sanningskällan för alla digitala uttryck.

De flesta företag vi möter befinner sig någonstans mellan nivå 1 och 2. De har något – men det hänger inte riktigt ihop, är inte uppdaterat och används inte konsekvent. Det är helt normalt. Och det viktigaste steget är inte att bygga ett perfekt system – utan att börja.

Här är den praktiska processen – anpassad efter verkligheten, inte läroboken.

1. Inventera vad som finns. Gå igenom webbplatsen och samla alla unika varianter av knappar, formulär, färger och andra element. Du kommer förmodligen hitta fem varianter av "primärknappen" och tre nyanser av "vår blåa". Det är inte ett misslyckande – det är utgångspunkten.

2. Välj vad som ska vara gemensamt. Allt behöver inte vara med från dag ett. Börja med det som används mest och skapar mest friktion: färgpalett, typografi, knappar, formulärfält och spacing. Det är kärnan. Resten adderas successivt.

3. Designa, dokumentera och förankra. Varje komponent designas i sina varianter och dokumenteras med tydliga regler: när ska den användas, var ska den placeras och varför ser den ut som den gör. Men minst lika viktigt – involvera designers, utvecklare och marknad redan under skapandet. Utse en ägare. Gör det enkelt att hitta. Annars samlar det damm.

4. Underhåll som en produkt. Designsystemet är aldrig "färdigt". Nya komponenter tillkommer, gamla fasas ut, riktlinjer justeras. Behandla det som en produkt med en egen roadmap – inte som ett engångsprojekt.

På Mild lever vi i samspelet mellan design, teknik och strategi, varje dag. Vi bygger designsystem som inte bara ser bra ut i en Figma-fil, utan som faktiskt fungerar i verkligheten. Från visuella riktlinjer till fullskaliga system med kodbibliotek, vi utgår alltid från era behov.

Oavsett om ni vill bygga från grunden, strukturera upp det ni redan har eller bara bolla tankar – hör av er.