Style Guide

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

Colors

Core Colors

Teal Darkest

#013941

Teal Darker

#00525E

Teal Base

#007989

Teal Light

#43AAB8

Teal Lighter

#AADBE1

Teal Lightest

#F1F9F9

Off White

#FFFCF6

Secondary Colors

Secondary 60

#CA9C67

Secondary 60

#FCB95C

Secondary 60

#F3B56C

Secondary Salmon

#FABB99

Secondary Rust

#FFC6C6

Secondary Red

#FFC6C6

Secondary Pink

#FE9090

Secondary Mint

#C2DADD

Secondary Purple

#7C2852

Secondary Blue

#587BDA

Secondary Light Blue

#8AA2E5

Secondary Cyan

#2F8AB7

Secondary Light Yellow

#FDD497

Secondary Peach

#FED4BE

Secondary Light Green

#EBFCF6

Secondary Mist

#ABB8BA

Secondary Yellow

#F9CB3D

Secondary Orange

#F47E1F

Secondary Aquamarine

#53C0A8

Secondary Lilac

#BDCBF0

Template Primary Colors (Removing)

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

Template Secondary (Removing)

Secondary 60

#FFC6C6

Slate

Slate 100

#172D30

Slate 90

#243C3F

Slate 80

#3C5255

Slate 70

#59797D

Slate 60

#84A5AA

Slate 50

#ABB8BA

Slate 40

#CDD4D6

Slate 30

#E7E9E9

Slate 20

#F2F2F2

Slate 10

#FAFAFA

Typography

This is Display 3XL

Heading 1 - 72px / 1em

This is Display 2.5XL

Heading 1 - 60px / 1em

This is Display 2XL

Heading 1 - 48px / 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

Termina

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.