Style Guide

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

Colors

Primary

Primary 100

#111142

Primary 90

#1C1B67

Primary 80

#28278B

Primary 70

#3534AF

Primary 60

#4341D1

Primary 50

#6362DC

Primary 40

#8583E6

Primary 30

#A7A6EE

Primary 20

#CACAF6

Primary 10

#EFEFFD

Secondary

Secondary 60

#FFC6C6

Neutral

Neutral 100

#0E0F11

Neutral 90

#3C404B

Neutral 80

#5E6875

Neutral 70

#838D95

Neutral 60

#AAAFB6

Neutral 50

#D0D4D9

Neutral 40

#E0E3E6

Neutral 30

#EDF0F3

Neutral 20

#F9FAFB

Neutral 10

#FFFFFF

Typography

This is Display 3XL

Heading 1 - 72px / 1.125em

This is Display 2XL

Heading 1 - 72px / 1.166em

This is Heading XL

Heading 1 - 72px / 1.157em

This is Heading L

Heading 2 - 60px / 1.125em

This is Heading M

Heading 3 -48px / 1.333em

This is Heading S

Heading 4 - 36px / 1.4em

This is Heading XS

Heading 5 - 30px / 1.555em

This is Heading XXS

Heading 6 - 24px / 1.5em

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 - 20px / 1.777em

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

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 S - 16px / 1.714em

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 XS - 16px / 1.333em

Text Link

Buttons

Button

Primary S

Button

Primary M

Button

Secondary S

Button

Secondary M

Button

Tertiary S

Button

Tertiary M

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.