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.

Menu

Colors Typography Icons Forms Rich Text Buttons

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

Fox jumps over the lazy dog

Fox jumps over the lazy dog

Fox jumps over the lazy dog

Fox jumps over the lazy dog

Fox jumps over the lazy dog

Fox jumps over the lazy dog

Fox jumps over the lazy dog

Design, Supply, Install

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

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

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

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

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 some text inside of a div block.

This is some text inside of a div block.

This is some text inside of a div block.

This is some text inside of a div block.

This is some text inside of a div block.

Link - Lorem ipsum dolor sit amet

Bold - Lorem ipsum dolor sit amet

Italic - Lorem ipsum dolor sit amet

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

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.

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.

Buttons

Primary - Small

Primary - Default

Secondary - Small

Secondary - Default

Tertiary Button

Tertiary - Small

Tertiary - Default

Special Style Classes

.Series

.series .small