Sections
Container
Typography

Heading

Typescale

For headings we use a typescale that is a multiple of 1.5. Which
means that each heading should be 1.5 times the size of its
preceding heading. So if you have an H2 that is 80px, the heading
above it should be (40 x 1.5) = 60px.

How to Use

Poppins is a display font. Which means it should be used for all
headings. It can occassionally be used for small utility text as well
since it is more basic than our body font.

Access

Poppins is a google font. Which means that it can be viewed and
downloaded from Google Fonts online.

Typography
Specs

Heading1

Heading2

Heading3

Heading4

Heading5
Heading6

Display

Typography
Specs

Heading1

Heading2

Body

How to Use

Quicksand should be used for paragraphs only. It should be between
14 and 24 px with erither a regular, medium or bold weight and 150%
line-height so that is easily readable and scannable. It should
primarily be left-aligned, and rarely center-aligned.

Access

Quicksand is a google font. Which means that it can be viewed and
downloaded from Google Fonts online.

Typography
Specs
Body text 1
Body text 2
Body text 3
Body text 4
Body text 5

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.

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.

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.

Font Size: 20px  Font Height: 30px

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.

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.

Buttons
ButtonButtonButton Button Button MVP ServicesMVP ServicesButton Text