Webflow design system

Webflow's website (webflow.com) uses a light interface with #146ef5 as its primary color and WF Visual Sans Variable as the main typeface, with WFVisualSans-Mono alongside it. designlang measured 15 font sizes from 15px to 74.8571px, 20 spacing values, 4 corner radii.

Captured 25 June 2026Light UI3,891 elements read

Download tokens Read it yourself

Webflow colors

The brand roles and neutrals webflow.com renders, with how many elements use each one.

Brand colors

Primary#146ef543 uses
Secondary#6ca7ff194 uses
Accent#3b82f63 uses

Neutrals

#0808084,914 uses
#ffffff2,099 uses
#5a5a5a517 uses
#d8d8d891 uses
#f0f0f025 uses
#1a1a1a17 uses
#6b72808 uses
#2929296 uses
#4646466 uses
#8080805 uses

Backgrounds

#ffffff
#146ef5
#080808
#222222
#171717

Text colors

#00000021:1 on #ffffff
#08080820.03:1 on #ffffff
#ffffff1:1 on #ffffff
#5a5a5a6.9:1 on #ffffff
#8080803.95:1 on #ffffff
#ffa6661.93:1 on #ffffff
#6ca7ff2.44:1 on #ffffff
#60ed761.51:1 on #ffffff

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 95% of them pass.

Text	Background	Ratio	Result
`#ffffff`	`#3b82f6`	3.68:1	Fails AA
`#080808`	`#ffffff`	20.03:1	AAA
`#ffffff`	`#146ef5`	4.59:1	AA

Webflow fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

WF Visual Sans Variable: sans, most text (3,400 elements)
WFVisualSans-Mono: mono, body (374 elements)

Body text: 12px at weight 500, line height 12px.

Weights in use: 400, 500, 600, 550.

Type scale

Size	Weight	Line height	Tracking	Used on
74.8571px	600	77.8514px	-0.748571px	h1
52.5714px	600	54.6743px	normal	h2, div, svg, path
42.0571px	600	43.7394px	normal	a
38.2857px	600	45.9429px	normal	div
30.8571px	400	43.2px	normal	div, p
30.5714px	500	39.7429px	normal	h2, div
28.1143px	400	44.9829px	-0.281143px	a
24px	400	38.4px	normal	div
23.4286px	500	30.4571px	normal	h2, h3
20px	500	32px	normal	div
19.7143px	500	27.6px	normal	h2, br, div, h3
19.6571px	400	29.4857px	normal	div, p

Spacing and radii

Spacing scale

1px
23px
31px
37px
40px
46px
56px
64px
73px
80px
88px
91px
99px
111px

Corner radii

2px
6px
50px
pill

Medium radii lead, with a few larger ones. 5 distinct box shadows.

Motion

The motion reads as mixed.

Durations

xs: 150ms
md: 300ms
lg: 450ms
xl: 1200ms

Easing

ease-out (31 uses): cubic-bezier(0.165, 0.84, 0.44, 1)
custom (629 uses): cubic-bezier(0.455, 0.03, 0.515, 0.955)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

82/100, grade B

Components found: buttons (58), cards (105), inputs (1), links (260), navigation (203), footer (214).

By category

Color Discipline	92/100
Typography Consistency	70/100
Spacing System	70/100
Shadow Consistency	100/100
Border Radius Consistency	100/100
Accessibility	95/100
CSS Tokenization	100/100

21 distinct font sizes — consider a tighter type scale
1 WCAG contrast failures
192 !important rules — prefer specificity over overrides
77% of CSS is unused — consider purging
4782 duplicate CSS declarations

Download the tokens

The files designlang wrote for webflow.com. Run it yourself for a fresh read: npx designlang webflow.com.

The core values as CSS variables

:root {
  --color-primary: #146ef5;
  --color-secondary: #6ca7ff;
  --color-accent: #3b82f6;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #080808;
  --color-neutral-2: #ffffff;
  --color-neutral-3: #5a5a5a;
  --color-neutral-4: #d8d8d8;
  --font-primary: "WF Visual Sans Variable", sans-serif;
  --font-secondary: "WFVisualSans-Mono", monospace;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 50px;
}

Read webflow.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Clerk design system

Light UI, geistNumbers, #6c47ff

Cal.com design system

Light UI, Inter, #0000ee

Supabase design system

Light UI, Circular, #72e3ad

Stripe design system

Light UI, sohne-var, #533afd

Quick answers

What font does Webflow use?

webflow.com sets most of its text in WF Visual Sans Variable (3,400 elements), with WFVisualSans-Mono alongside it. designlang read this from the computed styles of the live page on 25 June 2026.

What are Webflow's brand colors?

The brand roles on webflow.com are primary #146ef5, secondary #6ca7ff and accent #3b82f6, on a #ffffff background. The neutrals used most are #080808, #ffffff and #5a5a5a.

How do I use the Webflow design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang webflow.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from webflow.com's public pages on 25 June 2026, so it shows what the site renders, not Webflow's internal source files. Webflow is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of webflow.com on 25 June 2026. Webflow is a trademark of its owner; designlang is not affiliated with it. More: the full Webflow brand kit, the token extraction guide and the markdown version of this page.