Linear homepage, decoded: big type, cropped product
A dark, spacious opening where the heading reads first and a wide product picture, cropped at the edge, supplies all the visual weight.
4 min read
In this note
What this is, and what it is not
This is iter0's independent analysis of the Linear 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 Linear. 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 Linear here, and a live site can change at any time.
The big idea of the hero
The opening is deliberately empty. There is a large dark gap under the navigation, then a two-line heading at 64px, one small muted support line, a tiny inline announcement, and finally an interface image that runs the full 1440px width and starts about 35px below the support line. The heading is the first read, but the picture is the biggest object on the page. The spec's archetype is product-UI-led: the product picture does the persuading, the words only point at it.
The navigation choice
The header is a fixed, near-black bar about 73px high. The identity sits at the left, and a run of quiet links plus one pale pill action sits at the right, with the links starting around the middle of the page. There are no visible separators between ordinary links, and the only filled shape is the final pill, which is fully rounded. The point is subordination: nothing in the bar competes with the heading underneath it.
The signature component
Further down, the signature piece is a row of three illustrated editorial panels rather than cards. Each has a small monospaced figure label, a fine dark line drawing, a short caption and a muted description. Thin vertical rules divide the columns and the columns are deliberately unequal in width. Because the drawings are low-contrast line art on the near-black canvas, the section reads like a technical journal page.
Type and colour decisions
Type is a neutral sans. The hero heading is 64px with 64px line height, weight 510 and tight negative tracking, which is a notch heavier than regular without looking bold. Support copy is only 15px. Captions in the signature section are 15px at the same 510 weight, and figure labels are 12px monospaced. Colour is near-black, pale neutral headline text and subdued grey support, with no accent colour observed.
What changes on a phone
At 390px the heading drops to 38px and wraps to four lines, and the support line and announcement move below it. The product preview starts further down, visibly inset about 18px, and the desktop-wide interface is cut off at the right edge rather than shrunk to fit. The desktop link run disappears; account actions and a menu icon take its place.
What the capture does not tell us
The capture is a still frame, so hover behaviour, whether the picture autoplays, any animation, and what the mobile menu looks like when opened are all unknown. The spec's own advice is not to invent motion from a static capture.
What to steal (the pattern, not the look)
Let one big product picture carry the hero, and keep every other element small and quiet around it. Keep a clear hierarchy of heading first, picture second, everything else a distant third. And when the picture is wider than a phone, crop it instead of shrinking it into illegibility.
Get the free Linear design spec
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.
Put the brief into practice
A launch page should make the buyer, promise, proof, and next action obvious. iter0 uses this same standard when it turns a brief or reference site into a builder-ready page.
Start your launch build