Dovetail homepage, decoded: type as the hero image

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

The headline is the picture. A two-line 160px heavy sans, with a 196px pixel-distressed serif for emphasis, occupies a 904px by 260px block on a near-black field with a sparse digital texture behind it. A 20px intro paragraph and a bright blue action (119px by 42px) sit above it, rating marks sit high at the right, and a low-profile band of customer marks sits beneath. The spec says not to fabricate endorsements.

Two stacked layers: a 30px announcement band in 12px monospaced type with a close control at the right, then an 88px navigation bar with a 46px symbol at the left, 14px semibold links, and a 121px by 40px action at the right. Its computed position is relative in the captured state, so the spec says not to assume it is sticky.

The signature is a dark, layered product scene rather than a plain screenshot. A broad application view recedes on the left, secondary information sits nearer the centre, and a floating conversation panel overlays at the right. The image is inset to x=124 and measures 1192px by 538px, and depth comes from subtle outlines, not heavy shadows.

A clean sans for body and headline, with a contrasting display serif for chosen words: 160px headline at weight 600 with 130px line height and -2.3px tracking; 20px intro. Colours are near-black, near-white headline text, body text at about 64% opacity and a saturated blue for the action.

At 390px the announcement is 38px and the nav ends at y=126. The intro, then the 119px by 40px action, then a 60px/50px headline with 74px serif emphasis follow, and the customer marks move below the headline instead of staying beside the intro. The desktop links and rating row are absent, and a 72px by 38px menu action appears.

The floating panel's full outer dimensions are not supplied, sticky behaviour of the nav is not evidenced, and no complete mobile type system for the product scene exists in the spec.

If you have a strong line, make the typography the hero artwork, and mix two type voices in one line for contrast. Keep the proof band low and quiet so the headline owns the screen.

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.