Styleguide
Colours
Primary
Secondary
Tertiary
Quaternary
Pastel Primary
Pastel Secondary
Pastel Tertiary
Pastel Quaternary
Grey Dark
Grey
Grey Light
Text
Links
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.
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.
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.
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.
Buttons
Form
Space
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
- This is a list item in an ordered list
- 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
- This is a list item in an ordered list
- An unordered list is a list in which the sequence of items is not important
- This is a list item in an ordered list
- An unordered list is a list in which the sequence of items is not important
- This is a list item in an ordered list
- An unordered list is a list in which the sequence of items is not important
- This is a list item in an ordered list
- An unordered list is a list in which the sequence of items is not important
- This is a list item in an ordered list
- An unordered list is a list in which the sequence of items is not important
Bold text
Italic text
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 |