Farger Den grafiske profilen inneholder tre primær- og tre sekundærfarger. Designsystemet inneholder i tillegg varianter av alle fargene.

Primær- og sekundærfarger

#233264
$dark-blue

#3c78b4
$blue

$blue-interactive
$selection-background-color
$link-hover-color

#f07850
$orange

#f0c8a0
$yellow

#fad2e6
$pink

#a0d2b4
$green

Interaktive/hover/aktive varianter

#0b2251
$dark-blue--deep

#1368a0
$blue--deep

$blue-interactive-hover
$link-color

#ef542b
$orange--deep

#edaf77
$yellow--deep

#f7a9d3
$pink--deep

#80cea0
$green--deep

#647092
$dark-blue--fade

#77a0cb
$blue--fade

$light-blue

#f5a084
$orange--fade

#f4d8bc
$yellow--fade

$focus-background-color
$light-yellow

#fbdfed
$pink--fade

$light-red

#bddfcb
$green--fade

Bakgrunnsskygger

#dedfe7
$dark-blue--pale

$white--dark-blue
$pale-blue

#dae3ef
$blue--pale

$white--blue
$tint-blue
$light-blue-interactive
$lighter-blue

#f4dcd3
$orange--pale

#f9efe4
$yellow--pale

#f9ecf4
$pink--pale

$light-pink

#e5f1ea
$green--pale

$light-green

Gråtoner og tekst

#f8f8f8
$deactive-element

#bfbfbf
$deactive

#222222
$primary-text

#757575
$secondary-text

#acb3c8
$dark-text-secondary

#707c9e
$dark-text-deactive

Andre farger

#cc0058
$red

#e60063
$error-red-hover

Kontrastnivåer for tekst vs. bakgrunn

AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
Background Text
black
white
$dark-blue
$blue
$orange
$yellow
$pink
$green
$red
white
21
AAA
12.2
AAA
4.6
AA
2.8
DNP
1.5
DNP
1.3
DNP
1.7
DNP
5.6
AA
black
21
AAA
1.7
DNP
4.5
AA
7.5
AAA
13.4
AAA
15.4
AAA
12.3
AAA
3.7
AA18
$dark-blue
1.7
DNP
12.2
AAA
2.6
DNP
4.3
AA18
7.8
AAA
9
AAA
7.2
AAA
2.1
DNP
$blue
4.5
AA
4.6
AA
2.6
DNP
1.6
DNP
2.9
DNP
3.4
AA18
2.7
DNP
1.2
DNP
$orange
7.5
AAA
2.8
DNP
4.3
AA18
1.6
DNP
1.7
DNP
2
DNP
1.6
DNP
2
DNP
$yellow
13.4
AAA
1.5
DNP
7.8
AAA
2.9
DNP
1.7
DNP
1.1
DNP
1
DNP
3.6
AA18
$pink
15.4
AAA
1.3
DNP
9
AAA
3.4
AA18
2
DNP
1.1
DNP
1.2
DNP
4.1
AA18
$green
12.3
AAA
1.7
DNP
7.2
AAA
2.7
DNP
1.6
DNP
1
DNP
1.2
DNP
3.3
AA18
$dark-blue--deep
1.3
DNP
15.4
AAA
1.2
DNP
3.3
AA18
5.5
AA
9.8
AAA
11.3
AAA
9
AAA
2.7
DNP
$blue--deep
3.5
AA18
5.9
AA
2
DNP
1.2
DNP
2.1
DNP
3.8
AA18
4.3
AA18
3.5
AA18
1
DNP
$orange--deep
5.9
AA
3.5
AA18
3.4
AA18
1.3
DNP
1.2
DNP
2.2
DNP
2.5
DNP
2
DNP
1.6
DNP
$yellow--deep
11
AAA
1.9
DNP
6.4
AA
2.4
DNP
1.4
DNP
1.2
DNP
1.4
DNP
1.1
DNP
2.9
DNP
$pink--deep
11.5
AAA
1.8
DNP
6.7
AA
2.5
DNP
1.5
DNP
1.1
DNP
1.3
DNP
1
DNP
3.1
AA18
$green--deep
11.2
AAA
1.8
DNP
6.5
AA
2.4
DNP
1.5
DNP
1.2
DNP
1.3
DNP
1.1
DNP
3
AA18
$dark-blue--fade
4.2
AA18
4.9
AA
2.5
DNP
1
DNP
1.7
DNP
3.1
AA18
3.6
AA18
2.8
DNP
1.1
DNP
$blue--fade
7.6
AAA
2.7
DNP
4.4
AA18
1.6
DNP
1
DNP
1.7
DNP
2
DNP
1.6
DNP
2
DNP
$orange--fade
10
AAA
2
DNP
5.9
AA
2.2
DNP
1.3
DNP
1.3
DNP
1.5
DNP
1.2
DNP
2.7
DNP
$yellow--fade
15.4
AAA
1.3
DNP
8.9
AAA
3.3
AA18
2
DNP
1.1
DNP
1
DNP
1.2
DNP
4.1
AA18
$pink--fade
16.8
AAA
1.2
DNP
9.8
AAA
3.7
AA18
2.2
DNP
1.2
DNP
1
DNP
1.3
DNP
4.5
AA
$green--fade
14.5
AAA
1.4
DNP
8.5
AAA
3.2
AA18
1.9
DNP
1
DNP
1
DNP
1.1
DNP
3.9
AA18
$dark-blue--pale
15.8
AAA
1.3
DNP
9.2
AAA
3.4
AA18
2.1
DNP
1.1
DNP
1
DNP
1.2
DNP
4.2
AA18
$blue--pale
16.2
AAA
1.3
DNP
9.4
AAA
3.5
AA18
2.1
DNP
1.2
DNP
1
DNP
1.3
DNP
4.3
AA18
$orange--pale
16
AAA
1.3
DNP
9.3
AAA
3.5
AA18
2.1
DNP
1.1
DNP
1
DNP
1.3
DNP
4.3
AA18
$yellow--pale
18.4
AAA
1.1
DNP
10.8
AAA
4
AA18
2.4
DNP
1.3
DNP
1.2
DNP
1.4
DNP
4.9
AA
$pink--pale
18.3
AAA
1.1
DNP
10
AAA
4
AA18
2.4
DNP
1.3
DNP
1.1
DNP
1.4
DNP
4.9
AA
$green--pale
18.1
AAA
1.1
DNP
10
AAA
3.9
AA18
2.4
DNP
1.3
DNP
1.1
DNP
1.4
DNP
4.8
AA
$red
3.7
AA18
5.6
AA
2.1
DNP
1.2
DNP
2
DNP
3.6
AA18
4.1
AA18
3.3
AA18

About WCAG 2.0 contrast.
Ref. contrast-grid.eightshapes.com.

Hvor finner jeg denne koden?