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

#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 50

#f1fcf9

Primary 100

#d1f6ed

Primary 200

#a2eddc

Primary 300

#64dac4

Primary 400

#3ec3ae

Primary 500

#24a895

Primary 600

#1b867a

Primary 700

#196c63

Primary 800

#195650

Primary 900

#194844

Primary 950

#082b29

System Colors

Success 50

#f1fcf9

Success 100

#d1f6ed

Success 200

#a2eddc

Success 300

#64dac4

Success 400

#3ec3ae

Success 500

#24a895

Success 600

#1b867a

Success 700

#196c63

Success 800

#1b602a

Success 900

#184f25

Primary 950

#072c10

Warning 50

#fffdeb

Warning 100

#fdf9c8

Warning 200

#fcf28b

Warning 300

#fae54f

Warning 400

#f9d626

Warning 500

#f3bb1a

Warning 600

#d78f08

Warning 700

#b2660b

Warning 800

#b2660b

Warning 900

#774110

Warning 950

#774110

Error 50

#fef2f2

Error 100

#fef2f2

Error 200

#fef2f2

Error 300

#fda4a4

Error 400

#fda4a4

Error 500

#fda4a4

Error 600

#de2425

Error 700

#bb1a1b

Error 800

#bb1a1b

Error 900

#801c1d

Error 950

#460909

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

Icons

16x16

24x24

32x32

48x48

64x64

96x96

128x128