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

Typography

Role	Family	Size	Weight
Display	Inter	48px	700
Heading	Inter	28px	600
Body	Inter	16px	400
Mono	Fira Code	14px	400

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