Mercury homepage, decoded: a full-bleed photo, a solid bar

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

A single photograph fills the whole 1440px by 900px first screen with cover fitting. The message sits compactly in the upper portion: a 49px display headline, a 21px support line and two actions, 145px and 141px wide, 40px tall. A small email entry control and a legal notice near the bottom are also visible. The photograph's workspace sits lower, so the text lives in the open sky above it.

On desktop the navigation is a transparent overlay on the photo, 72px high: the identity at the left, four central buttons and a separate link, and two actions at the right. On scroll the bar becomes a solid near-black band (RGB 23,23,33) with a 0.5s colour transition. The rightmost action is a blue-violet fill with a 32px radius. The announcement bar above it is a separate layer.

The signature panel pairs a narrow text column and a stack of feature selectors with a large dark product-interface image that runs off the right edge of the page. The heading is 24px, selector labels are 16px, and thin grey rules separate rows. The product image is cropped by the viewport, not placed in a contained card, and the whole section sits on a near-black field.

A display face is used for the headline (49px at weight 480) with a lighter sans for support copy at weight 360. The page text is a pale RGB 237,237,243; muted text is RGB 195,195,204. The primary action is a blue-violet, RGB 82,102,235, with white text. The photograph itself supplies the variable palette of the hero.

At 390px the announcement takes the top 63px, the headline drops to 28px, and the email field moves below the support text at full width. Actions share one row, 167px each with an 8px gap, and the photo crop zooms in so the desk and chair in the foreground are visible. The desktop links are hidden behind a menu control.

The exact size of the email field is not measured, image motion and hover results are unknown, and the spec does not establish whether the feature selectors switch the image when clicked.

Put the message in the part of a photograph that has room for it, and give the header two states: transparent over the picture and solid once content scrolls beneath it. Remember that the phone crop of a photograph is a different picture and needs its own check.

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.