Webflow

Webflow sets oversized WF Visual Sans Variable headlines in a heavy weight on a light bone white canvas. Cobalt (#146ef5) is reserved for actions, on buttons with 0px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 4px and 1440px on smaller elements.

webflow.com ↗

Colors

Cobalt

#146ef5

Primary actions and links

Ash

#5a5a5a

Secondary accent and highlights

Bone White

#ffffff

Page canvas

Void

#080808

Headlines and body copy

Fog

#f0f0f0

Surface or divider

Deep Fog

#d8d8d8

Supporting colour

Type scale

DisplayBuild for what’s nextWF Visual Sans Variable · 80px · 600

Heading300,000+ brands move the needle with WebflowWF Visual Sans Variable · 56px · 600

SubheadingWhere modern teams and agents run the webWF Visual Sans Variable · 32px · 600

BodyWebflow gives every team the tools to build, manage, and grow a website that drives real rWF Visual Sans Variable · 16px · 400

NavSourceWF Visual Sans Variable · 16px · 500

Buttons

The biggest announcements fromStart for freeGet started→↗►↓←↑

Style reference measured from the public page at webflow.com on 2026-10-12 for design education. Webflow and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Webflow, Style Reference
> Webflow sets oversized WF Visual Sans Variable headlines in a heavy weight on a light bone white canvas. Cobalt (#146ef5) is reserved for actions, on buttons with 0px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 4px and 1440px on smaller elements.

**Theme:** light · **Source:** https://webflow.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens, Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cobalt | `#146ef5` | `--color-accent` | Primary actions and links |
| Ash | `#5a5a5a` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#ffffff` | `--color-canvas` | Page canvas |
| Void | `#080808` | `--color-ink` | Headlines and body copy |
| Fog | `#f0f0f0` | `--color-surface-1` | Surface or divider |
| Deep Fog | `#d8d8d8` | `--color-surface-2` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | WF Visual Sans Variable | 80px | 600 | 1.04 | -0.010em |
| Heading | WF Visual Sans Variable | 56px | 600 | 1.04 | 0 |
| Subheading | WF Visual Sans Variable | 32px | 600 | 1.20 | 0 |
| Body | WF Visual Sans Variable | 16px | 400 | 1.60 | 0 |
| Nav | WF Visual Sans Variable | 16px | 500 | 1.20 | -0.010em |

Font families on the page: WF Visual Sans Variable. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 8px, 4px, 1440px, 50%, 2.08px
- Primary button: background `#146ef5`, text `#ffffff`, radius 0px, padding 12px 0px, 14px / 500

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer