Grunnleggende
Design tokens
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
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
- #FFFFFF
- Bg subtle
- #ECEEF0
Surface
- Surface default
- #FFFFFF
- Surface hover
- rgba(18, 43, 68, 0.08)
- Surface active
- rgba(17, 41, 64, 0.13)
- Surface selected
- #E6F0FF
- Surface subtle
- #F2F3F5
- Surface transparent
- rgba(255, 255, 255, 0)
- Surface backdrop
- rgba(2, 20, 49, 0.49)
- Surface inverted hover
- #42474F
- Surface inverted active
- #525962
- Surface inverted
- #23262A
Action
- Surface action subtle
- #E6F0FF
- Surface action subtle hover
- #CCE1FF
- Surface action
- #0067C5
- Surface action hover
- #0056B4
- Surface action active
- #00459C
- Surface action selected
- #00459C
- Surface action selected hover
- #00347D
Neutral
- Surface neutral subtle
- rgba(18, 43, 68, 0.08)
- Surface neutral subtle hover
- rgba(17, 41, 64, 0.13)
- Surface neutral moderate
- rgba(17, 41, 64, 0.13)
- Surface neutral
- #525962
- Surface neutral hover
- #42474F
- Surface neutral selected
- #23262A
- Surface neutral active
- #23262A
Success
- Surface success subtle
- #CCF1D6
- Surface success subtle hover
- #99DEAD
- Surface success moderate
- #99DEAD
- Surface success
- #06893A
- Surface success hover
- #007C2E
Info
- Surface info subtle
- #D8F9FF
- Surface info subtle hover
- #B5F1FF
- Surface info moderate
- #B5F1FF
- Surface info
- #66CBEC
Warning
- Surface warning subtle
- #FFECCC
- Surface warning subtle hover
- #FFD799
- Surface warning moderate
- #FFD799
- Surface warning
- #FF9100
Danger
- Surface danger subtle
- #FFC2C2
- Surface danger subtle hover
- #F68282
- Surface danger moderate
- #F68282
- Surface danger
- #C30000
- Surface danger hover
- #AD0000
- Surface danger active
- #8C0000
Alt
- Surface alt 1
- #8269A2
- Surface alt 1 subtle
- #E0D8E9
- Surface alt 1 moderate
- #C0B2D2
- Surface alt 2
- #C1CB33
- Surface alt 2 subtle
- #F9FCCC
- Surface alt 2 moderate
- #ECF399
- Surface alt 3
- #005B82
- Surface alt 3 subtle
- #CCE2F0
- Surface alt 3 moderate
- #99C4DD
- Surface alt 3 strong
- #003453
Text
- Text default
- #23262A
- Text subtle
- rgba(1, 11, 24, 0.68)
- Text visited
- #634689
- Text danger
- #C30000
- Text action
- #0067C5
- Text action hover
- #0056B4
- Text action selected
- #00459C
- Text action on action subtle
- #0056B4
- Text on warning
- #23262A
- Text on info
- #23262A
- Text on alt 2
- #23262A
- Text on inverted
- #FFFFFF
- Text on neutral
- #FFFFFF
- Text on action
- #FFFFFF
- Text on success
- #FFFFFF
- Text on danger
- #FFFFFF
- Text on alt 1
- #FFFFFF
- Text on alt 3
- #FFFFFF
Ikoner
- Icon default
- #23262A
- Icon subtle
- rgba(1, 11, 24, 0.68)
- Icon on neutral
- #FFFFFF
- Icon on inverted
- #FFFFFF
Action
- Icon action
- #0067C5
- Icon action selected
- #00459C
- Icon action hover
- #0056B4
- Icon action on action subtle
- #0056B4
- Icon on action
- #FFFFFF
Status
- Icon success
- #06893A
- Icon on success
- #FFFFFF
- Icon danger
- #C30000
- Icon on danger
- #FFFFFF
- Icon warning
- #C77300
- Icon on warning
- #23262A
- Icon info
- #236B7D
- Icon on info
- #23262A
Alt
- Icon alt 1
- #634689
- Icon alt 2
- #7F8900
- Icon alt 3
- #005B82
Border
- Border default
- rgba(2, 20, 49, 0.49)
- Border strong
- rgba(1, 11, 24, 0.68)
- Border divider
- rgba(7, 26, 54, 0.21)
- Border subtle
- rgba(7, 26, 54, 0.21)
- Border subtle hover
- rgba(5, 23, 51, 0.34)
- Border on inverted
- #E0E3E6
- Border on inverted subtle
- #525962
Action
- Border action
- #0067C5
- Border action hover
- #0056B4
- Border action selected
- #00459C
- Border selected
- #0067C5
Status
- Border success
- #06893A
- Border danger
- #C30000
- Border warning
- #C77300
- Border info
- #368DA8
Focus
- Border focus
- #00347D
- Border focus on inverted
- #99C3FF
Alt
- Border alt 1
- #8269A2
- Border alt 2
- #7F8900
- Border alt 3
- #005B82
Datavisualisering
- Data surface 1
- #3386E0
- Data surface 1 subtle
- #CCE1FF
- Data surface 2
- #005B82
- Data surface 2 subtle
- #99C4DD
- Data surface 3
- #C77300
- Data surface 3 subtle
- #FFC166
- Data surface 4
- #368DA8
- Data surface 4 subtle
- #66CBEC
- Data surface 5
- #2AA758
- Data surface 5 subtle
- #99DEAD
- Data surface 6
- #8269A2
- Data surface 6 subtle
- #C0B2D2
Border
Border-tokens for datavisualisering bør brukes sammen med tilhørende surface-subtle
.
- Data border 1
- #3386E0
- Data border 2
- #005B82
- Data border 3
- #C77300
- Data border 4
- #368DA8
- Data border 5
- #2AA758
- Data border 6
- #8269A2
Spacing
Token | rem | px | demo | Kopi |
---|---|---|---|---|
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
Enhet | Verdi | Kopi |
---|---|---|
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
Enhet | Verdi | Kopi |
---|---|---|
Small | 2px | |
Medium | 4px | |
Large | 8px | |
Xlarge | 12px | |
Full | 9999px | |
Radius 2 | 2px | |
Radius 4 | 4px | |
Radius 8 | 8px | |
Radius 12 | 12px | |
Radius full | 9999px |
Font
Token | Verdi | Demo | Kopi |
---|---|---|---|
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.
Enhet | Verdi | Media queries | Bruk | Kopi |
---|---|---|---|---|
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
Enhet | Verdi | Kopi |
---|---|---|
Focus | 10 | |
Popover | 1000 | |
Tooltip | 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
// yarnyarn add @navikt/ds-tokens
// npmnpm install @navikt/ds-tokens
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.
@import "@navikt/ds-tokens";
.example { color: var(--a-text-default);}
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
@import "@navikt/ds-tokens/dist/tokens";
.example { color: $a-text-default;}
Less
@import '../../node_modules/@navikt/ds-tokens/dist/tokens';
.example { color: @a-text-default;}
Js
import { ATextDefault } from '@navikt/ds-tokens/dist/tokens';
const StyledWrapper = div` color: ${ATextDefault}; `
Theming
CSS-en til designsystemet er "themable", både på semantisk og komponentnivå.
[data-theme="ditt-temanavn"]{
// Semantisk nivå --a-surface-action: var(--a-purple-500); --a-text-action: var(--a-purple-500);
// Komponentnivå --ac-expansioncard-bg: var(--a-deepblue-100)}
<body data-theme="ditt-temanavn" />
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
.
// Alert--ac-alert-error-border: ;--ac-alert-error-bg: ;--ac-alert-warning-border: ;--ac-alert-warning-bg: ;--ac-alert-info-border: ;--ac-alert-info-bg: ;--ac-alert-success-border: ;--ac-alert-success-bg: ;
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.