Style Guide
A live reference of every color, font, size and button variant defined in
theme.json and the theme's SCSS mixins.
Colors
Primær Base
primary-b
#B70E0B
Primær Lys
primary-l
#FFF
Primær Mørk
primary-d
#000
Sekundær Base
secondary-b
#D8D6C5
Sekundær Lys
secondary-l
#F1EFE9
Sekundær Mørk
secondary-d
#D1CEB6
Accent Base
accent-b
#E16037
Accent Lys
accent-l
#ED8A6B
Accent Mørk
accent-d
#B44D2C
Baggrund Base
bg-base
#F9FAFC
Baggrund Mørk
bg-dark
#EDEEEF
Font Families
Heading font · heading-font
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 æøå ÆØÅ
TTH-Dragon, Helvetica, sans-serif
Body font · body-font
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 æøå ÆØÅ
Work Sans, Helvetica, sans-serif
Font Weights
light · 300
The quick brown fox jumps over the lazy dog
normal · normal
The quick brown fox jumps over the lazy dog
medium · 500
The quick brown fox jumps over the lazy dog
semibold · 600
The quick brown fox jumps over the lazy dog
bold · 700
The quick brown fox jumps over the lazy dog
Font Sizes
Brødtekst
body-medium
18px
The quick brown fox
Brødtekst
body-regular
20px
The quick brown fox
H1
h-1
clamp(40px, 5vw, 94px)
The quick brown fox
H2
h-2
clamp(36px, 2.5vw, 52px)
The quick brown fox
H3
h-3
clamp(24px, 1.8vw, 36px)
The quick brown fox
Headings
H1 — Overskrift
H2 — Overskrift
H3 — Overskrift
H4 — Overskrift
H5 — Overskrift
H6 — Overskrift
Body Text & Links
Stor brødtekst — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent et et inline link sed nisi tristique consequat.
Brødtekst — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent et et inline link sed nisi tristique consequat.
Bold tekst og kursiv tekst for emphasis.
Lille brødtekst — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent et et inline link sed nisi tristique consequat.
Underline link / underline-btn
Buttons
Primary
Secondary
Outline
Hvid
