Notion homepage, decoded: a centred headline with a capsule

This is iter0's independent analysis of the Notion 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 Notion. 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 Notion here, and a live site can change at any time.

Everything is centred on white: a bold two-line headline at 96px, supporting text, two adjacent actions, and below them a 958px by 599px application preview that starts at y=533 and is cropped by the bottom of the first screen. One word in the headline sits inside a pale green rounded capsule at a smaller size, with a tiny contrasting dot. Two small illustrated accents flank the lower part of the page. The preview uses cover fitting, so the spec warns against guessing what lies below the crop.

A white 64px band with a fine lower line has a small mark at the left, a run of centred destination controls, and two items at the right: a plain account link and a filled blue action. Despite appearing at the top of scrolled captures, its computed position is relative, so the spec says not to call it fixed or sticky. Labels are 14px at weight 500.

The signature component is a pair of capability cards, each 602px wide and 560px tall with a 24px gap. A card has a warm near-white header strip holding a small category label, a bold 22px title and a 32px black circular arrow, then a large product image with rounded top corners that extends past the card edge. Two big cards are a deliberate choice over a grid of many small ones.

Type is a neutral sans at weight 600 to 700. The hero headline is 96px with 100px line height and tight tracking; the highlighted word is 72px at weight 500; the section heading is 54px; the card titles 22px. Colour is white, near-black type, blue (#0075DE) for the primary action and a pale blue for the secondary one, with the capsule in pale green.

At 390px a row of seven small round illustrations, 48px each, appears above the headline. The headline is 42px, the actions stack at 280px wide, and the desktop preview and its flanking illustrations are not in the first screen. A centred trust caption follows, then a moving strip of logos. In the nav the filled action stays, joined by a 44px menu button.

The spec reports a rotate transition on the illustrations but not what triggers it or how it looks, and hover states, the menu's open state and the phone treatment of the preview are unknown.

Mark one word of your headline with a shape instead of a colour. Use two large, equal cards when you only have two things to say, and put a small category label above each title so the reader knows the kind of thing before the name.

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.