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

Colors

Neutral Colors

Neutral 50

#f5f6f6

Neutral 100

#e5e7e8

Neutral 200

#cdd0d4

Neutral 300

#abafb5

Neutral 400

#808790

Neutral 500

#656b75

Neutral 600

#575b63

Neutral 700

#4a4d54

Neutral 800

#414349

Neutral 900

#3a3c3f

Neutral 950

#202124

Primary Colors

Primary 400

#e9a5f5

Primary 500

#ea80fc

Primary 600

#b74ec9

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

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

Icons

16x16

24x24

32x32

48x48

64x64

96x96

128x128