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

: rgba(255, 255, 255, 0)

: #FFFFFF

: #C30000

Gray

: #F7F7F7

: #F1F1F1

: #E5E5E5

: #CFCFCF

: #B0B0B0

: #8F8F8F

: #707070

: #595959

: #404040

: #262626

Grayalpha

: rgba(0, 0, 0, 0.03)

: rgba(0, 0, 0, 0.05)

: rgba(0, 0, 0, 0.1)

: rgba(0, 0, 0, 0.19)

: rgba(0, 0, 0, 0.31)

: rgba(0, 0, 0, 0.44)

: rgba(0, 0, 0, 0.56)

: rgba(0, 0, 0, 0.65)

: rgba(0, 0, 0, 0.75)

: rgba(0, 0, 0, 0.85)

Blue

: #E6F0FF

: #CCE1FF

: #99C3FF

: #66A5F4

: #3386E0

: #0067C5

: #0056B4

: #00459C

: #00347D

: #002252

Lightblue

: #EBFCFF

: #D8F9FF

: #B5F1FF

: #97E6FF

: #7CDAF8

: #66CBEC

: #4CADCD

: #368DA8

: #236B7D

: #134852

Green

: #F3FCF5

: #CCF1D6

: #99DEAD

: #66C786

: #33AA5F

: #06893A

: #007C2E

: #006A23

: #005519

: #003B0F

Orange

: #FFF9F0

: #FFECCC

: #FFD799

: #FFC166

: #FFAA33

: #FF9100

: #C77300

: #A86400

: #7D4C00

: #523300

Red

: #FFE6E6

: #FFC2C2

: #F68282

: #F25C5C

: #DE2E2E

: #C30000

: #AD0000

: #8C0000

: #5C0000

: #260000

Deepblue

: #E6F1F8

: #CCE2F0

: #99C4DD

: #66A3C4

: #3380A5

: #005B82

: #005077

: #004367

: #003453

: #00243A

Purple

: #EFECF4

: #E0D8E9

: #C0B2D2

: #A18DBB

: #8269A2

: #634689

: #523874

: #412B5D

: #301F46

: #1F142F

Limegreen

: #FDFFE6

: #F9FCCC

: #ECF399

: #D9E366

: #C1CB33

: #A2AD00

: #939E00

: #7F8900

: #666E00

: #474E00

Semantiske farger

Border

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

: Blue 400

: Deepblue 500

: Orange 600

: Lightblue 700

: Green 400

: Purple 400

Spacing

Token	rem	px
0	0	0
05	0.125	2
1	0.25	4
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

: 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

: 2px

: 4px

: 8px

: 12px

: 9999px

Font

Token	Verdi	Demo
Family	"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

Z-Index

: 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`.

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!

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

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

Var denne artikkelen til hjelp?