Style Guide

A guide to all the styles used throughout this website.

Color

Primary

Blue

Primary Color
#175CFF

Secondary

Light Blue

Decorative Accents
#CCDBFF

Neutrals

White

Multipurpose
#ffffff

Light Grey

Secondary Background
#f5f8fa

Medium Grey

Tertiary Background
#F0F2F7

Dark Grey

Paragraph Copy
#2F3033

Black

Headings
#1C1C1F

Utility—Template Utility Pages

Utility

Template Elements
#f5f8fa

Typography

Headings

Heading 1

Medium  •  58px/130%  • -0.5px

Heading 2

Medium •  48px/130%  •  0.0

Heading 3

Medium  •  40px/130%  •  0.0

Heading 4

Medium  •  32px/140%  •  0.0
Heading 5
Medium  •  28px/140%  •  0.0
Heading 6
Medium  •  24px/140%  •  0.0

Paragraph

Paragraph Jumbo

Regular  •  24px/150%  •  0.0

Paragraph Large

Regular •  22px/150%  •  0.0

Paragraph Medium

Regular •  18px/150%  •  0.0

Paragraph Small (Base)

Regular  •  16px/150%  •  0.0

Paragraph Extra Small

Regular  •  14px/150%  •  0.0

Labels

Label Large
Medium  •  20px/100%  •  0.0
Label Medium
Medium  •  18px/100%  •  0.0
label small
Medium  •  128/100%  •  0.0

Text Link

Buttons

Button TextButton TextButton TextLearn more

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

Bold  •  64/130%  •  0.0

Heading 3

Bold  •  64/130%  •  0.0

Heading 4

Bold  •  64/130%  •  0.0

Heading 5

Bold  •  64/130%  •  0.0

Heading 6

Bold  •  64/130%  •  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

‍

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.

Shadows

Simple

Tiny

Simple

Small

Simple