Design guidelines

Our design system helps us work together to build a great experience for all of Webflow’s users and employees.

Typography

Headings & large texts

Webflow provides a constrained set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used. Don’t use units for line-heights. Keep it unitless.

Design. Build. Launch.

H0 — 8rem (128px) / 1.04

Design. Build. Launch.

H1 — 5.313REm (85px) / 1.04

Design. Build. Launch.

H2 — 3.5rem (56px) / 1.04

Design. Build. Launch.

H3 — 2.313rem (37px) / 1.04

Design. Build. Launch.

H4 — 1.5rem (24px) / 1.3
Design. Build. Launch.
H5 — 1rem (16px) / 1.3
Design. Build. Launch.
H6 — 0.9375rem (15px) / 1

Paragraphs and caption

WF Visual Sans is the standard typeface for Webflow on the web for large texts, headings and paragraphs in it's different variations.

To make the most of the web, we need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world.

Paragraph-xxl — 2.125rem (34px) / 1.5

To make the most of the web, we need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world.

Paragraph-xl — 1.5rem (24px) / 1.6

Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.

Paragraph-l — 1.125rem (18px) / 1.6

To make the most of the web, we need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world. Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.

Paragraph — 1rem (16px) / 1.6

Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities. We need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world.

Paragraph-s — 0.875REM (14px) / 1.6
Design. Build. Launch.
Eyebrow — 0.9375rem (15px) / 1.3
Design. Build. Launch.
Caption — 0.75rem (12px) / 1.3

Color and palettes

Main colors

Our main palette uses bright colors to bring a boldness to our brand, and is used in logical ways throughout product and marketing to guide the eye and highlight the important stuff.

u-Bg-blue400 — #3B89FF
u-Bg-blue — #146EF5
u-Bg-blue600 — #0055D4
u-Bg-white — #ffffff
u-Bg-gray100 — #f0f0f0
u-Bg-gray200 — #D8D8D8
u-Bg-gray300 — #ABABAB
u-Bg-gray400 — #898989
u-Bg-gray500 — #757575
u-Bg-gray600 — #5A5A5A
u-Bg-gray700 — #363636
u-Bg-gray800 — #222222
u-Bg-gray900 — #171717
u-Bg-Black — #080808