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.


Design

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

#44831Eprimary
#3C5C22primary-dark
#233614primary-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.

#0059B3primary
#004993primary-dark
#003972primary-darker

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.

Gråtoner

#FFFFFFwhite
#F5F5F5gray-100
#DCDCDCgray-200
#BFBFBFgray-300
#999999gray-400
#747474gray-500
#454545gray-600
#1A1A1Ablack

Besked-farver (alerts)

Succes

#EEFFE2success-light
#358000success

Advarsel

#FFEECCwarning-light
#FEBB30warning

Fejl

#FFE0E0error-light
#CC0000error

Info

#E2F2FBinfo-light
#1B86C3info
#004D99$theme-color-link
#004080$theme-color-link-hover
#800080$theme-color-link-visited

Fokusfarve

#747474$theme-focus-color

Baggrundsfarver

#FFFFFF$background-normal
#F5F5F5$background-alternative
rgba(0, 0, 0, 0.5)$background-modal

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

Positiv og negativ farver

#358000positive
#CC0000negative

Datavisualiseringsfarver

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

Violet data palette

#FCFBFD100
#EFEDF5200
#DADAEB300
#BCBDDC400
#9E9AC8500
#807DBA600
#6A51A3700
#54278F800
#3F007D900

Pink Violet data palette

#FFF7F3100
#FDE0DD200
#FCC5C0300
#FA9FB5400
#F768A1500
#DD3497600
#AE017E700
#7A0177800
#49006A900

Orange data palette

#FFF5EB100
#FEE6CE200
#FDD0A2300
#FDAE6B400
#FD8D3C500
#F16913600
#D94801700
#A63603800
#7F2704900

Gul Rød data palette

#FFFFCC100
#FFEDA0200
#FED976300
#FEB24C400
#FD8D3C500
#FC4E2A600
#E31A1C700
#BD0026800
#800026900

Blå data palette

#F7FBFF100
#DEEBF7200
#C6DBEF300
#9ECAE1400
#6BAED6500
#4292C6600
#2171B5700
#08519C800
#08306B900

Grøn Blå data palette

#F7FCF0100
#E0F3DB200
#CCEBC5300
#A8DDB5400
#7BCCC4500
#4EB3D3600
#2B8CBE700
#0868AC800
#084081900

Grøn data palette

#F7FCF5100
#E5F5E0200
#C7E9C0300
#A1D99B400
#74C476500
#41AB5D600
#238B45700
#006D2C800
#00441B900