Style Guide

This style guide contains styles and elements that are used throughout the website. 
Changes made here will be applied globally.

Brand

Logo
Primary Font

Figtree

Heading 1

Lorem ipsum dolor sitamet

Heading 2

Lorem ipsum dolor sitamet

Heading 3

Lorem ipsum dolor sitamet

Heading 4

Lorem ipsum dolor sitamet

Heading 5
Lorem ipsum dolor sitamet
Heading 6
Lorem ipsum dolor sitamet
Paragraphs

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.

Quote Blocks
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit varius
enim in eros.
Links
Text Link
Unordered Lists
  • 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.
Ordered Lists
  • 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.
0%
2%
5%
10%
15%
20%
30%
50%
70%
80%
90%
100%
0%
2%
5%
25%
40%
50%
70%
80%
100%
Error
Warning
Background - Sand

Typography

Font
Primary Font

Figtree

Heading 1

Lorem ipsum dolor sitamet

Heading 2

Lorem ipsum dolor sitamet

Heading 3

Lorem ipsum dolor sitamet

Heading 4

Lorem ipsum dolor sitamet

Heading 5
Lorem ipsum dolor sitamet
Heading 6
Lorem ipsum dolor sitamet
Paragraphs

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.

Quote Blocks
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit varius
enim in eros.
Links
Text Link
Unordered Lists
  • 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.
Ordered Lists
  • 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.
0%
2%
5%
10%
15%
20%
30%
50%
70%
80%
90%
100%
0%
2%
5%
25%
40%
50%
70%
80%
100%
Error
Warning
Background - Sand
Font
Primary Font

Figtree

Heading 1

Lorem ipsum dolor sitamet

Heading 2

Lorem ipsum dolor sitamet

Heading 3

Lorem ipsum dolor sitamet

Heading 4

Lorem ipsum dolor sitamet

Heading 5
Lorem ipsum dolor sitamet
Heading 6
Lorem ipsum dolor sitamet
Paragraphs

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.

Quote Blocks
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit varius
enim in eros.
Links
Text Link
Unordered Lists
  • 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.
Ordered Lists
  • 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.
0%
2%
5%
10%
15%
20%
30%
50%
70%
80%
90%
100%
0%
2%
5%
25%
40%
50%
70%
80%
100%
Error
Warning
Background - Sand
HTML Tags
Primary Font

Figtree

Heading 1

Lorem ipsum dolor sitamet

Heading 2

Lorem ipsum dolor sitamet

Heading 3

Lorem ipsum dolor sitamet

Heading 4

Lorem ipsum dolor sitamet

Heading 5
Lorem ipsum dolor sitamet
Heading 6
Lorem ipsum dolor sitamet
Paragraphs

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.

Quote Blocks
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit varius
enim in eros.
Links
Text Link
Unordered Lists
  • 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.
Ordered Lists
  • 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.
0%
2%
5%
10%
15%
20%
30%
50%
70%
80%
90%
100%
0%
2%
5%
25%
40%
50%
70%
80%
100%
Error
Warning
Background - Sand

Color

Neutral Light Color
Primary Font

Figtree

Heading 1

Lorem ipsum dolor sitamet

Heading 2

Lorem ipsum dolor sitamet

Heading 3

Lorem ipsum dolor sitamet

Heading 4

Lorem ipsum dolor sitamet

Heading 5
Lorem ipsum dolor sitamet
Heading 6
Lorem ipsum dolor sitamet
Paragraphs

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.

Quote Blocks
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit varius
enim in eros.
Links
Text Link
Unordered Lists
  • 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.
Ordered Lists
  • 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.
0%
2%
5%
10%
15%
20%
30%
50%
70%
80%
90%
100%
0%
2%
5%
25%
40%
50%
70%
80%
100%
Error
Warning
Background - Sand
Neutral Dark Color
Primary Font

Figtree

Heading 1

Lorem ipsum dolor sitamet

Heading 2

Lorem ipsum dolor sitamet

Heading 3

Lorem ipsum dolor sitamet

Heading 4

Lorem ipsum dolor sitamet

Heading 5
Lorem ipsum dolor sitamet
Heading 6
Lorem ipsum dolor sitamet
Paragraphs

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.

Quote Blocks
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit varius
enim in eros.
Links
Text Link
Unordered Lists
  • 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.
Ordered Lists
  • 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.
0%
2%
5%
10%
15%
20%
30%
50%
70%
80%
90%
100%
0%
2%
5%
25%
40%
50%
70%
80%
100%
Error
Warning
Background - Sand
Accent Color
Primary Font

Figtree

Heading 1

Lorem ipsum dolor sitamet

Heading 2

Lorem ipsum dolor sitamet

Heading 3

Lorem ipsum dolor sitamet

Heading 4

Lorem ipsum dolor sitamet

Heading 5
Lorem ipsum dolor sitamet
Heading 6
Lorem ipsum dolor sitamet
Paragraphs

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.

Quote Blocks
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit varius
enim in eros.
Links
Text Link
Unordered Lists
  • 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.
Ordered Lists
  • 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.
0%
2%
5%
10%
15%
20%
30%
50%
70%
80%
90%
100%
0%
2%
5%
25%
40%
50%
70%
80%
100%
Error
Warning
Background - Sand