Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Grunnleggende

Design tokens

StabilOppdatert 30. april 2025

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

Transparent
rgba(255, 255, 255, 0)
White
#FFFFFF
Nav red
#C30000

Gray

Gray 50
#F2F3F5
Gray 100
#ECEEF0
Gray 200
#E0E3E6
Gray 300
#CBCFD5
Gray 400
#AAB0BA
Gray 500
#838C9A
Gray 600
#676F7B
Gray 700
#525962
Gray 800
#42474F
Gray 900
#23262A

Grayalpha

Grayalpha 50
rgba(38, 55, 89, 0.06)
Grayalpha 100
rgba(18, 43, 68, 0.08)
Grayalpha 200
rgba(17, 41, 64, 0.13)
Grayalpha 300
rgba(7, 26, 54, 0.21)
Grayalpha 400
rgba(5, 23, 51, 0.34)
Grayalpha 500
rgba(2, 20, 49, 0.49)
Grayalpha 600
rgba(2, 15, 34, 0.6)
Grayalpha 700
rgba(1, 11, 24, 0.68)
Grayalpha 800
rgba(3, 11, 22, 0.75)
Grayalpha 900
rgba(2, 5, 9, 0.87)

Blue

Blue 50
#E6F0FF
Blue 100
#CCE1FF
Blue 200
#99C3FF
Blue 300
#66A5F4
Blue 400
#3386E0
Blue 500
#0067C5
Blue 600
#0056B4
Blue 700
#00459C
Blue 800
#00347D
Blue 900
#002252

Lightblue

Lightblue 50
#EBFCFF
Lightblue 100
#D8F9FF
Lightblue 200
#B5F1FF
Lightblue 300
#97E6FF
Lightblue 400
#7CDAF8
Lightblue 500
#66CBEC
Lightblue 600
#4CADCD
Lightblue 700
#368DA8
Lightblue 800
#236B7D
Lightblue 900
#134852

Green

Green 50
#F3FCF5
Green 100
#CCF1D6
Green 200
#99DEAD
Green 300
#66C786
Green 400
#2AA758
Green 500
#06893A
Green 600
#007C2E
Green 700
#006A23
Green 800
#005519
Green 900
#003B0F

Orange

Orange 50
#FFF9F0
Orange 100
#FFECCC
Orange 200
#FFD799
Orange 300
#FFC166
Orange 400
#FFAA33
Orange 500
#FF9100
Orange 600
#C77300
Orange 700
#A86400
Orange 800
#7D4C00
Orange 900
#523300

Red

Red 50
#FFE6E6
Red 100
#FFC2C2
Red 200
#F68282
Red 300
#F25C5C
Red 400
#DE2E2E
Red 500
#C30000
Red 600
#AD0000
Red 700
#8C0000
Red 800
#5C0000
Red 900
#260000

Deepblue

Deepblue 50
#E6F1F8
Deepblue 100
#CCE2F0
Deepblue 200
#99C4DD
Deepblue 300
#66A3C4
Deepblue 400
#3380A5
Deepblue 500
#005B82
Deepblue 600
#005077
Deepblue 700
#004367
Deepblue 800
#003453
Deepblue 900
#00243A

Purple

Purple 50
#EFECF4
Purple 100
#E0D8E9
Purple 200
#C0B2D2
Purple 300
#A18DBB
Purple 400
#8269A2
Purple 500
#634689
Purple 600
#523874
Purple 700
#412B5D
Purple 800
#301F46
Purple 900
#1F142F

Limegreen

Limegreen 50
#FDFFE6
Limegreen 100
#F9FCCC
Limegreen 200
#ECF399
Limegreen 300
#D9E366
Limegreen 400
#C1CB33
Limegreen 500
#A2AD00
Limegreen 600
#939E00
Limegreen 700
#7F8900
Limegreen 800
#666E00
Limegreen 900
#474E00

Semantiske farger

Background

Bg default
#FFFFFF
Bg subtle
#ECEEF0

Surface

Surface default
#FFFFFF
Surface hover
rgba(18, 43, 68, 0.08)
Surface active
rgba(17, 41, 64, 0.13)
Surface selected
#E6F0FF
Surface subtle
#F2F3F5
Surface transparent
rgba(255, 255, 255, 0)
Surface backdrop
rgba(2, 20, 49, 0.49)
Surface inverted hover
#42474F
Surface inverted active
#525962
Surface inverted
#23262A

Action

Surface action subtle
#E6F0FF
Surface action subtle hover
#CCE1FF
Surface action
#0067C5
Surface action hover
#0056B4
Surface action active
#00459C
Surface action selected
#00459C
Surface action selected hover
#00347D

Neutral

Surface neutral subtle
rgba(18, 43, 68, 0.08)
Surface neutral subtle hover
rgba(17, 41, 64, 0.13)
Surface neutral moderate
rgba(17, 41, 64, 0.13)
Surface neutral
#525962
Surface neutral hover
#42474F
Surface neutral selected
#23262A
Surface neutral active
#23262A

Success

Surface success subtle
#CCF1D6
Surface success subtle hover
#99DEAD
Surface success moderate
#99DEAD
Surface success
#06893A
Surface success hover
#007C2E

Info

Surface info subtle
#D8F9FF
Surface info subtle hover
#B5F1FF
Surface info moderate
#B5F1FF
Surface info
#66CBEC

Warning

Surface warning subtle
#FFECCC
Surface warning subtle hover
#FFD799
Surface warning moderate
#FFD799
Surface warning
#FF9100

Danger

Surface danger subtle
#FFC2C2
Surface danger subtle hover
#F68282
Surface danger moderate
#F68282
Surface danger
#C30000
Surface danger hover
#AD0000
Surface danger active
#8C0000

Alt

Surface alt 1
#8269A2
Surface alt 1 subtle
#E0D8E9
Surface alt 1 moderate
#C0B2D2
Surface alt 2
#C1CB33
Surface alt 2 subtle
#F9FCCC
Surface alt 2 moderate
#ECF399
Surface alt 3
#005B82
Surface alt 3 subtle
#CCE2F0
Surface alt 3 moderate
#99C4DD
Surface alt 3 strong
#003453

Text

Text default
#23262A
Text subtle
rgba(1, 11, 24, 0.68)
Text visited
#634689
Text danger
#C30000
Text action
#0067C5
Text action hover
#0056B4
Text action selected
#00459C
Text action on action subtle
#0056B4
Text on warning
#23262A
Text on info
#23262A
Text on alt 2
#23262A
Text on inverted
#FFFFFF
Text on neutral
#FFFFFF
Text on action
#FFFFFF
Text on success
#FFFFFF
Text on danger
#FFFFFF
Text on alt 1
#FFFFFF
Text on alt 3
#FFFFFF

Ikoner

Icon default
#23262A
Icon subtle
rgba(1, 11, 24, 0.68)
Icon on neutral
#FFFFFF
Icon on inverted
#FFFFFF

Action

Icon action
#0067C5
Icon action selected
#00459C
Icon action hover
#0056B4
Icon action on action subtle
#0056B4
Icon on action
#FFFFFF

Status

Icon success
#06893A
Icon on success
#FFFFFF
Icon danger
#C30000
Icon on danger
#FFFFFF
Icon warning
#C77300
Icon on warning
#23262A
Icon info
#236B7D
Icon on info
#23262A

Alt

Icon alt 1
#634689
Icon alt 2
#7F8900
Icon alt 3
#005B82

Border

Border default
rgba(2, 20, 49, 0.49)
Border strong
rgba(1, 11, 24, 0.68)
Border divider
rgba(7, 26, 54, 0.21)
Border subtle
rgba(7, 26, 54, 0.21)
Border subtle hover
rgba(5, 23, 51, 0.34)
Border on inverted
#E0E3E6
Border on inverted subtle
#525962

Action

Border action
#0067C5
Border action hover
#0056B4
Border action selected
#00459C
Border selected
#0067C5

Status

Border success
#06893A
Border danger
#C30000
Border warning
#C77300
Border info
#368DA8

Focus

Border focus
#00347D
Border focus on inverted
#99C3FF

Alt

Border alt 1
#8269A2
Border alt 2
#7F8900
Border alt 3
#005B82

Datavisualisering

Data surface 1
#3386E0
Data surface 1 subtle
#CCE1FF
Data surface 2
#005B82
Data surface 2 subtle
#99C4DD
Data surface 3
#C77300
Data surface 3 subtle
#FFC166
Data surface 4
#368DA8
Data surface 4 subtle
#66CBEC
Data surface 5
#2AA758
Data surface 5 subtle
#99DEAD
Data surface 6
#8269A2
Data surface 6 subtle
#C0B2D2

Border

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

Data border 1
#3386E0
Data border 2
#005B82
Data border 3
#C77300
Data border 4
#368DA8
Data border 5
#2AA758
Data border 6
#8269A2

Spacing

TokenrempxdemoKopi
000
050.1252
10.254
1-alt0.3756
20.58
30.7512
4116
51.2520
61.524
71.7528
8232
92.2536
102.540
112.7544
12348
143.556
16464
184.572
20580
24696
328128

Shadows

EnhetVerdiKopi
Xsmall0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)
Small0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18)
Medium0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15)
Large0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12)
Xlarge0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)
Focus0 0 0 3px rgba(0, 52, 125, 1)
Focus inverted0 0 0 3px rgba(153, 195, 255, 1)

Shapes

EnhetVerdiKopi
Small2px
Medium4px
Large8px
Xlarge12px
Full9999px
Radius 22px
Radius 44px
Radius 88px
Radius 1212px
Radius full9999px

Font

TokenVerdiDemoKopi
Family'Source Sans 3', 'Source Sans Pro', Arial, sans-serifForeldrepenger
Weight regular400Foreldrepenger
Weight bold600Foreldrepenger
Size small0.875remAa
Size medium1remAa
Size large1.125remAa
Size xlarge1.25remAa
Size heading xsmall1.125remAa
Size heading small1.25remAa
Size heading medium1.5remAa
Size heading large1.75remAa
Size heading xlarge2remAa
Size heading 2xlarge2.5remAa
Line height medium1.25remHello
World
Line height large1.5remHello
World
Line height xlarge1.75remHello
World
Line height heading xsmall1.5remHello
World
Line height heading small1.75remHello
World
Line height heading medium2remHello
World
Line height heading large2.25remHello
World
Line height heading xlarge2.5remHello
World
Line height heading 2xlarge3.25remHello
World

Breakpoints

Les mer om bruk av breakpoints.

EnhetVerdiMedia queriesBrukKopi
Mobile small0Mobile first
Mobile regular480px@media (min-width: 480px)Mobile first
Mobile regular479px@media (max-width: 479px)Desktop first
Tablet768px@media (min-width: 768px)Mobile first
Tablet767px@media (max-width: 767px)Desktop first
Laptop1024px@media (min-width: 1024px)Mobile first
Laptop1023px@media (max-width: 1023px)Desktop first
Desktop1280px@media (min-width: 1280px)Mobile first
Desktop1279px@media (max-width: 1279px)Desktop first
Desktop1440px@media (min-width: 1440px)Mobile first
Desktop1439px@media (max-width: 1439px)Desktop first

Z-Index

EnhetVerdiKopi
Focus10
Popover1000
Tooltip3000

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.

Tips

I de fleste tilfeller trenger du ikke å laste ned selve token-pakken, da @navikt/ds-css allerede tilbyr alle tokens som CSS-variabler. Dette formatet kan brukes med Sass, less eller styled-components da det er en del av CSS-spesifikasjonen.

Installere pakken

TERMINAL
// yarn
yarn add @navikt/ds-tokens
// npm
npm install @navikt/ds-tokens

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.

CSS
@import "@navikt/ds-tokens";
.example {
color: var(--a-text-default);
}

VSCode-extensions

Tips

Har du noen andre foretrukne måter å konsumere tokens på? Da vil vi gjerne høre mer om dette! Send oss en melding på #Aksel-designsystem eller direktemelding.

Sass

SCSS
@import "@navikt/ds-tokens/dist/tokens";
.example {
color: $a-text-default;
}

Less

LESS
@import '../../node_modules/@navikt/ds-tokens/dist/tokens';
.example {
color: @a-text-default;
}

Js

TSX
import { ATextDefault } from '@navikt/ds-tokens/dist/tokens';
const StyledWrapper = div`
color: ${ATextDefault};
`

Theming

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

CSS
[data-theme="ditt-temanavn"]{
// Semantisk nivå
--a-surface-action: var(--a-purple-500);
--a-text-action: var(--a-purple-500);
// Komponentnivå
--ac-expansioncard-bg: var(--a-deepblue-100)
}
<body data-theme="ditt-temanavn" />

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.

CSS
// Alert
--ac-alert-error-border: ;
--ac-alert-error-bg: ;
--ac-alert-warning-border: ;
--ac-alert-warning-bg: ;
--ac-alert-info-border: ;
--ac-alert-info-bg: ;
--ac-alert-success-border: ;
--ac-alert-success-bg: ;

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 forholder seg til de generelle designvalgene som allerede er gjort i NAV. Untak kan f.eks være:

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

Tips

Finnes det ikke en token for endringen du ønsker å gjøre? Opprett et issue på github.