Velkommen til Jøkul

Dette er det første innlegget på vår nye blogg bygget med Jøkul designsystem.

Kategori: Design
Publisert: 12.03.2026
Lesetid: 2 min.

Jeg husker godt den første dagen jeg prøvde å lage en knapp som "så ut som Fremtind". Jeg hadde en Figma-fil med farger jeg ikke kjente igjen fra noen CSS-variabel, og en Slack-tråd der tre designere og to utviklere diskuterte om primærknappen skulle ha 4px eller 6px border-radius. Det var kaotisk, men det var også starten på noe bedre — Jøkul.

Jøkul er åpen kildekode og utvikles aktivt på GitHub. Bidrag, feilmeldinger og spørsmål er alltid velkomne!

Hvorfor vi trengte et designsystem

Da Fremtind ble til i 2019 som et joint venture mellom SpareBank 1 og DNB Forsikring, hadde vi plutselig mange produktteam som skulle bygge ting som føltes like — uten noen felles standard. Hvert team hadde sine egne knapper, sine egne farger, sin egne tolkning av "Fremtind-stilen". Vi brukte mer tid på å diskutere marginer enn på å løse faktiske brukerbehov. Noe måtte gjøres.

Jøkul ble svaret. Navngitt etter en type norsk isbre — solid, varig og formet over tid. Det passet godt: et designsystem skal ikke skifte med moten, det skal gi stabil grunn å bygge på.

Hva Jøkul faktisk er

Designtokens: CSS-variabler for farger, spacing, typografi og radiuser — den eneste kilden til sannhet for visuelle verdier.
React-komponenter: Over 50 ferdigbygde, tilgjengelige komponenter. Du trenger ikke finne opp hjulet på nytt.
Fremtind Grotesk: Vår egenutviklede webfont, optimalisert for lesbarhet på skjerm.
Ikonsett: Basert på Material Symbols, tilpasset Fremtinds visuelle identitet.

Hva det faktisk endret for oss

Det mest overraskende var ikke at vi fikk konsistente knapper — det var at designreview ble kortere. Når vi alle brukte de samme komponentene og tokenene, forsvant diskusjonene om piksel-perfeksjon. Vi begynte å snakke om brukeropplevelse i stedet for implementasjonsdetaljer. Det er den ekte gevinsten ved et designsystem: tid til det som faktisk betyr noe.

ReactTypeScriptSCSSStorybookÅpen kildekode

Kom i gang på tre minutter

Installer kjernepakken: npm install @fremtind/jokul
Importer global CSS: import "@fremtind/jokul/core.css"
Installer en komponent og bruk den

Jøkul vs. generiske komponentbiblioteker

Et naturlig spørsmål er: hvorfor ikke bare bruke Material UI, Chakra eller shadcn/ui? Alle er gode biblioteker. Men de er designet for å være nøytrale — lett å tilpasse, men uten merkevare. Jøkul er det motsatte: håndskreddersy til Fremtinds visuelle identitet, typiske brukerscenarioer innen forsikring og sparing, og norske lovkrav til tilgjengelighet.

Med generiske biblioteker ender du opp med å overstyre halvparten av stilene. Med Jøkul starter du allerede på riktig sted. Det er forskjellen mellom å bygge på sand og stein.

Hvis du jobber med Fremtind-produkter — eller bare er nysgjerrig på hvordan vi tenker rundt design og utvikling — håper jeg denne bloggen blir et nyttig sted å henge. Vi kommer til å skrive om alt fra tilgjengelighet og tokens til teststrategier og de feilene vi har gjort underveis. Ærlig og praktisk, ikke bare reklame for systemet.