Railway homepage, decoded: an illustrated sky, then a canvas

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

A near-black outer field holds a scene inset 16px from the viewport sides, with a dark blue night-sky illustration of clouds and mountains. A 54px serif headline, a 20px support line in white at 80%, and two actions (138px and 116px wide, 58px tall) sit in the middle. Below, a large dark product preview with rounded upper corners starts around y=355 and continues past the first screen. The art gives atmosphere; the preview gives context.

A quiet single row on the dark page: the brand at the left, four route buttons (32px high with 6px radii) across the centre, and two actions (80px and 112px wide, 40px tall) at the right, with one separate lighter text link. Labels are 14px at weight 500 in soft off-white. The spec warns against letting it grow into a dense toolbar.

The signature is a service canvas. An editorial column indented to x=259 has a small chip (134px by 32px), a two-line serif heading at 36px and a paragraph with an inline link. Underneath is a large rounded blue-black panel with a thin toolbar, compact left-hand controls and connected rectangular service cards with open space around them. At a later scroll position three explanatory columns appear.

A serif for display headings (54px with 60px line height, -1.96px tracking; 36px in the section), an Inter-led sans for the rest. Colour is near-black, deep navy and muted blue in the art, white type, one restrained violet fill and one translucent near-black action. The spec says not to claim exact hex values for the illustration.

At 390px the header ends at y=66, the heading is 40px, and the actions sit side by side at 58px tall. A two-column band of mark tiles overlaps the lower illustrated scene. The desktop product preview is not shown as a complete interface on the phone, and a 34px menu button replaces the route group.

The full bounds of the preview and the focal point of the illustration are unknown, and the menu's open state is not shown.

Show the system, not just a screen of it: connected cards on an open canvas explain 'services linked together' faster than a paragraph. Keep the surrounding art atmospheric and dark so the product panel is the brightest thing.

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.