Railway
Bring your code, we handle the rest
13 colors
15 components
Inter, Fira Code
Mar 25, 2026
Website Preview
Colors
Primary
#C049FF
Primary purple
#13111A
Background
#FFFFFF
Primary text
#844FBA
Secondary purple
#2F2B3A
Cards, panels
Neutral
#13111A
Background
#1E1A2B
Card surface
#2F2B3A
Panel surface
#4A4560
Borders
#8B8AA0
Muted text
Semantic
#22C55E
Healthy service, deploy success
#EF4444
Failed deploy, crashed service
#F59E0B
Deploying, degraded state
Typography
Inter
Role
SizeWeightHeight
Display
48px7001.1
Heading
28px6001.2
Body
16px4001.6
Small
14px4001.5
Fira Code
Role
SizeWeightHeight
Mono
14px4001.6
DESIGN.md — Railway
Overview
Railway's design system channels developer infrastructure through a purple-pink gradient language on deep dark surfaces. The aesthetic is futuristic and slightly playful, making infrastructure feel less intimidating and more approachable.
Colors
Primary Palette
| Token | Hex | Usage |
|---|---|---|
color-brand | #C049FF | Primary purple |
color-bg | #13111A | Background |
color-text | #FFFFFF | Primary text |
color-accent | #844FBA | Secondary purple |
color-surface | #2F2B3A | Cards, panels |
Neutral Palette
| Token | Hex | Usage |
|---|---|---|
color-dark-950 | #13111A | Background |
color-dark-800 | #1E1A2B | Card surface |
color-dark-700 | #2F2B3A | Panel surface |
color-dark-500 | #4A4560 | Borders |
color-gray-400 | #8B8AA0 | Muted text |
Semantic Colors
| Token | Hex | Usage |
|---|---|---|
color-success | #22C55E | Healthy service, deploy success |
color-error | #EF4444 | Failed deploy, crashed service |
color-warning | #F59E0B | Deploying, degraded state |
Typography
| Role | Family | Size | Weight | Line Height |
|---|---|---|---|---|
| Display | Inter | 48px | 700 | 1.1 |
| Heading | Inter | 28px | 600 | 1.2 |
| Body | Inter | 16px | 400 | 1.6 |
| Small | Inter | 14px | 400 | 1.5 |
| Mono | Fira Code | 14px | 400 | 1.6 |
Spacing
| Token | Value | Usage |
|---|---|---|
space-1 | 4px | Icon gaps |
space-2 | 8px | Node padding |
space-4 | 16px | Card padding |
space-6 | 24px | Panel spacing |
space-8 | 32px | Section gaps |
Border Radius
| Token | Value | Usage |
|---|---|---|
radius-sm | 4px | Status badges |
radius-md | 8px | Service nodes, cards |
radius-lg | 12px | Modals |
Elevation
| Level | Value | Usage |
|---|---|---|
shadow-sm | 0 1px 4px rgba(0,0,0,0.4) | Cards at rest |
shadow-md | 0 4px 20px rgba(192,73,255,0.15) | Hovered nodes |
shadow-lg | 0 12px 40px rgba(0,0,0,0.6) | Modals |
Components
Project Canvas
- Visual service topology graph
- Draggable service nodes
- Connection lines between services
Deploy Log
- Streaming terminal output
- Color-coded log levels
- Timestamp column
Service Card
- Purple gradient border on hover
- Status indicator (green/red/yellow dot)
- Resource usage mini-charts
Do's and Don'ts
Do
- Use purple gradients for branding moments
- Show real-time data where possible
- Keep terminal/log UIs monospaced
Don't
- Don't use warm colors for backgrounds
- Don't hide deployment status behind clicks
- Don't animate graphs during data load