Skip to content
Browse
Library

Railway. Dusk sky over a departure board.

  • Developer tools
  • Dark theme
  • 13 colors
  • 4 typefaces

Railway is a night-time train station rendered as a cloud console. A purple-black #13111c canvas holds a sequence of 16px-rounded chapter panels, each tinted its own dusk tone (#1b2132 navy, #1f2b2e pine, #251823 plum), while a line-drawn train rides a vertical rail beside the copy. IBM Plex Serif headlines at 400–500 with negative tracking give the page a quiet, literary calm; Inter carries everything functional at 14–20px. Colour is rationed: one #553f83 violet Deploy button, lilac #a78bfa highlights, small green and peach chapter tags, and a single magenta radial All Aboard pill in the closing train doorway. Proof comes from real console windows, a live split-flap stats board and a painted starfield hero.

Visit railway.com
Screenshot of Railway
Captured from railway.com on October 16, 2026

Railway design system

Railway

Brand1

  • The hero Deploy button fill — a muted, dusky violet that reads as twilight rather than a neon call to action

Accent4

  • Inline highlight phrases in footer feature cards and the active dock tab label — the brighter echo of Deploy Violet

  • Network and Evolve chapter tags, the matching timeline rail, Online checks and the monospace status line

  • Scale chapter tag text and its rail — a warm lamp-light cue against the cold dark panels

  • The All Aboard button only — magenta-to-indigo radial fill, the one saturated moment at the end of the journey

Neutrals8

  • Page background, top bar and untinted chapters — a purple-tinged black that keeps the whole page at dusk

  • Product console windows and split-flap tiles, the inset darkest layer below every chapter tint

  • Build-and-deploy chapter panel — the cool blue carriage that follows the hero

  • Monitor-and-observe chapter panel, a green-grey tint behind the metrics console

  • Customer trust chapter behind the quote cards and the tweet marquee

  • Unlit split-flap label letters such as USERS and LOGS, the dimmest text on the page

  • Lead paragraphs, feature descriptions, handles, secondary labels and the boarding subline

  • All text from nav to serif headlines and button labels (headings compute #ffffff, rounded here)

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Platform White on Deploy Violet

8.09 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.