Railway

railway.app

The reference for making a dev-tool feel calm rather than intense: a near-black cosmic ground (#13111c) under a painterly starlit hero illustration, an IBM Plex Serif headline, and a single lilac (#553f83) action.

Developer Tool flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
Inter
body
Inter
mono

Do / Don't

Reference it for

  • Serif over sans for a dev-tool headline: large IBM Plex Serif display (around 54px) reading 'Ship software peacefully', literary rather than technical
  • Painterly, illustrated hero backdrop (night sky, drifting clouds, stars) that fills the full width behind centred type, instead of a UI mock or gradient blob
  • Near-black cosmic ground #13111c with card surfaces one step up at #1a191f, so depth comes from layered fills not shadows
  • A single restrained accent: lilac #553f83 on the primary Deploy button, paired with a plain outlined secondary Demo button (bordered, no fill)
  • Centred hero composition, all elements stacked on the vertical axis: headline, muted subhead, then a two-button CTA row
  • Subhead with an inline underlined keyword ('intelligent') to add a link-like emphasis inside a sentence of muted grey #a1a0ab
  • A large product-UI screenshot bleeding up from the bottom of the hero, dark-on-dark with fine 1px borders, previewing the real dashboard
  • Elevation via inset hairline highlight rgba(255,255,255,0.1) 0 0 0 1px inset rather than drop shadows

Do not copy

  • The Railway wordmark and the circular train/mountain logo mark
  • The exact painterly night-train illustration and its cloud/star motifs
  • The specific dashboard chrome (gravy-truck / production, Build Logs, deploy log lines)
  • The 'Ship software peacefully' headline and 'all-in-one intelligent cloud provider' line verbatim
  • The full cosmic palette naming system (Deep Space, Supernova, Warp Drive Glow) as a lift