Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Styleguide

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

#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'
#004D99'link'
#000040'link-hover'
#800080'link-visited'

Fokusfarve

#747474'focus'

Baggrundsfarver

#FFFFFF'white'
#F5F5F5'gray-100'
rgba(0, 0, 0, 0.4)$modal-overlay-background-color

Positiv og negativ farver

#358000'text-positive'
#CC0000'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.