Webflow

Webflow

Visual web design and CMS platform

A visual web design tool that outputs production-ready HTML and CSS, aimed at designers who want code-quality results without hand-writing it.

webflow.com

Color palette

Accent

Primary#080808

Primary brand color — key actions and emphasis.

Mute#898989

Accent color used within the product's own UI.

Mute Soft#ababab

Accent color used within the product's own UI.

Accent Purple#7a3dff

Accent color used within the product's own UI.

Accent Blue#3b89ff

Accent color used within the product's own UI.

Accent Blue Deep#006acc

Accent color used within the product's own UI.

Accent Blue Info#146ef5

Accent color used within the product's own UI.

Accent Orange#ff6b00

Accent color used within the product's own UI.

Accent Green#00d722

Accent color used within the product's own UI.

Accent Yellow#ffae13

Accent color used within the product's own UI.

Accent Red#ee1d36

Accent color used within the product's own UI.

Neutral

On Primary#ffffff

Text and icon color on a solid primary fill.

Ink#080808

Primary text color.

Ink Strong#222222

Primary text color.

Body#363636

Secondary or muted text.

Body Mid#5a5a5a

Secondary or muted text.

Hairline#d8d8d8

Borders and dividers.

Canvas#ffffff

Page background.

Accent Pink#ed52cb

Primary text color.

Type scale

Display Xxl
80px · 600 · 1.04
Display Xl
56px · 600 · 1.04
Display Lg
44.8px · 600 · 1.04
Display Md
32px · 500 · 1.3
Body Lg
28.8px · 400 · 1.6
Display Sm
24px · 500 · 1.3
Display Xs
20px · 500 · 1.4
Body Md
16px · 400 · 1.6
Body Md Strong
16px · 500 · 1.6
Button Md
16px · 500 · 1.6
Eyebrow Uppercase
15px · 500 · 1.3
Body Sm
14px · 400 · 1.6
Body Sm Strong
14px · 500 · 1.6
Caption
12.8px · 550 · 1.2
Eyebrow Uppercase Sm
12px · 500 · 1
Caption Mono
12px · 400 · 1.5

Fonts

PrimaryWF Visual Sans VariableWeights 400, 500, 550, 600Fallback: Inter, system-ui, -apple-system, sans-serif
CodeWFVisualSans-MonoWeights 400Fallback: Inconsolata, ui-monospace, SFMono-Regular, Menlo

Spacing & shape

Xxs
2px
Xs
4px
Sm
8px
Md
12px
Lg
16px
Xl
20px
2xl
24px
3xl
32px
None
0px
Xs
2px
Sm
4px
Md
8px
Full
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (WF Visual Sans Variable, WFVisualSans-Mono).
  • Use one of the documented corner radii (0px, 2px, 4px, 8px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (2px, 4px, 8px, 12px, 16px, 20px, 24px, 32px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.