# Webflow design system: colors, fonts and tokens

> 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.

Source: https://webflow.com, captured 25 June 2026. Page: https://designlang.app/design-system/webflow

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#146ef5` | 43 |
| Secondary | `#6ca7ff` | 194 |
| Accent | `#3b82f6` | 3 |

Neutrals: `#080808`, `#ffffff`, `#5a5a5a`, `#d8d8d8`, `#f0f0f0`, `#1a1a1a`, `#6b7280`, `#292929`, `#464646`, `#808080`

Backgrounds: `#ffffff`, `#146ef5`, `#080808`, `#222222`, `#171717`

## Fonts

- WF Visual Sans Variable (sans), 3400 elements
- WFVisualSans-Mono (mono), 374 elements

## 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 |
| 19.4286px | 500 | 27.2px | normal | div |
| 16px | 400 | normal | normal | html, head, style, iframe |
| 15px | 500 | 19.5px | 1.5px | div |

## Spacing

1px, 23px, 31px, 37px, 40px, 46px, 56px, 64px, 73px, 80px, 88px, 91px, 99px, 111px, 184px, 192px, 197px, 215px, 229px, 248px

## Radii

2px, 6px, 50px, pill

## Motion

Feel: mixed. Durations: 150ms, 300ms, 450ms, 1200ms.

## Audit

Overall 82/100 (grade B).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/webflow-com/webflow-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/webflow-com/webflow-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/webflow-com/webflow-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/webflow-com/webflow-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/webflow-com/webflow-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/webflow-com/webflow-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/webflow-com/webflow-com-DESIGN.md)

Regenerate: `npx designlang webflow.com`