Design System Extract

Design System
Analysis of Webflow

A confident dark-mode product system on near-black canvas, white ink, and one electric Webflow blue carrying every action — set in the brand's own geometric grotesque.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Set in WF Visual Sans (shown here in its nearest Google substitute, Inter). Hierarchy is driven by size and tight negative tracking far more than by weight — most heads sit at 500–600.

03 — Components

Button Variants

button-primary
The one saturated action — Webflow blue, white label, 8px radius. Reserved for the single primary intent on a view.
button-dark
A lifted dark fill for secondary solid actions that should read quietly against the black canvas.
button-secondary
Outline only — 1px white border, transparent fill. Pairs beside the primary without competing for attention.
button-pill
Fully-round utility chip on the muted surface fill, used for tertiary or media actions.
link · inline
Explore the platformRead the docs
Inline links take the brand blue with an underline, the only place colour appears inside running text.
04 — Components

Cards & Surfaces

Cards lift off the canvas by one step — surface #171717 inside a #363636 hairline — and reach for a soft atmospheric shadow only on hover.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4px base with an 8 / 16 / 24 / 32 / 48 rhythm carrying most component and section padding.

07 — Foundations

Border Radius

Gentle and consistent — 8px is the workhorse for buttons, cards and inputs, with 4px for tighter elements and fully-round for pills and avatars.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default: most surfaces separate with a #363636 border, no shadow at all.
Level 1 — a deep, many-stop, low-opacity stack that reads as an atmospheric lift. Used on card hover and floating panels.
Level 2 — the same shadow language pushed further for modals and pop-overs that sit well above the canvas.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxGrids fold to 1–2 columns; hero type drops toward ~48px; nav condenses to a menu.
Tablet768–1023pxFour-up feature and card grids collapse to two columns; gutters tighten.
Laptop1024–1279pxFull multi-column layout returns inside the centered max-width column.
Desktop≥ 1280pxWide 1200px column, large vertical breathing room between bands.

Layout contract: content is centered in a wide max-width column with generous black space; multi-column grids degrade gracefully four → two → one as the viewport narrows.

Pricing Tiers

Sample plan layout in the system's tokens — a featured tier lifts onto the dark fill with a blue accent border. (Illustrative; not Webflow's real pricing.)

Starter
$0/mo
For exploring the canvas and shipping a first site.
  • 2 projects
  • webflow.io subdomain
  • Community support
  • Core CMS
Growth● Most popular
$29/mo
For teams turning a site into a growth engine.
  • Unlimited projects
  • Custom domain
  • Priority support
  • Advanced CMS & SEO
Enterprise
Custom
For organisations with scale, security and SSO needs.
  • SSO & SCIM
  • Dedicated CSM
  • SLA & uptime
  • Advanced roles

Data Table

A dense table in the dark surface language — quiet hairlines, an uppercase header row, and a blue-tinted status pill.

IDProjectOwnerStatusWhen
#4821Marketing site relaunchA. RiveraPublished2h ago
#4820Pricing page A/B testJ. OkaforIn review5h ago
#4818Docs information architectureM. LindqvistPublishedYesterday
#4815Localization — DE/FRS. HaddadIn review2d ago
#4810Component library auditR. TanPublished3d ago
1–5 of 412
‹123›

Auth Forms

Sign-in and account creation rendered in the card + input tokens. (Illustrative pattern, not a live Webflow screen.)

Sign in

Welcome back

OR
Create account

Build with Webflow

OR