webflow.com1
Colors
Spacing
xs
0.5rem
sm
1rem
md
1.5rem
lg
2rem
xl
3rem
gutter
1.5rem
margin
1.5rem
Rounded
none0px
sm0.25rem
md0.5rem
lg1rem
xl1.5rem
full9999px
Shadows
sm
0 1px 1px 0 rgba(8,8,8,0.08)
md
0 1px 1px 0 rgba(8,8,8,0.08), 0 1px 1px 0 rgba(8,8,8,0.2)
lg
0 1px 1px 0 rgba(8,8,8,0.08), 0 1px 1px 0 rgba(8,8,8,0.2), 0 6px 12px 0 rgba(255,255,255,0.12) inset, 0 1px 1px 0 rgba(255,255,255,0.2) inset
Font
WF Visual Sans Variable
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayWF Visual Sans Variable · 7rem · 600
Display headline
Headline LGWF Visual Sans Variable · 5rem · 600
The quick brown fox
Headline MDWF Visual Sans Variable · 3.5rem · 600
Design systems at scale
Headline SMWF Visual Sans Variable · 2.5rem · 600
Color, type, and spacing
Text
Body LGWF Visual Sans Variable · 1.25rem · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDWF Visual Sans Variable · 1rem · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMWF Visual Sans Variable · 0.875rem · 400
Supporting text, captions, and metadata appear at this size.
Label LGWF Visual Sans Variable · 1rem · 500
Button label · Primary action
Label MDWF Visual Sans Variable · 0.9rem · 500
Form label · Required field
Label SMWF Visual Sans Variable · 0.8rem · 550
Badge · Tag · Micro-copy