● Mockup-sammenligning · 18.6.2026

Header, footer og mobil-meny

Tre alternativer for header, to for footer, og tre for mobil-meny. Alle bygd på DESIGN.md v1.1.0 (Living Atlas). Velg én kombinasjon eller mix på tvers — alternativene er kompatible.

Headers (3) Footers (2) Mobil-meny (3) Anbefalt kombinasjon

01 · Header

Tre retninger for top-bar

Hvor mye vekt skal øverste rad ha — usynlig ramme, signaturbærer, eller formell etat?

H1 · Minimal blueprint-bar Mest nedtonet · La innholdet snakke

DSOP Teknisk dok ↗

Hero starter her ↓

Bakgrunn: hvit m/ subtil blueprint-grid + backdrop-blur sticky Høyde: ~64px Best for: rolig, innholdsdrevet feel

H2 · Atlas-dock med live-puls Signaturbærer · Setter tonen øverst

DSOP

Digitalt samvirke for offentlig sektor

15 tjenester · 67,2 mrd kr

Hero starter her ↓

Bakgrunn: hvit, statisk (ingen blur) Høyde: ~84px Live-puls: dynamisk fra wp_count_posts + gevinst-sum Best for: "her skjer det noe"-energi

H3 · Split-header (top-strip + main) Etat-formell · Klassisk regjering.no-stil

● Et samarbeid mellom finansnæringen og det offentlige

Bokmål Kontakt Teknisk dokumentasjon ↗

DSOP

Hero starter her ↓

To rader: meta-strip (mist) + main (hvit m/ cyan bunn-strek) Høyde: ~104px Best for: formell offentlig-sektor-tonen, språkbytte synlig

02 · Footer

To retninger for å lukke siden

Lys navigasjons-hub som speiler forsiden, eller mørk pulse som speiler counter-strip?

F1 · Atlas-katalog (lys) Navigasjons-hub · Alle 15 tjenester synlige

Alle 15 tjenester

Atlas-oversikt · sortert 1→15

01 Saldo studielån 02 Signaturrett 03 Skatt – kontroll 04 Vergekontroll 05 Konkursbehandling 06 Syke- og uføre 07 Transportløyvegaranti 08 Politi finansoppslag 09 Innkreving utlegg 10 Innkreving krav 11 OTP privat 12 Selskapsetablering 13 Eiendomshandel 14 Digitalt dødsbo 15 Samtykkebasert lån

Om DSOP

Aktører

Dokumentasjon

Kontakt

Bakgrunn: mist-pale, lys Hovedfunksjon: komplett navigasjon, alle 15 tjenester ett klikk unna Best for: brukere som scroller til bunn for å navigere

F2 · Pulse-footer (mørk) Lukker med tyngde · Speiler counter-strip

Samlet gevinst over 10 år

67,2 mrd kr i realiserte og potensielle gevinster på tvers av 15 tjenester.

DSOP

Kontakt

Status

Tilkoblede finansforetak114

Samtykker 20244,3 mill

Sist oppdatert18.6.26

Bakgrunn: ink-blå m/ blueprint-grid (samme som counter-strip) Hovedfunksjon: avsluttende statement + live status-tall Best for: lukke siden med samme typografiske vekt som hero åpnet

03 · Mobil-meny

Tre retninger for menyen på små skjermer

Full-screen blueprint, slide-in panel, eller bottom-sheet — viewet er identisk, opplevelsen er forskjellig.

M1 Full-screen blueprint

DSOP ✕

15 tjenester 67,2 mrd kr

Teknisk dokumentasjon ↗

Stil-signatur: matcher atlas-DNA, blueprint-grid følger overalt. Stor typografi, cyan-aksent på aktiv.

M2 Slide-in panel

DSOP ✕

Hovednav

Tjenester →

Felleskomponenter →

Aktører →

Mer

Om DSOP →

Nyheter →

Dokumentasjon ↗ →

Stil-signatur: klassisk, kjent. Mister litt atlas-feel, men gir tydelig kategorisering.

M3 Bottom-sheet (native)

Meny

Tjenester →
Felleskomponenter →
Aktører →
Om DSOP →
Nyheter →
Dokumentasjon ↗ ↗

Stil-signatur: mobil-native (iOS/Android-aktig). Mest "app", minst atlas.

● Anbefalt baseline

H1 + F2 + M1

Minimal header lar innholdet snakke. Pulse-footer lukker siden med samme typografiske tyngde som heroen åpnet. Full-screen blueprint mobil-meny holder atlas-DNA-en konsistent på alle viewports. Velg fritt — eller mix om du vil ha mer programkontor-følelse (H2 + F1 + M1).

H1 minimal F2 pulse M1 blueprint