Railway

The all-in-one intelligent cloud provider for deploying apps, databases, volumes, functions, and background jobs.

Colors

Primary

primary#853bcePurple accent, glow, active states

primary-hover#6D31A9Hover on primary (pink-600, darker)

Surfaces

background#13111CApp background (dark oatmeal)

surface#181622Cards, panels

surface-raised#1F1C2BElevated surfaces

surface-overlay#27243ADropdowns, modals

border#2C2A3EDividers, borders

border-strong#3D3A55Inputs, emphasis

Text

text-primary#F1F0EFPrimary text

text-secondary#868593Supporting text

text-muted#59497APlaceholders, disabled

Semantic

success#72BF9BSuccess, deployed (green-600)

warning#DFAE2ABuilding, warnings (yellow-500)

error#D85B59Errors, destructive (red-600)

Typography

Landing page scale (fluid, IBM Plex Serif display)

hero	Ship software peacefully	IBM Plex Serif40px500lh 1.12-1.96px
section-h	Deploy anything without complexity	IBM Plex Serif36px400lh 48px-0.72px
text-large	See your infrastructure	Inter Tightclamp(32px,4vw,40px)lh 1.25
text-h1	Active services	Inter Tightclamp(28px,2.5vw,32px)lh 1.375
text-h2	Network and connect	Inter Tightclamp(24px,3vw,28px)lh 1.375
text-h3	Private, fast connections	Inter Tightclamp(22px,2.5vw,24px)lh 1.375
text-base	Connect your repo, Railway handles the rest.	16px400lh 1.5

App UI scale

heading-lg	Active deployments	Inter Tight22px600lh 1.3
heading-md	Service management	Inter Tight16px600lh 1.4
heading-sm	Environment variables	Inter14px600lh 1.4
body	Standard body text for interface	Inter14px400lh 1.5
body-sm	Small body for metadata and labels	Inter13px400lh 1.5
caption	Caption and supporting text	Inter12px400lh 1.4
code	railway up --detach	JetBrains Mono12px400lh 1.6

Components

Buttons

Inputs

Badges

Deployed Building Failed Sleeping

Service Card

web-api Deployed

node:18-alpine · 512MB · us-west1

Service Canvas

web-api deployed

node:18 · 512 MB · us-west1

postgres deployed

pg15 · 1 GB · us-west1

redis building

redis7 · 256 MB · us-west1

Spacing

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-5

20px

space-6

24px

space-8

32px

space-10

40px

Guardrails

Use violet/purple accent for all interactive highlights

Keep the canvas view clean — services are the content

Use status colors consistently: green=live, yellow=building, red=error

Animate deployments — motion communicates progress

DON'T

Use harsh drop shadows — glow effects instead

Clutter the canvas with too much metadata per card

Use light backgrounds inside the app — dark only

Use more than one glow effect per screen

Show raw stack traces inline — collapse behind "show details"