Del 2: Farger, fonter og system – merkevareidentiteten i praksis
Del 2 av 12 i serien «Jeg bygde en komplett medlemskapsplattform i WordPress.»
Uten et designsystem blir hver nye side en designøvelse.
Du åpner editoren, lurer på hvilken blå du brukte sist, sjekker en gammel side, kopierer fargekoden, og starter. Neste gang gjør du det samme. Over tid akkumuleres det: litt ulik spacing her, en annen skygge der, to varianter av samme knapp som ble til av ulike grunner du ikke lenger husker.
Med et designsystem er det annerledes. Du bestemmer én gang. Deretter er det assembly.
Det var utgangspunktet da jeg satte opp designsystemet for Din Plattform.
Hvordan Blocksy håndterer designsystemet
Blocksy har et gjennomtenkt system for visuell konfigurasjon. Det meste av det du ser – farger, typografi, header, footer – konfigureres direkte i WordPress Customizer. Der velger du global fargepalett, setter typografi per element (H1–H6, brødtekst, knapper, sitater), og bygger header og footer med en drag-and-drop-builder. Alt lagres i Blocksys egne innstillinger og kan eksporteres som én enkelt .dat-fil.
Det som er elegant med Blocksy er at fargepaletten du definerer i Customizer automatisk blir tilgjengelig som standardfarger i block-editoren. Du trenger ikke å gjøre noe ekstra – velger du ni farger i Customizer, er de de samme ni fargene du ser når du åpner en Gutenberg-blokk og velger farge.
theme.json i child theme-et brukes i et annet øyemed: å overstyre Blocksys standardverdier der det er nødvendig. Ikke for å eksponere farger til editoren – det gjør Blocksy selv – men for å justere spesifikke defaults som ikke passer prosjektet.
Fargepaletten – ni farger med tydelige roller
En av de vanligste feilene i WordPress-prosjekter er å ha for mange farger uten et klart system. Man legger til en farge for én situasjon, en annen for en annen, og etter hvert er det ingen logikk i hva som brukes hvor.
Din Plattform bruker ni farger. Hver har én definert rolle.
| Navn | Hex | Rolle |
|---|---|---|
| Primary | #0858D0 | Primær aksent, CTA-knapper, lenker |
| Primary light | #4796FD | Hover-states, sekundær aksent |
| Navy | #10254C | Mørke bakgrunner, overskrifter |
| Accent | #FAB800 | Gull, badges, highlights |
| Steel | #C9D9EA | Skillelinjer, subtile rammer |
| Mist | #E7EFF8 | Lyse bakgrunner |
| Cloud | #F2F6FC | Svært lyse seksjoner |
| White | #FFFFFF | Kort, overlays |
| Slate | #64748B | Sekundær tekst |
Navy og Primary er de visuelle ankerne. Accent brukes sparsomt – den har mer kraft jo sjeldnere den dukker opp. Steel, Mist og Cloud er nøytrale overflater som skaper luft og struktur uten å konkurrere med innholdet.
Typografi-stacken – fire familier med klare roller
Blocksy lar deg sette typografi per element i Customizer – Base Font, H1–H6, knapper, blockquote, preformatert tekst. Det er der de primære valgene gjøres, og det er der de fleste endringer skjer i praksis.
Din Plattform bruker fire typografifamilier. Hver har én spesifikk rolle:
| Rolle | Font | Brukes til |
|---|---|---|
| Display | Plus Jakarta Sans | H1–H2, hero-overskrifter |
| Editorial | DM Serif Display | Magasintitler, redaksjonell styling |
| Body | DM Sans | Brødtekst, UI-elementer |
| Mono | JetBrains Mono | Kodeblokker, teknisk tekst, metadata |
Display-fonten er det første leseren ser – den skal ha tyngde og personlighet. Editorial-fonten skaper en annen stemning, varmere og mer tidsskrift-aktig, og brukes kun der innholdet fortjener det. Body-fonten bærer mesteparten av teksten og må være behagelig å lese i lengre stykker. Mono er funksjonell og signaliserer teknisk nøyaktighet.
Fire roller. Fire beslutninger tatt én gang.
Praktisk rebranding på én ettermiddag
Den virkelige testen på et designsystem er ikke om det ser bra ut i dag – det er om det holder når noe endres.
Da jeg rebrandede fra Freymwork til Din Plattform var det i hovedsak to ting som måtte endres: Blocksy-eksporten (.dat-filen) med ny fargepalett og typografi i Customizer, og merkevaremanual med den oppdaterte visuelle identiteten.
Selve implementeringen tok én ettermiddag. Ikke fordi det var enkelt å bestemme den nye identiteten – det tok tid. Men fordi systemet var på plass. Ingenting var hardkodet. Ingenting var spredt tilfeldig rundt i stilark og sidemaler.
Det er poenget med et designsystem. Ikke at det sparer deg tid i dag, men at det sparer deg tid alle gangene etterpå.
Hva dette betyr i praksis
Et velfungerende designsystem er ikke en luksus for store team. Det er en forutsetning for å kunne jobbe raskt og konsekvent som én person.
Hver gang du legger til en ny side, en ny komponent eller et nytt innholdsformat – slipper du å ta de samme beslutningene på nytt. Du følger systemet. Siden ser riktig ut. Du går videre.
Det er forskjellen på å bygge noe og å vedlikeholde noe.
Neste del: Tema-arkitektur – hvordan Blocksy og et custom child theme holder koden ryddig og oppdateringssikker.