Style Guide

Webflow University provides a library of videos, tutorials and resources to help you get started.

Colors

Primary Colors

Primary 900

#42307d

Primary 800

#53389e

Primary 700

#6941c6

Primary 600

#7f56d9

Primary 500

#9e77ed

Primary 400

#b692f6

Primary 300

#d6bbfb

Primary 200

#e9d7fe

Primary 100

#f4ebff

Primary 50

#f9f5ff

Primary 25

#fcfaff

Neutral Colors

Neutral 900

#101828

Neutral 800

#1d2939

Neutral 700

#344054

Neutral 600

#475467

Neutral 500

#667085

Neutral 400

#98a2b3

Neutral 300

#d0d5dd

Neutral 200

#e4e7ec

Neutral 100

#f2f4f7

Neutral 50

#f9fafb

Neutral 25

#fcfcfd

Typography

This is Heading Display 1

Heading 1 - 72px / 5.625 REM

This is Heading Display 2

Heading 2 - 60px / 4.5 REM

This is Heading Display 3

Heading 3 -48px / 3.75 REM

This is Heading Display 4

Heading 4 - 36px / 2.75 REM

This is Heading Display 5

Heading 5 - 30px / 2.37 REM

This is Heading Display 6

Heading 6 - 24px / 2 REM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit lectus sed arcu dignissim, sed bibendum sapien consequat. Maecenas porta efficitur nulla quis mattis morbi egestas velit consequat, tincidunt quam eget.

Text XL - 20px / 1.875 REM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit lectus sed arcu dignissim, sed bibendum sapien consequat. Maecenas porta efficitur nulla quis mattis morbi egestas velit consequat, tincidunt quam eget.

Text L - 18px / 1.5 REM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit lectus sed arcu dignissim, sed bibendum sapien consequat. Maecenas porta efficitur nulla quis mattis morbi egestas velit consequat, tincidunt quam eget.

Text M - 16px / 1.5 REM

Text Link

Text Link

Buttons

Button

Primary S

Button

Primary M

Button

Primary L

Button

Secondary S

Button

Secondary M

Button

Secondary L

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.

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
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

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.

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
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

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.

“Responsive Web Design always plays important role whenever going to promote your website.”

Suspendisse varius enim