# Railway — DESIGN.md

Dark developer-cloud marketing with cinematic night-sky artwork, serif deployment headlines, violet actions and usage-led pricing.

Independent reference guide from public Incognito captures. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.

Captured: 2026-10-01

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **serif display + neutral sans**. A family name is not a bundled font licence. Use an available, licensed pairing or system fallbacks.

## Marketing — Developer cloud deployment pages

### Observed palette
- Canvas: #100e19
- Elevated surface: #171525
- Primary text: #f5f3fb
- Muted text: #9b98a9
- Violet accent: #8b5cf6
- Soft purple glow: #332047
- Border: #2a2638

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline | ~48–68px / tight | 500–700 | tight |
| Section / pricing heading | ~36–52px / tight | 500–700 | tight |
| Body / supporting copy | 16–18px / 1.45 | 400 | normal |
| Nav / button label | 13–14px | 500–600 | normal |

### Layout & hierarchy
- The homepage uses a dark nav over a starry illustrated cloud scene, centring “Ship software peacefully”, deploy and agents actions, and a large GitHub deployment project visual.
- Pricing pairs a large “Pay only for what your app uses, by the second” claim with a stepped usage graph and the beginning of the Free plan card.
- The public /deploy page is a templates showcase with a centered one-click deployment claim, search field and popular template cards; it is marketing UI, not an authenticated project dashboard.

### Components & behavior
- Primary CTA: filled violet rounded button with a light label (Deploy).
- Secondary CTA: dark bordered button (Agents) on the hero.
- Usage visualization: thin purple step graph over a dark grid and a bordered plan card below.
- Template library: search field, category tabs and bordered template cards with small technology marks.

## Scope
This is a marketing-only, logged-out capture (home, pricing and public deployment templates). No login, signup, deployment, credentials, payment or authenticated project UI was captured. Final URLs are https://railway.com/, https://railway.com/pricing and https://railway.com/deploy.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and page structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, keep decorative backgrounds behind content, and let dense plan or product grids stack or scroll on small screens.
- Recommended: give every CTA a real destination and implement hover, focus and disabled states; the capture shows resting states only.
- Use the observed font only when available and appropriately licensed; otherwise use a system fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: Railway navigation over a starry cloud illustration; centred “Ship software peacefully” headline, supporting copy, Deploy / Agents actions and a GitHub deployment project visual. Screenshot: captures/railway-marketing-home.jpg.
- Pricing: Dark pricing page with “Pay only for what your app uses, by the second”, stepped usage graph and Free plan card. Screenshot: captures/railway-marketing-pricing.jpg.
- Feature / public templates: “Deploy 2,000+ open-source apps and templates in one click” with search, category tabs and template cards at https://railway.com/deploy. Screenshot: captures/railway-marketing-feature.jpg.