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
Gray
- #F2F3F5
- #ECEEF0
- #E0E3E6
- #CBCFD5
- #AAB0BA
- #838C9A
- #676F7B
- #525962
- #42474F
- #23262A
Grayalpha
- rgba(38, 55, 89, 0.06)
- rgba(18, 43, 68, 0.08)
- rgba(17, 41, 64, 0.13)
- rgba(7, 26, 54, 0.21)
- rgba(5, 23, 51, 0.34)
- rgba(2, 20, 49, 0.49)
- rgba(2, 15, 34, 0.6)
- rgba(1, 11, 24, 0.68)
- rgba(3, 11, 22, 0.75)
- rgba(2, 5, 9, 0.87)
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
Border-tokens for datavisualisering bør brukes sammen med tilhørende surface-subtle.
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
- 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)
- 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)
- 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)
- 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)
- 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)
- 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.
| 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
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.
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.
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 burde forholde seg til de generelle designvalgene som allerede er gjort i NAV. Untakt kan f.eks være:
- Arbeidsplassen.nav.no
- Etterlevelse.intern.nav.no
- Data.nav.no
- Teamkatalog
- Aksel.nav.no
Ta også en titt på hvordan Arbeidsplassen.nav.no har tatt i bruk theming-konseptet for sine nye sider
Finnes det ikke en token for endringen du ønsker å gjøre? Opprett et issue på github.