Style Guide

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

Color

Primaries and grays controlled by the Global Swatch feature.

Primary
#685143
Primary Light
#8C786C
Secondary
#E4D7CF
Secondary Light
#F5EEEA
Gray 60
#8A8A8A
Gray 30
#B8BDC0
Gray 10
#E7E7E7
Black
#121212
White
#FFFFFF

Typography

Primaries and grays controlled by the Global Swatch feature.

64px

Display Text

Lorem ipsum dolor

48px

Heading 1

Lorem ipsum dolor

40px

Heading 2

Lorem ipsum dolor

32px

Heading 3

Lorem ipsum dolor

24px

Heading 4

Lorem ipsum dolor

20px

Heading 5

Lorem ipsum dolor

18px

Heading 6

Lorem ipsum dolor

14px

Title Text

Lorem ipsum dolor

18px

Body L Med

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

18px

Body L Reg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

16px

Body N Med

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

16px

Body N Reg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

14px

Body S Med

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

14px

Body S Reg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Heading Class

Primaries and grays controlled by the Global Swatch feature.

48px

Text Style H1

Lorem ipsum dolor

40px

Text Style H2

Lorem ipsum dolor

32px

Text Style H3

Lorem ipsum dolor

24px

Text Style H4

Lorem ipsum dolor

20px

Text Style H5

Lorem ipsum dolor

18px

Text Style H6

Lorem ipsum dolor

Rich Text

Primaries and grays controlled by the Global Swatch feature.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Headng 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Button

Primaries and grays controlled by the Global Swatch feature.

Button Text
Primary Button
Button Text
Secondary Button
Button Text
Primary Button

Forms

Primaries and grays controlled by the Global Swatch feature.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icon

Primaries and grays controlled by the Global Swatch feature.

Phospor Icon