Aksel
Grunnleggende / Styling

Design tokens

StabilOPPDATERT 20. desember 2022

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

Token navnVerdi
rgba(255, 255, 255, 0)#ffffff00
rgba(255, 255, 255, 1)#ffffff
rgba(195, 0, 0, 1)#c30000

Gray

Token navnVerdi
rgba(247, 247, 247, 1)#f7f7f7
rgba(241, 241, 241, 1)#f1f1f1
rgba(229, 229, 229, 1)#e5e5e5
rgba(207, 207, 207, 1)#cfcfcf
rgba(176, 176, 176, 1)#b0b0b0
rgba(143, 143, 143, 1)#8f8f8f
rgba(112, 112, 112, 1)#707070
rgba(89, 89, 89, 1)#595959
rgba(64, 64, 64, 1)#404040
rgba(38, 38, 38, 1)#262626

Grayalpha

Token navnVerdi
rgba(0, 0, 0, 0.03)#00000008
rgba(0, 0, 0, 0.05)#0000000d
rgba(0, 0, 0, 0.1)#0000001a
rgba(0, 0, 0, 0.19)#00000030
rgba(0, 0, 0, 0.31)#0000004f
rgba(0, 0, 0, 0.44)#00000070
rgba(0, 0, 0, 0.56)#0000008f
rgba(0, 0, 0, 0.65)#000000a6
rgba(0, 0, 0, 0.75)#000000bf
rgba(0, 0, 0, 0.85)#000000d9

Blue

Token navnVerdi
rgba(230, 240, 255, 1)#e6f0ff
rgba(204, 225, 255, 1)#cce1ff
rgba(153, 195, 255, 1)#99c3ff
rgba(102, 165, 244, 1)#66a5f4
rgba(51, 134, 224, 1)#3386e0
rgba(0, 103, 197, 1)#0067c5
rgba(0, 86, 180, 1)#0056b4
rgba(0, 69, 156, 1)#00459c
rgba(0, 52, 125, 1)#00347d
rgba(0, 34, 82, 1)#002252

Lightblue

Token navnVerdi
rgba(235, 252, 255, 1)#ebfcff
rgba(216, 249, 255, 1)#d8f9ff
rgba(181, 241, 255, 1)#b5f1ff
rgba(151, 230, 255, 1)#97e6ff
rgba(124, 218, 248, 1)#7cdaf8
rgba(102, 203, 236, 1)#66cbec
rgba(76, 173, 205, 1)#4cadcd
rgba(54, 141, 168, 1)#368da8
rgba(35, 107, 125, 1)#236b7d
rgba(19, 72, 82, 1)#134852

Green

Token navnVerdi
rgba(243, 252, 245, 1)#f3fcf5
rgba(204, 241, 214, 1)#ccf1d6
rgba(153, 222, 173, 1)#99dead
rgba(102, 199, 134, 1)#66c786
rgba(51, 170, 95, 1)#33aa5f
rgba(6, 137, 58, 1)#06893a
rgba(0, 124, 46, 1)#007c2e
rgba(0, 106, 35, 1)#006a23
rgba(0, 85, 25, 1)#005519
rgba(0, 59, 15, 1)#003b0f

Orange

Token navnVerdi
rgba(255, 249, 240, 1)#fff9f0
rgba(255, 236, 204, 1)#ffeccc
rgba(255, 215, 153, 1)#ffd799
rgba(255, 193, 102, 1)#ffc166
rgba(255, 170, 51, 1)#ffaa33
rgba(255, 145, 0, 1)#ff9100
rgba(199, 115, 0, 1)#c77300
rgba(168, 100, 0, 1)#a86400
rgba(125, 76, 0, 1)#7d4c00
rgba(82, 51, 0, 1)#523300

Red

Token navnVerdi
rgba(255, 230, 230, 1)#ffe6e6
rgba(255, 194, 194, 1)#ffc2c2
rgba(246, 130, 130, 1)#f68282
rgba(242, 92, 92, 1)#f25c5c
rgba(222, 46, 46, 1)#de2e2e
rgba(195, 0, 0, 1)#c30000
rgba(173, 0, 0, 1)#ad0000
rgba(140, 0, 0, 1)#8c0000
rgba(92, 0, 0, 1)#5c0000
rgba(38, 0, 0, 1)#260000

Deepblue

Token navnVerdi
rgba(230, 241, 248, 1)#e6f1f8
rgba(204, 226, 240, 1)#cce2f0
rgba(153, 196, 221, 1)#99c4dd
rgba(102, 163, 196, 1)#66a3c4
rgba(51, 128, 165, 1)#3380a5
rgba(0, 91, 130, 1)#005b82
rgba(0, 80, 119, 1)#005077
rgba(0, 67, 103, 1)#004367
rgba(0, 52, 83, 1)#003453
rgba(0, 36, 58, 1)#00243a

Purple

Token navnVerdi
rgba(239, 236, 244, 1)#efecf4
rgba(224, 216, 233, 1)#e0d8e9
rgba(192, 178, 210, 1)#c0b2d2
rgba(161, 141, 187, 1)#a18dbb
rgba(130, 105, 162, 1)#8269a2
rgba(99, 70, 137, 1)#634689
rgba(82, 56, 116, 1)#523874
rgba(65, 43, 93, 1)#412b5d
rgba(48, 31, 70, 1)#301f46
rgba(31, 20, 47, 1)#1f142f

Limegreen

Token navnVerdi
rgba(253, 255, 230, 1)#fdffe6
rgba(249, 252, 204, 1)#f9fccc
rgba(236, 243, 153, 1)#ecf399
rgba(217, 227, 102, 1)#d9e366
rgba(193, 203, 51, 1)#c1cb33
rgba(162, 173, 0, 1)#a2ad00
rgba(147, 158, 0, 1)#939e00
rgba(127, 137, 0, 1)#7f8900
rgba(102, 110, 0, 1)#666e00
rgba(71, 78, 0, 1)#474e00

Semantiske farger

Background

Token navnVerdiBeskrivelse
rgba(255, 255, 255, 1)#ffffff
rgba(241, 241, 241, 1)#f1f1f1

Surface

Token navnVerdi
rgba(255, 255, 255, 1)#ffffff
rgba(0, 0, 0, 0.05)#0000000d
rgba(0, 0, 0, 0.1)#0000001a
rgba(230, 240, 255, 1)#e6f0ff
rgba(247, 247, 247, 1)#f7f7f7
rgba(255, 255, 255, 0)#ffffff00
rgba(0, 0, 0, 0.65)#000000a6
rgba(64, 64, 64, 1)#404040
rgba(89, 89, 89, 1)#595959
rgba(38, 38, 38, 1)#262626
rgba(230, 240, 255, 1)#e6f0ff
rgba(204, 225, 255, 1)#cce1ff
rgba(0, 103, 197, 1)#0067c5
rgba(0, 86, 180, 1)#0056b4
rgba(0, 91, 130, 1)#005b82
rgba(0, 91, 130, 1)#005b82
rgba(0, 80, 119, 1)#005077
rgba(0, 0, 0, 0.05)#0000000d
rgba(0, 0, 0, 0.1)#0000001a
rgba(0, 0, 0, 0.1)#0000001a
rgba(89, 89, 89, 1)#595959
rgba(64, 64, 64, 1)#404040
rgba(38, 38, 38, 1)#262626
rgba(38, 38, 38, 1)#262626
rgba(204, 241, 214, 1)#ccf1d6
rgba(153, 222, 173, 1)#99dead
rgba(153, 222, 173, 1)#99dead
rgba(6, 137, 58, 1)#06893a
rgba(0, 124, 46, 1)#007c2e
rgba(255, 194, 194, 1)#ffc2c2
rgba(246, 130, 130, 1)#f68282
rgba(246, 130, 130, 1)#f68282
rgba(195, 0, 0, 1)#c30000
rgba(173, 0, 0, 1)#ad0000
rgba(140, 0, 0, 1)#8c0000
rgba(255, 236, 204, 1)#ffeccc
rgba(255, 215, 153, 1)#ffd799
rgba(255, 145, 0, 1)#ff9100
rgba(255, 215, 153, 1)#ffd799
rgba(216, 249, 255, 1)#d8f9ff
rgba(181, 241, 255, 1)#b5f1ff
rgba(181, 241, 255, 1)#b5f1ff
rgba(102, 203, 236, 1)#66cbec
rgba(130, 105, 162, 1)#8269a2
rgba(224, 216, 233, 1)#e0d8e9
rgba(192, 178, 210, 1)#c0b2d2
rgba(193, 203, 51, 1)#c1cb33
rgba(249, 252, 204, 1)#f9fccc
rgba(236, 243, 153, 1)#ecf399
rgba(0, 91, 130, 1)#005b82
rgba(204, 226, 240, 1)#cce2f0
rgba(153, 196, 221, 1)#99c4dd
rgba(0, 52, 83, 1)#003453

Text

Token navnVerdi
rgba(38, 38, 38, 1)#262626
rgba(0, 0, 0, 0.56)#0000008f
rgba(99, 70, 137, 1)#634689
rgba(195, 0, 0, 1)#c30000
rgba(0, 103, 197, 1)#0067c5
rgba(0, 91, 130, 1)#005b82
rgba(0, 86, 180, 1)#0056b4
rgba(255, 255, 255, 1)#ffffff
rgba(255, 255, 255, 1)#ffffff
rgba(255, 255, 255, 1)#ffffff
rgba(255, 255, 255, 1)#ffffff
rgba(255, 255, 255, 1)#ffffff
rgba(38, 38, 38, 1)#262626
rgba(38, 38, 38, 1)#262626
rgba(255, 255, 255, 1)#ffffff
rgba(38, 38, 38, 1)#262626
rgba(255, 255, 255, 1)#ffffff

Icon

Token navnVerdi
rgba(38, 38, 38, 1)#262626
rgba(112, 112, 112, 1)#707070
rgba(255, 255, 255, 1)#ffffff
rgba(255, 255, 255, 1)#ffffff
rgba(0, 103, 197, 1)#0067c5
rgba(0, 91, 130, 1)#005b82
rgba(0, 86, 180, 1)#0056b4
rgba(255, 255, 255, 1)#ffffff
rgba(6, 137, 58, 1)#06893a
rgba(255, 255, 255, 1)#ffffff
rgba(195, 0, 0, 1)#c30000
rgba(255, 255, 255, 1)#ffffff
rgba(199, 115, 0, 1)#c77300
rgba(38, 38, 38, 1)#262626
rgba(35, 107, 125, 1)#236b7d
rgba(38, 38, 38, 1)#262626
rgba(99, 70, 137, 1)#634689
rgba(127, 137, 0, 1)#7f8900
rgba(51, 128, 165, 1)#3380a5

Border

Token navnVerdi
rgba(0, 0, 0, 0.44)#00000070
rgba(0, 0, 0, 0.65)#000000a6
rgba(0, 0, 0, 0.19)#00000030
rgba(0, 0, 0, 0.1)#0000001a
rgba(0, 0, 0, 0.19)#00000030
rgba(0, 103, 197, 1)#0067c5
rgba(0, 91, 130, 1)#005b82
rgba(0, 103, 197, 1)#0067c5
rgba(6, 137, 58, 1)#06893a
rgba(195, 0, 0, 1)#c30000
rgba(199, 115, 0, 1)#c77300
rgba(54, 141, 168, 1)#368da8
rgba(229, 229, 229, 1)#e5e5e5
rgba(89, 89, 89, 1)#595959
rgba(0, 52, 125, 1)#00347d
rgba(153, 195, 255, 1)#99c3ff
rgba(130, 105, 162, 1)#8269a2
rgba(127, 137, 0, 1)#7f8900
rgba(0, 91, 130, 1)#005b82

Spacing

Token navnVerdi
0
0.125rem
0.25rem
0.5rem
0.75rem
1rem
1.25rem
1.5rem
1.75rem
2rem
2.25rem
2.5rem
2.75rem
3rem
3.5rem
4rem
4.5rem
5rem
6rem
8rem

Shadows

Token navnVerdi
0 1px 2px 0 rgba(0, 0, 0, 0.12)
0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)
0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)
0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)
0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)
0 0 0 3px rgba(0, 52, 125, 1)
0 0 0 3px rgba(153, 195, 255, 1)

Shapes

Token navnVerdi
2px
4px
8px
12px
9999px

Font

Token navnVerdi
"Source Sans Pro", Arial, sans-serif
600
400
3.25rem
2.5rem
2.25rem
2rem
1.75rem
1.5rem
1.75rem
1.5rem
1.25rem
2.5rem
2rem
1.75rem
1.5rem
1.25rem
1.125rem
1.25rem
1.125rem
1rem
0.875rem

Breakpoints

Les mer om bruk av breakpoints.

Token navnVerdiBeskrivelse
0
480px@media (min-width: 480px)
479px@media (max-width: 479px)
768px@media (min-width: 768px)
767px@media (max-width: 767px)
1024px@media (min-width: 1024px)
1023px@media (max-width: 1023px)
1280px@media (min-width: 1280px)
1279px@media (max-width: 1279px)

Z-Index

Token navnVerdi
10
1000
2000
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

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.

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

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.

Når bør jeg theme løsningen min?

Løsninger for eksterne flater burde for det meste forholde seg til de designvalgene som allerede er gjort for mer helhet. Sider som dette eksempelvis kan være relevant for er:

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

Men vi oppfordrer interne løsninger til å eksperimentere med darkmode/høykontrast da vi vet det er flere som ønsker seg muligheten til det.

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

Tips

Finnes det ikke en token for endringen du ønsker å gjøre? Opprett et issue på github så fikser vi det så raskt som mulig!

Var denne artikkelen til hjelp?