Style Guide

A guide to all the styles used throughout this website.

Color

Primary

Blue

Primary Color
#1B6DD8

Dark Blue

Primary Backgound
#0A1338

Dark Blue

Secondary Backgound
#070B29

Secondary

Light Blue

Hover
#4696FF

White

Heading Text Color
#ffffff

Off White

Paragraph Text Color
#4696FF

Neutrals

Black

Text Color
#000000

Light Grey

Disabled Background
#F0F3FC

Medium Grey

Disabled Text
#8087A2

Utility—Template Utility Pages

Utility

Template Elements
#070B29

Typography

Display

Display Large

Font size: 172px | Line height: 100% | Tracking: 0% | Regular

Display Medium

Font size: 100px | Line height: 100% | Tracking: 0% | Regular

Display Small

Font size: 60px | Line height: 150% | Tracking: 0% | Regular

Headings

Heading 1

Font size: 44px | Line height: 150% | Tracking: 0% | Regular

Heading 2

Font size: 36px | Line height: 150% | Tracking: 0% | Regular

Heading 3

Font size: 30px | Line height: 150% | Tracking: 0% | Regular

Heading 4

Font size: 24px | Line height: 150% | Tracking: 0% | Medium
Heading 5
Font size: 20px | Line height: 150% | Tracking: 0% | Medium
Heading 6
Font size: 16px | Line height: 150% | Tracking: 0% | Bold

Paragraph

Paragraph Large

Font size: 20px | Line height: 150% | Tracking: 0% | Regular

Paragraph Regular

Font size: 16px | Line height: 150% | Tracking: 0% | Regular

Paragraph Small

Font size: 14px | Line height: 150% | Tracking: 0% | Regular

Paragraph Tiny

Font size: 12px | Line height: 150% | Tracking: 0% | Regular

Labels

label small
Font size: 12px | Line height: 150% | Tracking: 0% | Medium

Link

Text Link
Font size: 16px | Line height: 150% | Tracking: 0% | SemiBold

Buttons

Button TextButton TextButton TextButton TextButton Text

Icons

Inputs

Contact us

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/120%  •  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.