framer.com/

Framer

framer.com/

Framer combines an AI "design agent" with a website builder, pitching itself as covering "every step from idea to launch" while framing automation as collaboration rather than replacement: "Agents that work alongside you, not instead of you." Its trust section is unusually technical for a design tool, displaying live Core Web Vitals figures (LCP 1.1s, INP 95ms, CLS 0.01) rather than only uptime claims, alongside a running counter reading "504,616,418,546 tokens processed this week." A/B testing results citing a 91% lift on a variant are shown as a worked example rather than an abstract feature. The homepage also runs a real WordPress-import demo with step-by-step terminal output, and lists direct integrations with Claude Code, ChatGPT, Cursor, and Codex.

Category

Style

Stack

Fonts

GT Walsheim MediumInter Variable

Palette

Meta title

Framer: AI design agent

Sections

Updated

Oct 10, 2026

Framer's landing page, section by section

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

Framer design review: how the homepage is built

The Framer homepage is about 10,878px tall on desktop and stays black from top to bottom. The order runs hero with a product video, logo grid, four agent cards, a nine-tile platform grid, a site gallery, case-study cards, a community feed mockup, a prompt box and a six-column footer. Colour is almost entirely black and grey type, with electric blue (#0599f9 and deeper navy tones like #021647) glowing around screenshots and in the analytics bar. Headlines are set in GT Walsheim Medium, with Inter Variable listed alongside, and product interface mockups carry the page instead of illustration.

Above the fold

The nav ends in "Log in" and a white "Sign up" pill. The left-aligned headline reads "Framer is the design agent for every step from idea to launch". A white "Get started for free" button sits beside a grey "Download app" button, with "#8 on OpenRouter" and a token count at far right. A wide video frame with a play icon shows blue-glowing desktop, tablet and mobile layouts.

Logos and agent cards

Eight logos in two centred rows, including Dribbble and Zapier, come first. "Agents that work alongside you, not instead of you" follows with a "Start with agents" button at right. Four dark rounded cards each pair a screenshot: "Design with an agent", "Run your CMS with an agent", "Code with an agent" and "Connect to any AI". The last has a terminal window with three tabs and an "Install" button.

Platform grid and showcase

"Not just vibes, a full platform" introduces a bordered grid of nine tiles labelled "Performance", "CMS", "SEO", "Collaboration", "Hosting", "Localization", "Security", "Analytics" and "A/B Testing", each with a cropped interface and an arrow link. "99.99% uptime" and an analytics chart show numbers inside tiles. "Shipped with Framer" then shows a mosaic of site screenshots in mixed sizes, topped by a "See Framer sites" button.

Closing section and footer

"Trusted by teams shipping big sites" shows tall cards with a centred logo and "Read story" link. "Built on a community that isn't going anywhere" pairs "12,447 Resources" with a feed mockup. The close, "Your next idea starts here", is a prompt box with four suggestion chips and "Start without AI". The footer has six link columns with "NEW" tags and certification marks.

On mobile

At 390px the page is about 10,988px tall. The hero headline wraps to three lines, with the two buttons side by side and the OpenRouter line below them. The logo grid becomes a one-row ticker, agent cards and platform tiles stack one per row, and the site gallery shrinks to three images. Footer link columns pair into two across, and text stays legible.

Worth borrowing

A single full-width product video directly under the headline lets the hero show the tool, not describe it.
Giving every feature tile an actual cropped interface plus a one-word label and arrow makes a nine-item grid scannable.
Ending with an editable prompt box and suggestion chips, plus a "Start without AI" link, makes the closing call to action the product itself.