Railway | The all-in-one intelligent cloud provider

DesignScan preview · https://railway.app · 2026-06-13

Colors

primary#180d43
on-primary#ffffff
background#13111c
text#f7f7f8
accent-1#ffffff
accent-2#33323e
on-accent-2#ffffff
border#33323e
muted-surface#1b2132
info#180d43

Typography

display40px · 400 · lh 1.5
The quick brown fox jumps
headline-lg36px · 400 · lh 1.5
The quick brown fox jumps
headline-sm24px · 400 · lh 1.5
The quick brown fox jumps
title20px · 400 · lh 1.5
The quick brown fox jumps
title-1818px · 400 · lh 1.5
The quick brown fox jumps
body-lg16px · 400 · lh 1.63
The quick brown fox jumps
body14px · 400 · lh 1.63
The quick brown fox jumps
label12px · 400 · lh 1.63
The quick brown fox jumps

Spacing

xs4px
sm8px
md12px
lg16px
xl24px
2xl32px
3xl40px

Radius

xs6px
sm8px
md10px
lg16px

Layout

sm500px
md640px
lg768px
xl1024px
2xl1100px
3xl1280px
containermax-width 1696px

Elevation

sm
md
lg
xl

Components

button-primary
surface · input · body-text · border

Body text on the surface color — this is what reading copy looks like.

divider
surface-muted
Subtle secondary surface — sidebars, sections, callouts.
link
Inline link example →
badge Badge
feedback messages
info · New: design tokens now include breakpoints.