---
version: alpha
name: Railway
description: A near-black dev canvas with a dreamy purple-cloud hero, where an IBM Plex Serif headline brings unexpected editorial calm to infrastructure tooling and a single soft-lavender button is the only chromatic note — "ship software peacefully" rendered as design.

colors:
  # Surface / canvas
  background: "#13111c"          # near-black with a faint purple cast — the body canvas
  background-deep: "#0b0b0f"     # deepest section wells
  surface: "#1c1a28"             # raised panel / card surface
  surface-purple: "#291839"      # deep purple secondary panel / button rest
  surface-purple-strong: "#3d2259" # deeper purple accent wells

  # Ink / text
  ink: "#f7f7f8"                 # primary headings and body on dark
  ink-secondary: "#a1a0ab"       # muted supporting copy
  ink-tertiary: "#6b7280"        # faintest metadata, captions

  # Brand accent — the singular soft lavender-purple
  primary: "#553f83"             # the "Deploy" CTA — soft lavender-purple
  primary-hover: "#634b97"       # lighter hover
  primary-glow: "#414ea6"        # periwinkle glow used in ambient hero shadow
  on-primary: "#ffffff"

  # Borders
  border: "#33323e"              # hairline panel edges on dark
  border-faint: "#1c1a28"        # faintest dividers

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"         # was rgba(0,0,0,0.24) — Google format requires hex
  shadow-glow: "#414ea6"         # was rgba(65,78,166,0.1) — Google format requires hex

typography:
  display-hero:
    fontFamily: "IBM Plex Serif, ui-serif, Georgia, Cambria, serif"
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -1.96px
  display:
    fontFamily: "IBM Plex Serif, ui-serif, Georgia, Cambria, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.8px
  heading:
    fontFamily: "IBM Plex Serif, ui-serif, Georgia, Cambria, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.72px
  heading-sans:
    fontFamily: "Inter Tight, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.6px
  heading-sub:
    fontFamily: "Inter, -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  label:
    fontFamily: "Inter, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  code-mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  2xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface-purple}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 10px 18px
  button-secondary-hover:
    backgroundColor: "{colors.surface-purple-strong}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 14px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px

  code-ref:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.code-mono}"
    rounded: "{rounded.sm}"
    padding: 2px 6px
---

# Railway Design System

## Overview

Railway's marketing site does something almost no infrastructure company dares: it brings an editorial **serif** to a developer tool. The canvas is a near-black with a faint purple cast (`{colors.background}`), and the hero floats over a dreamy, illustrated sky of purple-and-amber clouds. Set into that calm dark, the headline "Ship software peacefully" appears in **IBM Plex Serif** at 54px (`{typography.display-hero}`) — a quiet, literary serif where you'd expect an aggressive monospace or a hard geometric sans. That single typographic decision is the whole brand thesis: deploying infrastructure should feel peaceful, not frantic. The serif sells the calm.

The color discipline is severe. The site is overwhelmingly near-black and white-text, and the only chromatic note is a soft lavender-purple (`{colors.primary}`) carried by exactly one element — the "Deploy" button. There's no rainbow, no neon, no gradient overload; the purple appears in the button, in a deep secondary panel (`{colors.surface-purple}`), and as a barely-there periwinkle glow (`{colors.primary-glow}`) bleeding from behind the hero clouds. Restraint is the point. Against the dark, a single soft purple reads as premium and considered — the opposite of the loud, urgent palettes most dev-ops tools reach for.

Beneath the serif headlines, the system is all clean Inter and Inter Tight for body and sub-headings, with JetBrains Mono for the code and technical labels — a familiar, trustworthy developer stack. Surfaces are raised near-black panels (`{colors.surface}`) with hairline borders, radii stay tight (6–16px), and the product UI sits in crisp dark cards. The result is a design that feels like a quiet, well-lit control room at night: dark, calm, precise, with just enough soft purple to feel human.

**Key Characteristics:**
- Near-black canvas with a faint purple cast (`{colors.background}`, `#13111c`) over a dreamy purple-cloud hero illustration
- **IBM Plex Serif** editorial headlines (`{typography.display-hero}`) — a serif on a dev tool, the central surprise
- Severe color restraint: near-black + white text, with a single soft lavender-purple accent
- Soft lavender-purple (`{colors.primary}`, `#553f83`) reserved for the one "Deploy" CTA
- A barely-there periwinkle glow (`{colors.primary-glow}`) bleeding from behind the hero clouds
- Inter / Inter Tight for body and sub-headings (`{typography.body}`, `{typography.heading-sans}`)
- JetBrains Mono for code and technical labels (`{typography.code-mono}`)
- Tight radii (6–16px) — crisp, precise dark cards, never pill-happy on structure
- Raised near-black panels (`{colors.surface}`) with hairline borders (`{colors.border}`)
- Calm, control-room-at-night atmosphere — peaceful, not urgent

## Colors

### Surface & Canvas
- **Purple-Black** (`{colors.background}`): The body canvas — near-black with a faint purple cast.
- **Deep Well** (`{colors.background-deep}`): The deepest section backgrounds.
- **Panel** (`{colors.surface}`): Raised card and panel surface.
- **Deep Purple** (`{colors.surface-purple}`, `{colors.surface-purple-strong}`): Secondary purple panels and accent wells.

### Brand Accent
- **Soft Lavender** (`{colors.primary}`): The singular brand accent — the "Deploy" CTA. Hover lightens to `{colors.primary-hover}`.
- **Periwinkle Glow** (`{colors.primary-glow}`): The ambient glow bleeding from behind the hero clouds.

### Ink / Text
- **Near-White** (`{colors.ink}`): Headings and body on the dark canvas.
- **Cool Gray** (`{colors.ink-secondary}`): Muted supporting copy.
- **Faint Gray** (`{colors.ink-tertiary}`): The lowest-emphasis metadata and captions.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Panel edges on the dark.
- **Faint Divider** (`{colors.border-faint}`): The softest separators.
- **Shadow tints** (`{colors.shadow-soft}`, `{colors.shadow-glow}`): Opaque stand-ins for the dark drop shadow and the periwinkle ambient glow (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `IBM Plex Serif` — a calm editorial serif, with fallbacks `ui-serif, Georgia, Cambria, serif`. Carries the marquee headlines.
- **Sans (body + sub-headings)**: `Inter` and `Inter Tight`, with fallbacks `-apple-system, system-ui, sans-serif`. All reading copy and tighter sub-headings.
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`. Code references and technical labels.
- **OpenType / tracking**: heavy negative tracking on the serif display (-1.96px at 54px); near-zero on Inter body.

### Hierarchy

The full type scale lives in the `typography:` token block.

| Token | Use |
|---|---|
| `display-hero` | 54px / IBM Plex Serif 500 / -1.96px — the marquee headline |
| `display` | 40px / IBM Plex Serif — large serif section titles |
| `heading` | 36px / IBM Plex Serif — feature headings |
| `heading-sans` | 40px / Inter Tight 600 — sans alternative for tighter section heads |
| `heading-sub` | 24px / Inter — sub-section headings |
| `body-large` | 20px / Inter — lead paragraphs |
| `body` | 18px / Inter — standard body |
| `body-small` | 16px / Inter — dense supporting copy, inputs |
| `label` | 14px / Inter 500 — button text, UI labels |
| `code-mono` | 12px / JetBrains Mono — code refs, technical labels |

### Principles
- **Serif for calm, sans for clarity**: IBM Plex Serif owns the emotional headline; Inter does the trustworthy reading.
- **Mono for the machine**: JetBrains Mono signals the technical, deployment-level content.
- **Tighten the serif, leave the sans**: heavy negative tracking on display; near-zero on body.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Generous section spacing (`{spacing.4xl}`–`{spacing.5xl}`) keeps the dark canvas calm and uncrowded, letting the serif headlines and the cloud hero breathe.

### Grid & Container
- Centered content column, ~1200px max
- Hero: centered serif headline over the cloud illustration, with the two CTAs and a product screenshot below
- Feature sections present dark product UI cards in grids

### Whitespace Philosophy
- **Dark as calm**: the near-black is restful, not heavy — space and the serif do the soothing
- **One focal point**: each section centers a single idea; the layout doesn't compete with the headline
- **The product floats**: dark UI screenshots sit centered and elevated, the hero object on each screen

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Page sections, inline content |
| Raised (Level 1) | Lighter surface fill (`{colors.surface}`) + hairline | Cards and panels — separation by luminance |
| Floating (Level 2) | Soft dark drop shadow (`{colors.shadow-soft}`) | Product screenshots, overlays |
| Ambient glow | Wide periwinkle glow (`{colors.shadow-glow}`) bleeding upward | The hero cloud sky — the signature atmospheric depth |

**Shadow Philosophy**: Railway separates layers on the dark canvas mostly by luminance — a lighter near-black panel reads as raised without shadow. Its signature depth isn't a drop shadow at all but an *ambient glow*: a wide, low-opacity periwinkle wash (`{colors.shadow-glow}`) that bleeds from behind the hero clouds, giving the page a soft, atmospheric, almost dawn-lit quality. Real drop shadows stay soft and dark, reserved for floating product screenshots.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Code-ref chips, tiny tags |
| `md` | 6px | Ghost buttons, small controls, inputs |
| `lg` | 8px | Primary/secondary buttons — the default interactive radius |
| `xl` | 12px | Cards |
| `2xl` | 16px | Large elevated cards, the hero panel |
| `pill` | 9999px | Avatars, status dots, occasional tags |

The system is restrained and tight: 6–8px on buttons, 12–16px on cards. Crisp corners reinforce the precise, control-room feel — radius signals engineering tidiness, not playfulness.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Soft lavender (`{colors.primary}`) fill, white text, 8px radius. The one "Deploy" CTA. Hover lightens to `{colors.primary-hover}`.
- **`button-secondary`** — Deep purple (`{colors.surface-purple}`) fill, white text, 8px radius. Hover deepens to `{colors.surface-purple-strong}`.
- **`button-ghost`** — Transparent over the canvas with a hairline border, white text. The "Book a demo" pattern. Hover fills `{colors.surface}`.

### Cards
- **`card`** / **`card-elevated`** — Raised near-black surfaces, 12–16px radius, hairline border. The elevated variant holds the featured product UI.

### Inputs
- **`input`** — Panel fill, white text, 6px radius. **`input-focus`** stays calm with a subtle treatment rather than a loud chromatic ring.

### Navigation
- **`nav-bar`** — Sits on the canvas with white Inter labels and the Railway wordmark; minimal, flush at the top.

### Links & Code
- **`link`** — Near-white text (the brand keeps links neutral, not purple).
- **`code-ref`** — Inline code chip: panel fill, cool-gray JetBrains Mono text, 4px radius.

## Do's and Don'ts

### Do
- Build on the purple-black canvas (`{colors.background}`, `#13111c`) — near-black with a faint purple cast
- Set headlines in **IBM Plex Serif** (`{typography.display-hero}`) — the serif is the brand's calm thesis
- Reserve the soft lavender (`{colors.primary}`) for the single primary CTA — restraint is the brand
- Use the periwinkle glow (`{colors.shadow-glow}`) as atmospheric ambient depth behind the hero
- Drop to Inter / Inter Tight (`{typography.body}`) for body and sub-headings, JetBrains Mono for code
- Keep radii tight (6–8px buttons, 12–16px cards) for the precise control-room feel
- Separate dark panels by luminance (`{colors.surface}`) before reaching for shadows
- Keep the layout calm — one focal idea per section, generous space

### Don't
- Don't use flat `#000` — the faint purple cast (`{colors.background}`) is the warmth
- Don't set headlines in a hard sans or monospace — the editorial serif is the whole point
- Don't add a rainbow or neon palette — a single soft purple against the dark is the discipline
- Don't fill large areas with the purple — it's a one-CTA accent, not a workhorse
- Don't reach for pill-shaped structure — radii stay tight and crisp
- Don't crowd the canvas — the calm comes from space and restraint
- Don't make links purple — Railway keeps them neutral near-white

---

## Responsive Behavior

### Breakpoints
*(Site exposes ~13 breakpoints; the table below summarizes the meaningful stops.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; serif hero scales 54px → ~34px; cloud illustration crops; CTAs stack |
| Tablet | 640–1023px | Two-column feature grids begin; product cards reduce |
| Desktop | 1024–1279px | Full layout; centered serif hero over the cloud sky |
| Large | ≥1280px | Max ~1200px container, centered; generous section padding and full glow |

### Touch Targets
- Buttons run comfortably tall with `10px 18px` padding
- Generous spacing keeps tap targets clear; the calm layout helps

### Collapsing Strategy
- **Hero**: serif headline scales down while keeping proportional negative tracking; cloud art crops gracefully
- **Glow**: the periwinkle ambient glow narrows but stays present
- **Spacing**: section padding compresses from ~96px toward ~48px

### Image Behavior
- The dreamy cloud hero is a full-bleed illustration that crops by viewport; product screenshots reflow as centered cards

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Purple-Black (`{colors.background}`)
- Text: Near-White (`{colors.ink}`)
- Brand accent: Soft Lavender (`{colors.primary}`)
- Secondary text: Cool Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Soft Lavender (`{colors.primary}`)

### Example Component Prompts

- "Create a centered hero on purple-black (`{colors.background}`) with a 54px near-white (`{colors.ink}`) IBM Plex Serif headline, letter-spacing -1.96px, over a soft periwinkle ambient glow (`{colors.shadow-glow}`), with a lavender 'Deploy' button and a hairline-bordered 'Book a demo' ghost button"
- "Build the primary button: soft-lavender (`{colors.primary}`) fill, white text, `{rounded.lg}` (8px) radius, `10px 18px` padding, hover lightens to `{colors.primary-hover}`"
- "Build a ghost button: transparent over the canvas with a `{colors.border}` hairline, white text, `{rounded.md}` radius, hover fills `{colors.surface}` — the 'Book a demo' pattern"
- "Create a product card: raised near-black (`{colors.surface}`) surface, hairline (`{colors.border}`) edge, `{rounded.xl}` radius, `24px` padding, soft dark shadow (`{colors.shadow-soft}`)"
- "Design an input: panel (`{colors.surface}`) fill, white text, `{rounded.md}` radius, `10px 14px` padding"
- "Render an inline code chip: panel (`{colors.surface}`) fill, cool-gray (`{colors.ink-secondary}`) JetBrains Mono text at 12px, `{rounded.sm}` radius, `2px 6px` padding"

### Iteration Guide

1. Start on purple-black (`{colors.background}`, `#13111c`). If your background is flat `#000`, add the faint purple cast.
2. Headlines must be IBM Plex Serif (`{typography.display-hero}`). A hard sans or mono headline is the wrong brand — switch the font.
3. Use exactly one chromatic accent: the soft lavender (`{colors.primary}`) on the primary CTA. Resist adding more color.
4. Add the periwinkle glow (`{colors.shadow-glow}`) as ambient depth behind the hero, not as a hard shadow.
5. Body and sub-heads are Inter / Inter Tight (`{typography.body}`); code is JetBrains Mono (`{typography.code-mono}`).
6. Keep radii tight: `{rounded.lg}` (8px) on buttons, `{rounded.xl}`–`{rounded.2xl}` on cards.
7. Protect the calm — one focal idea per section, generous space, no clutter.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Railway. Brand names and trademarks belong to their respective owners.