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

XL

Heading

L

Heading

M

Heading

S

Heading

XS

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

This is a List Item
This is a List Item
This is a List Item

Links

Link

Text Link

Rich Text

Heading

H1

Heading

H2

Heading

H3

Heading

H4

Heading

H5

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

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

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.