# railway.com

Source: https://railway.com/
Captured: 2026-10-09
Tags: saas, landing, dark, both, dark-techno, editorial, calm, technical, confident, mysterious
Colors: #161a25, #363745, #695455, #6e707c, #8f929c, #513e7d, #aaadb3, #521cac
Type (h1): IBM Plex Serif · 54px/60.48px · 500 · tracking -1.96px — "Ship software peacefully"
Type (h2): IBM Plex Serif · 36px/48px · 400 · tracking -0.72px — "Deploy anything without the complexity"
Type (body): Inter · 20px/28px · 400 — "With the all-in-one intelligent cloud provider"
Type (button): Inter · 20px/32px · 500 · tracking -0.2px — "Deploy →"
Button: "Deploy →" — fill #553f83, text #ffffff, radius 8px, border 1px, padding 12px 24px, height 58px, type 20px/500
Radii: 8px (18), 6px (6), 16px (6), 10px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/railway-com/hero.webp?v=1a29b383
- Page crop (mid-1): https://media.lvly.design/library/railway-com/mid-1.webp?v=e9348deb
- Page crop (mid-2): https://media.lvly.design/library/railway-com/mid-2.webp?v=63005b2d
- Hero (mobile): https://media.lvly.design/library/railway-com/mobile-hero.webp?v=4ca1c9b2
- Full page (desktop): https://media.lvly.design/library/railway-com/full.jpg?v=5dd25100
- Full page (mobile): https://media.lvly.design/library/railway-com/mobile-full.jpg?v=f965bbb4
- Clip preview (mp4): https://media.lvly.design/library/railway-com/video-s8tf1j.preview.mp4?v=ec32ffd0

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.

## Steal-worthy details

- Illustrated hero inside an inset, rounded panel. The nav sits on flat ink and the painted sky starts 16px in with a 16px radius, so the hero reads as a framed picture instead of a full-bleed background
- Serif display headline on a dev-tool page: IBM Plex Serif 500 at 54px with tight -1.96px tracking, set against Inter UI copy. It makes infrastructure sound unhurried
- An underlined keyword inside the subhead ("intelligent") works as a quiet inline link, so the subhead needs no third CTA
- CTA pair: a muted violet filled primary (#553f83, 8px radius, 1px lighter border) beside a near-black ghost of the same size with a gray hairline. Both are 58px tall with 20px/500 labels, much larger than typical SaaS buttons
- The real product UI rises out of the hero illustration and is cropped by the fold, so the sky becomes the backdrop for the app
- Vertical timeline rail in the left gutter with a circular node per chapter. Each node and the rail segment below it take that chapter's hue, turning a long feature page into a route with stops
- Small tinted chapter pills ("Scale and grow") on a darkened version of the chapter hue, sitting above each serif section heading
- Whole sections take on a faint tint of their chapter color (teal for observability) instead of switching to a light band
- An "Alternative to" row of grayscale competitor logos ends each feature chapter, positioning the product without a comparison table
- Live usage stats rendered as a split-flap departure board, with monospaced digits in dark tiles. A brand pun done as UI

## Style recipe

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.