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.