Railway

---
version: alpha
name: "Railway Dark Cloud"
description: "Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers."
colors:
  brand-purple-dark: "#553f83"
  accent-violet: "#a78bfa"
  success-green: "#42946e"
  surface-base: "#13111c"
  surface-deep: "#0b0b0f"
  surface-elevated: "#1c1a28"
  brand-purple: "#853bce"
  text-dim: "#545260"
  text-muted: "#a1a0ab"
  text-primary: "#f7f7f8"
  text-white: "#ffffff"
  border-light: "#dcdce0"
  border-subtle: "#33323e"
  surface-white: "#ffffff"
  border-default: "#dcdce0"
typography:
  hero-heading:
    fontFamily: "IBM Plex Serif"
    fontSize: "54px"
    fontWeight: "400"
    lineHeight: "1.1"
  section-heading:
    fontFamily: "Inter"
    fontSize: "24px"
    fontWeight: "400"
    lineHeight: "32px"
  subheading:
    fontFamily: "Inter"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "28.8px"
    letterSpacing: "-0.09px"
  body-default:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "26px"
  body-medium:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "26px"
  body-semibold:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "600"
    lineHeight: "26px"
  small-body:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "22.75px"
  small-medium:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "22.75px"
  caption:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "19.5px"
    letterSpacing: "-0.24px"
  micro-label:
    fontFamily: "Inter"
    fontSize: "11px"
    fontWeight: "400"
    lineHeight: "17.875px"
    letterSpacing: "-0.22px"
  code-block:
    fontFamily: "JetBrains Mono"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "19.5px"
  code-inline:
    fontFamily: "JetBrains Mono"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "21.125px"
rounded:
  radius-sm: "4px"
  radius-md: "6px"
  radius-lg: "8px"
  radius-xl: "10px"
  radius-2xl: "12px"
  radius-card: "16px"
  radius-pill: "9999px"
spacing:
  space-1: "2px"
  space-2: "4px"
  space-3: "6px"
  space-4: "8px"
  space-5: "12px"
  space-6: "16px"
  space-7: "24px"
  space-8: "32px"
  space-9: "40px"
  space-10: "48px"
  space-11: "56px"
  space-12: "64px"
  space-13: "80px"
  space-14: "96px"
  space-15: "128px"
---

## Overview

Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.

**Signature traits:**
- Dual typeface system: Pairs IBM Plex Serif and Inter across the type hierarchy.
- Soft, rounded geometry: Generous corner rounding up to 9999px.

## Colors

The palette uses 20 validated color tokens across 2 theme profiles. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **surface-background** maps to `surface-base`: Role "background" is grounded by usage context "Primary page and hero background; --background CSS variable".
- **border-border** maps to `border-subtle`: Role "border" is grounded by usage context "Dominant border/divider color across all UI zones; --gray-200".
- **action-text** maps to `text-primary`: Role "text" is grounded by usage context "Primary body and UI text, buttons, links; --gray-950".
- **content-text** maps to `text-white`: Role "text" is grounded by usage context "Headings, hero text, high-contrast labels".

### Dark Theme

### Primary Brand
- **Brand Purple Dark** (#553f83): CTA button background (probe-confirmed: backgroundColor rgb(85,63,131)), hover/pressed state. Role: primary. {authored: rgb(85, 63, 131), space: rgb}
- **Accent Violet** (#a78bfa): Accent highlights, underline emphasis on 'intelligent' hero text. Role: accent. {authored: rgb(167, 139, 250), space: rgb}
- **Success Green** (#42946e): Deployment success states, status indicators. Role: accent. {authored: rgb(66, 148, 110), space: rgb, alpha: 0.1}

### Text Scale
- **Brand Purple** (#853bce): Primary CTA button fill (Deploy button), brand accent highlights. Role: text. {authored: rgb(133, 59, 206), space: rgb}
- **Text Dim** (#545260): Tertiary text, footer metadata; --gray-300. Role: text. {authored: rgb(84, 82, 96), space: rgb}
- **Text Muted** (#a1a0ab): Secondary/muted text, captions, nav items; --gray-600. Role: text. {authored: rgb(161, 160, 171), space: rgb}
- **Text Primary** (#f7f7f8): Primary body and UI text, buttons, links; --gray-950. Role: text. {authored: rgb(247, 247, 248), space: rgb, alpha: 0.5}
- **Text White** (#ffffff): Headings, hero text, high-contrast labels. Role: text. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.05}

### Interactive
- **Border Light** (#dcdce0): Light-mode border fallback; --gray-800. Role: border. {authored: rgb(220, 220, 224), space: rgb}
- **Border Subtle** (#33323e): Dominant border/divider color across all UI zones; --gray-200. Role: border. {authored: rgb(51, 50, 62), space: rgb, alpha: 0.1}

### Surface & Shadows
- **Surface Base** (#13111c): Primary page and hero background; --background CSS variable. Role: background. {authored: rgb(19, 17, 28), space: rgb}
- **Surface Deep** (#0b0b0f): Deepest surface, footer and flap backgrounds; --flap-bg. Role: background. {authored: rgb(11, 11, 15), space: rgb}
- **Surface Elevated** (#1c1a28): Slightly elevated card and panel surfaces. Role: background. {authored: rgb(28, 26, 40), space: rgb}

### Light Theme

### Primary Brand
- **Border Subtle** (#33323e): Borders and dividers; --gray-200. Role: primary. {authored: rgb(51, 50, 62), space: rgb, alpha: 0.1}

### Text Scale
- **Brand Purple** (#853bce): Primary CTA and brand accent in light mode. Role: text. {authored: rgb(133, 59, 206), space: rgb}
- **Text Muted** (#a1a0ab): Secondary muted text; --gray-600. Role: text. {authored: rgb(161, 160, 171), space: rgb}
- **Text Primary** (#13111c): Primary dark text on light backgrounds; --background. Role: text. {authored: rgb(19, 17, 28), space: rgb}

### Interactive
- **Border Default** (#dcdce0): Light-mode dividers and outlines; --gray-800. Role: border. {authored: rgb(220, 220, 224), space: rgb}

### Surface & Shadows
- **Surface Base** (#f7f7f8): Primary light page background; --gray-950. Role: background. {authored: rgb(247, 247, 248), space: rgb, alpha: 0.5}
- **Surface White** (#ffffff): Card and panel surfaces in light mode. Role: background. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.05}

## Typography

Typography uses IBM Plex Serif, Inter, JetBrains Mono, ui-monospace, SF Mono across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes IBM Plex Serif and Inter and JetBrains Mono and ui-monospace and SF Mono for visual contrast. Weight range spans regular, medium, semi-bold. Sizes range from 11px to 54px.

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Primary hero headline — probe-confirmed h1.font-plexSerif at 54px w400, white on dark | IBM Plex Serif | 54px | 400 | 1.1 | normal | IBM Plex Serif | Extracted token |
| Section-level headings and large UI labels | Inter | 24px | 400 | 32px | normal | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol | Extracted token |
| Subheadings, card titles, feature labels | Inter | 18px | 500 | 28.8px | -0.09px | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol | Extracted token |
| Primary body copy, nav items, UI text — most frequent tuple (6000+ hits) | Inter | 16px | 400 | 26px | normal | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol | Extracted token |
| Emphasized body text, button labels | Inter | 16px | 500 | 26px | normal | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol | Extracted token |
| Strong UI labels, active nav items | Inter | 16px | 600 | 26px | normal | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol | Extracted token |
| Secondary body text, metadata, table cells | Inter | 14px | 400 | 22.75px | normal | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol | Extracted token |
| Small emphasized labels, badge text | Inter | 14px | 500 | 22.75px | normal | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol | Extracted token |
| Captions, timestamps, fine-print labels | Inter | 12px | 400 | 19.5px | -0.24px | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol | Extracted token |
| Micro labels, status chips, inline annotations | Inter | 11px | 400 | 17.875px | -0.22px | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol | Extracted token |
| Code blocks, terminal output, deployment logs | JetBrains Mono | 12px | 400 | 19.5px | normal | JetBrains Mono, ui-monospace, SFMono-Regular, monospace, SF Mono, Consolas, Menlo, monospace | Extracted token |
| Inline code snippets, command references | JetBrains Mono | 13px | 400 | 21.125px | normal | JetBrains Mono, ui-monospace, SFMono-Regular, monospace, SF Mono, Consolas, Menlo, monospace | Extracted token |

## Layout

Responsive system uses 3 breakpoint tier(s): mobile, tablet, desktop.

This system uses a 4px base grid with scale values 2, 4, 6, 8, 12, 16, 24, 32, 40, 48, 56, 64, 80, 96, 128.

### Responsive Strategy
- **mobile (376-1200px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (>= 768px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (Unknown)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| space-1 | 2px | 2 | Extracted spacing token |
| space-2 | 4px | 4 | Extracted spacing token |
| space-3 | 6px | 6 | Extracted spacing token |
| space-4 | 8px | 8 | Extracted spacing token |
| space-5 | 12px | 12 | Extracted spacing token |
| space-6 | 16px | 16 | Extracted spacing token |
| space-7 | 24px | 24 | Extracted spacing token |
| space-8 | 32px | 32 | Extracted spacing token |
| space-9 | 40px | 40 | Extracted spacing token |
| space-10 | 48px | 48 | Extracted spacing token |
| space-11 | 56px | 56 | Extracted spacing token |
| space-12 | 64px | 64 | Extracted spacing token |
| space-13 | 80px | 80 | Extracted spacing token |
| space-14 | 96px | 96 | Extracted spacing token |
| space-15 | 128px | 128 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-style | solid |
| Light | outline-color | rgb(247, 247, 248) ; rgb(255, 255, 255) ; rgb(161, 160, 171) |
| Light | outline-width | 3px ; 1px |
| Light | outline-offset | 0px ; -1px |
| Light | transform | matrix(0.8, 0, 0, 0.8, 0, 0) ; matrix(1, 0, 0, 1, 0, 24) ; matrix(1, 0, 0, 1, 0, -16) |
| Dark | outline-style | solid |
| Dark | outline-color | rgb(247, 247, 248) ; rgb(255, 255, 255) ; rgb(161, 160, 171) |
| Dark | outline-width | 3px ; 1px |
| Dark | outline-offset | 0px ; -1px |
| Dark | transform | matrix(0.8, 0, 0, 0.8, 0, 0) ; matrix(1, 0, 0, 1, 0, 24) ; matrix(1, 0, 0, 1, 0, -16) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-sm | 4px | 4 | Subtle corner |
| radius-md | 6px | 6 | Subtle corner |
| radius-lg | 8px | 8 | Control corner |
| radius-xl | 10px | 10 | Control corner |
| radius-2xl | 12px | 12 | Control corner |
| radius-card | 16px | 16 | Card corner |
| radius-pill | 9999px | 9999 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-sm | 4px | px |
| radius-md | 6px | px |
| radius-lg | 8px | px |
| radius-xl | 10px | px |
| radius-2xl | 12px | px |
| radius-card | 16px | px |
| radius-pill | 9999px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system, Soft, rounded geometry without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Breakpoint 1 | <= 1200px | screen and (max-height: 800px) and (max-width: 1200px) |
| Mobile | >= 376px | screen and (min-width: 376px) |
| Tablet | >= 768px | screen and (min-width: 768px) |
| Breakpoint 4 | Unknown | (height <= 900px) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.