Dark cosmic infra: deep indigo #13111c with an illustrated starfield hero, IBM Plex Serif display type, purple #a667e4/#553f83 accents, and large 58px buttons.
Browse Railway in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: railway.com (live DOM, computed styles), 2026-07-08 (desktop 1512px). Coverage: marketing home + announcement bar + nav + hero + embedded dashboard preview. Dashboard: pending login (needs-dashboard). Responsive: breakpoints from stylesheets only; mobile rendering not verified.
Dark, dreamy, atmospheric infrastructure brand — a deep indigo-black night sky with a hand-illustrated starfield-and-clouds hero, over which a large IBM Plex Serif headline floats centered. The serif display face is the defining, slightly literary signature ("Ship software peacefully"), softening what is otherwise a developer-tools product. Purple is the throughline: a lavender announcement bar, a muted-violet primary CTA, and purple accent dots in the embedded dashboard preview. Chrome is near-monochrome white-on-indigo with white-alpha hairline borders; structure and depth come from the illustrated background and translucent surfaces, not shadows. Feels: dark, calm, cosmic, literary.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #13111c | Page background (deep indigo-black) |
| bar-bg | #1f132a | Top announcement bar background |
| surface-panel | #33323e | Purple-gray panels / embedded UI chrome |
| text-primary | #ffffff | Headings, body |
| text-sub | rgba(255,255,255,.80) | Subheads |
| text-muted | #a1a0ab | Secondary text, captions |
| text-dim | #878593 | Tertiary/disabled |
| border-10 | rgba(255,255,255,.10) | Subtle hairlines |
| border-15 | rgba(255,255,255,.15) | Primary button border |
| border-25 | rgba(255,255,255,.25) | Secondary button border |
| Token | Hex | Role / usage |
|---|---|---|
| lavender | #a667e4 | Announcement-bar text, links, accent dots, highlights |
| violet | #853bce | Vivid purple accent (icons, active) |
| cta-purple | #553f83 | Primary CTA fill (muted violet) |
| purple-deep | #3d2259 | Deep purple wash/blocks |
| indigo-tint | #1f132a | Darkest purple tint (bar/blocks) |
Rule: purple is the only hue in the chrome; white text on indigo carries everything else. Rule: depth comes from the illustrated background + translucent panels, not drop shadows.
"IBM Plex Serif", Georgia, serif — the signature literary display face.Inter, -apple-system, sans-serif.#ffffff.| Role | Size/Line | Weight | Tracking | Family |
|---|---|---|---|---|
| Display (h1) | 54 / 60.5 | 500 | -1.96px (-3.6%) | IBM Plex Serif |
| Section (h2) | 40 / 48 | 400 | -0.8px | IBM Plex Serif |
| Sub-section (h3) | 36 / 48 | 400 | -0.72px | IBM Plex Serif |
| Subhead | 20 / — | 400 | — | Inter, rgba(255,255,255,.80) |
| Body | 16 / 26 | 400 | — | Inter |
| UI / buttons | 20 | 500 | — | Inter |
Patterns: serif headings with tight negative tracking (-3.6% at 54px); body/UI in Inter. Links in body get an underline (e.g. "intelligent"). Weights stay ≤500.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.