Style Guide

On this Page you can find all the Elements that have been used across the Website. This allows you to make global changes to all forms of Typography, Colors, Forms & more.

Typography

Headings

Heading
XXL

Heading

Heading
XL

Heading

Heading
L

Heading

Heading
M

Heading

Heading
S

Heading

Heading
XS

Heading

Heading
XXS

Heading

Paragraphs

Paragraph
Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lists

Unordered List
  • This is a List Item
  • This is a List Item
  • This is a List Item
Ordered List
  1. This is a List Item
  2. This is a List Item
  3. This is a List Item

Links

Rich Text

Heading
H1

Heading

Heading
H2

Heading

Heading
H3

Heading

Heading
H4

Heading

Heading
H5
Heading
Heading
H6
Heading
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Image
This is an Image Caption

Colors

Neutral Colors
Neutral 50
Neutral 100
Neutral 200
Neutral 300
Neutral 400
Neutral 500
Neutral 600
Neutral 700
Neutral 800
Neutral 900
Neutral 950
Primary Colors
Primary
System Colors
Success 400
Success 500
Success 600
Warning 400
Warning 500
Warning 600
Error 500
Error 600
Error 700

Layout Grids

1 Grid
2 Grid
3 Grid
4 Grid
1-2 Grid
2-1 Grid

Spacing System

To give Elements more breathing Room, you can apply the following Global Combo Classes to all Elements.
The Highlight can be replaced with where you want the Margin (MG) / Padding (PD) to be. Ex.: MG Top 4px, MG Left 8px, MG Right 12px, MG Bottom 16px

Margin:
  • MG Bottom 4px
  • MG Bottom 8px
  • MG Bottom 12px
  • MG Bottom 16px
  • MG Bottom 24px
  • MG Bottom 32px
  • MG Bottom 40px
  • MG Bottom 48px
  • MG Bottom 56px
  • MG Bottom 64px
  • MG Bottom 96px
  • MG Bottom 128px
Padding:
  • PD Bottom 4px
  • PD Bottom 8px
  • PD Bottom 12px
  • PD Bottom 16px
  • PD Bottom 24px
  • PD Bottom 32px
  • PD Bottom 40px
  • PD Bottom 48px
  • PD Bottom 56px
  • PD Bottom 64px
  • PD Bottom 96px
  • PD Bottom 128px
X/Y-Axis:
  • PD X-Axis 4px
  • PD X-Axis 8px
  • PD X-Axis 12px
  • PD X-Axis 16px
  • PD X-Axis 24px
  • PD X-Axis 32px
  • PD X-Axis 40px
  • PD X-Axis 48px
  • PD X-Axis 56px
  • PD X-Axis 64px
  • PD X-Axis 96px
  • PD X-Axis 128px
  • PD X-Axis 156px
  • PD X-Axis 196px

Buttons

Primary
Large
Button Text
Primary
Small
Button Text
Primary
Icon
Button Text
Secondary
Large
Button Text
Secondary
Button Text
Secondary
Small
Button Text
Secondary
Icon
Button Text

Icons

16x16
24x24
32x32
48x48
64x64
96x96
128x128

Form Elements

Input Fields
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input Fields with Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Message Fields
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox / Radio Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.