Webflow design system

What font does Webflow use?

Webflow’s website uses WF Visual Sans for headings and body text. WF Visual Sans is not on Google Fonts; the closest free match is Figtree.

Webflow colour palette

Webflow’s home page is light (#FFFFFF background, #080808 text) and uses #146EF5 for its main actions. Its palette: #FFFFFF, #F0F0F0, #080808, #146EF5, #5A5A5A, #D8D8D8.

• #FFFFFF
  83% · backgrounds
• #F0F0F0
  7.9% · backgrounds
• #080808
  4.4% · text
• #146EF5
  2.8% · backgrounds
• #5A5A5A
  1.1% · text
• #D8D8D8
  0.8% · backgrounds, lines

Type scale

Each size the page sets text in, with its weight and line height. Webflow’s largest type is 80px at weight 600.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 100px.

Corner radii: 2.08px, 4px, 6px, 8px, pill. 4 shadow levels measured.

What makes Webflow look like Webflow

Almost entirely neutral: 97% of the page is painted in #FFFFFF and #F0F0F0.

#146EF5 is an accent: 2.8% of the page, as small fills such as buttons and badges. Keep it to small areas.

#1366E2 is an accent: under 0.1% of the page, used for text only. Don't fill large areas with it.

The largest type (80px WF Visual Sans Variable) is semibold (600), tracked to -0.01em.

Webflow DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Webflow’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Webflow’s product, so use your own name, words and images.

Download Webflow DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Webflow’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #D8D8D8; /* Surface */
  --color-text: #080808; /* Text */
  --color-text-muted: #5A5A5A; /* Text muted */
  --color-border: #D8D8D8; /* Border */
  --color-action: #146EF5; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-f0f0f0: #F0F0F0; /* 7.9% of the page, as fills */
  --font-body: "WF Visual Sans Variable", "Figtree", sans-serif; /* WF Visual Sans Variable on the site; Figtree renders */
  --type-display-large: 80px; /* Display Large, weight 600 */
  --type-display-large-leading: 83.2px;
  --type-display-large-tracking: -0.01em;
  --type-display-medium: 56px; /* Display Medium, weight 600 */
  --type-display-medium-leading: 58.24px;
  --type-display-small: 40px; /* Display Small, weight 600 */
  --type-display-small-leading: 48px;
  --type-headline: 32px; /* Headline, weight 600 */
  --type-headline-leading: 38.4px;
  --type-title: 20px; /* Title, weight 400 */
  --type-title-leading: 30px;
  --type-body-1: 16px; /* Body 1, weight 400 */
  --type-body-1-leading: 25.6px;
  --type-body-2: 15.98px; /* Body 2, weight 500 */
  --type-body-2-leading: 19.177px;
  --type-body-2-tracking: -0.01em;
  --type-body-3: 14.4px; /* Body 3, weight 400 */
  --type-body-3-leading: 23.04px;
  --type-body-4: 14px; /* Body 4, weight 400 */
  --type-body-4-leading: 22.4px;
  --type-label: 10px; /* Label, weight 500 */
  --type-label-leading: 13px;
  --type-label-tracking: 0.1em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-25: 100px;
  --space-30: 120px;
  --radius-sm: 2.08px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;
}

How this was measured

PikSpec’s scanner read the webflow.com home page in Chrome at 1440px wide on 14 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Webflow is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Webflow.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.