Warp homepage, decoded: all-monospace, one big diagram

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

A white background with faint vertical rules and a sparse dot grid carries a left-aligned 56px monospaced heading (720px by 176px at x=154), a paragraph, two adjacent actions and a small note. Underneath is a wide system diagram in a pale lavender field with faint outlined cells, a few saturated blue cells and a small white 'live' chip. The right side beside the text is left mostly open on purpose.

A 64px bar: a 38px by 36px mark at the left, 12px monospaced links across the middle, then sign-in, a pale-yellow action (109px by 40px) and a dark action (135px by 40px). In one captured state the bar is white with dark text; in a scrolled capture it is blue with white links and a different set of links with bracket markers. The spec says what triggers the change is not established.

The signature is a two-column capability section: a small blue eyebrow and a 34px heading, then stacked feature rows at the left (564px wide, 96 or 117px tall) separated by thin rules, with the first row highlighted light grey, and a product-interface figure at the right with a narrow caption rail. Row headings are 18px at weight 600 and support text is 12.5px.

Monospaced throughout: 56px headline with 58.8px line height and -2px tracking, 13px support text, 12px bold action labels, 10.5px figure metadata. Colour is RGB(26,21,34) for primary text, RGB(93,89,102) for supporting copy, RGB(42,30,255) for blue accents, a dark primary action and a white secondary action with a subtle border.

At 390px the heading is 32px in a 342px by 101px box, the two actions are 157px and 169px wide and 60px tall, and the note sits at y=431 with the diagram below it, 342px wide. The mobile nav shows a small mark, a dark action and a 30px menu control; desktop links and sign-in are hidden.

What triggers the nav's colour change and how the capability rows behave when clicked are unknown, and the full dimensions of the diagram are not established.

Commit to one typeface personality and use scale and weight to build hierarchy. A diagram with a few saturated cells in a pale field makes a technical product look precise without screenshots.

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.