Stilguide

• Bruk komponentene i src/components før du lager noe nytt.

  Da ser alt likt ut, og en endring ett sted gjelder overalt.

• Alle farger, avstander og skrifter kommer fra tokens. Tokens endres bare i src/tokens/tokens.json, aldri direkte i tokens.css.

  tokens.css lages på nytt fra tokens.json, så endringer der blir borte.

• Alle sider bygges i sidelayouten og rutenettet, aldri med egne bredder, marger eller kolonner.

  Da starter innholdet på samme linje på alle sider og tilpasser seg alle skjermer.

• Mangler en komponent: spør meg før du lager en ny, og legg den i src/components.

  Så systemet ikke fylles med nesten like varianter.

• Alt skal følge WCAG 2.2 AA.

  Siden skal kunne brukes av alle, også med tastatur, skjermleser og nedsatt syn.

• Siden følger innstillingene på maskinen: redusert bevegelse, mer kontrast og høy kontrast i Windows. Nye komponenter som bare har skygge eller glass som kant, skal få en synlig kant i høy kontrast.

  Den besøkende har allerede valgt det som passer for henne.

• Ny komponent skal ha en del om tilgjengelighet i stilguiden: tastatur, skjermleser, kontrast og bevegelse.

  Da ser alle hvordan komponenten virker for dem som ikke bruker mus eller ser dårlig, før den tas i bruk.

• Tydelig før smart. Den besøkende skal forstå med en gang hva ting er og hva hun kan gjøre.

  Lekne detaljer hjelper bare når det grunnleggende er klart.

• Arbeidet får plassen. Casene og bildene står i sentrum, og designet rundt er rolig.

  Det er arbeidet de besøkende kommer for å se.

• Rolig, med små overraskelser. Mest luft og stillhet, med små øyeblikk som blomsten og mønsteret som kommer fram.

  Overraskelser virker best når det ikke er mange av dem.

• Mitt eget uttrykk, for alle. Formene mine, Kulturista og illustrasjonene gir personlighet, men aldri på bekostning av tilgjengelighet.

  Personlighet som ikke alle kan bruke, er ikke godt design.

Knapp

• Gjør

  Én viktig (mørk) knapp per skjerm.

  Da ser den besøkende med en gang hva som er viktigst.

• Gjør

  Skriv hva som skjer, for eksempel «Send melding».

  Da vet man hva knappen gjør før man trykker.

• Ikke

  Mer enn to knapper ved siden av hverandre. Flere valg blir lenker.

  Mange like valg gjør det vanskelig å velge.

Lenke

• Gjør

  La lenketeksten si hvor man havner.

  «Klikk her» sier ingenting, særlig ikke til en skjermleser.

• Ikke

  Blomst på lenker i løpende tekst, bare understrek.

  Blomsten forstyrrer lesingen.

Skjemafelt

• Gjør

  Synlig etikett over hvert felt, og «må fylles ut» med ord.

  Plassholdertekst forsvinner når man begynner å skrive.

• Gjør

  Vis feil under feltet med NB-ikonet og en tekst som sier hvordan det rettes.

  Farge alene ser ikke alle.

Statusmelding, dialog og varsel

• Gjør

  Bruk en statusmelding der det skjedde, for korte beskjeder som «Takk for meldingen!».

  Den avbryter ikke, og står der man allerede ser.

• Gjør

  Gi feil en knapp som «Prøv igjen».

  Den besøkende må vite både hva som skjedde og hva hun kan gjøre.

• Ikke

  Dialogboks (et vindu over siden), bortsett fra når noe må velges før man går videre, som mobilmenyen.

  Dialoger avbryter og er vanskelige med tastatur og skjermleser.

• Ikke

  Meldinger som forsvinner av seg selv.

  Noen leser saktere og rekker ikke å se dem.

Kort og liste med kort

• Gjør

  Legg kortene i et rutenett, med bilde, tittel, kort tekst og én knapp.

  Like kort gjør det lett å sammenligne.

• Ikke

  Mer enn én handling per kort.

  Da blir det uklart hva man skal trykke på.

Bevegelse

• Gjør

  La all bevegelse stå stille når «redusert bevegelse» er slått på.

  Bevegelse kan gi noen svimmelhet og kvalme.

• Ikke

  Bevegelse som fortsetter mens man leser. Tekst kan gli inn én gang, så står den stille.

  Uro tar oppmerksomheten fra innholdet.

Tom tilstand og 404

• Gjør

  Forklar hvorfor det er tomt, og gi en vei videre.

  En side uten vei videre føles som en blindvei.

• Skriv i jeg-form. «Jeg designet …», ikke «Marie designet …» eller «vi».

  Det er min portefølje, og jeg snakker direkte til den som leser.

• Kort og konkret. Én tanke per setning, og det viktigste først.

  De fleste skumleser og stopper etter første linje.

• Vanlige ord. Forklar fagord første gang, eller bruk et enklere ord.

  Ikke alle som leser er designere.

• Knapper sier hva som skjer. Bruk et verb: «Send melding», «Se casen», «Prøv igjen».

  Da vet man hva som skjer før man trykker.

• Feilmeldinger sier hvordan det rettes. «Skriv en hel e-postadresse, for eksempel navn@firma.no», ikke «Ugyldig verdi».

  Den besøkende skal kunne fikse det selv.

• Alt-tekst sier hva bildet viser og hvorfor det er der. Pynt får tom alt-tekst (alt="").

  Skjermlesere leser alt-teksten høyt, og pynt er bare støy.

• Norsk først, engelsk ved siden av. All tekst finnes på norsk, og engelsk ligger i en.json. Fagnavn som «UX» og «prototype» skrives som i bransjen.

  Siden skal kunne leses av norske og internasjonale arbeidsgivere.

• Dato og tall på norsk måte. «27. oktober 2026», «1 240 px», «3,5».

  Da ser det riktig og ryddig ut for norske lesere.

• Grønt som standard. Systemet følger Web Sustainability Guidelines (WSG), som gjør for miljø det WCAG gjør for tilgjengelighet.

  Bærekraft er lettest når den er bygget inn fra starten, ikke lagt til etterpå.

• Bruk det som finnes. Bygg med komponentene og tokens før du lager noe nytt.

  Gjenbruk gir mindre kode å laste ned og mindre å vedlikeholde.

• Fonter på egen side. Bare vektene som brukes, og bare tegnene norsk trenger.

  Færre filer og ingen forespørsler til Google.

• Bilder gjennom Bilde-komponenten. Den lager AVIF og WebP i riktig størrelse og laster bildet først når det vises.

  Bilder er det tyngste på de fleste sider.

• Video bare når bevegelsen er poenget. Komprimer videoen, og bruk et stillbilde når bevegelsen ikke forklarer noe.

  Video er mye data, særlig på mobil.

• Effekter med måte. Glass, glød og animasjon brukes bare der de viser noe. Animasjon og fargesløret slås av når brukeren har valgt redusert bevegelse på maskinen eller mobilen. Velger man Effekter: Av under Visning i toppen, slås også glasset av.

  Effekter bruker strøm, særlig på eldre mobiler.

• Enkle veier. Tydelig meny og tydelig tekst, så folk finner fram uten å klikke rundt.

  Færre sidevisninger gir mindre data.

• Rydd. Fjern komponenter, bilder og kode som ikke brukes.

  Det som ikke finnes, trenger ikke lastes eller vedlikeholdes.

• Tokens endres bare i tokens.json. Kjør npm run tokens etterpå, og sjekk kontrasten i lys og mørk modus.

  Da følger hele siden med, og ingen farge blir uleselig.

• Ny komponent: spør Marie først, bygg den av eksisterende tokens, legg den i src/components og vis den i stilguiden med alle tilstander og spesifikasjon, også tilgjengelighet: tastatur, skjermleser, kontrast og bevegelse.

  Så systemet ikke fylles med nesten like varianter.

• Endring som kan ødelegge noe (fjerne en variant, gi en token nytt navn): sjekk alle sider som bruker den før endringen lagres.

  Én endring i systemet gjelder overalt.

• Ny versjon: legg en linje øverst i src/data/endringslogg.json og samme nummer i package.json. Første tall når noe slutter å virke som før, andre tall for noe nytt, tredje tall for rettelser.

  Da kan alle se hva som er endret og når.

• Etter endringer i tokens, komponenter eller regler: kjør npm run skill, så Claude får den nye versjonen av designet.

  Ellers bygger Claude med gammelt design utenfor prosjektet.

• Marie godkjenner. Claude foreslår og bygger, men Marie bestemmer hva som blir en del av systemet.

  Designsystemet er mitt, og det skal se ut som meg.