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.

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 400

Primary 500

Primary 600

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

Outline

Large

Button Text

Outline

Button Text

Outline

Small

Button Text

Badges

Primary

Large

Badge

Primary

Badge

Primary

Small

Badge

Secondary

Large

Badge

Secondary

Badge

Secondary

Small

Badge

Outline

Large

Badge

Outline

Badge

Outline

Small

Badge

Tabs

Tabs Horizontal

Drop Shadows

Drop Shadow

Drop Shadow w/ Hover State

Cards

Card Large

Card

Card Small

Card Large -Hover

Card - Hover

Card Small - Hover

Avatars

Horizontal

Large

John Doe

Marketing Specialist

Horizontal

Normal

John Doe

Marketing Specialist

Horizontal

Small

John Doe

Vertical

Large

John Doe

Marketing Specialist

Vertical

Normal

John Doe

Marketing Specialist

Vertical

Small

John Doe

Icons

16x16

24x24

32x32

48x48

64x64

96x96

128x128