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

Token	rem	px
0	0	0
05	0.125	2
1	0.25	4
1-alt	0.375	6
2	0.5	8
3	0.75	12
4	1	16
5	1.25	20
6	1.5	24
7	1.75	28
8	2	32
9	2.25	36
10	2.5	40
11	2.75	44
12	3	48
14	3.5	56
16	4	64
18	4.5	72
20	5	80
24	6	96
32	8	128

Shadows

Enhet	Verdi	Kopi
Xsmall	0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)
Small	0px 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)
Medium	0px 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)
Large	0px 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)
Xlarge	0px 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)
Focus	0 0 0 3px rgba(0, 52, 125, 1)
Focus inverted	0 0 0 3px rgba(153, 195, 255, 1)

Shapes

Enhet	Verdi	Kopi
Small	2px
Medium	4px
Large	8px
Xlarge	12px
Full	9999px
Radius 2	2px
Radius 4	4px
Radius 8	8px
Radius 12	12px
Radius full	9999px

Font

Token	Verdi	Demo
Family	'Source Sans 3', 'Source Sans Pro', Arial, sans-serif	Foreldrepenger
Weight regular	400	Foreldrepenger
Weight bold	600	Foreldrepenger
Size small	0.875rem	Aa
Size medium	1rem	Aa
Size large	1.125rem	Aa
Size xlarge	1.25rem	Aa
Size heading xsmall	1.125rem	Aa
Size heading small	1.25rem	Aa
Size heading medium	1.5rem	Aa
Size heading large	1.75rem	Aa
Size heading xlarge	2rem	Aa
Size heading 2xlarge	2.5rem	Aa
Line height medium	1.25rem	Hello World
Line height large	1.5rem	Hello World
Line height xlarge	1.75rem	Hello World
Line height heading xsmall	1.5rem	Hello World
Line height heading small	1.75rem	Hello World
Line height heading medium	2rem	Hello World
Line height heading large	2.25rem	Hello World
Line height heading xlarge	2.5rem	Hello World
Line height heading 2xlarge	3.25rem	Hello World

Breakpoints

Les mer om bruk av breakpoints.

Verdi	Media queries	Bruk
0		Mobile first
480px	@media (min-width: 480px)	Mobile first
479px	@media (max-width: 479px)	Desktop first
768px	@media (min-width: 768px)	Mobile first
767px	@media (max-width: 767px)	Desktop first
1024px	@media (min-width: 1024px)	Mobile first
1023px	@media (max-width: 1023px)	Desktop first
1280px	@media (min-width: 1280px)	Mobile first
1279px	@media (max-width: 1279px)	Desktop first
1440px	@media (min-width: 1440px)	Mobile first
1439px	@media (max-width: 1439px)	Desktop first

Z-Index

Enhet	Verdi	Kopi
Focus	10
Popover	1000
Tooltip	3000

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);
}

For brukere av vscode kan man bruke extension "Css Custom Properties" (Tock.vscode-css-custom-properties) for autocomplete av tokens. Må da legge til settings:

TSX

{
  "cssCustomProperties.files": ["@navikt/**/tokens.css"],
  "cssCustomProperties.languages": ["css"],
}

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.

Design tokens

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

Spacing

Shadows

Shapes

Font

Breakpoints

Z-Index

Kode

Installere pakken

Import

CSS-variabler

VSCode-extensions

Sass

Less

Js

Theming

Darkmode

Når kan jeg theme løsningen min?