Stripe homepage, decoded: oversized art behind the headline

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

A spacious white field holds a light-weight 48px headline and two paired actions, and brightly coloured abstract artwork floats across and behind them. The artwork box is 1392px wide and starts above the top of the page, so it is cropped on purpose; the spec warns that this crop is not a missing-image bug. The text stays first because the art is translucent and sits behind it. The archetype is illustration-led.

A shallow, transparent 76px header separates three zones: a compact identity at the left, central navigation controls, and right-aligned utility actions, with a generous gap between the middle and the right. Labels are 14px, and the header has no background of its own so the hero shows through it. The right-hand filled action is the only emphasised control.

Below the hero is a capability showcase made of product-interface panels with short headings. The first row is lopsided: one broad panel, 816px wide, beside a narrower 400px panel. Later rows use three equal 400px panels, and one wide 1232px panel holds an embedded interface. White panels sit on a pale cool-grey field, and any warm or violet gradient is local to a panel, never the whole section.

The headline is a light sans, weight 300 at 48px with 55px line height and slightly negative tracking, which gives the large text a calm feel. Panel headings are 26px, also weight 300. Colour is white, deep navy text, one saturated violet primary action, and translucent blue, pink, orange and violet in the artwork. The spec insists decorative colour stay subordinate to legible text and interfaces.

At 390px the header shrinks to 66px and the desktop links collapse into a single 40px menu button. The headline becomes 34px on two lines, the two actions stack at full width with 44px height and an 8px gap, and the artwork still crosses behind the text and exits at the right edge. A partner strip starts at the bottom of the first screen.

How the artwork moves, whether the headline animates, and what the expand icon on a panel opens are not established by the capture. The spec treats all of them as unknown.

If you use big art, let it overlap the text but keep the text's contrast intact. Vary the size of your showcase panels so the eye has somewhere to start, and keep colour inside the art and the single primary action instead of spreading it everywhere.

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.