Design tokens

Oppdatert 26. august 2024Stabil

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: White

Bg subtle: Gray 100

Surface

Default: White

Hover: Grayalpha 100

Active: Grayalpha 200

Selected: Blue 50

Subtle: Gray 50

Transparent: Transparent

Backdrop: Grayalpha 500

Inverted hover: Gray 800

Inverted active: Gray 700

Inverted: Gray 900

Action

Action subtle: Blue 50

Action subtle hover: Blue 100

Action: Blue 500

Action hover: Blue 600

Action active: Blue 700

Action selected: Blue 700

Action selected hover: Blue 800

Neutral

Neutral subtle: Grayalpha 100

Neutral subtle hover: Grayalpha 200

Neutral moderate: Grayalpha 200

Neutral: Gray 700

Neutral hover: Gray 800

Neutral selected: Gray 900

Neutral active: Gray 900

Success

Success subtle: Green 100

Success subtle hover: Green 200

Success moderate: Green 200

Success: Green 500

Success hover: Green 600

Info

Info subtle: Lightblue 100

Info subtle hover: Lightblue 200

Info moderate: Lightblue 200

Info: Lightblue 500

Warning

Warning subtle: Orange 100

Warning subtle hover: Orange 200

Warning moderate: Orange 200

Warning: Orange 500

Danger

Danger subtle: Red 100

Danger subtle hover: Red 200

Danger moderate: Red 200

Danger: Red 500

Danger hover: Red 600

Danger active: Red 700

Alt

Alt 1: Purple 400

Alt 1 subtle: Purple 100

Alt 1 moderate: Purple 200

Alt 2: Limegreen 400

Alt 2 subtle: Limegreen 100

Alt 2 moderate: Limegreen 200

Alt 3: Deepblue 500

Alt 3 subtle: Deepblue 100

Alt 3 moderate: Deepblue 200

Alt 3 strong: Deepblue 800

Text

Default: Gray 900

Subtle: Grayalpha 700

Visited: Purple 500

Danger: Red 500

Action: Blue 500

Action hover: Blue 600

Action selected: Blue 700

Action on action subtle: Blue 600

On warning: Gray 900

On info: Gray 900

On alt 2: Gray 900

On inverted: White

On neutral: White

On action: White

On success: White

On danger: White

On alt 1: White

On alt 3: White

Ikoner

Default: Gray 900

Subtle: Grayalpha 700

On neutral: White

On inverted: White

Action

Action: Blue 500

Action selected: Blue 700

Action hover: Blue 600

Action on action subtle: Blue 600

On action: White

Status

Success: Green 500

On success: White

Danger: Red 500

On danger: White

Warning: Orange 600

On warning: Gray 900

Info: Lightblue 800

On info: Gray 900

Alt

Alt 1: Purple 500

Alt 2: Limegreen 700

Alt 3: Deepblue 500

Border

Default: Grayalpha 500

Strong: Grayalpha 700

Divider: Grayalpha 300

Subtle: Grayalpha 300

Subtle hover: Grayalpha 400

On inverted: Gray 200

On inverted subtle: Gray 700

Action

Action: Blue 500

Action hover: Blue 600

Action selected: Blue 700

Selected: Blue 500

Status

Success: Green 500

Danger: Red 500

Warning: Orange 600

Info: Lightblue 700

Focus

Focus: Blue 800

Focus on inverted: Blue 200

Alt

Alt 1: Purple 400

Alt 2: Limegreen 700

Alt 3: Deepblue 500

Datavisualisering

Data 1: Blue 400

Data 1 subtle: Blue 100

Data 2: Deepblue 500

Data 2 subtle: Deepblue 200

Data 3: Orange 600

Data 3 subtle: Orange 300

Data 4: Lightblue 700

Data 4 subtle: Lightblue 500

Data 5: Green 400

Data 5 subtle: Green 200

Data 6: Purple 400

Data 6 subtle: Purple 200

Border

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

Data border 1: Blue 400

Data border 2: Deepblue 500

Data border 3: Orange 600

Data border 4: Lightblue 700

Data border 5: Green 400

Data border 6: Purple 400

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

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

Small: 2px

Medium: 4px

Large: 8px

Xlarge: 12px

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

Focus: 10

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

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.

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

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 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?