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.

Red
#F46F6F
Blue
#5398FF
Orange
#FF843F
Yellow
#FECC17
Pink
#D1A4FF
Cyan
#31D4AD
Green Light
#E7E7E7
Background Color
#F6F5F1
Background Darker
#EADFD8
Black
#000000
Gray 90
#202020
Gray 30
#B8BDC0
Gray 10
#E7E7E7
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

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.

Rich Text

Primaries and grays controlled by the Global Swatch feature.

What’s a Rich Text element?

Before working on a project, it is necessary for the team to decide on a methodology to use. Choosing a compatible method is indispensable to a successful project, as they give your project a structure, a framework, which you and your team can work and communicate by. The two most popular methodologies are the traditional waterfall approach and the agile approach. But which methodology should you choose for your own project? In order to help you make an informed decision, we compiled the most striking benefits of each model – and their respective challenges. Want to bring your project management to the next level? Then check out our article on the best tools for project managers here.

Main phases of the waterfall process

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

https://unsplash.com/

Sustainability

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Button

Primaries and grays controlled by the Global Swatch feature.

This is Button
Primary Button
Button Text
Secondary 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