Gå til sidens indhold

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

Om det visuelle design (look and feel)

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

$color-primary-color

#3C5C22

$color-primary-medium

#233614

$color-primary-dark

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

$color-primary-color

#004993

$color-primary-medium

#003972

$color-primary-dark

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

#1A1A1A

$color-black

#454545

$color-gray-dark

#747474

$color-gray-medium-dark

#999999

$color-gray-medium-light

#BFBFBF

$color-gray-light

#DCDCDC

$color-gray-mediumpale

#F5F5F5

$color-gray-pale

#FFFFFF

$color-white

Besked-farver (alerts)

#358000

$color-success

#FEBB30

$color-warning

#CC0000

$color-error

#1B86C3

$color-info

#EEFFE2

$color-success-light

#FFEECC

$color-warning-light

#FFE0E0

$color-error-light

#E2F2FB

$color-info-light

#004D99

$color-link

#004080

$color-link-hover

#800080

$color-link-visited

Fokusfarve

#747474

$color-focus

Baggrundsfarver

#FFFFFF

$background-normal

#F5F5F5

$background-alternative

rgba(0, 0, 0, 0.75)

$background-modal

Positiv og negativ farver

#358000

$color-positive

#CC0000

$color-negative

Datavisualiseringsfarver

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

#56D4D6

$color-data-turquoise

#9AE5E6

$color-data-turquoise-high-opacity

#CCF2F3

$color-data-turquoise-medium-opacity

#EEFAFA

$color-data-turquoise-low-opacity

#15B094

$color-data-teal

#73D0BF

$color-data-teal-high-opacity

#B9E7DF

$color-data-teal-medium-opacity

#E7F7F4

$color-data-teal-low-opacity

#FF6A38

$color-data-orange

#FFA688

$color-data-orange-high-opacity

#FFD2C3

$color-data-orange-medium-opacity

#FFF0Eb

$color-data-orange-low-opacity

#D81884

$color-data-magenta

#E874B5

$color-data-magenta-high-opacity

#F3BADA

$color-data-magenta-medium-opacity

#FBE7F2

$color-data-magenta-low-opacity

#8F2B8F

$color-data-purple

#BC80BC

$color-data-purple-high-opacity

#DDBFDD

$color-data-purple-medium-opacity

#F3E9F3

$color-data-purple-low-opacity

#474E95

$color-data-violet

#9195BF

$color-data-violet-high-opacity

#C8CADF

$color-data-violet-medium-opacity

#ECEDF4

$color-data-violet-low-opacity

Implementering

Datavisualiseringsfarverne findes i seks farver, hvoraf hver farve findes i 4 versioner.

  • $color-data-X (100%)
  • $color-data-X-high-opacity (60%)
  • $color-data-X-medium-opacity (30%)
  • $color-data-X-low-opacity (10%)

‘high-opacity’ har en høj procent opacity på 60%

‘medium-opacity’ har en middel procent opacity på 30%

‘low-opacity’ har en lav procent opacity på 10%

Tekst på baggrundsfarver

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

Nedenfor er angivet på hvilke baggrundsfarver, du kan regne med at designsystemets tekst har kontrast nok.

Normal tekst og links

Normal tekst på hvid

Normal tekst på grå

Hjælpetekst på hvid

Hjælpetekst på grå

Positiv og negativ tekst

Negativ tekst på hvid

Negativ tekst på grå

Positiv tekst på hvid

Positiv tekst på grå

Tekst på datavisualiseringsfarver

Hvid på sort

Hvid på mørkegrå

Sort på lysegrå

Sort på grå

Hvid på violet

Sort på violet med høj gennemsigtighed

Sort på violet med middel gennemsigtighed

Sort på violet med lav gennemsigtighed

Hvid på lilla

Sort på lilla med høj gennemsigtighed

Sort på lilla med middel gennemsigtighed

Sort på lilla med lav gennemsigtighed

Hvid på magenta

Sort på magenta med høj gennemsigtighed

Sort på magenta med middel gennemsigtighed

Sort på magenta med lav gennemsigtighed

Sort på orange

Sort på orange med høj gennemsigtighed

Sort på orange med middel gennemsigtighed

Sort på orange med lav gennemsigtighed

Sort på teal

Sort på teal med høj gennemsigtighed

Sort på teal med middel gennemsigtighed

Sort på teal med lav gennemsigtighed

Sort på turkis

Sort på turkis med høj gennemsigtighed

Sort på turkis med middel gennemsigtighed

Sort på turkis med lav gennemsigtighed