Typography
Colour
Buttons
Spacing
Text
Containers
Columns
Grid
Spacers
Components

Style Guide

Typography

Headings

Typeface
Figtree
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Element -  Normal / 54px / mob-36px

H1

Element - Normal / 40px / mob-28px

H2

Element - Normal / 34px / mob-24px

H3

Element - Normal / 28px / mob-20px

H4

Element - Normal / 22px / mob-18px
H5
Class
H1
Class
H2
Class
H3
Class
H4
Class
H5

Body

Typeface
Figtree
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Text Callout (text-callout) - Light / 40px / 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph Big (p-big) -  Normal / 40px / 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph - Normal / 22px / 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph Small (p-small) - Normal / 1.1rem / 1.4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Additional Type Styles

BOLD

This is a bold text

Italic

This is an italized text

Strikethrough

This is a strikethrough text

Underline

This is an underline text

Highligh

This is a highlighted text

Link

This is a link text

Colour

Pomelo

Pomelo Green

Primary Accent Color
##91f9bd

Teal

Secondary Colour
#006D68

Lime

Secondary Colour
#D4FF59

Darker Lime

Secondary Colour
#B6F00F

UI Colours

Grey

Small size text
#707070

Grey

Large size text
#949494

Grey

Background
#F9F9F9

Cream

Background
#e8e8e3

Buttons

Primary - 16px / 1.4em / 0.3px
Primary Button
Secondary - 16px / 1.6em / 0.3px
Secondary Button
Outline - 16px / 1.6em / 0.3px
Outline Button

Spacing

Margin

mb-1 (margin-bottom: 12px;)
mb-2 (margin-bottom: 28px;)
mb-3 (margin-bottom: 48px;)
m-0 (margin: 0;)
mt-3 (margin-top: 48px;)
mt-2 (margin-top: 28px;)
mt-1 (margin-top: 16px;)

Padding

p-15 (padding: 15;)
p-0 (padding: 0;)
pt-0 (padding-top: 0;)
pb-0 (padding-bottom: 0;)
pr-50 (padding-right: 50;)

Text

Color

t-primary
t-white
t-dark
t-grey

Alignment

t-center
t-right
t-left
d-none

Containers

Container
Container / c-10cols
Container / c-8cols
Container / c-6cols

Columns

desk -1

desk - 2
3 Col
4 Col
5 Col
6 Col
7 Col
8 Col
9 Col
10 Col
11 Col
12 Col

Grid

Grid 4
Grid 3
Grid 2
Grid 2-1
Grid 1-2
Grid 1-1

Spacers

16px
24px
32px
64px
80px
96px
128px