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

#f7f7f8

Neutral 100

#eeeef0

Neutral 200

#d9d9de

Neutral 300

#b8b9c1

Neutral 400

#91939f

Neutral 500

#737584

Neutral 600

#5d5e6c

Neutral 700

#4c4d58

Neutral 800

#41414b

Neutral 900

#393941

Neutral 950

#101012

Primary Colors

Primary 400

#3ec3ae

Primary 500

#24a895

Primary 600

#1b867a

System Colors

Success 400

#3ec3ae

Success 500

#24a895

Success 600

#1b867a

Warning 400

#f9d626

Warning 500

#f3bb1a

Warning 600

#d78f08

Error 500

#fda4a4

Error 600

#de2425

Error 700

#bb1a1b

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

White

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