# Railway — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Neutrals & base (dark theme)
| 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 |

### Accent (purple family)
| 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.

## 3. Typography Rules

- Display/heading stack: `"IBM Plex Serif", Georgia, serif` — the signature literary display face.
- Body/UI stack: `Inter, -apple-system, sans-serif`.
- Body: 16px / 26px line-height / 400 / `#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.

## 4. Component Stylings

### Buttons (large, 58px tall)
- **Primary (Deploy)**: bg `#553f83` (muted violet), text white, border 1px `rgba(255,255,255,.15)`, radius 8px, h 58px, 20px/500, padding `12px 24px`. Trailing arrow glyph.
- **Secondary (Agents)**: bg `rgba(0,0,0,.35)` (translucent dark), text white, border 1px `rgba(255,255,255,.25)`, radius 8px, h 58px, same padding/size.
- **Nav links**: plain white text, dropdown carets; right side "Sign in" + "Book a demo".

### Announcement bar
- Full-width, bg `#1f132a`, h 52px, centered lavender text `#a667e4` (16px) with an underlined link and a close ✕.

### Cards / embedded dashboard preview
- Dark translucent panels with white-alpha hairline borders, radius ~8–12px; header row with the Railway mark + breadcrumb + a purple accent dot. The product canvas is a graph/board of service nodes.

### Inputs
- Not fully captured on marketing; expect dark fill + white-alpha border + purple focus (consistent with palette).

## 5. Layout Principles

- Full-bleed atmospheric hero; content centered on a max ~1100px column.
- Announcement bar (52px) → nav (~64px, transparent) → centered hero (serif headline + subhead + dual CTA) → embedded dashboard preview that bleeds up into the hero.
- Nav: logo + wordmark left; center dropdown links (Product/Developers/Enterprise/Company/Pricing); right "Sign in" + "Book a demo".
- Spacing: 4px base grid; generous vertical rhythm; hero CTAs centered with 12px gap.

## 6. Depth & Elevation

- Radii: buttons/inputs/cards `8px` (panels up to ~12px).
- Control heights: primary/secondary buttons `58px` (large), nav compact.
- Elevation: minimal drop shadows; depth is the illustrated starfield background + translucent surfaces with white-alpha hairlines.

## 7. Motion

- Micro-transitions: `transform 0.15s cubic-bezier(0.4,0,1,1)`, `background-color 0.2s ease-out`, `opacity 0.15s ease-in-out`; otherwise Tailwind-style `all` defaults.
- Subtle hover states on buttons/nav; the embedded dashboard preview animates content. No heavy scroll-jacking library detected.

## 8. Backgrounds, Effects & WebGL

- **Signature illustrated hero**: a deep indigo night sky with stars and soft clouds (raster/vector artwork), giving the page its cosmic, painterly depth — the strongest brand-visual after the serif type.
- Deep-purple tints layer the announcement bar and section blocks (`#1f132a`, `#3d2259`).
- Translucent dark surfaces (`rgba(0,0,0,.35)`) and white-alpha borders create glassy layering.
- No background video; no obvious WebGL — the atmosphere is illustrated, not simulated.

## 9. Do's and Don'ts

### Do
- Use a deep indigo-black canvas `#13111c` with an illustrated starfield/cloud hero.
- Set headlines in IBM Plex Serif (weight ≤500, tight negative tracking) — the serif is the brand.
- Keep body/UI in Inter; subheads at 80% white.
- Reserve purple (`#a667e4` lavender, `#853bce` violet) for links, accent dots, and highlights; make the primary CTA muted violet `#553f83`.
- Build large 58px buttons at radius 8px with white-alpha borders (.15 primary / .25 secondary).
- Use a lavender-on-`#1f132a` announcement bar.
- Layer translucent dark surfaces with white-alpha hairlines instead of shadows.

### Don't
- Don't set the display type in a sans-serif — the serif is the signature.
- Don't introduce a second accent hue; purple is the only color.
- Don't rely on drop shadows for depth — use the illustrated background and translucency.
- Don't use heavy weights (>500) or bright flat backgrounds.
- Don't make buttons small — the CTAs are large (58px).

## 10. Responsive Behavior

- Standard breakpoints (Tailwind-style). Nav collapses to a hamburger; hero type scales down and CTAs stack.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#13111c` · Bar `#1f132a` · Text `#ffffff` · Muted `#a1a0ab` · Border `rgba(255,255,255,.15)` · Accent `#a667e4` / CTA `#553f83`
- Fonts: IBM Plex Serif (display, ≤500, tight tracking) + Inter (body/UI) · Body: 16/26 · Radius: 8px · Button height: 58px
- Primary btn: bg `#553f83`, border `rgba(255,255,255,.15)` · Secondary: bg `rgba(0,0,0,.35)`, border `rgba(255,255,255,.25)`

<railway_design_language>
Use the Railway design language: a dark, dreamy, cosmic infrastructure aesthetic on a deep indigo-black canvas #13111c with an illustrated starfield-and-clouds hero. The signature is a large IBM Plex Serif display headline (weight 500, tight negative tracking ~-3.6% at 54px) floating centered — literary and calm — while body and UI use Inter at 16/26 with subheads at 80% white and muted text #a1a0ab. Purple is the only hue: a lavender #a667e4 announcement bar on #1f132a, violet #853bce accent dots and links, and a muted-violet primary CTA #553f83. Buttons are large — 58px tall, radius 8px, 20px/500 — with white-alpha borders (rgba(255,255,255,.15) on the filled primary, rgba(255,255,255,.25) on the translucent rgba(0,0,0,.35) secondary). Depth comes from the illustrated background and glassy translucent panels with white-alpha hairlines, not drop shadows. Radii are 8px throughout; motion is quick 0.15–0.2s transform/opacity/background micro-transitions. Feels: dark, calm, cosmic, literary. Avoid: a sans-serif display face, a second accent color, drop shadows for depth, heavy weights above 500, or small buttons.
</railway_design_language>