Oppdatert 03/07/2026

Avstander

Hiearki, god rytme og konsekvent bruk av luft mellom komponeneter er viktig, for å skape system på tvers av løsninger. Ved å etablere gode standarder for avstand, blir det enklere og raskere for designere og utviklere å ta gode valg.

8 px grid

Vi bruker et enkelt 8 px gridsystem, som utgangspunkt for alle visuelle elementer. Gridsystemet fungerer som et hjelpemiddel når vi bygger nye kompoenenter, og bidrar til at brukeropplevelsen blir den samme gjennom alle Virkes produkter og tjenester.

Skala

Dette er skalaen vi jobber med:

Vertikal rytme

Vi bruker et fast vertikalt avstandsystem, hvor reglene under sørger for at det alltid er tilstrekkelig med luft mellom alle kompoenter. Dette skaper både konistens i uttrykket og god lesbarhet.

Desktop

H1
16 px mellom tittel og tekst

H2
24 px mellom tittel og tekst

Underseksjoner
80 px mellom hver seksjon for å skape et tydelig skille mellom informasjon.

Footer
120px fra siste komponent til footer for å skape en naturlig slutt på siden. (Unntak når kontaktmodulen brukes, da brukes 80px)

Mobil

H1 - 16 px mellom tittel og tekst
H2 - 16 px mellom tittel og tekst
Underseksjoner - 64 px mellom hver seksjon for å skape et tydelig skille mellom informasjon.
Footer - 96px fra siste komponent til footer for å skape en naturlig slutt på siden. (Unntak når kontaktmodulen brukes, da brukes 64px)

Responsive avstander

For å optimalisere opplevelsen av komponenter både på desktop og mobil, trenger vi ofte å definere mer avstand på større skjermer og mindre avstand på mobil.

Generelt endrer vi da verdien på avstanden litt mellom desktop og mobil.