railway.com

Railway pairs a dev-tool dark UI with a bookish voice. The hero is an inset, rounded panel filled with a painted, anime-style night sky (dusky violet clouds, scattered stars). It sits behind an IBM Plex Serif headline set at 54px/500 with -1.96px tracking, and that is what makes "peacefully" read as an actual mood instead of a slogan. Below it, the page runs on a near-black ink (#13111c to #161a25) and is held together by a vertical timeline rail down the left gutter. Each product chapter hangs off the rail from a circular node with its own hue (green for networking, amber for scaling, teal for observability), and every chapter's live product mock is tinted to match. Body copy is Inter 20/28 in light gray. Feature lists are separated by hairlines with stroked icons, and every chapter closes on an "Alternative to" row of monochrome competitor logos. The only saturated brand color is a muted violet on the primary CTA. Near the end, the page switches register: a maroon testimonial band, then a split-flap departure board of live usage counters, which sends the railway metaphor off as a joke rather than a gimmick.

Build a dark, calm developer-product page that reads like a well-set book. Use a near-black violet-tinted ink for the base (#13111c page, #161a25 surfaces, #363745 hairlines and raised cards), with no pure black and no neon glows. Set every display heading in IBM Plex Serif: h1 at 54px/1.12, weight 500, tracking -1.96px; h2 at 36px/48px, weight 400, tracking -0.72px, often broken across two lines. Set all UI and body copy in Inter: body at 20px/28px in light gray (#aaadb3), secondary text in #8f929c, and labels and buttons at weight 500 with -0.2px tracking. Keep one brand accent, a muted violet (#553f83; #521cac for small, brighter marks), and use it only for the primary button and tiny status dots. Make buttons large and quiet: 58px tall, 12px 24px padding, 20px/500 labels, an 8px radius and a 1px border slightly lighter than the fill. The secondary button is a near-black ghost with a gray hairline. Use a radius scale of 6px for chips, 8px for buttons and inputs, and 16px for section panels and inset hero frames. Open the page with a framed illustration inside an inset panel, set 16px from the viewport edges, so atmosphere carries the emotion and the chrome stays flat. Organize long content as chapters on a thin vertical rail in the left gutter. Give each chapter its own hue (green, amber, teal, rose), used only in its rail node, its eyebrow pill (text in the hue on a darkened version of it) and a faint tint across its section. Separate list rows with 1px hairlines and lead each row with a 20px stroked icon in the chapter hue. Show real product UI as dark, cropped mockups rather than marketing illustrations. Turn numbers into a themed physical object (split-flap, ticker, gauge) set in monospace.