Style Guide

This style guide provides a central location to make
stylistic changes to your site.

Menu

ColorsTypographyIconsFormsButtonsHover IllustrationsAnimationsFooter

Colors

Primary Colors

Primary 1

#006bFD

Primary 2

#122634

Primary 3

#FB4B00

Secondary Colors

Secondary 1

#d9d9d9

Secondary 2

#f2f2f2

Secondary 3

#FFFFFF

Secondary 4

#000000 A20%

Alert Colors

Alert 1

#FB4B00

Alert 2

#E21726

Alert 3

#FCC71D

Alert 4

#17AA3D

Neutral Colors

Neutral 800

#25272A

Neutral 700

#3C3E43

Neutral 600

#686D76

Neutral 500

#80858F

Neutral 400

#9A9EA5

Neutral 300

#D9D9d9

Neutral 200

#F2f2f2

Neutral 100

#FFFFFF

Typography

Language is Human

Heading 1 - 86px

Line height - 83px

Fox jumps over the lazy dog

Heading 2 - 60px

Line height - 83px

Fox jumps over the lazy dog

Heading 3 - 58px

Line height - 67px

Fox jumps over the lazy dog

Heading 4 - 56px

Line height - 83px

Fox jumps over the lazy dog

Heading 5 - 28px

Line height - 30px

Fox jumps over the lazy dog

Heading 6 - 32px

Line height - 40px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph small - 18px

Line height - 22px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph normal - 20px

Line height - 25px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph large - 32px

Line height - 40px

Link - Lorem ipsum dolor sit amet

text link - 32px

Line Height- 58px

Bold - Lorem ipsum dolor sit amet

text bold - 18px / 0.94em

Italic - Lorem ipsum dolor sit amet

text italic - 18px / 0.94em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

block quote

  • Lorem ipsum dolor sit amet consectetur.
  • Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
  • Sapien in tempus lectus lorem quis est.

Bullet list

  1. Lorem ipsum dolor sit amet consectetur.
  2. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
  3. Sapien in tempus lectus lorem quis est.

numbered list

Icons

Forms

Text Link
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich Text

This is Heading 1

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.

Lorem Ipsum dolor sim amet

This is Heading 2

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.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
  3. Sapien in tempus lectus lorem quis est.

This is Heading 3

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

This is Heading 4

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.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
  • Sapien in tempus lectus lorem quis est.
This is Heading 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.

This is Heading 6

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.

Buttons

Small

Primary - Small

Default

Primary - Default

Small

Secondary - Small

Default

Secondary - Default

Small

Tertiary - Small

Default

Tertiary - Default

Hover States

Heading

A sentence introducing the information available on our resources subdomain.

Small

Heading

A short description of the value of this offering: what it is, who it’s for, and why. Ut tempor sint quis nisi aliqua eiusmod aute.

Small
This is some text inside of a
div block.

tool tip on hover

Illustrations

Animations