Typography
scale ratio 1.380- WF Visual Sanscss: WF Visual Sans Variabledisplay + body400 500 600100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | WF Visual Sans | 80px | 600 | 1.04 | -0.01em |
| headline | WF Visual Sans | 56px | 600 | 1.04 | 0em |
| title | WF Visual Sans | 20px | 500 | 1.4 | 0em |
| body | WF Visual Sans | 16px | 400 | 1.6 | 0em |
| body-sm | WF Visual Sans | 14px | 400 | 1.6 | 0em |
| label | WF Visual Sans | 15.98px | 500 | 1.2 | -0.01em |
Type scale
Aa10Aa14Aa14.5Aa16Aa20Aa32Aa40Aa56Aa80
- Body size
- 16px / 1.6
- Display size
- 80px
- Display tracking
- -0.01em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 20.03:1
- Muted on bg
- 6.90:1
- Accent on bg
- 4.59:1
- Dark mode
- follows system
Declared accent tokens
- --colors--primary-accent#146EF5painted
- --_color---primary--webflow-blue#146EF5painted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 4.5
- 5
- 6
- 6.5
- 8
- 12
- 13
- 16
- 19
- 21
- 24
- 32
- 48
Corner radii
248pill
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- 81px
Components
exact computed valuesbutton-primary
Start for free
- backgroundColor
- #146EF5
- textColor
- #FFFFFF
- rounded
- 4px
- padding
- 16px 24px
- height
- 51.2px
- fontFamily
- WF Visual Sans
- fontSize
- 16px
- fontWeight
- 500
button-secondary
Marketing teams
- textColor
- #080808
- rounded
- 4px
- padding
- 1.6px 0.8px
- height
- 30.8px
- fontFamily
- WF Visual Sans
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #D8D8D8
input
- rounded
- 4px
- height
- 74px
- padding
- 24px 24px
- backgroundColor
- #FFFFFF
- border
- 1px solid #D8D8D8
Layout & motion
- Container
- 1296px
- Grid columns
- 8
- Hero
- left-aligned
- Navigation
- top-sticky
- Page height
- 7,648px
- Easing
- cubic-bezier(0.455, 0.03, 0.515, 0.955)
- Durations
- 150ms 200ms 300ms 450ms
- Transitions
- 130
- Keyframes
- 3
- Stack
- webflow, gsap, three.js, jquery, google-tag-manager, cloudflare
Page sections (7)
section labels are heuristic
01nav
02heroBuild for what’s next
03feature detail?300,000+ brands move the needle with Webflow
04feature detail?Turn your website into a growth engine
05features?Recent updates
06feature detail?#MadeinWebflow
07footerGet help
How Webflow compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 80px: larger than 80% of indexed sites (median 60px).
- Type scale
- 1.38×: steeper than 77% of indexed sites (median 1.28×).
- Container
- 1296px: wider than 68% of indexed sites (median 1242px).
- Text contrast
- 20.0:1: higher than 76% of indexed sites (median 17.6:1).
- Page length
- 7,648px: shorter than 56% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- WF Visual Sans
- The only site in the index that loads WF Visual Sans.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Webflow use?
Webflow uses WF Visual Sans (loaded as "WF Visual Sans Variable") for headings and body text.
What are Webflow's brand colors?
Webflow's website uses a light scheme: background #FFFFFF, text #080808, muted text #5A5A5A and borders #D8D8D8.
How is Webflow's website laid out?
The most common corner radius is 4px, body text is 16px with 1.6 line height, and the page container is 1296px wide.
