Raycast homepage, decoded: one saturated photo on black

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

A short two-line heading, 64px at weight 600, sits centred over a large, saturated diagonal image of red, pink and cyan bands on black. Beneath it are an 18px support line and a single light action. The page is nearly black around the image, so the photograph carries the colour. The spec's advice is to keep the copy legible without covering the image's focal pattern, and not to assume the hero ends at the viewport crop.

A thinly outlined dark bar holds a small identity at the left, muted grey links in the middle and one light action at the right. Links are 14px at weight 500 and grey, and the action is a light grey pill with an 8px radius. The outer edges of the bar are visual estimates in the spec, not measured values, so treat its exact size as approximate.

The signature is a framed product-interface showcase: a quiet centred intro line above a 1300px by 733px dark application window with narrow top chrome, a search and filter area, rows, and a red-lit centre. Further down, a row of five square icon tiles, 84px each with an 8px radius and a very faint white fill, sits below a central panel. It is a single large artifact, not a card grid.

The face is Inter. The hero heading is 64px with 70px line height at weight 600, white; support copy is 18px regular. The intro line above the showcase is 20px at weight 500. Colour is near-black surroundings, white type, a light grey action with dark text, and a red glow in the interface. Exact background hex values are not established.

At 390px the heading is 36px on two lines, the support copy is 14px on three, and the vivid bands fill the middle behind the copy with dark space above and below. A centred outlined pill appears below, the outlined header shows the identity and a three-line menu icon, and no link list is visible.

No hero animation or hover behaviour on the hero is established. For the showcase, search, filtering and toolbar behaviour and any transitions are unknown. Hover on the nav links is the one behaviour the spec records: they brighten.

Let a single strongly coloured image be the only colour on a dark page, and keep everything else monochrome. Make navigation visibly secondary so the hero image is not competing with a toolbar.

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.