Skip to content

Styleguide





Colours




Primary

Secondary

Tertiary

Quaternary

Pastel Primary

Pastel Secondary

Pastel Tertiary

Pastel Quaternary

Grey Dark

Grey

Grey Light

Text

Validation Error

Validation Success





Typography




H0
Lorem ipsum dolor sit amet

Font: Satoshi 650 | Line height: 110% | Letter spacing: -0.03em






H1
Lorem ipsum dolor sit amet

Font: Satoshi 650 | Line height: 110% | Letter spacing: -0.03em






H2
Lorem ipsum dolor sit amet

Font: Satoshi 650 | Line height: 110% | Letter spacing: -0.03em






H3
Lorem ipsum dolor sit amet

Font: Satoshi 650 | Line height: 110%| Letter spacing: -0.03em






H4
Lorem ipsum dolor sit amet

Font: Satoshi 650 | Line height: 110% | Letter spacing: -0.03em






H5
Lorem ipsum dolor sit amet
Font: Satoshi 650 | Line height: 110% | Letter spacing: -0.03em






H6
Lorem ipsum dolor sit amet
Font: Satoshi 650 | Line height: 110% | Letter spacing: -0.03em






H7
Lorem ipsum dolor sit amet
Font: Satoshi 650 | Line height: 110% | Letter spacing: -0.03em






Eyebrow
Lorem ipsum dolor sit amet
Font: Satoshi 650 | Line height: 110% | Letter spacing: -0.03em






Content Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Satoshi 500 | Line height: 150% | Letter spacing: Normal






Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Satoshi 500 | Line height: 150% | Letter spacing: Normal






Content Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Satoshi 500 | Line height: 150% | Letter spacing: Normal






Content Extra Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: Satoshi 500 | Line height: 150% | Letter spacing: Normal




Buttons




















Form




This is a form








Radio field




Checkbox field








Space




XS
S
M
L
XL
2XL
3XL
4XL
5XL




Grid








CMS Content (Rich Text)





H1 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H3 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H4 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H5 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important
    • This is a list item in an unordered list
    • An unordered list is a list in which the sequence of items is not important
  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important
  1. This is a list item in an ordered list
  2. An ordered list is a list in where the sequence of items is important
  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important
  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important
  1. This is a list item in an ordered list
  2. An unordered list is a list in which the sequence of items is not important
  1. This is a list item in an ordered list
  2. An unordered list is a list in which the sequence of items is not important
  1. This is a list item in an ordered list
  2. An unordered list is a list in which the sequence of items is not important
  1. This is a list item in an ordered list
  2. An unordered list is a list in which the sequence of items is not important
  1. This is a list item in an ordered list
  2. An unordered list is a list in which the sequence of items is not important

Bold text

Italic text

Anchor link

This text contains subscript text.

This text contains superscript text.

This is preformatted text
Column 1 Column 2 Column 3
Lorem ipsum dolor sit amet Lorem ipsum Lorem ipsum dolor sit
Lorem ipsum Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet Lorem ipsum Lorem ipsum dolor sit