Gå til sidens indhold

Design

Farver

Da designsystemet er fælles for både borger.dk og Virk er der portalspecifikke farver 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.

Temahåndtering

Styleguiden er udviklet med 3 forskellige temaer. Standard temaet er det neutrale tema hvor primærfarven er grå (#454545). De to andre temaer er målrettet borger.dk og virk.dk. Styling filerne til de to temaer kan findes i mappen /src/stylesheets/themes.

Temaerne er simple, det eneste som er forskelligt mellem standard temaet og de to andre temaer er primærfarven og nolge få variationer i headeren (fx logo). Alt andet er ens på tværs af temaer.

Tema eksempel – borger.dk:

$color-primary:       #568331; //grøn
$color-primary-medium: #3C5C22; //mørkere grøn
$color-primary-dark:    #233614; //mørkegrøn

.portal-header{
   background-color: #f1f1f1;
}
.logo{
   background-image: url('logo-borgerdk.svg');
   width: 144px;
   height: 36px;
}

Tilpasningsmuligheder

Alle farver i styleguiden er opsat med variable. Farverne i styleguiden kan skiftes ved at overskrive eksisterende farve-variable.
Alle farvevariable har en navngivning der starter med '$color-' og findes i filen '/scss/variables.scss'.
Farvevariablene kommer i to grupper: 'Swatches and Theming' og 'Component variables'. 'Swatches and Theming' definere alle farverne i farvepaletten. I 'Component variables', overføres disse farver til specifikke komponenter i styleguiden, fx links.

Nedenfor vises et eksempel med to blå farver. Hvis du generelt ønsker at ændre de blå farver gennem hele løsningen skal du overskrive '$color-blue-*' variablene. Hvis du derimod ønsker en anderledes linkfarve som ikke er koblet til de blå farver skal du overskrive de to '$color-link' variable.

//------ Swatches and Theming -----------
//---------------------------------------
$color-blue-001: #0059b3 !default;
$color-blue-002: #004080 !default;

//------ colors variables ------------
//------------------------------------
//Links color
$color-link: $color-blue-001 !default;
$color-link-hover: $color-blue-002 !default;

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

#3C5C22

$primary-medium

#233614

$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

$primary-color

#004993

$primary-medium

#003972

$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

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

Hjælpetekst på hvid

Positiv og negativ tekst

Negativ tekst på hvid

Negativ tekst på pale

Positiv tekst på hvid

Positiv tekst på pale

Tekst på datavisualiseringsfarver

Hvid på sort

Hvid på mørkegrå

Sort på lysegrå

Sort på pale

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