Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Farver
Da designsystemet er fælles for både borger.dk og Virk er der farver til hver portal og samtidig en generel palette, der anvendes uanset, hvilken portal din selvbetjeningsløsning skal på.
Portalfarver (tema)
Din selvbetjeningsløsning skal, alt efter hvilken portal løsningen skal på, gøre brug af den givne portals primærfarve.
Primærfarver for borger.dk
Du kan bruge borger.dk primærfarven på få centrale elementer, såsom på primærknappen og i menuer i designsystemet for at skabe sammenhæng til borger.dk
primary
primary-dark
primary-darker
Primærfarver for Virk
Du kan bruge Virk primærfarven på få centrale elementer, såsom på primærknappen og i menuer i designsystemet for at skabe sammenhæng til Virk.
primary
primary-dark
primary-darker
Gråtoner
Designsystemets generelle palette består mest af gråtoner og nogle få dedikerede farver til kommunikation og feedback. Paletten understøtter de visuelle principper om et neutralt, simpelt og fleksibelt designsystem.
white
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
black
Besked-farver (alerts)
Succes
success-light
success
Advarsel
warning-light
warning
Fejl
error-light
error
Info
info-light
info
Link-farver
link
link-hover
link-visited
Fokusfarve
focus
Baggrundsfarver
white
gray-100
$modal-overlay-background-color
Positiv og negativ farver
text-positive
text-negative
Datavisualiseringsfarver
Du kan bruge datavisualiseringsfarver til grafer, diagrammer eller andre former for visuelle fremstillinger til kommunikative formål.
Violet data palette
data-violet-100
data-violet-200
data-violet-300
data-violet-400
data-violet-500
data-violet-600
data-violet-700
data-violet-800
data-violet-900
Pink Violet data palette
data-pink-violet-100
data-pink-violet-200
data-pink-violet-300
data-pink-violet-400
data-pink-violet-500
data-pink-violet-600
data-pink-violet-700
data-pink-violet-800
data-pink-violet-900
Orange data palette
data-orange-100
data-orange-200
data-orange-300
data-orange-400
data-orange-500
data-orange-600
data-orange-700
data-orange-800
data-orange-900
Gul Rød data palette
data-yellow-red-100
data-yellow-red-200
data-yellow-red-300
data-yellow-red-400
data-yellow-red-500
data-yellow-red-600
data-yellow-red-700
data-yellow-red-800
data-yellow-red-900
Blå data palette
data-blue-100
data-blue-200
data-blue-300
data-blue-400
data-blue-500
data-blue-600
data-blue-700
data-blue-800
data-blue-900
Grøn Blå data palette
data-green-blue-100
data-green-blue-200
data-green-blue-300
data-green-blue-400
data-green-blue-500
data-green-blue-600
data-green-blue-700
data-green-blue-800
data-green-blue-900
Grøn data palette
data-green-100
data-green-200
data-green-300
data-green-400
data-green-500
data-green-600
data-green-700
data-green-800
data-green-900
Kontrastforhold
Din tekst skal være læsbar for alle og efterleve gældende regler for kontrastforhold.