Design

Farver

Portalfarver (tema)
Gråtoner
Besked-farver (alerts)
Link-farver
Fokusfarve
Baggrundsfarver
Positiv og negativ farver
Datavisualiseringsfarver
Kontrastforhold

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å.

Farverne i listerne nedenunder er angivet øverst med enten en HEX- eller RGBA-værdi og nederst med variabelnavnet anvendt i SASS-filerne.

Portalfarver (tema)

Din selvbetjeningsløsning skal, alt efter hvilken portal løsningen skal på, gøre brug af den givne portals primærfarve. Dette gøres nemt ved hjælp af temahåndtering i koden.

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

#44831E'primary'

#3C5C22'primary-dark'

#233614'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.

#0059B3'primary'

#004993'primary-dark'

#003972'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.

#FFFFFF'white'

#F5F5F5'gray-100'

#DCDCDC'gray-200'

#BFBFBF'gray-300'

#999999'gray-400'

#747474'gray-500'

#454545'gray-600'

#1A1A1A'black'

Besked-farver (alerts)

Succes

#EEFFE2'success-light'

#358000'success'

Advarsel

#FFEECC'warning-light'

#FEBB30'warning'

Fejl

#FFE0E0'error-light'

#CC0000'error'

Info

#E2F2FB'info-light'

#1B86C3'info'

Link-farver

#004D99$theme-color-link

#000040$theme-color-link-hover

#800080$theme-color-link-visited

Fokusfarve

#747474$theme-focus-color

Baggrundsfarver

#FFFFFF'white'

#F5F5F5'gray-100'

rgba(0, 0, 0, 0.4)$modal-overlay-background-color

Positiv og negativ farver

#358000$theme-color-text-positive

#CC0000$theme-color-text-negative

Datavisualiseringsfarver

Du kan bruge datavisualiseringsfarver til grafer, diagrammer eller andre former for visuelle fremstillinger til kommunikative formål.

Violet data palette

#FCFBFD'data-violet-100'

#EFEDF5'data-violet-200'

#DADAEB'data-violet-300'

#BCBDDC'data-violet-400'

#9E9AC8'data-violet-500'

#807DBA'data-violet-600'

#6A51A3'data-violet-700'

#54278F'data-violet-800'

#3F007D'data-violet-900'

Pink Violet data palette

#FFF7F3'data-pink-violet-100'

#FDE0DD'data-pink-violet-200'

#FCC5C0'data-pink-violet-300'

#FA9FB5'data-pink-violet-400'

#F768A1'data-pink-violet-500'

#DD3497'data-pink-violet-600'

#AE017E'data-pink-violet-700'

#7A0177'data-pink-violet-800'

#49006A'data-pink-violet-900'

Orange data palette

#FFF5EB'data-orange-100'

#FEE6CE'data-orange-200'

#FDD0A2'data-orange-300'

#FDAE6B'data-orange-400'

#FD8D3C'data-orange-500'

#F16913'data-orange-600'

#D94801'data-orange-700'

#A63603'data-orange-800'

#7F2704'data-orange-900'

Gul Rød data palette

#FFFFCC'data-yellow-red-100'

#FFEDA0'data-yellow-red-200'

#FED976'data-yellow-red-300'

#FEB24C'data-yellow-red-400'

#FD8D3C'data-yellow-red-500'

#FC4E2A'data-yellow-red-600'

#E31A1C'data-yellow-red-700'

#BD0026'data-yellow-red-800'

#800026'data-yellow-red-900'

Blå data palette

#F7FBFF'data-blue-100'

#DEEBF7'data-blue-200'

#C6DBEF'data-blue-300'

#9ECAE1'data-blue-400'

#6BAED6'data-blue-500'

#4292C6'data-blue-600'

#2171B5'data-blue-700'

#08519C'data-blue-800'

#08306B'data-blue-900'

Grøn Blå data palette

#F7FCF0'data-green-blue-100'

#E0F3DB'data-green-blue-200'

#CCEBC5'data-green-blue-300'

#A8DDB5'data-green-blue-400'

#7BCCC4'data-green-blue-500'

#4EB3D3'data-green-blue-600'

#2B8CBE'data-green-blue-700'

#0868AC'data-green-blue-800'

#084081'data-green-blue-900'

Grøn data palette

#F7FCF5'data-green-100'

#E5F5E0'data-green-200'

#C7E9C0'data-green-300'

#A1D99B'data-green-400'

#74C476'data-green-500'

#41AB5D'data-green-600'

#238B45'data-green-700'

#006D2C'data-green-800'

#00441B'data-green-900'

Kontrastforhold

Din tekst skal være læsbar for alle og efterleve gældende regler for kontrastforhold.

Vælg et tema