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

Seaweed

#1d3c34

Black

#000000

White

#FFFFFF

Secondary Colors

Teal

#55b6b1

Gold Coast

#E3A130

Neutral Colors

Black 70%

#000000

Black 50%

#000000

White Smoke

#f5f5f5

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 - 18px / 0.94em

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

Primary Outline - Small

Default

Primary outline - Default

Small

Secondary - Small

Default

Secondary - Default

Default

Secondary outline - Small

Default

Secondary outline - Default

Spacing

Spacing - Tiny

Spacing - Small

Spacing - Medium

Spacing - Medium Large

Spacing - Large

Spacing - xLarge