Railway Design System

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

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

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

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.