Design System

Colours

Gray

  • 100
  • 80
  • 70
  • 60
  • 50
  • 40
  • 30
  • 20
  • 10
  • 0

Red

  • 60
  • 50
  • 40
    Accent Base
  • 30
  • 20
    Error Base
  • 10
    Error Light

Blue

  • 20
    Information Base
  • 10
    Information Light

Green

  • 50
    Success Dark
  • 20
    Success Base
  • 10
    Success Light

Yellow

  • 20
    Warning Base
  • 10
    Warning Light

Buttons

Spacing Scale

Space Scale 1
Space Scale 2
Space Scale 3
Space Scale 4
Space Scale 5
Space Scale 6
Space Scale 7
Space Scale 8
Space Scale 9
Space Scale 10
Space Scale 11
Space Scale 12

Layout Scale

Layout Scale 1
Layout Scale 2
Layout Scale 3
Layout Scale 4
Layout Scale 5
Layout Scale 6
Layout Scale 7

Typography

Text Preset 1
Text Preset 2
Text Preset 3
Text Preset 4
Text Preset 5
Text Preset 6
Text Preset 7
Text Preset 8
Text Preset 9
Text Preset 10

Headings

Display Text 2
Display Text 1

h1

h2

h3

h4

h5
h6

Text Component

Heading 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptates vitae labore blanditiis earum, debitis veritatis velit ex in numquam. A at eveniet tempore labore distinctio, blanditiis ex. Exercitationem, voluptates!

Heading 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptates vitae labore blanditiis earum, debitis veritatis velit ex in numquam. A at eveniet tempore labore distinctio, blanditiis ex. Exercitationem, voluptates!

Heading 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptates vitae labore blanditiis earum, debitis veritatis velit ex in numquam. A at eveniet tempore labore distinctio, blanditiis ex. Exercitationem, voluptates!

Heading 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptates vitae labore blanditiis earum, debitis veritatis velit ex in numquam. A at eveniet tempore labore distinctio, blanditiis ex. Exercitationem, voluptates!

Text component Un-ordered List

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Text component Ordered List

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet
Manrope Medium
Manrope Medium Italic
Manrope Semi Bold
Manrope Semi Bold Italic
Manrope Bold
Manrope Bold Italic
Small Text

Default Un-ordered List

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Default Ordered List

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet

Bullet un-ordered List

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
!