Farge tokens
Oppdatert 13. mai 2022Semantiske farger
Semantiske farger beskriver hvordan fargene bør brukes. Alle semantiske farger er tilgjengelige for brukere av @navikt/ds-css-pakken som css custom properties. Disse er da prefikset, så brukes slik: var(--navds-semantic-color-interaction-primary). Vi blir å oppdatere hvordan vi hånterer tokens om ikke så alt for lenge, så utviklere anbefales å bruke globale css verdier for nå.
figma.com
webaim.org
Interaction
Interaction-farger brukes på interaktive elementer.
Primary
Interaction-primary
blue-500
#0067C5
Interaction-primary-hover
blue-600
#0056B4
Interaction-primary-selected
deepblue-500
#005B82
Interaction-primary-hover-subtle
blue-50
#E6F0FF
Danger
Interaction-danger
red-500
#BA3A26
Interaction-danger-hover
red-600
#A32A17
Interaction-danger-selected
red-700
#881D0C
Focus
Focus
blue-800
#00347D
Focus-inverted
blue-100
#CCE1FF
Feedback
Feedback-farger brukes i meldinger og varslinger til bruker. Feedback-farger har en tydelig mening som identifiserer og forsterker budskapet.
Success
Feedback-success-background
green-100
#CCF1D6
Feedback-success-border
green-500
#06893A
Feedback-success-icon
green-600
#007C2E
Danger
Feedback-danger-background
red-100
#F9D2CC
Feedback-danger-border
red-500
#BA3A26
Feedback-danger-icon
red-500
#BA3A26
Warning
Feedback-warning-background
orange-100
#FFECCC
Feedback-warning-border
orange-600
#D47B00
Feedback-warning-icon
orange-600
#D47B00
Info
Feedback-info-background
lightblue-100
#D8F9FF
Feedback-info-border
lightblue-700
#368DA8
Feedback-info-icon
lightblue-700
#368DA8
Generisk UI
Generiske UI-farger vi bruker til å style sider og komponenter.
Canvas
Canvas-background
gray-100
#F1F1F1
Canvas-background-inverted
gray-900
#262626
Canvas-background-light
white
#FFFFFF
Divider
Divider
gray-300
#CFCFCF
Border
Border
gray-600
#707070
Border-muted
gray-500
#8F8F8F
Border-inverted
gray-200
#E5E5E5
Text
Text
gray-900
#262626
Text-muted
gray-600
#707070
Text-inverted
white
#FFFFFF
Feedback-danger-text
red-500
#BA3A26
Link
Link
blue-500
#0067C5
Link-visited
purple-500
#634689
Component
Component-background-alternate
gray-50
#F7F7F7
Component-background-light
white
#FFFFFF
Component-background-inverted
gray-900
#262626