Menu

Spacing & Margin

Newsletter Form

Colors

Primary Colors

Blue

#14426A

Pink

#FC4085

Yellow

#F5A548

Dark Blue

#FC4085

Secondary Colors

Light Blue

#2DADE4

Light Pink

#FF5C97

Dark Pink

#F82F79

Light Yellow

#FAD2A3

Dark Yellow

#E58B24

Red

#F54848

Alt Yellow

#FAE279

Neutral Colors

Neutral 300

#E6E7E8

Neutral 200

#E6E7E8

Neutral 100

#FFFFFF

Gray 600

#E6E7E8

Gray 400

#E6E7E8

Gray 300

#E6E7E8

Typography

Fox jumps over the lazy dog

Heading 1 - Desktop 104px / 100%; Tablet 64px / 100%; Mobile 36px / 100%

Fox jumps over the lazy dog

Heading 2 - Desktop 64px / 120%; Tablet 45px / 120%; Mobile 32px / 120%

Fox jumps over the lazy dog

Heading 3 - Desktop 56PX / 120%; tablet 40px / 120%; Mobile 28px / 120%

Fox jumps over the lazy dog

Heading 4 - Desktop 40px / 120%; tablet 32px / 120% ; mobile 22px / 120%

Fox jumps over the lazy dog

Heading 5 - desktop 28px / 120%; Tablet 22px / 120%; Mobile 18px / 120%

Fox jumps over the lazy dog

Heading 6 - desktop 22px / 140%; Tablet 18px / 140%; Mobile 15px / 140%

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 - desktop 15px / 140%; Tablet 12px / 140%; Mobile 12px / 140%

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 - desktop 20px / 140%; Tablet 16px / 140%; Mobile 14px / 140%

Link - Lorem ipsum dolor sit amet

text link - desktop 20px / 140%; Tablet 16px / 140%; Mobile 14px / 140%

Bold - Lorem ipsum dolor sit amet

text bold - desktop 20px / 140%; Tablet 16px / 140%; Mobile 14px / 140%

Italic - Lorem ipsum dolor sit amet

text italic - desktop 20px / 140%; Tablet 16px / 140%; Mobile 14px / 140%

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

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

numbered list

Spacing & Margin

Containers

container-xlarge - max 100rem

container-large - max 80rem

container-medium - max 64rem

container-small - max 48rem

Spacers

spacer-xlarge - 5rem

spacer-large - 3rem

spacer-medium - 2rem

spacer-small - 1rem

Margins

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-large- 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-left / margin-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-left / margin-large - 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-left / margin-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-left / margin-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-right / margin-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-right / margin-large - 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-right / margin-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-right / margin-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-top / margin-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-top / margin-large - 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-top / margin-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-top / margin-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-bottom / margin-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-bottom / margin-large - 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-bottom / margin-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-bottom / margin-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-vertical / margin-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-vertical / margin-large - 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-vertical / margin-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-vertical / margin-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-horizontal / margin-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-horizontal / margin-large - 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-horizontal / margin-meduim - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

margin-horizontal / margin-small - 1rem

Padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-large- 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-left / padding-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-left / padding-large- 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-left / padding-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-left / padding-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-right / padding-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-right / padding-large- 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-right / padding-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-right / padding-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-top / padding-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-top / padding-large- 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-top / padding-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-top / padding-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-bottom / padding-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-bottom / padding-large- 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-bottom / padding-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-bottom / padding-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-vertical / padding-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-vertical / padding-large- 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-vertical / padding-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-vertical / padding-small - 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-horizontal / padding-xlarge - 5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-horizontal / padding-large- 3rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-horizontal / padding-medium - 2rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

padding-horizontal / padding-small - 1rem

Buttons

Primary - Small

Primary - Default

Primary - Large

Secondary - Small

Secondary - Default

Secondary - Large

Forms

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.

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 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.