Design teardown
Webflow
A white marketing page in a variable sans, with near-black type and one saturated blue for every primary action. Display type is enormous and tightly leaded; controls are small, flat, and barely rounded.
webflow.com
Design character
White stage, one blue
The page is a wide white canvas with a sticky wordmark bar and a full-bleed blue notice above it. A single huge line sits left, a short paragraph and two buttons sit under it, and the proof is a strip of media cards, a logo row, a large product frame, and tall photo stories. Color stays quiet except for that blue.
Typography
Everything is WF Visual Sans Variable, with Arial behind it. Display and section titles are weight 600 with very tight leading; interface text is 16px at 400 or 500. Eyebrows are 20px medium gray. Tracking is slightly negative on the largest line and on nav labels, and loose only on tiny status tags.
Color system
White canvas, near-black ink, a mid gray for secondary text and borders, and one blue for the notice bar, primary buttons, and small status labels. Quiet buttons are a light gray fill with no border.
Spacing and geometry
An 8px rhythm with very open section padding. The content column is 1440px. Buttons and fields are short and wide; sections breathe at 80px above and below.
Layout
A full-bleed blue notice, then a sticky nav, then a left-aligned hero with a text control on the right. Proof runs edge to edge as a card strip and a ruled logo band. Later sections are a two-column product block, a horizontal story carousel, a perspective fan of site stills, a sales form, and a multi-column footer.
Motion
Entrance is slow and simple. The hero line scales in and the paragraph and buttons fade in, both over 1.2s on a smooth in-out curve. Buttons ease background and color over 0.3s. Fields ease the border over 0.2s. Case cards fade in on the same 1.2s curve as they sit in a full-bleed horizontal strip.
UI fingerprint
- One blue only The notice bar, primary buttons, and small status labels share #146ef5. Nothing else competes.
- Extreme type jump 80px weight 600 display against 16px body, with leading almost equal to the display size.
- Media does the talking Cards, a shadowed product frame, photo stories, and a fan of site stills carry the middle of the page.
- Flat small controls 4px corners, 16px labels, no button chrome, and shadows reserved for pictures.