Globale farger
- rgba(255, 255, 255, 0)
- #FFFFFF
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
Background
Surface
Action
Neutral
Success
Info
Warning
Danger
Alt
Text
Ikoner
Action
Status
Alt
Border
Action
Status
Focus
Alt
Datavisualisering
Border
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
Enhet | Verdi | Bruk | |
---|---|---|---|
0 | Mobile first | ||
480px | Mobile first | ||
479px | Desktop first | ||
768px | Mobile first | ||
767px | Desktop first | ||
1024px | Mobile first | ||
1023px | Desktop first | ||
1280px | Mobile first | ||
1279px | Desktop first |
Z-Index
- 10
- 1000
- 2000
- 3000
Kode
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
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
Når bør jeg theme løsningen min?
- 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 så fikser vi det så raskt som mulig!