Webflow Design System
Light · Generated 18/04/2026 · 22 colors · 55 type tokens · 35 spacing steps · 5 breakpoints · 4 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#080808
Dark Gray 7
#111111
Dark Gray 3
#171717
Dark Gray 5
#222222
Dark Gray 4
#292929
Dark Gray
#5A5A5A
Blue (Brand)
#146EF5
Light / Surface Colors
Light Gray
#D8D8D8
Light Gray 3
#EFEFEF
Light Gray 2
#F0F0F0
White
#FFFFFF
Blue Tint
rgba(20,110,245,0.1)
Text Colors
Black 2
#000000
Mid Gray
#808080
Light Blue
#6CA7FF
Orange
#FFA666
Green
#60ED76
Light Blue 2
#CAB1FF
Border Color
Dark Gray 6
#363636
Typography
Primary Font · WF Visual Sans Variable
WF Visual Sans
The quick brown fox jumps over the lazy dog
Regular · 400 Medium · 500 W550 · 550 Semibold · 600
Mono Font · WFVisualSans-Mono
Mono
const site = webflow.getSite()
Regular · 400
Heading
Display Hero · 70.1px · Semibold · line-height: 72.9px · letter-spacing: −0.7px
Build without limits.
Heading XL · 49.4px · Semibold · line-height: 51.4px · letter-spacing: −0.7px
The visual web design platform.
Heading Large · 36.7px · Semibold · line-height: 38px · letter-spacing: −0.7px
Design, build, and launch websites visually. No code required.
Body XL · 27.5px · Regular · line-height: 35.1px
Every Webflow project is a full CMS-powered website, designed visually and built to scale with your team.
Body Default · 16px · Regular · line-height: 1.6
Last published 2 minutes ago · 1,480 pages indexed
Body Small · 14px · Regular · line-height: 1.6
VISUAL · NO-CODE · CMS
Caption / Label · 12px · W550 · line-height: 13px · letter-spacing: 1.5px
Line Heights
Tight
12px
Snug
13px
Normal
14px
Loose
16px
LH-6
18px
LH-9
22.1px
LH-10
24px
LH-12
27.2px
LH-15
32px
LH-17
38px
LH-21
51.4px
LH-22
72.9px
Letter Spacing
Webflow
Tight
−0.7px · display, hero headings
Build faster
Normal
−0.27px · body, subheadings
Web Design
Widest
0.6px · eyebrow, emphasis
NO-CODE · CMS
LS-7
1.5px · uppercase labels
Spacing
Spacing Scale
35 tokens — 1px → 380px
1
2.4
3.2
4
4.1
5
6
6.4
6.8
7.2
9.6
10
12
14.4
15.5
16
16.6
18
22.9
24
29.8
30.9
32
40
44.7
56.7
57.6
64
71.2
88
192+
Borders
Border Radii
r7
2px
r8
4px
r11
8px
r12
50%
Pill
1133–1600px
Border Widths
Hairline
1px · hairline
Thin
2px · thin
Two border widths — --border-width-hairline: 1px and --border-width-thin: 2px. Note that several radius tokens use compound values (e.g. 0px 2px 2px 0px) for precise directional control.
Shadows / Elevation
Shadow Tokens
3 tokens — layered multi-shadow system
sm
×6
5-layer compound shadow · max 84px spread · subtle depth for cards and panels
md
×6
5-layer compound shadow · max 105px spread · modals, dropdowns, popovers
lg
×3
5-layer compound shadow · max 148px spread · fullscreen overlays, dialogs
Z-Index
LayerValueUsage
Deep Background-1000Deeply buried elements, canvas underlays
Behind-2Elements positioned behind content
Base1Default content layer
Raised2Slightly elevated elements
Elevated3–4Cards and interactive elements
Navigation10Sticky headers, navigation bars
Popover20Dropdowns, tooltips, popovers
Overlay30Side panels, drawers
Modal40–50Dialogs, full-screen modals
Fixed UI900Persistent UI chrome (editor toolbar)
Critical UI999Notifications, toasts
System9998–9999Dev tools overlay, debug panels
Max2147483647Maximum int32 — browser absolute top layer
Breakpoints
📱
XS · Mobile Portrait
479px
Small phones — max 479px
📲
SM · Mobile Landscape
767px
Tablets and large phones
💻
LG · Desktop
991px
Standard desktop breakpoint
Webflow uses 5 breakpoints: XS (≤479px), SM (≤767px), MD (768px), LG (≤991px), and XL (992px+). The paired breakpoints MD/SM and XL/LG mirror each other as floor/ceiling values for responsive layout bands.
Opacity
Opacity Tokens
5 tokens — 0.3 → 0.9
Dim
30% · ×3
Half
50% · ×8
Muted
60% · ×6
Soft
65% · ×1
Near Full
90% · ×6
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text ColorBackground ColorRatioWCAG Rating
Black 2Black1.05:1Fail
Black 2White21:1AAA
Black 2Dark Gray3.04:1AA Large
Black 2Light Gray14.73:1AAA
Black 2Blue4.58:1AA
Light BlueBlack8.21:1AAA
Light BlueWhite2.44:1Fail
Light BlueDark Gray2.83:1Fail
Light BlueLight Gray1.71:1Fail
OrangeBlack10.39:1AAA
OrangeWhite1.93:1Fail
OrangeDark Gray3.58:1AA Large
Blue 2Black3.84:1AA Large
Blue 2White5.22:1AA
Blue 2Light Gray3.66:1AA Large
GreenBlack13.23:1AAA
GreenWhite1.51:1Fail
GreenDark Gray4.56:1AA
GreenBlue3.03:1AA Large
CSS Variables Reference
Background Colors
Black--color-black#080808
Dark Gray 7--color-dark-gray-7#111111
Dark Gray 3--color-dark-gray-3#171717
Dark Gray 5--color-dark-gray-5#222222
Dark Gray 4--color-dark-gray-4#292929
Dark Gray--color-dark-gray#5A5A5A
Light Gray--color-light-gray#D8D8D8
Light Gray 2--color-light-gray-2#F0F0F0
Blue (Brand)--color-blue#146EF5
Blue Tint--color-blue-4rgba(20,110,245,0.1)
White--color-white#FFFFFF
Text & Accent Colors
Black 2--color-black-2#000000
Mid Gray--color-mid-gray#808080
Light Blue--color-light-blue#6CA7FF
Orange--color-orange#FFA666
Green--color-green#60ED76
Blue 2--color-blue-2#1366E2
Light Blue 2--color-light-blue-2#CAB1FF
Border / Dark Gray 6--color-dark-gray-6#363636
Dark Gray 2--color-dark-gray-2#464646
Typography
Primary Font--font-family-2WF Visual Sans Variable
Mono Font--font-family-3WFVisualSans-Mono
Regular--font-weight-regular400
Medium--font-weight-medium500
W550--font-weight-w550550
Semibold--font-weight-semibold600
2XS--font-size-2xs10px
XS / Caption--font-size-xs12px
Body Small--font-size-lg14px
Body Default--font-size-2xl16px
Body Large--font-size-6xl20px
Subheading--font-size-23px22.9px
Heading Med--font-size-27px27.5px
Heading Large--font-size-37px36.7px
Heading XL--font-size-49px49.4px
Display Hero--font-size-70px70.1px
Tight--letter-spacing-tight−0.7px
Normal--letter-spacing-normal−0.27px
Widest--letter-spacing-widest0.6px
LS-7--letter-spacing-ls-71.5px
Spacing (Key Tokens)
Space 1--space-11px
Space 5--space-54px
Space 8--space-86px
Space 10--space-106.4px
Space 16--space-1624px
Space 23--space-2322.9px
Space 27--space-2730.9px
Space 20--space-2032px
Space 24--space-2440px
Space 30--space-3044.7px
Space 48--space-4856.7px
Space 64--space-6464px
Space 34--space-3471.2px
Space 35--space-3588px
Space 36--space-36192.3px
Space 37--space-37380px
Borders & Radius
Hairline--border-width-hairline1px
Thin--border-width-thin2px
r7--radius-r72px
r8--radius-r84px
r11--radius-r118px
r12 (Circle)--radius-r1250%
Pill r14--radius-r141600px
SM (compound)--radius-sm0px 2px 2px 0px
MD (compound)--radius-md0px 0px 4px 4px
Motion, Opacity & Layers
Instant--duration-instant150ms
Fast--duration-fast300ms
Normal--duration-normal450ms
Slow--duration-slow1200ms
No easing tokens detected——
Dim--opacity-3030%
Half--opacity-5050%
Muted--opacity-6060%
Soft--opacity-6565%
Near Full--opacity-9090%
Deep Background--z-1-1000
Base--z-31
Navigation--z-710
Popover--z-820
Modal--z-1040
Fixed UI--z-12900
System Max--z-162147483647
Design System Preview · Webflow (Light) · Generated 18/04/2026 · 22 color tokens · 19 font-size · 3 font-family · 4 font-weight · 22 line-height · 7 letter-spacing · 35 spacing · 14 radius · 2 border-width · 3 shadow · 4 duration · 16 z-index · 5 breakpoints · 5 opacity