---
version: alpha
name: Railway
website: "https://railway.com"
description: >-
  Railway's marketing surface is a developer-cloud brand styled as a calm, near-monochrome dark theatre — a "#13111c" canvas the color of indigo midnight, a serif-led hero set in IBM Plex Serif at 54px / weight 500 / "-1.96px" tracking ("Ship software peacefully"), a structural "#33323e" hairline that draws 1049 of every border on the page, a single muted-violet "#553f83" CTA pill paired with white-on-white ghost buttons, and a multi-stop hero gradient (violet "#3d2259" / pink "#291839" / blue) that hangs behind the headline as the only atmospheric color the page permits.

seo:
  title: "Railway Design System for React — Indigo #13111C, IBM Plex Serif, 18 components"
  metaDescription: "Railway's design language as a DESIGN.md file. Indigo canvas #13111c, IBM Plex Serif hero, violet #553f83 CTA, hairline #33323e. For React + AI tools."
  highlights:
    - "Indigo-midnight canvas — '#13111c' carries the entire page; no light surfaces, no polarity flips, no marketing white bands"
    - "Serif hero on dark — IBM Plex Serif at weight 500 with '-1.96px' tracking is the voice; Inter handles everything else"
    - "Single muted-violet CTA — '#553f83' fills one pill at 8px radius and never repeats as a fill anywhere else on the page"
    - "Hairline as the entire structure — '#33323e' draws 1049 of the page's borders, the highest-frequency color on the surface"
    - "Hero gradient as theatre lighting — violet '#3d2259' / pink '#291839' layered behind the serif headline, never repeated as swatches"
  tags:
    - "Web Infrastructure & Hosting"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Railway's marketing page is what happens when a developer-cloud brand decides the right reference is not a dashboard mockup and not a launchpad illustration but a calm, mostly-empty stage. The canvas is "#13111c", an indigo-midnight so dark it reads as black until you put it next to actual black and watch it tilt violet. The hero headline is set in IBM Plex Serif at 54px / weight 500 / "-1.96px" tracking and reads "Ship software peacefully" — a serif on a dark page on a developer cloud, three decisions that almost no infrastructure brand makes together. Behind the headline sits a layered hero gradient (violet "#3d2259" / pink "#291839" / a far blue) that operates as theatre lighting rather than decoration. Everything else on the page — body paragraphs, nav links, button labels, footer rows — runs Inter at modest weights on the same indigo canvas.

    This DESIGN.md packages the system into one machine-readable file following the Google Labs spec. Inside: 22 color tokens (the "#13111c" canvas, the "#f7f7f8" near-white text with 1165 occurrences, the "#33323e" hairline border with 1049 occurrences, the single muted-violet "#553f83" CTA, the brand green "#42946e" reserved for status indicators, plus the layered hero gradient stops "#3d2259" / "#291839" / "#180d43"), 11 typography tokens across IBM Plex Serif, Inter, Inter Tight, and JetBrains Mono, 5 radii from 4px to 9999px built around a 4px base (the 4px corner counts 439 times on the page), 9 spacing values from 2px to 64px, and 17 components covering the violet pill, the white-on-dark ghost button, the framed deploy mockup, the nav row, and the surface-elevated card.

    Feed the file to Claude, Cursor, or Copilot when you want a React surface that reads as Railway — indigo canvas, serif headlines on dark, "#33323e" hairlines everywhere, a single muted-violet conversion target. Where most developer-cloud brands signal velocity with weight 600 sans, pure black canvases, and saturated electric accents, Railway signals it by lowering the voltage: a serif at weight 500, an indigo-not-black canvas, a violet CTA dialed two steps toward gray, and a hairline that lets the page read as one continuous surface rather than a stack of cards.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://railway.com"
      title: "Railway — official site"
      description: "Deploy web apps, servers, databases, and AI agents on the all-in-one Railway cloud."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is Railway's primary brand color?"
      answer: "Railway runs two indigos that play different roles. The canvas primary is '#13111c' — an indigo-midnight set as the page background, the body of every section, and the fill of every dark surface (the extraction tags it with '--background' and '--osano-dialog-background-color'). The CTA primary is '#553f83' — a muted violet that fills the Deploy pill at 8px radius and renders nowhere else as a fill. The brand never softens either tone toward gray; both stay slightly violet so the page reads as one indigo theatre."
    - id: "typography"
      title: "What typography does Railway use, and what should I use if IBM Plex Serif isn't right?"
      answer: "Display runs IBM Plex Serif at weight 500 only — 54px / '-1.96px' tracking at the hero, 40px / '-0.8px' at section H2, 36px / '-0.72px' at H3. Body, nav, and button labels run Inter at 14px / 16px / 18px / 20px across weights 400, 500, 600, 700, with a single 18px / weight 500 lede at '-0.09px' tracking under the hero. Inter Tight handles a 40px / weight 600 stat eyebrow ('-0.6px' tracking). Code blocks would run JetBrains Mono (the '--font-jetbrains-mono' variable is declared on :root). IBM Plex Serif is open-source via Google Fonts — substitutes are unnecessary; if you must, Source Serif 4 at weight 500 is the closest match."
    - id: "hairline-philosophy"
      title: "Why does '#33323e' appear so frequently in the extraction?"
      answer: "'#33323e' is the universal hairline — a barely-tinted violet-gray with 1049 border occurrences (the single highest-frequency color on the page, ahead of even the text near-white). Railway uses it as the 1px divider on every card, nav, surface, input, table row, and footer column. The hairline is faint enough on the '#13111c' canvas that it reads as structure rather than decoration, but tinted just enough toward violet that it harmonizes with the indigo background. Don't swap to a neutral gray here — the violet tilt is what keeps the page reading as one continuous indigo surface."
    - id: "hero-gradient"
      title: "How is the hero gradient used on the page?"
      answer: "The hero band carries a layered atmospheric gradient — violet '#3d2259', pink '#291839', and a far blue '#180d43' fused into one multi-stop backdrop sitting behind the IBM Plex Serif hero headline. The gradient is declared as '--heroGradient' on :root and applied only at hero scale; it never miniaturizes to a swatch, never crops to a single hue, never repeats as a button fill or chip color. Treat it as theatre lighting: one decorative object, applied as a backdrop, swapped for the lower-key '--kickbackHeroGradient' on secondary hero surfaces."
    - id: "cta-discipline"
      title: "Why is there only one filled button on the page?"
      answer: "Railway runs a single-CTA discipline. The 'Deploy →' button — '#553f83' background, '#ffffff' text, '#ffffff' border, 8px radius, 12px / 24px padding, 58px tall, set in Inter at 20px / weight 500 / '-0.2px' tracking — is the only filled conversion target on the marketing surface. Every secondary action is a ghost button: transparent fill, 1px '#33323e' border, white text on the indigo canvas. The brand never escalates the violet pill into a duo with a second saturated color; the muted '#553f83' carries every primary CTA on the page by itself."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React project?"
      answer: "Yes — the file is structured for direct ingestion by Claude, Cursor, or any AI tool that reads token-based design specs. The agent reproduces Railway's constraints (indigo '#13111c' canvas only, IBM Plex Serif at weight 500 only for display, single '#553f83' violet CTA, '#33323e' hairlines everywhere, hero gradient as theatre lighting not fill) rather than inventing a generic shadcn theme. Every hex, font size, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS variables, or a component library."

colors:
  primary: "#553f83"
  primary-on: "#ffffff"
  cta-shadow: "#414ea6"
  canvas: "#13111c"
  canvas-elevated: "#1c1a28"
  canvas-deep: "#0b0b0f"
  canvas-info: "#180d43"
  ink: "#f7f7f8"
  ink-soft: "#dcdce0"
  ink-mute: "#a1a0ab"
  ink-deep-mute: "#878593"
  ink-dim: "#545260"
  hairline: "#33323e"
  hairline-strong: "#545260"
  gradient-violet: "#3d2259"
  gradient-pink: "#291839"
  gradient-blue: "#180d43"
  gradient-deep-violet: "#553f83"
  status-success: "#42946e"
  status-success-soft: "#609f89"
  status-warning: "#c67839"
  status-warning-soft: "#eab38a"
  status-accent-pink: "#f9a8d4"
  shadow-warm: "#3e2d2d"

typography:
  display-xl:
    fontFamily: "'IBM Plex Serif', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif"
    fontSize: 54px
    fontWeight: 500
    lineHeight: 60.48px
    letterSpacing: "-1.96px"
  display-lg:
    fontFamily: "'IBM Plex Serif', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: "-0.8px"
  display-md:
    fontFamily: "'IBM Plex Serif', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: "-0.72px"
  stat-eyebrow:
    fontFamily: "'Inter Tight', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 48px
    letterSpacing: "-0.6px"
  body-lg:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: "normal"
  body-lede:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 28.8px
    letterSpacing: "-0.09px"
  body-md:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "normal"
  body-md-strong:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: "normal"
  body-sm:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "normal"
  body-sm-strong:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: "normal"
  button-lg:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 32px
    letterSpacing: "-0.2px"
  code:
    fontFamily: "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "normal"

rounded:
  none: "0px"
  xs: "4px"
  sm: "6px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  full: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"

components:
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    padding: "{spacing.md} {spacing.lg}"
    height: 64px
  nav-link:
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-sm-strong}"
    padding: "0px {spacing.md}"
    height: 17px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-on}"
    borderColor: "{colors.primary-on}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.md}"
    padding: "{spacing.md} {spacing.lg}"
    height: 58px
  button-primary-hover:
    backgroundColor: "{colors.gradient-deep-violet}"
    textColor: "{colors.primary-on}"
    rounded: "{rounded.md}"
  button-ghost:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.md}"
    padding: "{spacing.md} {spacing.lg}"
    height: 58px
  button-secondary-sm:
    backgroundColor: "{colors.canvas-elevated}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm-strong}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm} {spacing.md}"
    height: 32px
  card:
    backgroundColor: "{colors.canvas-elevated}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  card-deep:
    backgroundColor: "{colors.canvas-deep}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "{spacing.3xl} {spacing.lg}"
  hero-gradient-overlay:
    backgroundColor: "{colors.gradient-violet}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
  deploy-mockup-frame:
    backgroundColor: "{colors.canvas-deep}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  text-input:
    backgroundColor: "{colors.canvas-elevated}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "0px {spacing.md}"
    height: 40px
  badge-status-success:
    backgroundColor: "{colors.canvas-elevated}"
    textColor: "{colors.status-success}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xxs} {spacing.sm}"
  badge-eyebrow:
    backgroundColor: "{colors.canvas-elevated}"
    textColor: "{colors.ink-soft}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xxs} {spacing.md}"
  logo-strip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-mute}"
    typography: "{typography.body-sm}"
    padding: "{spacing.lg} {spacing.xl}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-mute}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-sm}"
    padding: "{spacing.3xl} {spacing.lg}"
  link-inline:
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"

---

## Overview

Railway's surface is a developer-cloud marketing page rendered as a calm indigo theatre — a single dark canvas at "#13111c" carries the entire page from hero to footer, with no light bands, no polarity-flips, no marketing-white insets. The hero headline reads "Ship software peacefully" in IBM Plex Serif at 54px / weight 500 / "-1.96px" tracking, and the choice of a humanist serif at modest weight on dark is the brand's strongest move. Behind the headline sits a layered atmospheric gradient — violet "#3d2259" / pink "#291839" / deep blue "#180d43" — declared as `--heroGradient` on the root and applied only at hero scale.

**Indigo not black**: where most developer-cloud brands run pure black or a near-black gray as their canvas, Railway sets `{colors.canvas}` ("#13111c") two steps toward violet so the surface holds warmth instead of austerity. The same indigo-bias appears in the `{colors.hairline}` ("#33323e") — a violet-gray hairline that draws 1049 of the borders on the page (the single highest-frequency color in the extraction). Pair the canvas with the hairline and the page reads as one continuous indigo surface rather than a stack of separate cards.

**Voltage restraint**: Railway runs a single-CTA discipline. `{colors.primary}` ("#553f83"), a muted violet two steps toward gray, fills the Deploy pill at 8px radius, 12px / 24px padding, 58px tall. It never repeats as a fill anywhere else on the page — every secondary action is a ghost button with transparent fill and a 1px "#33323e" border. The brand never escalates the violet into a duo with a second saturated accent; the only chromatic moves are the layered hero gradient (theatre lighting) and the brand green `{colors.status-success}` ("#42946e") reserved for status indicators.

**Key Characteristics:**
- Single dark canvas — `{colors.canvas}` ("#13111c") indigo-midnight is the only background tone; surfaces lift via `{colors.canvas-elevated}` ("#1c1a28") at +9% lightness or `{colors.canvas-deep}` ("#0b0b0f") at -3%.
- Serif hero on dark — IBM Plex Serif at weight 500 / "-1.96px" tracking carries display; Inter handles everything else (body, nav, buttons, footer) at weights 400 / 500 / 600 / 700.
- Hairline-as-structure — `{colors.hairline}` ("#33323e") draws every divider, card border, input chrome, and footer column edge across the page (1049 occurrences).
- Single violet CTA — `{colors.primary}` ("#553f83") fills exactly one pill; every secondary action is the transparent-fill `button-ghost` with the same 8px corner.
- Atmospheric hero gradient — three-stop violet / pink / blue fused as `--heroGradient`, used only at hero scale, never miniaturized as a swatch or repeated as a chip color.
- 4px corner ubiquity — `{rounded.xs}` 4px counts 439 times across the page; 8px reserved for the Deploy CTA pill and primary cards.

## Colors

### Brand & Accent
- **Primary Violet** (`{colors.primary}` — `"#553f83"`) — frequency 1, used as background (1). Reserved for the single Deploy CTA pill — the only filled conversion target on the page.
- **Gradient Violet** (`{colors.gradient-violet}` — `"#3d2259"`) — frequency 1, used as background (1). The middle stop of the hero atmospheric gradient.
- **Gradient Pink** (`{colors.gradient-pink}` — `"#291839"`) — frequency 1, used as background (1). The warm-side stop of the hero gradient, tinted toward magenta.
- **Gradient Blue** (`{colors.gradient-blue}` — `"#180d43"`) — frequency 1, used as background of the info-dialog surface. Declared as `--osano-info-dialog-background-color` and surfaces also in `--heroGradient` as the deep-blue stop.

### Canvas
- **Canvas** (`{colors.canvas}` — `"#13111c"`) — frequency 10, used as background (10). The page body — every hero, section, nav, and footer surface. Declared as `--background` and `--osano-dialog-background-color`.
- **Canvas Elevated** (`{colors.canvas-elevated}` — `"#1c1a28"`) — frequency 5, used as background (5). The +9% lightness surface for cards, dropdowns, and badge fills.
- **Canvas Deep** (`{colors.canvas-deep}` — `"#0b0b0f"`) — frequency 218, used as background (218). The -3% lightness inset for the deploy mockup frame and code-preview rectangles.
- **Canvas Info** (`{colors.canvas-info}` — `"#180d43"`) — frequency 0, used in the dialog and info-dialog backgrounds as a deeper-violet inset.

### Text
- **Ink** (`{colors.ink}` — `"#f7f7f8"`) — frequency 1416, used as text (1165), border (230), background (18). The page's near-white text — every heading, body paragraph, button label, and CTA fill resolves through this token (it merges "#ffffff" and "#f7f7f8" as one perceptual stop). Declared as `--foreground`.
- **Ink Soft** (`{colors.ink-soft}` — `"#dcdce0"`) — frequency 5, used as text (5). Slightly softer than the primary ink — nav-link labels, secondary headings, table-row emphasis. Declared as `--gray-800`.
- **Ink Mute** (`{colors.ink-mute}` — `"#a1a0ab"`) — frequency 76, used as text (76). Tertiary text — footer rows, lowest-priority labels. Declared as `--gray-600`.
- **Ink Deep Mute** (`{colors.ink-deep-mute}` — `"#878593"`) — frequency 5, used as text (5). Fine print and disabled-state labels. Declared as `--gray-500`.
- **Ink Dim** (`{colors.ink-dim}` — `"#545260"`) — frequency 4, used as text (4). The dimmest readable text — placeholder copy. Declared as `--gray-300`.

### Hairline
- **Hairline** (`{colors.hairline}` — `"#33323e"`) — frequency 1049, used as border (1049). The single highest-frequency color on the page — every card edge, nav divider, input chrome, table row, and footer column border. Declared as `--gray-200`.
- **Hairline Strong** (`{colors.hairline-strong}` — `"#545260"`) — frequency 4, used as text (4). A deeper divider for emphasized borders. Declared as `--gray-300`.

### Status
- **Success** (`{colors.status-success}` — `"#42946e"`) — frequency 5, used as text (3), background (2). The brand green — reserved for status indicators ("Active", "Healthy", deploy-state pills). Declared as `--green-500`.
- **Success Soft** (`{colors.status-success-soft}` — `"#609f89"`) — frequency 2, used as text (2). A muted green for secondary status text.
- **Warning** (`{colors.status-warning}` — `"#c67839"`) — frequency 2, used as text (2). The brand amber, reserved for warning states.

## Typography

### Font Families
Four faces carry the entire system:

1. **IBM Plex Serif** — display only. Loaded at weight 400 (section H2/H3 at 40px and 36px) and weight 500 (hero at 54px). Aggressive negative tracking ("-1.96px" at 54px, "-0.8px" at 40px, "-0.72px" at 36px). The serif on a developer-cloud surface is the brand's strongest typographic move; it never appears at weight 600 or in italic for emphasis.
2. **Inter** — body, nav, button labels, captions. Weights 400, 500, 600, 700 at 14px / 16px / 18px / 20px. Tracking neutral except for a single "-0.09px" lede under the hero and the "-0.2px" Deploy button.
3. **Inter Tight** — one role only. Declared as `--font-inter-tight` and used for a 40px / weight 600 / "-0.6px" stat eyebrow ("99.99% uptime" / "Sub-100ms cold starts" pattern).
4. **JetBrains Mono** — code and terminal mockups. Declared as `--font-jetbrains-mono` on :root; reserved for `deploy-mockup-frame` and inline code spans.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 54px | 500 | 60.48px | "-1.96px" | The IBM Plex Serif hero headline ("Ship software peacefully"). |
| `{typography.display-lg}` | 40px | 400 | 48px | "-0.8px" | Section H2 ("Deploy anything without the complexity"). |
| `{typography.display-md}` | 36px | 400 | 48px | "-0.72px" | Subsection H3 inside feature bands. |
| `{typography.stat-eyebrow}` | 40px | 600 | 48px | "-0.6px" | Inter Tight stat eyebrows above feature copy. |
| `{typography.body-lg}` | 20px | 400 | 28px | "normal" | Lede paragraphs under section headlines. |
| `{typography.body-lede}` | 18px | 500 | 28.8px | "-0.09px" | The hero subhead under the serif headline. |
| `{typography.body-md}` | 16px | 400 | 24px | "normal" | Default body paragraph and inline anchor text. |
| `{typography.body-md-strong}` | 16px | 500 | 24px | "normal" | Bolded inline body and card-title emphasis. |
| `{typography.body-sm}` | 14px | 400 | 20px | "normal" | Secondary body, nav-link text, footer rows. |
| `{typography.body-sm-strong}` | 14px | 500 | 20px | "normal" | Nav CTA labels and table-row emphasis. |
| `{typography.button-lg}` | 20px | 500 | 32px | "-0.2px" | The Deploy CTA pill label. |
| `{typography.code}` | 14px | 400 | 20px | "normal" | JetBrains Mono — code blocks and terminal text. |

### Principles
- **Serif on dark for display only.** IBM Plex Serif carries 54px / 40px / 36px display sizes — nothing below 36px is set in serif. Reverting display to a sans breaks the brand.
- **Weight 500 is the serif ceiling.** The hero is the only place the serif uses weight 500; section H2 and H3 drop back to weight 400. The serif never appears at 600 or italic.
- **Negative tracking on display.** "-1.96px" at 54px is the strongest tightening on the page; section H2 stays at "-0.8px"; body stays at neutral.
- **Inter for everything else.** Body, nav, buttons, footer — never mix with the serif outside display sizes.

## Layout

### Spacing System
- **Base unit**: 4px. Every captured value is a multiple of 4 except the rare 2px micro-padding inside pill badges.
- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px.
- **Section padding**: marketing bands use `64px 0px` (the captured value with 9 occurrences) top/bottom. Hero stretches further to give the gradient room.
- **Card interior padding**: the canonical card uses `24px 24px 32px` (12 occurrences) — slightly more bottom padding to balance the headline / body / CTA stack.
- **Button padding**: the Deploy CTA uses `12px 24px`; small secondary buttons use `6px 12px` (9 occurrences) or `6px 16px` (5 occurrences).
- **Horizontal gutter**: section content centers with `0px 40px` (12 occurrences) on desktop, `0px 16px` (8 occurrences) on mobile, `0px 32px` (4 occurrences) on tablet.

### Grid & Container
- **Max width**: ~1200–1280px. Content centers with horizontal gutters of 40px on desktop, 16px on mobile.
- **Column patterns**:
  - Hero stack: serif headline + Inter lede + CTA pair, vertically centered, gradient backdrop.
  - Three-feature row: 3-up at desktop, 1-up at mobile (the "Deploy anything" feature trio).
  - Deploy mockup band: full-width inset card surfacing a code / terminal preview on `{colors.canvas-deep}`.
  - Logo strip: ~7 customer logos wide, single row.
  - Footer: 4-column nav row plus brand row.

### Whitespace Philosophy
The hero gradient does most of the decorative work; whitespace separates the bands. Section spacing is generous — `{spacing.3xl}` 64px between bands lets the indigo canvas breathe. Inside a card, the headline / body / CTA stack is tight (`{spacing.sm}` 8px gap), then a wider gap before the next section.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Level 0 — Flat | No shadow, no border. | Hero band and full-bleed gradient sections. |
| Level 1 — Hairline | `1px solid {colors.hairline}` "#33323e" border on `{colors.canvas-elevated}`. | Default card chrome — the brand's universal "you can see this card" cue. |
| Level 2 — Deep Inset | Same hairline on `{colors.canvas-deep}` "#0b0b0f". | The deploy mockup frame and code-preview surfaces. |
| Level 3 — Warm Shadow | Hairline plus a soft `{colors.shadow-warm}` "#3e2d2d" warm-tinted shadow. | Elevated pricing cards and highlight panels. |
| Level 4 — Indigo Shadow | Hairline plus `{colors.cta-shadow}` "#414ea6" tinted shadow. | The single CTA-cluster shadow on the Deploy button hover state. |

The brand uses HAIRLINE elevation rather than drop shadows — the `"#33323e"` border is the depth cue on a dark canvas, not blur. When a shadow does appear (5 instances in the extraction), it's color-tinted toward the brand rather than neutral gray.

### Decorative Depth
- **Hero gradient as theatre lighting**: the three-stop violet / pink / blue gradient is the only "atmospheric" effect; applied flat as a backdrop, never a 3-D illustration.
- **Canvas ladder as section-depth**: switching from `{colors.canvas}` "#13111c" to `{colors.canvas-elevated}` "#1c1a28" (a +9% lightness step) is the chief depth cue between bands. The deploy mockup steps down to `{colors.canvas-deep}` "#0b0b0f" for a recessed feel.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | "0px" | Full-bleed hero / footer bands and section dividers. |
| `{rounded.xs}` | "4px" | The dominant corner — 439 occurrences. Every card, badge, input, and dropdown sits at 4px. |
| `{rounded.sm}` | "6px" | Tighter UI radius for compact buttons and inline pills (7 occurrences). |
| `{rounded.md}` | "8px" | The Deploy CTA pill and primary cards (30 occurrences). |
| `{rounded.lg}` | "12px" | Slightly larger card chrome — feature highlight panels (5 occurrences). |
| `{rounded.xl}` | "16px" | Largest card chrome — hosted-image cap surfaces (6 occurrences). |
| `{rounded.full}` | "9999px" | Status pills and the badge eyebrow (15 occurrences). |

### Photography Geometry
- **Hero gradient**: full-bleed 2-D atmospheric backdrop, never cropped to a frame.
- **Customer logos**: monochrome SVG, consistent height in a flex row.
- **Deploy mockup frame**: 16:10 dark rectangle on `{colors.canvas-deep}`, hairline border, JetBrains Mono code rendered inside.
- **Feature thumbnails**: 16:9 landscape inside `{rounded.md}` chrome with hairline border.

## Components

### Buttons

**`button-primary`** — the single Deploy CTA pill.
- Background `{colors.primary}` ("#553f83"), text `{colors.primary-on}` ("#ffffff"), border `"#ffffff"`, label set in `{typography.button-lg}` (20px / weight 500 / "-0.2px" tracking), padding "12px 24px", shape `{rounded.md}` 8px. Renders 58px tall.

**`button-primary-hover`** — the hover state of the Deploy pill.
- Shifts background toward `{colors.gradient-deep-violet}` ("#553f83" deepened); keeps the same 8px shape and 58px height.

**`button-ghost`** — the secondary action paired with the Deploy pill.
- Transparent fill on `{colors.canvas}`, text `{colors.ink}` ("#f7f7f8"), 1px `{colors.hairline}` ("#33323e") border, same typography / padding / height as `button-primary`.

**`button-secondary-sm`** — the smaller secondary button used inside nav and card CTAs.
- Background `{colors.canvas-elevated}` ("#1c1a28"), text `{colors.ink}`, hairline border, label `{typography.body-sm-strong}`, padding "8px 12px", height 32px, shape `{rounded.md}`.

### Cards & Containers

**`card`** — the canonical feature card.
- Background `{colors.canvas-elevated}` ("#1c1a28"), text `{colors.ink}`, hairline border, padding `{spacing.lg}` 24px, shape `{rounded.md}` 8px. Sits on the indigo canvas with Level 1 hairline elevation only.

**`card-deep`** — the recessed inset card for code mockups.
- Background `{colors.canvas-deep}` ("#0b0b0f"), text `{colors.ink}`, hairline border, padding `{spacing.lg}`, shape `{rounded.md}`. Reads as "below the canvas" rather than "above it."

**`deploy-mockup-frame`** — the dark code-preview surface inside the hero band.
- Background `{colors.canvas-deep}` ("#0b0b0f"), text `{colors.ink}`, hairline border, body in `{typography.code}` (14px / JetBrains Mono), padding `{spacing.lg}` 24px, shape `{rounded.md}` 8px.

### Inputs & Forms

**`text-input`** — the canonical text input.
- Background `{colors.canvas-elevated}` ("#1c1a28"), text `{colors.ink}`, 1px hairline border, body in `{typography.body-sm}` (14px), padding "0px 12px", height 40px, shape `{rounded.md}` 8px.

### Navigation

**`nav-bar`** — the sticky top nav.
- Background `{colors.canvas}` ("#13111c"), text `{colors.ink}`, hairline bottom border, height 64px, padding "12px 24px". Layout: logo left, link row center, sign-in / Deploy CTA cluster right.

**`nav-link`** — the link row inside `nav-bar`.
- Text `{colors.ink-soft}` ("#dcdce0"), set in `{typography.body-sm-strong}` (14px / weight 500), padding "0px 12px", height 17px.

### Signature Components

**`hero-band`** — the indigo hero with the layered gradient backdrop.
- Background `{colors.canvas}` ("#13111c"), text `{colors.ink}` ("#f7f7f8"), padding `{spacing.3xl} {spacing.lg}` 64px / 24px. Inside: a small badge above the headline, the IBM Plex Serif hero in `{typography.display-xl}` ("Ship software peacefully"), a lede in `{typography.body-lede}`, then a CTA row with `button-primary` plus `button-ghost`. The `hero-gradient-overlay` sits behind, occupying the top half of the band.

**`hero-gradient-overlay`** — the layered violet / pink / blue atmospheric backdrop.
- Background composed of `{colors.gradient-violet}`, `{colors.gradient-pink}`, `{colors.gradient-blue}` fused as `--heroGradient`. Applied at hero scale only; never miniaturized.

**`badge-status-success`** — the brand-green status pill.
- Background `{colors.canvas-elevated}`, text `{colors.status-success}` ("#42946e"), hairline border, body in `{typography.body-sm}`, padding "2px 8px", shape `{rounded.full}`.

**`badge-eyebrow`** — the indigo eyebrow pill above section headlines.
- Background `{colors.canvas-elevated}`, text `{colors.ink-soft}`, hairline border, body in `{typography.body-sm}`, padding "2px 12px", shape `{rounded.full}`.

**`logo-strip`** — the customer-logo row near the top of the page.
- Background `{colors.canvas}`, text `{colors.ink-mute}` ("#a1a0ab"), padding `{spacing.lg} {spacing.xl}`. Logos rendered as monochrome SVGs at consistent height.

**`footer`** — the bottom 4-column nav.
- Background `{colors.canvas}` ("#13111c"), text `{colors.ink-mute}` ("#a1a0ab"), hairline top border, padding `{spacing.3xl} {spacing.lg}`. Column labels in `{typography.body-sm-strong}`; link rows in `{typography.body-sm}`.

**`link-inline`** — body-copy inline links.
- Text `{colors.ink}` ("#f7f7f8") with underline on hover; body set in `{typography.body-md}`.

## Do's and Don'ts

### Do
- Use `{colors.canvas}` "#13111c" as the only page background — don't introduce a light surface anywhere in the marketing layout.
- Set every display heading in IBM Plex Serif at weight 500 (hero) or weight 400 (H2 / H3). Below 36px, switch to Inter.
- Use `{colors.hairline}` "#33323e" as the single divider color across the page — every card, nav, input, and footer column border.
- Render the hero gradient once, at hero scale, as a backdrop. Apply it via `--heroGradient` and don't fork it into per-section variants outside the documented `--kickbackHeroGradient` secondary surface.
- Keep the Deploy CTA the only filled button on the page. Pair it with a transparent ghost button for the secondary action.

### Don't
- Don't use "#0b0b0f" (`{colors.canvas-deep}`) as the page background — it's an inset-only token (218 background occurrences inside the deploy mockup frame and code-preview rectangles). For the page body, use `{colors.canvas}` "#13111c" instead; the +5% lightness difference is what keeps the mockup reading as recessed.
- Don't set body text in IBM Plex Serif. The serif is display-only at 36px / 40px / 54px; setting body in serif collapses the contrast between the headline and the paragraph and breaks the brand's serif-on-dark gesture.
- Don't substitute a neutral gray for `{colors.hairline}` "#33323e". The violet tilt (the hairline sits at hue 288° in OKLCH) is what keeps the page reading as one continuous indigo surface; a flat-neutral replacement reads as a dashboard, not as Railway.
- Don't escalate the Deploy CTA radius past `{rounded.md}` 8px. The 8px corner is the pill's signature — 12px reads as a generic SaaS button, and 9999px reads as a Vercel-style marketing pill.
- Don't add a second saturated brand color to the page. The marketing surface runs one violet CTA ("#553f83") plus one brand green ("#42946e") for status pills. Introducing a brand blue or amber turns Railway's restraint into a dashboard demo.
- Don't fill the hero gradient into a button or card surface. The gradient is theatre lighting — applied at hero scale only as a flat backdrop, never miniaturized.

## Known Gaps

- **Hover-state colors**: The brand uses subtle hover transitions on nav links and the Deploy CTA (typically a faint shift toward `{colors.gradient-deep-violet}` "#553f83"), but precise per-component hover tokens are not captured in the extraction.
- **Focus rings**: Form inputs declare a focus ring color via `--tw-ring-color` (a soft sky-blue at 50% alpha), but the per-component focus-ring width and the exact ring hex are not documented in the captured token set.
- **In-app dashboard surfaces**: This DESIGN.md covers the public marketing page. The Railway dashboard's denser inner surfaces — service tiles, deploy logs, project trees — use the same "#13111c" + IBM Plex Serif vocabulary with tighter spacing and additional gray-scale steps not captured here.
- **Light mode**: Railway's marketing page runs dark-only; no light-mode tokens are declared. A polarity-flipped variant would require deriving canvas / hairline / ink tokens from scratch.
- **Motion**: The hero gradient is static at capture; if the live page animates the gradient stops, that timing is not documented here.