Skip to content
BetaFree MCP server

Webflow

webflow.com/

Webflow is a visual web design and CMS platform now pitched under the banner "the agentic web platform for modern businesses," combining no-code site building, content management, hosting and AI features. It claims 300,000+ teams and names specific enterprise clients — The New York Times, Dropbox, TED, Docusign — each paired with a dollar-figure result rather than a logo alone: Copy.ai cites "$4M+ in pipeline," ABM cites "$200M in new pipeline," and Orangetheory cites "$6M in cost savings annually." Verifone's testimonial adds a specific operational detail — "32 global sites launched in 10 days" — and the site cites an aggregate 4.4/5 rating from 975 reviews via embedded schema markup rather than a third-party badge alone.

Category
Design & Creative
Style
LightColorful
Stack
Webflow
Fonts
WF Visual Sans Variable
Palette
Meta title
Webflow: The agentic web platform for modern businesses
Sections
10
Updated

Webflow's landing page, section by section

Each section below is cropped straight from Webflow's live page — useful references for design & creative landing page design.

Webflow design review: how the homepage is built

The Webflow homepage runs 10,899 pixels at 1440px wide. Blocks stack as an announcement bar, a centered hero, a customer-logo video, three feature columns, a testimonial carousel, an AI explainer, benefit lists, a closing banner and a five-column footer. Colour is mostly white with near-black type, while the detected blue "#146ef5" is kept for buttons, the top bar and the oversized footer logo, with a pale "#cee1fc" tint behind the hero cards. Headlines use WF Visual Sans Variable in a heavy, tightly spaced weight. Product screenshots carry most of the visual load.

Above the fold

A blue bar reads "Seth Meyers will be at Webflow Conf '26. Read the announcement" above a navigation with five links, "Log in", "Contact Sales" and a filled "Start for free" button. The centered headline "Make your website a growth engine" fills two lines, followed by one subline. Below sit three tinted cards: "Enterprise", "Webflow AEO" with a "NEW" tag and "Webflow MCP" with a "2.0" tag, each with a thumbnail.

Logo video and feature columns

A black band holds a looping video where about sixteen white customer logos, including Spotify, Dropbox, TED and reddit, float over a dimmed editor screenshot. The heading "Webflow is the agentic web marketing platform for high-performing brands" introduces three equal columns. Each has a tall image, a bold title ("Build together", "Publish at scale", "Optimize for growth"), short copy and an underlined arrow link.

Testimonials, AI explainer and benefit lists

The heading "300,000+ brands move the needle with Webflow" leads a carousel with two arrow buttons. Dark photo cards open with a metric such as "20%" or "$6M", then a quote and name. "From idea to impact, faster" follows, with a gradient on its first words above a wide editor screenshot. Under "Everything you love about Webflow", gray labels ("Agility", "Impact", "Scale") sit left of hairline-ruled rows ending in arrows.

Closing section and footer

A gray blurred backdrop carries "Make your website your competitive edge", a blue "Get started — it's free" button and a black "Talk to sales" button. Beneath, a fanned stack of customer-site screenshots shows a Jasper AI page with a "View website" link. The footer arranges links in five columns: Product, Solutions, Resources, Company and Community, with small "NEW" and "LABS" tags. A giant blue Webflow mark is cropped at the bottom.

On mobile

At 390px the page stretches to 13,011 pixels. The hero headline wraps to three lines, and the three tinted cards stack vertically with thumbnails beside the copy. The logo video shrinks to a smaller cluster. The three feature columns become one column. The carousel stays horizontal and cuts off its second card. Benefit lists become full-width stacks, and the footer folds into two-column link grids.

Worth borrowing

  • Three tinted hero cards under the headline can point to secondary products, with "NEW" and "2.0" tags, without competing with the single "Start for free" button.
  • Opening each proof card with a bold metric like "20%" or "$6M" before the quote makes a carousel scannable.
  • Small gray labels in a left rail with hairline-ruled link rows on the right organize many benefits compactly.
Optimalworkshop landing page design
Optimalworkshop
Design & Creativeoptimalworkshop.com/
Zeplin landing page design
Zeplin
Design & Creativezeplin.io/
Figma landing page design
Figma
Design & Creativefigma.com/
Modeinspect landing page design
Modeinspect
Design & Creativemodeinspect.com/
Runway landing page design
Runway
Design & Creativerunway.com/
Open-design landing page design
Open-design
Design & Creativeopen-design.ai/