Style Guide

A guide to all the styles used throughout this website.

Color

Primary

Purple
#5229F3

Neutrals

Black
Text Color
#2B2A2E
Off-white
Primary Background
#FAFAFC
Light Purple
Secondary Background
#F4F2FA
Utility
Template Elements Background
#F4F2FA
White
#ffffff

Typography

Headings

Heading 1

Bold 700   •  104/100%  • -1

Heading 2

Semibold 600   •  64/120%  •  0.0

Heading 3

Semibold 600  •  48/130%  •  0.0

Heading 4

Semibold 600 •  32/120%  •  0.0
Heading 5
Semibold 600 • 28/130%  •  0.0
Heading 6
Semibold 600 •  24/130%  •  0.0

Paragraph

Paragraph Jumbo

Regular  •  24/130%  •  -0.2%

Paragraph Medium

Medium  •  128/100%  •  0.0

Paragraph Regular

Regular •  16/130%  •  -0.2%

Paragraph Small

Regular •  14/130%  •  0

Labels

Label Large
Semibold 600 •  18/100%  •  0.0
Label Medium
Medium 500 •  14/100%  •  0.0
label small
Semibold 600 •  12/100%  •  1%

Buttons

Button TextButton TextButton TextLearn more
Arrow Link
→

Social Icons

Inputs

Contact us

Checkbox group label

Checkbox group label

Success

Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich Text Block

Heading 1

Bold  •  64/130%  •  0.0

Heading 2

Semibold  •  48/130%  •  0.0

Heading 3

Semibold  •  32/130%  •  0.0

Heading 4

Semibold  •  24/140%  •  0.0

Heading 5

Semibold •  16/150%  •  0.0

Heading 6

Semibold  •  12/150%  •  0.0

‍

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Blockquote

Bold  •  64/130%  •  0.0

‍

Paragraph Text

Regular  •  18/140%  •  0.0

‍

H1-Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tristique sit ullamcorper phasellus lectus iaculis nunc quis et. Quam commodo imperdiet auctor sapien quis semper habitasse augue in. Fringilla cursus in elit felis. Vitae vitae libero pretium odio arcu neque. Egestas velit velit ac purus in.

H2-Quis tincidunt arcu duis quis aliquam senectus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis aliquam netus tincidunt. Euismod neque cursus amet arcu id dui. Ac tellus pellentesque placerat fringilla gravida. Bibendum adipiscing justo dolor sagittis, orci massa. Proin nulla venenatis metus, adipiscing. Auctor pretium, tristique fringilla eu, amet duis morbi. Sed.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H3-Euismod neque cursus amet arcu id dui

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis aliquam netus tincidunt. Euismod neque cursus amet arcu id dui. Ac tellus pellentesque placerat fringilla gravida.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Blockquote-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis aliquam netus tincidunt. Euismod neque cursus amet arcu id dui. Ac tellus pellentesque placerat fringilla gravida.
Placeholder image courtesy of Unsplash.
This is a caption

H4-Ac tellus pellentesque placerat fringilla gravida

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis aliquam netus tincidunt. Euismod neque cursus amet arcu id dui. Ac tellus pellentesque placerat fringilla gravida.

H5-Proin facilisis aliquam netus tincidunt

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis aliquam netus tincidunt. Euismod neque cursus amet arcu id dui. Ac tellus pellentesque placerat fringilla gravida.

H6-Cursus amet arcu id dui

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis aliquam netus tincidunt. Euismod neque cursus amet arcu id dui. Ac tellus pellentesque placerat fringilla gravida.