Tilbake til alle innlegg

Fargesystemet i Jøkul

Hvordan Jøkul bruker semantiske fargetokens for å sikre konsistens og tilgjengelighet på tvers av temaer.

Kategori
Design
Publisert
07.03.2026
Lesetid
2 min.

Tidlig i Jøkul-historien hadde vi en farge vi kalte #2D6A4F i syv ulike CSS-filer under syv ulike variabelnavn. Ingen visste at de var den samme fargen. Da vi én gang endret én av dem, brakk tre skjemaer på mobil. Det var da vi skjønte at vi ikke hadde et fargesystem — vi hadde en haug med hardkodede verdier med fargenavn. Det er forskjellen som alt.

To lag, én sannhet

Jøkuls fargesystem er bygget i to klart adskilte lag. Forstår du dem, forstår du systemet:

Primitive tokens
Rå fargeverdier: --jkl-color-granitt-20, --jkl-color-stein-60. Aldri bruk disse direkte i komponenter. De er paletten — ikke reglene.
Semantiske tokens
Meningsfulle variabler: --jkl-color-text-default peker på en primitiv farge. I mørkt tema peker den på en annen. Komponentene bryr seg ikke om hvilken.

De semantiske lagene i detalj

Bakgrunnsfarger
--jkl-color-background-default er sidens grunnfarge. Den og fem varianter dekker alle nivåer av overflater — kort, modaler, sidebarer.
Tekstfarger
--jkl-color-text-default, --jkl-color-text-subdued og --jkl-color-text-on-action. Tre nivåer. Ikke mer, ikke mindre.
Interaktive farger
--jkl-color-interactive-default og --jkl-color-interactive-hover. Alltid 4.5:1 kontrast mot bakgrunn i begge temaer. Det er garantert i paletten.

Tilstandsfarger — ikke dekorasjon

Disse fargene kommuniserer systemmeldinger og inndatastatus. De er ikke valgfrie estetiske valg. En bruker med fargeblindhet stoler på dem — alltid kombinert med ikon eller tekst:

Info — nøytral blåSuksess — grønnAdvarsel — gulFeil — rød

Tilstandsfarger skal aldri brukes som dekorasjon. De har semantisk betydning brukere stoler på. Kombiner alltid farge med ikon eller tekst.

Mørk modus er én attributt

For å aktivere mørk modus setter du data-theme="dark" på et foreldreelement. Ingen ekstra klasser, ingen theme-providers, ingen JavaScript-trickery. Alle semantiske tokens bytter automatisk:

  1. Bakgrunnsfarger inverteres til mørk grå
  2. Tekstfarger justeres for å bevare kontrastkravene
  3. Interaktive farger lysnes for synlighet mot mørk bakgrunn
  4. Fokusringer justeres for å skille seg ut
Kontrastkrav og hvorfor vi sjekker dem i CI

WCAG 2.2 definerer disse minimumskravene:

  • 4.5:1 — normal tekst (under 18pt / 14pt bold)
  • 3:1 — stor tekst og UI-komponenter
  • 3:1 — grafiske elementer som formidler informasjon

Vi kjører kontrastsjekker automatisk i CI med en liten script som leser token-manifestet og verifiserer at alle semantiske par møter AA-kravene. En gang i kvartalet, som klokkearbeid. Verifiser selv med WebAIM Contrast Checker.

Fargesystemet er kanskje den delen av Jøkul jeg er mest stolt av — ikke fordi det er fancy, men fordi det er kjedelig riktig. Du tenker aldri på det. Det bare fungerer.