View
Project

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, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Image
This is an Image Caption

Colors

Neutral Colors
White
Black
Colors
Orange Light
Orange Dark
Blue Dark
Blue Light
Pale Yellow
Purple
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
Secondary
Large
Button Text
Secondary
Button Text
Secondary
Small
Button Text

Badges

Primary
Large
Badge
Primary
Badge
Primary
Small
Badge

Form Elements

Input Fields
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.