# Railway homepage design spec (free) - Site: railway.app - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Railway. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Railway's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Hero — illustrated scene with an overlaid product preview **Evidence provenance:** The requested `https://railway.app/` publicly redirects to the observed destination `https://railway.com/`. Desktop capture: 1440×900 at scrollY 0; phone capture: 390×844 at scrollY 0. Measurements are CSS-pixel boxes from the supplied evidence. Desktop hero section: (0,72), 1432×1716; inset scene image: (16,72), 1400×1700, `object-fit: cover`. The viewport shows only the upper part of the hero; the lower extent is not absent, just outside the capture. **CRAFT ARCHETYPE:** illustration-led ## The big idea Set a centered, restrained message and two actions over a dark, illustrated sky, then introduce a large product-interface preview that continues beyond the initial viewport. The artwork supplies atmosphere; the preview supplies product context. Preserve their visual hierarchy without copying the source imagery, wording, or interface details. At desktop, the headline box is 588×60 at (422,200); supporting text is 415×28 at (509,284). The action boxes begin at y=344: 138×58 at x=583 and 116×58 at x=733. The preview is visible beginning around y=355, with its left edge near x=132; its complete bounds and lower content are unobserved. ## Layers Use a near-black outer field, then a scene inset 16px from the desktop viewport sides. The measured background image is 1400×1700 and cover-cropped; reproduce the broad dark-blue night sky and dusky cloud/mountain illustration, not its specific artwork. Center the message stack over it. Place the preview below the actions, broad and dark, with a fine top boundary and rounded upper corners. Keep the illustrated scene visible at the sides. Exact preview bounds and image focal coordinates are unknown. ## Type The desktop display heading uses a serif face at 54px, weight 500, 60.48px line-height, and −1.96px tracking. Supporting text is sans-serif 20px/28px, regular, white at 80%. Actions use sans-serif 20px/32px, weight 500, −0.2px tracking, 12px 24px padding, and 8px radius. Do not reproduce visible copy. ## Colour Use near-black surroundings, deep navy and muted blue in the illustration, white type, one restrained violet filled action, and one translucent near-black action. Exact illustration color values are unavailable; avoid asserting unsupported hex values. ## States and motion The primary action has a measured 150ms filter transition; the secondary action has measured 150ms color/background-related transitions. Animation, parallax, and scene behavior are unknown. ## Do NOT copy or add Do not copy names, logos, text, interface labels, customer marks, or interface data. Do not add proof, overlays, or unsupported motion. ## Checks you can run At 1440×900, check section (0,72), 1432×1716; image (16,72), 1400×1700; heading (422,200), 588×60; supporting box (509,284), 415×28; actions at y=344 and 58px high. Confirm the preview is viewport-cropped, not missing. ## Phone at 390px At 390×844, the header ends at y=66. The hero section is (0,66), 382×565; its 350×549 image begins at (16,66). The heading is (32,162), 318×90, 40px/44.8px; supporting text is (32,276), 318×56, 18px/28px. Actions are side by side at y=364: 129×58 at x=66 and 110×58 at x=207, using 18px text. Below them, a two-column mark-tile band is visible from approximately y=471 to y=615, overlapping the lower illustrated scene; do not reproduce its marks. The next panel begins at y=631. The desktop-scale product preview is not shown as a complete interface in this phone crop; underlying composition beyond the visible tile band is unknown. --- # Navigation — wide desktop row, compact phone header **Evidence provenance:** The requested `https://railway.app/` publicly redirects to the observed destination `https://railway.com/`. Captures: desktop 1440×900 at scrollY 0, 900, 1800, and 2700; phone 390×844 at scrollY 0. Boxes are measured CSS pixels. The same desktop navigation geometry remains visible in the supplied scrolled captures; this supports persistent visibility in those captures, but does not establish the CSS positioning mechanism. **CRAFT ARCHETYPE:** type-led ## The big idea Build a quiet, single-row navigation with three visual zones: a compact identity mark on the left, route controls across the center, and two account/conversion actions on the right. Keep labels small and controls understated against the dark page. At 1440px, the brand link is 111×24 at (136,24), the central nav is 540×32 at (405,20), and the separate text link begins at x=875. Right-side controls are 80×40 at (1092,16) and 112×40 at (1184,16). Avoid turning the row into a dense toolbar. ## Layers Use a dark header continuous with the page. The visible desktop bar occupies roughly y=0–51; navigation controls are vertically centered within it. Four transparent route buttons, each 32px high, have widths 97, 120, 113, and 108px; use 6px 12px padding, 8px internal gap, and 6px corner radius. Keep the additional text link visually lighter than a filled button. Right-side actions have 40px height and 12px horizontal padding. Preserve the broad measured desktop placement rather than shifting the route group to the brand edge. At phone width the brand box is 101×22 at (16,22); the desktop route group and right-side actions are not present in this capture. A compact 34×34 menu button sits at (332,16). Its opened state is unknown. ## Type Use an Inter-led sans-serif stack. Desktop route labels are 14px/20px, weight 500, in soft off-white; link/action text is also 14px/20px, weight 500. The brand link box has computed 16px type and 26px line-height, but its artwork is unspecified. Do not transcribe labels or recreate a source identity. ## Colour Use a near-black header, primary text around the observed rgb(247,247,248), and secondary text around rgb(220,220,224). Route buttons are transparent; no separating border is measured. Avoid adding a filled call-to-action or active underline without evidence. ## States and motion Navigation controls report an `all` transition, with no evidenced hover result or duration. The phone menu button has a measured 50ms transform transition. Expanded-menu content and behavior are unknown. ## Do NOT copy or add Do not copy source branding, labels, logos, destinations, or menu contents. Do not invent dropdowns, search, badges, active states, or mobile drawer behavior. ## Checks you can run At 1440px, assert nav (405,20), 540×32; route-button heights of 32px and widths 97/120/113/108px; brand (136,24), 111×24; right controls (1092,16), 80×40 and (1184,16), 112×40. Compare the four desktop captures. At 390px, assert brand (16,22), 101×22, and menu control (332,16), 34×34; do not assume its activation result. --- # Signature component — illustrated product canvas **Evidence provenance:** The requested `https://railway.app/` publicly redirects to the observed destination `https://railway.com/`. Desktop captures: 1440×900 at scrollY 1800 and 2700. At scrollY 1800, the section box is (16,−12), 1400×1712; the negative y-position is the observed viewport-relative position, not a missing section. At scrollY 2700, the lower portion is visible. Phone capture: 390×844 at scrollY 0 shows the following panel beginning at y=631, but does not show this component’s complete canvas. Measurements below distinguish observed geometry from unknown bounds. **CRAFT ARCHETYPE:** product-UI-led ## The big idea Use a distinct product demonstration: explanatory editorial content sits above a large visual service-canvas interface. This is not a second hero; its defining feature is the dark workspace with connected service cards, compact controls, and a toolbar. At desktop scrollY 1800, the explanatory column begins at x=259. Its small category chip is 134×32 at y=116; the serif heading is 544×96 at y=180; and the paragraph is 544×58 at y=288. The broad canvas begins below the copy, around viewport y=304, and continues outside the capture. Its exact element bounds are not supplied. ## Layers Frame the component as a large, rounded blue-black panel with a subtle outline. The measured section begins at x=16 and is 1400px wide. Indent the editorial column to x=259, approximately 243px inside the section. Put a low-contrast chip above a two-line heading, followed by subdued copy and a text-link treatment. Below, create a near-black workspace with a thin top toolbar, compact left-side controls, and connected rectangular service cards. Preserve open canvas around the cards; avoid turning the interface into a generic evenly spaced card grid. At scrollY 2700, the lower section shows three explanatory columns beginning near x=184, x=432, and x=680, then a divider and a small icon row. Treat these as part of the visible component, not its footer. ## Type The chip uses sans-serif 14px/20px, weight 500, 6px 12px padding, and 8px radius. The heading uses a serif face at 36px/48px, regular weight, and −0.72px tracking. Supporting text and the inline action use sans-serif 18px/28.8px; body copy is weight 500 with −0.09px tracking and white at 65%. Interface typography is compact sans-serif. Do not copy labels or wording. ## Colour Use a dark blue-gray panel, nearly black workspace, white heading, subdued supporting text, and a chip fill comparable to white at 8% opacity. Exact panel and interface color values are unavailable. ## States and motion The screenshots do not establish canvas interaction, hover, or animation. Treat controls as visual only unless independently implemented and verified. ## Do NOT copy or add Do not reproduce names, logos, service labels, project data, status claims, counts, or source copy. Do not invent canvas behavior or add testimonials, pricing, or unsupported interface controls. ## Checks you can run At 1440×900, scrollY 1800, assert section (16,−12), 1400×1712; chip (259,116), 134×32; heading (259,180), 544×96; paragraph (259,288), 544×58. Confirm the canvas begins below the copy and remains cropped by the viewport. At scrollY 2700, verify the lower canvas, three explanatory columns, divider, and icon row are visible. Mobile layout and interaction states remain unknown.