Design

Colors

Hver skala går 10 steg (100–1000) der steget koder BRUK, ikke bare lyshet. Solid gray-* holder kontrast på enhver flate; gray-alpha-* er translucent og legger seg oppå. Verdiene under leses live fra globals.css.

Steg → rolle

Samme oppskrift i alle skalaer, uansett kulør.

Steg
Rolle
100
Flate
200
Hover-flate
300
Aktiv flate
400
Kant
500
Hover-kant
600
Aktiv kant
700
Solid
800
Solid hover
900
Sekundær tekst/ikoner
1000
Primær tekst/ikoner

Status-oppskriften følger et forkortet mønster av det samme: flate 100, kant 400, solid 700, hover 800, tekst 900.

Skalaer

gray

100
…
200
…
300
…
400
…
500
…
600
…
700
…
800
…
900
…
1000
…

blue

100
…
200
…
300
…
400
…
500
…
600
…
700
…
800
…
900
…
1000
…

red

100
…
200
…
300
…
400
…
500
…
600
…
700
…
800
…
900
…
1000
…

amber

100
…
200
…
300
…
400
…
500
…
600
…
700
…
800
…
900
…
1000
…

green

100
…
200
…
300
…
400
…
500
…
600
…
700
…
800
…
900
…
1000
…

teal

100
…
200
…
300
…
400
…
500
…
600
…
700
…
800
…
900
…
1000
…

purple

100
…
200
…
300
…
400
…
500
…
600
…
700
…
800
…
900
…
1000
…

pink

100
…
200
…
300
…
400
…
500
…
600
…
700
…
800
…
900
…
1000
…

gray-alpha

Translucent — kant, delelinje, overlegg og hover. Vist over surface-flaten.

100
…
200
…
300
…
400
…
500
…
600
…
700
…
800
…
900
…
1000
…

Semantiske tokens

Flater

2026-09-09 palett-oppfriskning: mørkt tema er nesten svart (ikke lenger ren sort) med lysere near-black-kort. Lyst tema er tilbake til bg=hvit/surface=tonet lysegrå — en tilbakeføring fra 2026-08-20s «kort=hvit»-retning, mulig fordi begge tema nå har en ekte, alltid synlig kant (se Kanter) som bærer skillet i stedet for en luminans-forskjell alene.

--color-bg
…
--color-surface
…
--color-surface-2
…
--color-surface-3
…

Kanter

2026-09-09: flate rgba-verdier (8/12/18 %) i stedet for gray-alpha-skalaen, som var kalibrert for ren svart/hvit og ga for kraftig kant mot de nye, tonede kortene. Bevisst svak — kortet skiller seg også ved flatefarge, ikke bare kant.

--color-border
…
--color-border-2
…
--color-border-3
…

Tekst

Rangér informasjon: primær → sekundær → tertiær → deaktivert.

--color-text-primary
…
--color-text-secondary
…
--color-text-tertiary
…
--color-text-quaternary
…

Aksent

Kun lenker, fokus og den ene viktigste handlingen — ALDRI primærknappen (se Knapp under Komponenter → Button). 2026-09-09: mørkt tema fikk en lysere blå enn lyst tema — mot nesten-svart leste den gamle, mørkere tonen dempet; lyst tema er uendret. accent-text (color-mix mot text-primary) er den ENESTE trygge for FARGET SKRIFT under 18px i lys modus — rå accent er kun trygg på ikoner/dekor. accent-fg er hvit skrift oppå en fylt accent-flate (knapper). accent-strong er en mørkere variant KUN for fylt knappeflate (rå accent når ikke 4,5:1 bak hvit etikett) — bruk den aldri på lenker, fokus eller glød. accent-border er kanten til accent-light, samme 35 %-styrke som Tilstand-gruppens border-tokens. accent-2/-glow hører til gradientene.

--color-accent
…
--color-accent-hover
…
--color-accent-light
…
--color-accent-border
…
--color-accent-text
…
--color-accent-fg
…
--color-accent-strong
…
--color-accent-strong-hover
…
--color-accent-2
…
--color-accent-glow
…

Knapp

Primærknappens nøytrale monokrome signatur — svart flate/hvit etikett i lyst tema, hvit flate/svart etikett i mørkt. IKKE blå. Settes av Button variant="primary"; du skal sjelden røre disse direkte. btn-bg/-fg/-bg-hover består som aliaser for landingssiden.

--color-primary-bg
…
--color-primary-hover
…
--color-primary-fg
…

Tilstand

Fylt flate (800) + tint-flate (18 % over surface i mørkt tema) + KANT (35 %). Bruk `-border` rundt en tint-flate i stedet for å håndrulle en color-mix. -text-variantene (color-mix mot text-primary) er de eneste som er trygge for FARGET TEKST under 18px i lys modus. error-strong er et høyere-kontrast feiltrinn (red-900), neutral-light er den nøytrale tint-flaten Badge default bruker.

--color-success
…
--color-success-light
…
--color-success-border
…
--color-success-text
…
--color-warning
…
--color-warning-light
…
--color-warning-border
…
--color-warning-text
…
--color-error
…
--color-error-light
…
--color-error-border
…
--color-error-text
…
--color-error-strong
…
--color-neutral-light
…

Prioritet

Vedlikeholdsoppgavers hastegrad (Badge blander disse selv til en egen kontrast-trygg pillefarge — bruk Badge for piller). -text-variantene er trygge for farget SKRIFT/ikon under 18px; rå token er kun trygt til ikoner ≥18px og dekor-flater. hoy-light er tint-flaten bak både høy og middels. MERK: middels har en EGEN literal verdi, ikke amber-900.

--color-akutt
…
--color-akutt-text
…
--color-hoy
…
--color-hoy-text
…
--color-hoy-light
…
--color-middels
…
--color-middels-text
…
--color-lav
…
--color-lav-text
…

Overlegg

Bakteppet bak modaler og popovers. Ett token — konsoliderte fire driftede opasitetsverdier.

--color-overlay
…

Gradients

«Gradient viser. Flatt opererer.» De tre aksent-forløpene bygger på accent + surface via color-mix, så de auto-tilpasser mørk/lys. Bruk dem kun på flater som viser noe frem.

--gradient-card

Card, StatCard (default) — knapt merkbar diagonal sheen mot flaten.

--gradient-hero

StatCard (tone="hero") — tydeligere aksent-forløp for KPI-høydepunkt.

--gradient-glow

Dashbord-toppglød, tomtilstands-hero — svak radial glød over en flate.

Viser → gradient tillatt

Hero-KPI, standard-kort, tomtilstands-hero, dashbord-toppglød.

Opererer → alltid flatt

Skjema/input, modal, popover/meny, listerad, tabell, notis-banner, knapp, sidemeny.