Design tokens er små byggeklosser bestående av designattributter som farger, typografi, størrelser, avstander, former osv. De er ikke begrenset til en spesifikk teknologi eller et designverktøy, men er fleksible variabler som kan benyttes av alle. Ved å bruke design tokens sørger vi for at både designere og utviklere arbeider etter de samme reglene og retningslinjene. Dette forenkler vedlikeholdet av designet og sikrer en helhetlig visuell fremstilling på tvers av produkter.

Globale farger

Gray

Grayalpha

Blue

Lightblue

Green

Orange

Red

Deepblue

Purple

Limegreen

Semantiske farger

Background

Surface

Action

Neutral

Success

Info

Warning

Danger

Alt

Text

Ikoner

Action

Status

Alt

Border

Action

Status

Focus

Alt

Datavisualisering

Border

Border-tokens for datavisualisering bør brukes sammen med tilhørende `surface-subtle`.

Spacing

Shadows

Shapes

Font

Breakpoints

Les mer om bruk av breakpoints.

Z-Index

Kode

Vi tilbyr tokens i format CSS, Sass, Less og JS.

Vi bruker tokens internt i komponentene våre og anbefaler å bruke tokens istedenfor "hardkodede" verdier for mer konsistente grensesnitt på tvers av NAV. Kommer det fremtidige endringer i farger trenger du da bare å oppdatere versjon, så fikser vi resten.

Installere pakken

Import

CSS-variabler

Tokens i formatet CSS custom properties er den foretrukne måten å bruke tokens på. Bruker du `@navikt/ds-css` trenger du ikke importere denne pakken, da disse følger med.

Sass

Less

Js

Theming

CSS-en til designsystemet er "themable", både på semantisk og komponentnivå.

Tanken er at man oftest ønsker å overskrive de semantiske fargene, men vil alltids være noen tilfeller dette ikke fungerer for komponentene våre. Derfor har komponentene våre en samling med komponent spesifikke tokens som kan overstyres. Disse er alltid prefikset med `--ac`.

Alle tokens prefikset med `--ac__` er "interne" tokens og frarådes brukt da dette vil kunne brekke styling og i fremtidige oppdateringen.

Darkmode

Noen komponenter har i dag implementert en eksperimentell versjon av darkmode. Dette er for å lettere kunne brukes i `InternalHeader`-komponenten. Denne implementasjonen vil oppdateres på sikt og vi fraråder aktiv bruk av den i egen løsning frem til da.

Men vi oppfordrer interne løsninger til å eksperimentere med `darkmode/høykontrast` og komme med innspill.

Når kan jeg theme løsningen min?

Løsninger for eksterne flater burde forholde seg til de generelle designvalgene som allerede er gjort i NAV. Untakt kan f.eks være:

• Arbeidsplassen.nav.no
• Etterlevelse.intern.nav.no
• Data.nav.no
• Teamkatalog
• Aksel.nav.no

Ta også en titt på hvordan Arbeidsplassen.nav.no har tatt i bruk theming-konseptet for sine nye sider