Hopp til hovedinnhold

Introduksjon

Designsystemet inneholder grunnleggende designelementer, mønstre, god praksis og kodede komponenter som gir verdi å dele på tvers av offentlig sektor.

Om designsystemet

Hva er Designsystemet, hvorfor trenger vi det, hvordan gjør vi det og hvem er med?

Verdier

Verdier vi ønsker at designsystemet skal bygges på

Grunnleggende designelementer

Stilene i designsystemet er grunnleggende designelementer som brukes i komponentene. De finnes i flere sett for ulike identiteter og ulike behov og situasjoner. For eksempel har vi et eget sett for kompakt visning, som kan være hensiktsmessig å bruke i verktøy eller admingrensesnitt.

Design tokens

Design tokens er gjenbrukbare verdier som fungerer som et bindeledd mellom alle flater.

Fargesystem

Fargesystemet består av globale farger og et semantisk nivå som beskriver hva fargen skal brukes til.

Avstander

Settet med avstander som er definert i tokens sikrer konsistens på tvers av grensesnitt.

Typografi

For å presentere tekst på korrekt måte, bruker vi noen utvalgte stiler og komponenter som er bygget opp med ulike kombinasjoner av størrelse, fontvekt og linjehøyde.

Skygger

Skygger kan hjelpe svaksynte til å identifisere komponenter og bør brukes konsistent da de uttrykker at noe ligger over noe annet i løsningen.

Ikoner

Nav har laget et solid sett med ikoner (800+) som vi anbefaler å bruke og bidra til å videreutvikle

For designere

Ressurser og veiledning relevant for designere

Kom i gang med designsystemet i Figma

Lær hvordan du bruker komponentbibliotek og styles i Figma.

Bidra med design

Slik kan du være med å designe komponenter i designsystemet

For utviklere

Ressurser og veiledning relevant for utviklere

Kom i gang som utvikler

Lær hvordan du kommer i gang med designsystemet som utvikler

Komposisjon

Informasjonen og bruk av asChild til å løse komposisjon.