Globale farger
Token navn | Verdi | ||
---|---|---|---|
rgba(255, 255, 255, 0) | |||
rgba(255, 255, 255, 1) | |||
rgba(195, 0, 0, 1) |
Gray
Token navn | Verdi | ||
---|---|---|---|
rgba(247, 247, 247, 1) | |||
rgba(241, 241, 241, 1) | |||
rgba(229, 229, 229, 1) | |||
rgba(207, 207, 207, 1) | |||
rgba(176, 176, 176, 1) | |||
rgba(143, 143, 143, 1) | |||
rgba(112, 112, 112, 1) | |||
rgba(89, 89, 89, 1) | |||
rgba(64, 64, 64, 1) | |||
rgba(38, 38, 38, 1) |
Grayalpha
Token navn | Verdi | ||
---|---|---|---|
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
Token navn | Verdi | ||
---|---|---|---|
rgba(230, 240, 255, 1) | |||
rgba(204, 225, 255, 1) | |||
rgba(153, 195, 255, 1) | |||
rgba(102, 165, 244, 1) | |||
rgba(51, 134, 224, 1) | |||
rgba(0, 103, 197, 1) | |||
rgba(0, 86, 180, 1) | |||
rgba(0, 69, 156, 1) | |||
rgba(0, 52, 125, 1) | |||
rgba(0, 34, 82, 1) |
Lightblue
Token navn | Verdi | ||
---|---|---|---|
rgba(235, 252, 255, 1) | |||
rgba(216, 249, 255, 1) | |||
rgba(181, 241, 255, 1) | |||
rgba(151, 230, 255, 1) | |||
rgba(124, 218, 248, 1) | |||
rgba(102, 203, 236, 1) | |||
rgba(76, 173, 205, 1) | |||
rgba(54, 141, 168, 1) | |||
rgba(35, 107, 125, 1) | |||
rgba(19, 72, 82, 1) |
Green
Token navn | Verdi | ||
---|---|---|---|
rgba(243, 252, 245, 1) | |||
rgba(204, 241, 214, 1) | |||
rgba(153, 222, 173, 1) | |||
rgba(102, 199, 134, 1) | |||
rgba(51, 170, 95, 1) | |||
rgba(6, 137, 58, 1) | |||
rgba(0, 124, 46, 1) | |||
rgba(0, 106, 35, 1) | |||
rgba(0, 85, 25, 1) | |||
rgba(0, 59, 15, 1) |
Orange
Token navn | Verdi | ||
---|---|---|---|
rgba(255, 249, 240, 1) | |||
rgba(255, 236, 204, 1) | |||
rgba(255, 215, 153, 1) | |||
rgba(255, 193, 102, 1) | |||
rgba(255, 170, 51, 1) | |||
rgba(255, 145, 0, 1) | |||
rgba(212, 123, 0, 1) | |||
rgba(168, 100, 0, 1) | |||
rgba(125, 76, 0, 1) | |||
rgba(82, 51, 0, 1) |
Red
Token navn | Verdi | ||
---|---|---|---|
rgba(255, 230, 230, 1) | |||
rgba(255, 184, 184, 1) | |||
rgba(246, 130, 130, 1) | |||
rgba(242, 92, 92, 1) | |||
rgba(222, 46, 46, 1) | |||
rgba(195, 0, 0, 1) | |||
rgba(173, 0, 0, 1) | |||
rgba(140, 0, 0, 1) | |||
rgba(92, 0, 0, 1) | |||
rgba(38, 0, 0, 1) |
Deepblue
Token navn | Verdi | ||
---|---|---|---|
rgba(230, 241, 248, 1) | |||
rgba(204, 226, 240, 1) | |||
rgba(153, 196, 221, 1) | |||
rgba(102, 163, 196, 1) | |||
rgba(51, 128, 165, 1) | |||
rgba(0, 91, 130, 1) | |||
rgba(0, 80, 119, 1) | |||
rgba(0, 67, 103, 1) | |||
rgba(0, 52, 83, 1) | |||
rgba(0, 36, 58, 1) |
Purple
Token navn | Verdi | ||
---|---|---|---|
rgba(239, 236, 244, 1) | |||
rgba(224, 216, 233, 1) | |||
rgba(192, 178, 210, 1) | |||
rgba(161, 141, 187, 1) | |||
rgba(130, 105, 162, 1) | |||
rgba(99, 70, 137, 1) | |||
rgba(82, 56, 116, 1) | |||
rgba(65, 43, 93, 1) | |||
rgba(48, 31, 70, 1) | |||
rgba(31, 20, 47, 1) |
Limegreen
Token navn | Verdi | ||
---|---|---|---|
rgba(253, 255, 230, 1) | |||
rgba(249, 252, 204, 1) | |||
rgba(236, 243, 153, 1) | |||
rgba(217, 227, 102, 1) | |||
rgba(193, 203, 51, 1) | |||
rgba(162, 173, 0, 1) | |||
rgba(147, 158, 0, 1) | |||
rgba(127, 137, 0, 1) | |||
rgba(102, 110, 0, 1) | |||
rgba(71, 78, 0, 1) |
Semantiske farger
Background
Token navn | Verdi | Beskrivelse | |
---|---|---|---|
rgba(255, 255, 255, 1) | For bruk som bakgrunnsfarge på sidenivå, eks body | ||
rgba(241, 241, 241, 1) |
Surface
Token navn | Verdi | ||
---|---|---|---|
rgba(255, 255, 255, 1) | |||
rgba(0, 0, 0, 0.03) | |||
rgba(0, 0, 0, 0.05) | |||
rgba(230, 240, 255, 1) | |||
rgba(247, 247, 247, 1) | |||
rgba(255, 255, 255, 0) | |||
rgba(0, 0, 0, 0.65) | |||
rgba(64, 64, 64, 1) | |||
rgba(89, 89, 89, 1) | |||
rgba(38, 38, 38, 1) | |||
rgba(230, 240, 255, 1) | |||
rgba(204, 225, 255, 1) | |||
rgba(0, 103, 197, 1) | |||
rgba(0, 86, 180, 1) | |||
rgba(0, 91, 130, 1) | |||
rgba(0, 91, 130, 1) | |||
rgba(0, 80, 119, 1) | |||
rgba(0, 0, 0, 0.05) | |||
rgba(0, 0, 0, 0.1) | |||
rgba(112, 112, 112, 1) | |||
rgba(89, 89, 89, 1) | |||
rgba(89, 89, 89, 1) | |||
rgba(243, 252, 245, 1) | |||
rgba(204, 241, 214, 1) | |||
rgba(6, 137, 58, 1) | |||
rgba(0, 124, 46, 1) | |||
rgba(255, 230, 230, 1) | |||
rgba(255, 184, 184, 1) | |||
rgba(195, 0, 0, 1) | |||
rgba(173, 0, 0, 1) | |||
rgba(140, 0, 0, 1) | |||
rgba(255, 249, 240, 1) | |||
rgba(255, 145, 0, 1) | |||
rgba(255, 236, 204, 1) | |||
rgba(235, 252, 255, 1) | |||
rgba(216, 249, 255, 1) | |||
rgba(102, 203, 236, 1) | |||
rgba(130, 105, 162, 1) | |||
rgba(239, 236, 244, 1) | |||
rgba(193, 203, 51, 1) | |||
rgba(253, 255, 230, 1) | |||
rgba(0, 91, 130, 1) | |||
rgba(230, 241, 248, 1) | |||
rgba(0, 52, 83, 1) |
Text
Token navn | Verdi | ||
---|---|---|---|
rgba(38, 38, 38, 1) | |||
rgba(0, 0, 0, 0.56) | |||
rgba(99, 70, 137, 1) | |||
rgba(195, 0, 0, 1) | |||
rgba(0, 103, 197, 1) | |||
rgba(0, 91, 130, 1) | |||
rgba(0, 86, 180, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(38, 38, 38, 1) | |||
rgba(38, 38, 38, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(38, 38, 38, 1) | |||
rgba(255, 255, 255, 1) |
Icon
Token navn | Verdi | ||
---|---|---|---|
rgba(38, 38, 38, 1) | |||
rgba(112, 112, 112, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(0, 103, 197, 1) | |||
rgba(0, 91, 130, 1) | |||
rgba(0, 86, 180, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(6, 137, 58, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(195, 0, 0, 1) | |||
rgba(255, 255, 255, 1) | |||
rgba(212, 123, 0, 1) | |||
rgba(38, 38, 38, 1) | |||
rgba(54, 141, 168, 1) | |||
rgba(38, 38, 38, 1) | |||
rgba(130, 105, 162, 1) |
Border
Token navn | Verdi | ||
---|---|---|---|
rgba(0, 0, 0, 0.44) | |||
rgba(0, 0, 0, 0.56) | |||
rgba(0, 0, 0, 0.19) | |||
rgba(0, 0, 0, 0.1) | |||
rgba(0, 0, 0, 0.19) | |||
rgba(0, 103, 197, 1) | |||
rgba(0, 91, 130, 1) | |||
rgba(0, 103, 197, 1) | |||
rgba(6, 137, 58, 1) | |||
rgba(195, 0, 0, 1) | |||
rgba(212, 123, 0, 1) | |||
rgba(54, 141, 168, 1) | |||
rgba(229, 229, 229, 1) | |||
rgba(89, 89, 89, 1) | |||
rgba(0, 52, 125, 1) | |||
rgba(153, 195, 255, 1) | |||
rgba(130, 105, 162, 1) | |||
rgba(193, 203, 51, 1) | |||
rgba(0, 91, 130, 1) |
Spacing
Token navn | Verdi | ||
---|---|---|---|
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 navn | Verdi | ||
---|---|---|---|
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 navn | Verdi | ||
---|---|---|---|
2px | |||
4px | |||
8px | |||
12px | |||
9999px |
Font
Token navn | Verdi | ||
---|---|---|---|
"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 |
Z-Index
Token navn | Verdi | ||
---|---|---|---|
10 | |||
1000 | |||
2000 | |||
3000 |
Kode
Vi tilbyr tokens i format for CSS, Sass, Less og JS.
Vi bruker tokens internt i designsystemet sine komponenter og anbefaler bruker tokens istedenfor "hardkodede" verdier for mer konsistente grensesnitt på tvers i NAV. Kommer det fremtidige endringer i farger trenger du da forhåpentligvis 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 i css-format. Dette formatet kan brukes med Sass, less eller styled-components siden det er en del av css-spesifikasjonen.
Installere pakken
Importere tokens
Css-format
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.
For brukere av vscode kan man bruke extension "Css Custom Properties" (Tock.vscode-css-custom-properties
) for autocomplete av tokens. Må da ha settings:
Tips
Har du noen andre foretrukne måter å bruke tokens på? Da vil vi gjerne høre mer om dette! Send oss en melding på #Designsystem eller direktemelding.
Sass
Less
Js
Theming
Selv om vi ikke har implementert dette i designsystemet enda, er det mulig å "theme" bruken av tokens i din løsning eller komponentene våre lokalt.
Tanken er at man skal overskrive de "semantiske" fargene, men vil alltids være noen tilfeller dette ikke fungerer helt 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 kan jeg theme løsningen min?
Løsninger på nav.no eller interne flater ønsker vi for det meste skal forholde seg til de designvalgene som allerede er gjort. Theming eller overskriving av tokens er ment for unntaksvis overskriving av styling eller branding på siden. Sider som dette eksempelvis kan være relevant for er:
- Arbeidsplassen.no
- Etterlevelse.intern.nav.no
- Data.nav.no
- Teamkatalog
- Aksel.nav.no
Men vi oppfordrer interne løsninger til å eksperimentere med darkmode/høykontrast
hvis de ønsker da vi vet det er flere som ønsker seg muligheten til det.