Tilbake

Design System

v0.3

NorskInnsikt

Designsystem for datavisualisering av norsk regional statistikk. Bygget for klarhet, tilgjengelighet og tillit — farger er fargeblindsikre (Okabe-Ito, ColorBrewer), typografi er stram og funksjonell (Inter), og alle kontraster oppfyller WCAG AA.

Merkevare

Primære farger som gir identitet og tillit.

Navy
#1e3a5f
Primary brand, headers, CTAs
Steel
#3a6b9e
Links, interactive elements
Secondary
#e4edf5
Secondary surfaces, badges

Nøytrale

Varm gråskala — journalistisk kvalitetsfølelse, ikke kald SaaS.

50
#f7f5f2
100
#ede9e3
200
#ddd8d0
300
#c5bfb5
400
#a89f93
500
#8a8278
600
#6b6358
700
#4a4540
800
#2d2926
900
#1c2b3a

Semantiske

Status og tilbakemelding.

Success
#16a34a
Warning
#d97706
Error
#dc2626
Info
#2563eb

Kategorisk palett (Okabe-Ito)

Fargeblindsikker palett for flerserie-diagrammer. Akademisk gullstandard.

Blue
#0072b2
Amber
#e07b00
Green
#009e73
Crimson
#d55e00
Pink
#cc79a7
Sky
#56b4e9
Brown
#7c4c1e
Slate
#555555

Tokenreferanse

CSS-variabler og Tailwind-klasser for utviklere.

TokenCSS-variabelTailwindBeskrivelse
Primary--primarybg-primary text-primaryHovedfarge, CTA
Accent--accentbg-accent text-accentLenker, interaktive
Background--backgroundbg-backgroundSidebakgrunn
Card--cardbg-cardKortbakgrunn
Border--borderborder-borderRammer, skillelinjer
Demografi--domain-demographybg-domain-demographyBlå domenegradient
Miljø--domain-environmentbg-domain-environmentGrønn domenegradient
Energi--domain-energybg-domain-energyOransje domenegradient
Radius--radiusrounded-lg0.5rem standardradius