About

Typography

Headings, body, and other font text.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Tagline

Tagline Alt

Body text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum.

Large text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum.

Small text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum.

Colors

A complete color swatch
used to color all interface
elements on the website.

Primary

#0c2dae

Primary 80

#2442b6

Primary 40

#6d81ce

Primary 10

#e6e9f6

Secondary

#52c5ae

Secondary 80

#74d0be

Secondary 40

#a8e2d6

Secondary 10

#edf9f6

Info

#bbdefb

Success

#c8e6c9

Warning

#ffe0b2

Error

#f8bbd0

Neutral Default

#000000

Neutral 80

#333333

Neutral 60

#666666

Neutral 40

#999999

Neutral 20

#dddddd

Neutral 15

#eeeeee

Neutral 10

#f4f4f4

Neutral 5

#fafafa

Neutral White

#ffffff

Grid Columns

Layout your website anyway you want.

Desktop Columns

.f-col-2

.f-col-3

.f-col-4

.f-col-5

.f-col-6

.f-col-1-2

.f-col-2-1

.f-col-1-3

.f-col-3-1

.f-col-2-3

.f-col-3-2

Spacing

A complete spacing guide
Selectors for padding, margin
and space below items

padding xl

.f-padding-xl

padding large

.f-padding-l

padding medium

.f-padding-m

padding small

.f-padding-s

padding xs

.f-padding-xs

margin xl

.f-margin-xl

margin large

.f-margin-l

margin medium

.f-margin-m

margin small

.f-margin-s

margin xs

.f-margin-xs

margin bottom xl

.f-margin-bottom-xl

margin bottom large

.f-margin-bottom-l

margin bottom medium

.f-margin-bottom-m

margin bottom small

.f-margin-bottom-s

margin bottom xs

.f-margin-bottom-xs