BEFS designsystem

Samlet oversikt over farger, typografi, skjema og komponenter. Bruk disse valgene konsekvent på alle sider — spesielt for lesbar kontrast på lys bakgrunn.

Kontrastregler (viktigst)

Feil bruk av text-muted-foreground uten tema-fix ga nesten usynlig tekst på hvite kort. Følg mønstrene under.

Bruk text-label eller form-label for feltetiketter og tabellheader.

Ikke bruk text-gray-400/text-slate-300 på lyst tema — bruk text-muted eller text-muted-foreground.

Bruk text-muted-foreground for undertekst og metadata.

Unngå opacity-60 på brødtekst — reduserer lesbarhet unødvendig.

Bruk form-input for tekstfelt — gir synlig placeholder og fokusring.

Unngå usynlige rammer (border-border på hvit uten tydelig kontrast).

Bruk enterprise-table eller TableHead med text-label på tabeller.

Ikke bruk text-gray-400 direkte — bruk tema-tokens.

Fargetokens

Foreground

--foreground

Background

--background

Primary

--primary

Text label

--text-label

Text muted

--text-muted

Border

--border-color

Surface

--bg-surface

Success

--success

Warning

--warning

Danger

--danger

Tema styres via data-theme="light" / default i globals.css.

Typografi

Eksempel — Sidetittel

text-3xl font-bold tracking-tight text-foreground

H1 på modulsider (Kontrakter, Eiendommer, …)

Eksempel — Seksjonstittel

text-xl font-bold text-foreground

H2 inne i kort og paneler

Eksempel — Feltetikett (.text-label)

text-label

Skjemafelt, tabellheader, metadata-nøkler (FYLKE, KR/PLASS)

Ikke bruk text-muted alene på hvit bakgrunn for etiketter

Eksempel — Brødtekst

text-sm text-foreground

Verdier i skjema, tabellinnhold, beskrivelser

Eksempel — Sekundærtekst

text-sm text-muted-foreground

Undertekst, datoer under titler, hjelpetekst

Eksempel — Nøkkeltall (.text-value)

text-value

KPI, beløp, score i styringspanel

Skjema

Navn på eiendom

Placeholder og etikett skal være lesbare på hvit bakgrunn.

Eiendomstype

.form-label   → feltetiketter
.form-input   → text, number, med placeholder
.form-select  → nedtrekkslister
.form-hint    → hjelpetekst under felt
.page-subtitle → intro under sidetittel

Knapper og status

Aktiv

Stabil

Vurder

Tabell

Formål / avdeling	Region	Kr/plass	Signal
Eksempel barnevernsenter	Midt-Norge	602 523 kr	Stabil

Tabellheader bruker text-label via TableHead eller enterprise-table.

Sidetyper i BEFS

Oversikt over hovedmoduler og anbefalte klasser. Status «Gjennomgått» betyr at kontrast er rettet; «Til review» har enkelte eldre mønstre (f.eks. text-muted-foreground).

Område	Ruter	Layout	Typografi	Status
Dashboard & oversikt	/, /dashboard, /oversikt, /analyse	glass-card, KPI-rader	text-value for tall, text-label for KPI-etiketter	Gjennomgått
Eiendommer	/properties, /properties/[id], /onboarding	glass-card paneler, styringspanel	form-label / form-input på onboarding, text-label på metadata	Gjennomgått
Kontrakter	/contracts, /contracts/[id], /contracts/onboarding	liste + detaljkort	text-label på nøkler, text-muted-foreground på datoer	Gjennomgått
Institusjoner	/portefoljerad	Table + Signal-forklaring	TableHead (text-label), Badge for signal	Gjennomgått
FDVU	/fdvu/*	eiendomsspesifikke faner, enterprise-table, AccessibleModal	text-label på krav, text-muted-foreground på status	Gjennomgått
Barnevern & institusjoner	/barnevern, /institusjoner, /admin/barnevern-*	tabeller med tall og sammenligning	text-muted-foreground for sekundær, unngå text-muted/40 på data	Til review
Admin & KI-Lab	/admin/*, /admin/ai-lab	Shadcn Card, metrikk-ruter	text-muted-foreground for beskrivelser	Gjennomgått
Hjelp & begreper	/help, /help/begreper, /help/design, /help/utvikler	dokumentasjonslayout, søk	page-subtitle, form-hint	Gjennomgått

Kort

Glass card

Standard panel på eiendoms- og kontraktssider.

Shadcn Card

Admin og KI-Lab

Se også tilgjengelighetserklæringen for tastatur, skjermleser og PWA — og kapittel «Tilgjengelighet og personvern» under Hjelp → Dokumentasjon.