Globale farger
Token navn | Verdi | ||
---|---|---|---|
rgba(255, 255, 255, 0) | #ffffff00 | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(195, 0, 0, 1) | #c30000 |
Gray
Token navn | Verdi | ||
---|---|---|---|
rgba(247, 247, 247, 1) | #f7f7f7 | ||
rgba(241, 241, 241, 1) | #f1f1f1 | ||
rgba(229, 229, 229, 1) | #e5e5e5 | ||
rgba(207, 207, 207, 1) | #cfcfcf | ||
rgba(176, 176, 176, 1) | #b0b0b0 | ||
rgba(143, 143, 143, 1) | #8f8f8f | ||
rgba(112, 112, 112, 1) | #707070 | ||
rgba(89, 89, 89, 1) | #595959 | ||
rgba(64, 64, 64, 1) | #404040 | ||
rgba(38, 38, 38, 1) | #262626 |
Grayalpha
Token navn | Verdi | ||
---|---|---|---|
rgba(0, 0, 0, 0.03) | #00000008 | ||
rgba(0, 0, 0, 0.05) | #0000000d | ||
rgba(0, 0, 0, 0.1) | #0000001a | ||
rgba(0, 0, 0, 0.19) | #00000030 | ||
rgba(0, 0, 0, 0.31) | #0000004f | ||
rgba(0, 0, 0, 0.44) | #00000070 | ||
rgba(0, 0, 0, 0.56) | #0000008f | ||
rgba(0, 0, 0, 0.65) | #000000a6 | ||
rgba(0, 0, 0, 0.75) | #000000bf | ||
rgba(0, 0, 0, 0.85) | #000000d9 |
Blue
Token navn | Verdi | ||
---|---|---|---|
rgba(230, 240, 255, 1) | #e6f0ff | ||
rgba(204, 225, 255, 1) | #cce1ff | ||
rgba(153, 195, 255, 1) | #99c3ff | ||
rgba(102, 165, 244, 1) | #66a5f4 | ||
rgba(51, 134, 224, 1) | #3386e0 | ||
rgba(0, 103, 197, 1) | #0067c5 | ||
rgba(0, 86, 180, 1) | #0056b4 | ||
rgba(0, 69, 156, 1) | #00459c | ||
rgba(0, 52, 125, 1) | #00347d | ||
rgba(0, 34, 82, 1) | #002252 |
Lightblue
Token navn | Verdi | ||
---|---|---|---|
rgba(235, 252, 255, 1) | #ebfcff | ||
rgba(216, 249, 255, 1) | #d8f9ff | ||
rgba(181, 241, 255, 1) | #b5f1ff | ||
rgba(151, 230, 255, 1) | #97e6ff | ||
rgba(124, 218, 248, 1) | #7cdaf8 | ||
rgba(102, 203, 236, 1) | #66cbec | ||
rgba(76, 173, 205, 1) | #4cadcd | ||
rgba(54, 141, 168, 1) | #368da8 | ||
rgba(35, 107, 125, 1) | #236b7d | ||
rgba(19, 72, 82, 1) | #134852 |
Green
Token navn | Verdi | ||
---|---|---|---|
rgba(243, 252, 245, 1) | #f3fcf5 | ||
rgba(204, 241, 214, 1) | #ccf1d6 | ||
rgba(153, 222, 173, 1) | #99dead | ||
rgba(102, 199, 134, 1) | #66c786 | ||
rgba(51, 170, 95, 1) | #33aa5f | ||
rgba(6, 137, 58, 1) | #06893a | ||
rgba(0, 124, 46, 1) | #007c2e | ||
rgba(0, 106, 35, 1) | #006a23 | ||
rgba(0, 85, 25, 1) | #005519 | ||
rgba(0, 59, 15, 1) | #003b0f |
Orange
Token navn | Verdi | ||
---|---|---|---|
rgba(255, 249, 240, 1) | #fff9f0 | ||
rgba(255, 236, 204, 1) | #ffeccc | ||
rgba(255, 215, 153, 1) | #ffd799 | ||
rgba(255, 193, 102, 1) | #ffc166 | ||
rgba(255, 170, 51, 1) | #ffaa33 | ||
rgba(255, 145, 0, 1) | #ff9100 | ||
rgba(199, 115, 0, 1) | #c77300 | ||
rgba(168, 100, 0, 1) | #a86400 | ||
rgba(125, 76, 0, 1) | #7d4c00 | ||
rgba(82, 51, 0, 1) | #523300 |
Red
Token navn | Verdi | ||
---|---|---|---|
rgba(255, 230, 230, 1) | #ffe6e6 | ||
rgba(255, 194, 194, 1) | #ffc2c2 | ||
rgba(246, 130, 130, 1) | #f68282 | ||
rgba(242, 92, 92, 1) | #f25c5c | ||
rgba(222, 46, 46, 1) | #de2e2e | ||
rgba(195, 0, 0, 1) | #c30000 | ||
rgba(173, 0, 0, 1) | #ad0000 | ||
rgba(140, 0, 0, 1) | #8c0000 | ||
rgba(92, 0, 0, 1) | #5c0000 | ||
rgba(38, 0, 0, 1) | #260000 |
Deepblue
Token navn | Verdi | ||
---|---|---|---|
rgba(230, 241, 248, 1) | #e6f1f8 | ||
rgba(204, 226, 240, 1) | #cce2f0 | ||
rgba(153, 196, 221, 1) | #99c4dd | ||
rgba(102, 163, 196, 1) | #66a3c4 | ||
rgba(51, 128, 165, 1) | #3380a5 | ||
rgba(0, 91, 130, 1) | #005b82 | ||
rgba(0, 80, 119, 1) | #005077 | ||
rgba(0, 67, 103, 1) | #004367 | ||
rgba(0, 52, 83, 1) | #003453 | ||
rgba(0, 36, 58, 1) | #00243a |
Purple
Token navn | Verdi | ||
---|---|---|---|
rgba(239, 236, 244, 1) | #efecf4 | ||
rgba(224, 216, 233, 1) | #e0d8e9 | ||
rgba(192, 178, 210, 1) | #c0b2d2 | ||
rgba(161, 141, 187, 1) | #a18dbb | ||
rgba(130, 105, 162, 1) | #8269a2 | ||
rgba(99, 70, 137, 1) | #634689 | ||
rgba(82, 56, 116, 1) | #523874 | ||
rgba(65, 43, 93, 1) | #412b5d | ||
rgba(48, 31, 70, 1) | #301f46 | ||
rgba(31, 20, 47, 1) | #1f142f |
Limegreen
Token navn | Verdi | ||
---|---|---|---|
rgba(253, 255, 230, 1) | #fdffe6 | ||
rgba(249, 252, 204, 1) | #f9fccc | ||
rgba(236, 243, 153, 1) | #ecf399 | ||
rgba(217, 227, 102, 1) | #d9e366 | ||
rgba(193, 203, 51, 1) | #c1cb33 | ||
rgba(162, 173, 0, 1) | #a2ad00 | ||
rgba(147, 158, 0, 1) | #939e00 | ||
rgba(127, 137, 0, 1) | #7f8900 | ||
rgba(102, 110, 0, 1) | #666e00 | ||
rgba(71, 78, 0, 1) | #474e00 |
Semantiske farger
Background
Token navn | Verdi | Beskrivelse | |
---|---|---|---|
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(241, 241, 241, 1) | #f1f1f1 |
Surface
Token navn | Verdi | ||
---|---|---|---|
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(0, 0, 0, 0.05) | #0000000d | ||
rgba(0, 0, 0, 0.1) | #0000001a | ||
rgba(230, 240, 255, 1) | #e6f0ff | ||
rgba(247, 247, 247, 1) | #f7f7f7 | ||
rgba(255, 255, 255, 0) | #ffffff00 | ||
rgba(0, 0, 0, 0.65) | #000000a6 | ||
rgba(64, 64, 64, 1) | #404040 | ||
rgba(89, 89, 89, 1) | #595959 | ||
rgba(38, 38, 38, 1) | #262626 | ||
rgba(230, 240, 255, 1) | #e6f0ff | ||
rgba(204, 225, 255, 1) | #cce1ff | ||
rgba(0, 103, 197, 1) | #0067c5 | ||
rgba(0, 86, 180, 1) | #0056b4 | ||
rgba(0, 91, 130, 1) | #005b82 | ||
rgba(0, 91, 130, 1) | #005b82 | ||
rgba(0, 80, 119, 1) | #005077 | ||
rgba(0, 0, 0, 0.05) | #0000000d | ||
rgba(0, 0, 0, 0.1) | #0000001a | ||
rgba(0, 0, 0, 0.1) | #0000001a | ||
rgba(89, 89, 89, 1) | #595959 | ||
rgba(64, 64, 64, 1) | #404040 | ||
rgba(38, 38, 38, 1) | #262626 | ||
rgba(38, 38, 38, 1) | #262626 | ||
rgba(204, 241, 214, 1) | #ccf1d6 | ||
rgba(153, 222, 173, 1) | #99dead | ||
rgba(153, 222, 173, 1) | #99dead | ||
rgba(6, 137, 58, 1) | #06893a | ||
rgba(0, 124, 46, 1) | #007c2e | ||
rgba(255, 194, 194, 1) | #ffc2c2 | ||
rgba(246, 130, 130, 1) | #f68282 | ||
rgba(246, 130, 130, 1) | #f68282 | ||
rgba(195, 0, 0, 1) | #c30000 | ||
rgba(173, 0, 0, 1) | #ad0000 | ||
rgba(140, 0, 0, 1) | #8c0000 | ||
rgba(255, 236, 204, 1) | #ffeccc | ||
rgba(255, 215, 153, 1) | #ffd799 | ||
rgba(255, 145, 0, 1) | #ff9100 | ||
rgba(255, 215, 153, 1) | #ffd799 | ||
rgba(216, 249, 255, 1) | #d8f9ff | ||
rgba(181, 241, 255, 1) | #b5f1ff | ||
rgba(181, 241, 255, 1) | #b5f1ff | ||
rgba(102, 203, 236, 1) | #66cbec | ||
rgba(130, 105, 162, 1) | #8269a2 | ||
rgba(224, 216, 233, 1) | #e0d8e9 | ||
rgba(192, 178, 210, 1) | #c0b2d2 | ||
rgba(193, 203, 51, 1) | #c1cb33 | ||
rgba(249, 252, 204, 1) | #f9fccc | ||
rgba(236, 243, 153, 1) | #ecf399 | ||
rgba(0, 91, 130, 1) | #005b82 | ||
rgba(204, 226, 240, 1) | #cce2f0 | ||
rgba(153, 196, 221, 1) | #99c4dd | ||
rgba(0, 52, 83, 1) | #003453 |
Text
Token navn | Verdi | ||
---|---|---|---|
rgba(38, 38, 38, 1) | #262626 | ||
rgba(0, 0, 0, 0.56) | #0000008f | ||
rgba(99, 70, 137, 1) | #634689 | ||
rgba(195, 0, 0, 1) | #c30000 | ||
rgba(0, 103, 197, 1) | #0067c5 | ||
rgba(0, 91, 130, 1) | #005b82 | ||
rgba(0, 86, 180, 1) | #0056b4 | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(38, 38, 38, 1) | #262626 | ||
rgba(38, 38, 38, 1) | #262626 | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(38, 38, 38, 1) | #262626 | ||
rgba(255, 255, 255, 1) | #ffffff |
Icon
Token navn | Verdi | ||
---|---|---|---|
rgba(38, 38, 38, 1) | #262626 | ||
rgba(112, 112, 112, 1) | #707070 | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(0, 103, 197, 1) | #0067c5 | ||
rgba(0, 91, 130, 1) | #005b82 | ||
rgba(0, 86, 180, 1) | #0056b4 | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(6, 137, 58, 1) | #06893a | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(195, 0, 0, 1) | #c30000 | ||
rgba(255, 255, 255, 1) | #ffffff | ||
rgba(199, 115, 0, 1) | #c77300 | ||
rgba(38, 38, 38, 1) | #262626 | ||
rgba(35, 107, 125, 1) | #236b7d | ||
rgba(38, 38, 38, 1) | #262626 | ||
rgba(99, 70, 137, 1) | #634689 | ||
rgba(127, 137, 0, 1) | #7f8900 | ||
rgba(51, 128, 165, 1) | #3380a5 |
Border
Token navn | Verdi | ||
---|---|---|---|
rgba(0, 0, 0, 0.44) | #00000070 | ||
rgba(0, 0, 0, 0.65) | #000000a6 | ||
rgba(0, 0, 0, 0.19) | #00000030 | ||
rgba(0, 0, 0, 0.1) | #0000001a | ||
rgba(0, 0, 0, 0.19) | #00000030 | ||
rgba(0, 103, 197, 1) | #0067c5 | ||
rgba(0, 91, 130, 1) | #005b82 | ||
rgba(0, 103, 197, 1) | #0067c5 | ||
rgba(6, 137, 58, 1) | #06893a | ||
rgba(195, 0, 0, 1) | #c30000 | ||
rgba(199, 115, 0, 1) | #c77300 | ||
rgba(54, 141, 168, 1) | #368da8 | ||
rgba(229, 229, 229, 1) | #e5e5e5 | ||
rgba(89, 89, 89, 1) | #595959 | ||
rgba(0, 52, 125, 1) | #00347d | ||
rgba(153, 195, 255, 1) | #99c3ff | ||
rgba(130, 105, 162, 1) | #8269a2 | ||
rgba(127, 137, 0, 1) | #7f8900 | ||
rgba(0, 91, 130, 1) | #005b82 |
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 |
Breakpoints
Token navn | Verdi | Beskrivelse | |
---|---|---|---|
0 | |||
480px | @media (min-width: 480px) | ||
479px | @media (max-width: 479px) | ||
768px | @media (min-width: 768px) | ||
767px | @media (max-width: 767px) | ||
1024px | @media (min-width: 1024px) | ||
1023px | @media (max-width: 1023px) | ||
1280px | @media (min-width: 1280px) | ||
1279px | @media (max-width: 1279px) |
Z-Index
Token navn | Verdi | ||
---|---|---|---|
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!