Designsystem-light: Skab konsistens på tværs af website og designtools

Et designsystem er den fælles ramme for de valg, der går igen i jeres digitale produkt. Ved at samle reglerne for både udtryk og adfærd, kan designere og udviklere træffe de samme beslutninger hver gang. Det sikrer en løsning, der hænger sammen – uanset om brugeren lander på en underside, klikker sig igennem et flow eller skifter kanal.

Værdien mærkes hurtigt i hverdagen. Når komponenter og spilleregler er lagt fast, slipper teamet for at diskutere de samme detaljer igen og igen, og I undgår, at design og kode stikker i hver sin retning. Resultatet er en stabil brugeroplevelse og en langt mere forudsigelig proces, hver gang I bygger nyt indhold eller nye funktioner.

Det får I ud af det:

• Et ensartet udtryk på tværs af jeres website, kampagnesider og landingssider.
• Hurtigere eksekvering, fordi knapper, felter og regler allerede er defineret.
• Højere kvalitet, da de digitale mønstre kan testes og forbedres løbende.
• Stærkere tilgængelighed, fordi krav til fokus, kontrast og states automatisk bliver standard.
• Nemmere vedligeholdelse, da ændringer foretages ét centralt sted og slår igennem overalt.

Hvad er et designsystem i praksis?

Kort sagt består systemet af konkrete byggesten og klare retningslinjer, der dækker både det visuelle og det funktionelle. Et gennemskueligt system minimerer behovet for mavefornemmelser og fortolkning fra side til side. I stedet peger designfil, kode og CMS-opsætning i nøjagtig samme retning.

De centrale elementer er:

• Designprincipper: Korte retningslinjer for tone, enkelhed, hierarki og interaktion.
• Design tokens: De rå værdier og navngivninger for farver, typografi, spacing, radius, skygger og breakpoints.
• Komponenter: De faktiske elementer som knapper, felter, kort, navigation, beskeder, tabs og accordions.
• States og adfærd: Hvordan elementerne reagerer ved f.eks. hover, fokus, aktiv, disabled, loading, fejl og succes.
• Indholdsregler: Retningslinjer for tekstlængder, overskriftshierarki, billedformater og CTA-praksis.
• Dokumentation: En kort, brugbar vejledning, som design, udvikling og redaktion kan dykke ned i fra dag ét.

Hvad består en “light”-udgave af?

Et light designsystem er en skarpt afgrænset version. Det dækker de elementer, I bruger allermest, og som skaber størst værdi her og nu. Det er ofte mere end nok til at sikre høj konsistens på websitet, uden at administration og vedligeholdelse ender med at blive en hel videnskab i sig selv.

Et godt udgangspunkt er at samle et enkelt fundament og de vigtigste kernekomponenter:

• Farver: Primær, sekundær, neutrale toner, links og statusfarver (succes, fejl, advarsel).
• Typografi: Fontvalg, størrelser, linjehøjde og det faste hierarki fra H1–H6 samt brødtekst.
• Spacing: Et fast, matematisk system (f.eks. 4/8/16/24/32) til at styre margin og padding.
• Grid og breakpoints: En simpel model for, hvordan layoutet tilpasser sig mobil, tablet og desktop.
• Formularer og knapper: Inputfelter, selects, textareas, checkboxes, radiobuttons og hjælpetekster.
• Feedback: Alerts, fejlbeskeder, validering og loading-tilstande.

Hele styrken ved et light-system ligger i, at det er nemt at gå til. Med få, gennemtænkte valgmuligheder og logiske navne bliver det naturligt at bruge det konsekvent – både i designværktøjet, koden og direkte i CMS’et.

Sådan bruger I designsystemet i hverdagen

Et designsystem gør størst gavn, når det bliver en aktiv del af den daglige produktion – uanset om I bygger helt nye sektioner eller retter i det eksisterende indhold. Arbejdsgangen bliver langt mere stabil, hvis I skaber en fast rytme for, hvordan I tager beslutninger og ruller opdateringer ud.

En god og overskuelig proces kan struktureres sådan her:

1. Kortlæg nuværende UI: Start med en hurtig audit af jeres eksisterende brugerflade og de indholdsmønstre, I allerede bruger.
2. Læg fundamentet først: Få styr på basiselementerne som farver, typografi, spacing og de overordnede layoutprincipper.
3. Byg kernerne: Etabler 5–10 centrale komponenter, der dækker de vigtigste opgaver på tværs af sitet.
4. Tænk på undtagelserne: Definér states og fejlscenarier for de mere komplekse elementer – især formularer og navigation.
5. Hold det kort: Sørg for, at dokumentationen er kort, handlingsorienteret og koblet direkte op på de konkrete komponenter.
6. Log jeres ændringer: Opdatér systemet, så snart et mønster gentager sig, og giv justeringerne et tydeligt versionsspor.

Den tilgang gør det langt nemmere at bygge bro mellem design (UX/UI) og udvikling. Begge teams har de samme referencepunkter at navigere efter, hver gang noget skal rettes eller udbygges.

Fra designsystem til WordPress (Full Site Editing og styleguide)

Broen mellem designsystemet og jeres CMS er afgørende for den daglige produktion. Bruger I WordPress med Full Site Editing (FSE), kan vi binde jeres design tokens og komponentlogik direkte op på temaets styles og blokke. Det giver jeres redaktører frihed til at bygge nye sider, men inden for trygge, fastlagte rammer.

I praksis fokuserer vi på disse områder i WordPress:

• Global styles: Vi lægger typografi, farver, spacing og standardstilarter direkte ind på kerneblokkene.
• Style variations: Designvarianter, som jeres redaktører kan skifte imellem, men som stadig låser sig til de rigtige tokens og regler.
• Blokindstillinger: Vi opsætter begrænsninger og smarte defaults, så I slipper for, at der knopskyder mærkelige varianter undervejs i redigeringen.
• Komponentmapping: Knapper, formularfelter og beskeder bindes op på ensartede styles, der går igen på tværs af alle skabeloner.
• Skabeloner og moduler: Overordnede layouts for header, footer, navigation og content følger automatisk de samme retningslinjer.

Når CMS’et er sat op med et tydeligt designfundament, får redaktører et forudsigeligt værktøj. Det reducerer risikoen for sider, der visuelt og funktionelt afviger fra resten af websitet, og det gør vedligehold lettere over tid. Det hænger tæt sammen med god indholdsmodellering og CMS-arkitektur, hvor skabeloner og moduler er bygget til at kunne bruges korrekt i praksis.

Genbrug med block patterns: Hurtigere produktion i hverdagen

Så snart fundamentet og kernekomponenterne er på plads, giver det mening at bygge block patterns. Det er samlinger af flere blokke, som udgør færdige, gennemprøvede layouts. Det speeder produktionen af nye sider markant op, fordi mønstrene ligger klar i CMS’et, hvor både spacing, typografi og CTA-struktur allerede er på plads.

De bedste block patterns opstår, når de tager udgangspunkt i de reelle indholdsbehov, I har på tværs af hele websitet.

Eksempler på mønstre, vi typisk standardiserer:

• Hero-sektion: Overskrift, brødtekst og den primære CTA-knap.
• Introsektion: Fokuseret tekst med nøglepunkter og en sekundær CTA.
• Feature-oversigter: Sektioner med 3–6 kort, der deler ensartet ikon- eller billedbrug.
• Udtalelser (Testimonials): Citatopsætning med fastlåst typografi.
• FAQ-sektioner: Accordions, der opfører sig ens hver gang.
• Kontaktområder: Formularer med tilhørende hjælpetekster og kvitteringssider.

Ved at basere jeres patterns direkte på designsystemet, får jeres redaktører en genvej til at lave nye sider, som både ser rigtige ud og fungerer ensartede. Det hæver tempoet i hverdagen, uden at jeres UI stikker af.

Konsistens på tværs af platforme: CMS, designfiler og Canva

Et godt designsystem rækker ud over jeres CMS. Hvis I sørger for, at farver, typografi og principper er tydeligt definerede, kan I holde jeres brand helt skarpt – selv når I producerer indhold på andre platforme.

Det mærker I især effekten af, hvis I laver markedsføringsmateriale og skabeloner i værktøjer som Canva. Ved at trække den samme navngivning og de samme brandværdier med derover, sikrer I, at kampagnegrafik, SoMe-formater og website taler nøjagtig samme visuelle sprog.

I praksis løser vi det ved at opsætte:

• Synkroniseret navngivning: De samme navne på farver og typografistørrelser i alle jeres værktøjer.
• Matchende Canva-skabeloner: Grafik og formater, der afspejler websitets sektioner og CTA-praksis.
• Mindre visuel drift: I undgår, at jeres udtryk langsomt udvandes, når der produceres nyt materiale i højt tempo.

Læs også: Canva

Vedligeholdelse uden tunge processer

Selvom vi taler om en light-udgave, kommer vi ikke udenom en smule vedligeholdelse. Opgaven er dog nem at overskue, så længe rammerne er skarpe, og ejerskabet er placeret solidt. Det betaler sig næsten altid at fikse småting løbende frem for at vente på de helt store, uoverskuelige oprydningsrunder.

En pragmatisk rytme i hverdagen kan se sådan ud:

• Månedlig mini-audit: Tjek efter for små afvigelser i knapper, typografi, spacing og formularer.
• Klare optagelseskrav: Lav en simpel regel for, hvornår en ny komponent er vigtig nok til at blive lukket ind i systemet.
• Tokens før varianter: Opdatér jeres fundamentale tokens og kerneelementer, inden I begynder at bygge nye afarter af dem.
• En kort changelog: Hold en uformel log, så både designere, udviklere og redaktører hurtigt kan se, hvad der er ændret.
• Løbende tilgængelighedstjek: Hav særligt fokus på kontrast, fokusmarkeringer og navigation med tastatur.

Hvis websitet allerede har god trafik, kan I med fordel lade jeres adfærdsdata kvalificere arbejdet. Værktøjer som Google Analytics og session recordings afslører hurtigt, hvis brugerne tøver eller fejler i bestemte formularer eller flows. Det giver jer et solidt datagrundlag for at finpudse komponenterne, så konsistens også bliver til reel brugervenlighed.

I kan med fordel holde øje med fire områder:

• Visuelle fejl: Stikker farver, skrifttyper, afstande eller knap-states af?
• Funktionelle fejl: Løses den samme opgave forskelligt alt efter, hvilken side man lander på?
• Tilgængelighed: Er der problemer med kontraster, formularfejl eller skærmlæsere?
• Redaktionel stabilitet: Begynder redaktørerne at opfinde “specialløsninger” uden om jeres faste patterns?

Et praktisk forløb: Fra første version til færdigt CMS

I behøver ikke bygge det hele på én gang. Tværtimod kan et light designsystem hurtigt etableres, hvis vi tager udgangspunkt i de mønstre, der allerede fungerer på jeres nuværende website. Første version skal kun dække det vigtigste, så kan vi rulle det ud med det samme og finjustere undervejs.

Processen herfra er helt jordnær:

1. Kortlægning: Vi finkæmmer jeres nuværende UI for dubletter og udvælger de vigtigste sidetype-skabeloner.
2. Definition af tokens: Vi låser farver, typografi, spacing og grid fast.
3. Komponentbyg: Vi koder og designer jeres primære kernekomponenter inklusive deres forskellige states.
4. CMS-integration: Vi lægger grundstilen ind i WordPress FSE, så jeres CMS og designfiler taler samme sprog.
5. Pattern-udrulning: Vi bygger de første block patterns til jeres mest brugte sektioner.
6. Data og tilpasning: Vi justerer de sidste detaljer på plads baseret på jeres feedback og erfaringer fra produktionen.

Med den udrulning får jeres website det perfekte fundament at udvikle sig ud fra. Det skruer op for tempoet i den daglige produktion, og det sikrer en tårnhøj, ensartet kvalitet, uanset om I arbejder direkte i WordPress eller designer nyt materiale i Canva.

Vil du hjælp til at få opsat et praktisk anvendeligt designsystem, så tag fat i Kathrine eller Franz.