Railway
A deployment platform with a dark, developer-native canvas (#0B0D0E near-black) and a distinctive brand palette that cycles through vivid pinks, purples, and the iconic Railway violet (#7C3AED / #A855F7) used on CTAs and deployment status indicators. The system reads as creative infrastructure — not as sterile DevOps but as deployment-as-craft. Typography uses a clean grotesque (Inter) with occasional expressive moments in heavier weights on marketing pages. The service graph visualization is Railway's signature UI: colorful service nodes connected by edges in a dark canvas, making infrastructure feel like a living system diagram.
Color Tokens
1. Visual Theme & Atmosphere
Railway is the deployment platform that made infrastructure feel fun. The dark canvas (#0B0D0E) grounds a playful palette of purples, pinks, and greens that appear on service nodes in the project graph. The signature visual is the canvas-based service graph: a spatial, node-and-edge diagram of your entire infrastructure that makes deployments feel tangible and alive. Marketing embraces a "we're different from AWS" energy — bold type, vivid gradients, dark surfaces.
2. Color System
- Canvas: #0B0D0E — near-true black, darker than most dark themes
- Purple primary: #A855F7 — Railway's brand purple, deploy button, active states
- Pink secondary: #EC4899 — secondary service nodes, gradient partner
- Surfaces: #131619 / #1A1D21 — subtle layering in the dark environment
- Service node colors: Purple, pink, blue, green assigned per-service to aid identification
- Semantic: Green #22C55E (deploy success), Red #EF4444 (failure), Amber #F59E0B (building)
- Glow: Purple glow shadow on active deploy button — a signature detail
3. Typography
Inter at 800 weight for display — very bold, very tight (-0.03em). The marketing hero headlines are some of the most aggressively tracked in developer tooling. Product UI uses 400/14px — small and dense for infrastructure dashboards. The contrast between heavy marketing type and light product type is intentional.
4. Components & Patterns
- Service graph: Canvas-based node diagram, drag-to-reposition, edge connections, deploy status as node border color
- Deploy logs: Real-time streaming terminal output, monospace, in dark panel
- Environment variables: Key-value pairs in dark panel, reveal/hide toggle
- Metrics graphs: Spark-line style CPU/memory charts in dark tiles
- Deploy button: Purple, full-width within service card, with glow on active
- Status indicators: Small colored dots — green/yellow/red — always visible on service nodes
5. Spacing & Layout
Project canvas: infinite canvas, no fixed grid. Sidebar: 240px fixed, service list. Settings: centered content area, max 800px. Dense UI — most panels use 12–16px padding.
6. Motion & Interaction
Service graph nodes drag with spring physics. Deploy log streams in real-time with smooth scroll-to-bottom. Build progress shows animated percentage. Node status transitions animate with color fade. The canvas pans and zooms smoothly.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for