Design

Typography

Sans-fonten (var(--font)) setter UI og prose, mono-fonten (var(--font-mono)) setter tall, kode og eyebrow i caps. Hele rampen finnes som .type-*-klasser i globals.css — tekststil settes aldri stykkevis. copy-14 og label-14 dekker det meste. Målverdiene under leses live fra det rendrede elementet, så de kan aldri drifte fra klassen.

Heading — titler på sider og seksjoner (letter-spacing strammes med størrelsen)

Frivio
.type-heading-72
…
Frivio
.type-heading-64
…
Frivio
.type-heading-56
…
Vedlikeholdsplan
.type-heading-48
…
Vedlikeholdsplan
.type-heading-40
…
Sidetittel (PageHeader)
.type-heading-32
…
Seksjonsoverskrift
.type-heading-24
…
Kort- og modaltittel
.type-heading-20
…
Mindre overskrift
.type-heading-16
…
Seksjonsetikett
.type-heading-14
…

Button — mellomvekt (500) for knapper og kompakte kontroller

Lagre bygg
.type-button-16
…
Lagre bygg
.type-button-14
…
Lagre
.type-button-12
…

Label — enkeltlinjet, skannbar tekst (navigasjon, feltetiketter, metadata)

Etikett
.type-label-20
…
Etikett
.type-label-18
…
Etikett
.type-label-16
…
Feltetikett
.type-label-14
…
Feltetikett
.type-label-13
…
Metadata
.type-label-12
…
Gruppeetikett
.type-overline
…

Copy — flerlinjet brødtekst med høyere linjehøyde

Rolig, lesbar brødtekst uten støy.
.type-copy-24
…
Rolig, lesbar brødtekst uten støy.
.type-copy-20
…
Rolig, lesbar brødtekst uten støy.
.type-copy-18
…
Rolig, lesbar brødtekst uten støy.
.type-copy-16
…
Dekker det meste av brødteksten i systemet.
.type-copy-14
…
Kompakt brødtekst og hjelpetekst.
.type-copy-13
…

Mono — for tall, kode, tabulære figurer og eyebrow i caps

kr 1 240 500
.type-label-14-mono
…
kr 1 240 500
.type-label-13-mono
…
0123456789
.type-label-12-mono
…
const plan = analyze(report)
.type-copy-14-mono
…
const plan = analyze(report)
.type-copy-13-mono
…

Utility — .type-page-title (PageHeader-tittelen). Responsiv alias: heading-24 under 640px (mobil), heading-32 fra 640px.

Vedlikeholdsplan
.type-page-title
…

Utility — .type-display-1/2 (landingssidens store overskrifter, KUN app/page.tsx + components/landing/**). display-1 er heading-40 på mobil → heading-64 fra md; display-2 er heading-32 → heading-48 fra md.

Styrearbeidet i sameiet
.type-display-1
…
Hva dere faktisk får
.type-display-2
…

Uthevelse i løpende tekst

Et uthevet ord i en setning låses til vekt 600 — nettleserens standard font-weight: bolder ville regnet til 700 mot en 400-vekt kontekst, utenfor vektskalaen (400/500/600) resten av systemet bruker. Samme vekt som .type-heading-* og knapper, så et enkeltord aldri blir tyngre enn en overskrift.