Framer homepage, decoded: black stage, staggered examples

This is iter0's independent analysis of the Framer homepage as we captured it on 2 Oct 2026, at a 1440px desktop width and a 390px phone width. It is not affiliated with, endorsed by or written with Framer. Everything below comes from a design spec we already hold for the page: its measurements, its layout and what the capture did and did not show. There are no screenshots, logos or marketing copy from Framer here, and a live site can change at any time.

The hero is a black section, 1440px by 981px, under a 64px bar. A 54px headline at weight 500 and two small actions (149px and 143px wide, with 8px corners) sit at the left, an announcement appears separately near the right, and below them is a product video frame with a counter reading 0:36. The headline's colour is white and the primary action is white with black text, while the secondary is only 10% white.

The 64px bar is transparent over the black page. It carries a small identity, route links at 14px, a login link at 60% white and a sign-up control (66px by 30px, 8px radius, white with black text). Only sign-up is fully lit, so the call to action is unmistakable without an extra colour. The spec does not establish a nav-specific focus treatment.

The signature section opens with a 44px heading and a supporting action, then shows three example images each 250px wide with heights of 323, 299 and 340px, set 20px apart, with 12px labels above them. The active label is blue, RGB(0,153,255), and the others are white at 50% opacity. A separate interface panel is visible at the right. The staggered heights stop it reading as a strict grid.

A neutral sans: 54px headline with 54px line height and -2.16px tracking, 14px actions and labels. Colour is pure black, white, white at lower opacities for secondary things, and one sky blue for the active label. The restraint is the design.

At 390px the headline is 36px on three lines, the actions are shorter at 29px tall, and the announcement sits at y=306. The video frame fills the 390px width and shows a cropped portion of its imagery. A menu icon appears in the bar alongside login and sign-up.

The spec says the capture does not establish playback behaviour for the video, whether the example labels are interactive, or what any decorative glow looks like. It states not to claim any.

On a pure black page, use opacity levels instead of extra greys or accents, and one single bright colour for state. Give examples different heights so the section has rhythm.

We keep a longer craft spec for this page: hero, navigation and signature component, with the measured sizes, a list of what not to copy and checks you can run. It is free to download as a Markdown file, and you can use it as a pattern guide for your own site. It describes layout and proportion, so use your own name, wording and imagery. If you want a site built around the same pattern, give the spec to iter0 and it will build you an original page from it.