Style Guide

This style guide provides a central location to make stylistic changes to your site. If you need additional help, Webflow University provides a library of videos, tutorials and resources to help you get started.

Colors

Primary Colors

Primary 1

#5853EC

Primary 2

#453FF3

Primary 3

#ECECFE

Secondary Colors

Secondary 1

#FF623E

Secondary 2

#FF481F

Neutral Colors

Neutral 800

#25272A

Neutral 700

#3C3E43

Neutral 600

#686D76

Neutral 500

#80858F

Neutral 400

#9A9EA5

Neutral 300

#CCCED2

Neutral 200

#E6E7E8

Neutral 100

#FFFFFF

Typography

Fox jumps over the lazy dog

Heading 1 - 72px / 3.75em

Fox jumps over the lazy dog

Heading 2 - 56px / 2.92em

Fox jumps over the lazy dog

Heading 3 - 40px / 2.08em

Fox jumps over the lazy dog

Heading 4 - 32px / 1.67em

Fox jumps over the lazy dog

Heading 5 - 24px / 1.25em

Fox jumps over the lazy dog

Heading 6 - 20px / 1.04em

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 - 14px / 0.73em

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

Paragraph large - 22px / 1.15em

Link - Lorem ipsum dolor sit amet

text link - 16px / 0.83em

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

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