Railway Design System
Dark · Generated 19/04/2026 · 133 colors · 62 type tokens · 20 spacing steps · 12 motion tokens
v4.6
Color Palette
Background Colors
Black
#000000
Dark Gray 2
#0B0B0F
Dark Gray 3
#13111C
Dark Gray 13
#1C1A28
Dark Gray
#33323E
Dark Blue
#180D43
Dark Purple
#3D2259
Dark Purple 2
#291839
White 2
#FFFFFF
Text Colors
White
#F7F7F8
Mid Gray 2
#A1A0AB
Blue (Gray)
#6B7280
Dark Gray 6
#545260
Cyan
#42946E
Orange 4
#C67839
Light Pink
#F9A8D4
Purple
#853BCE
Brand & Accent Colors
Cyan 5
#37CD8F
Dark Cyan
#296852
Dark Cyan 3
#1C362A
Orange
#F1CD69
Orange 3
#EF9352
Red
#D2352B
Green
#83CD29
Light Purple
#BF92EC
Border Colors
Purple 4
#A05FCF
Dark Gray 28
rgba(51,50,62,0.1)
Typography
Base Font · Inter
Inter
The quick brown fox jumps over the lazy dog
Regular · 400 Medium · 500 Semibold · 600 Bold · 700 Extrabold · 800
Display Font · Inter Tight
Inter Tight
Deploy in seconds. Scale to billions.
Regular · 400 Semibold · 600 Bold · 700
Serif Font · IBM Plex Serif
IBM Plex Serif
The intelligent cloud provider.
Regular · 400 Medium · 500
Mono Font · JetBrains Mono
JetBrains Mono
railway up --detach --env production
Regular · 400 Medium · 500
Deploy.
Hero Display · 54px · Extrabold · letter-spacing: −1.96px
Build. Ship. Scale.
Display XL · 40px · Bold · letter-spacing: −0.8px
The all-in-one cloud platform
Heading Large · 32px · Bold · letter-spacing: −0.72px
Infrastructure, simplified.
Heading Medium · 20px · Semibold · letter-spacing: −0.24px
Railway is the cloud that takes programs from your computer and runs them on the internet — no DevOps PhD required.
Body Default · 16px · Regular · line-height: 24px
Deploy from GitHub in 3 minutes. Automatic deploys on every push.
Body Small · 14px · Regular · line-height: 21px
DEPLOY · SCALE · MONITOR
Caption · 11px · Medium · letter-spacing: 0.24px · uppercase
Line Heights
Tight
9.5px
Normal
16px
LH-7
21px
LH-10
24px
LH-12
28px
LH-15
32px
LH-17
40px
LH-20
48px
LH-21
60.5px
LH-22
65px
Letter Spacing
Railway Platform
Tightest
−1.96px · hero headings, display text
Deploy Fast
Normal (Tight)
−0.8px · section headings
Scale globally
LS-7
−0.2px · body text, UI labels
DEPLOY · SCALE
LS-12
0.24px · uppercase labels, captions
Spacing
Spacing Scale
20 tokens — 2px → 310px
2
4
6
8
10
12
16
24
32
40
48
64
80
96
104
128
140+
159+
201+
310+
Borders
Border Radii
SM
0 0 4 4px
LG
4px
XL
4 4 0 0px
2XL
6px
Full
8px
R7
12px
R8
16px
R9
28px
R11
9999px
R10
50%
Border Width
Hairline
1px · ×2296
Thin
2px · ×8
Shadows / Elevation
Shadow Tokens
6 tokens
Inset SM
×2
rgba(255,255,255,0.1) 1px inset — subtle inner highlight ring
Inset LG
×1
rgba(255,255,255,0.2) 1.5px inset — stronger inner ring for cards
Outline MD
×1
#CCCCCC 2px spread — focus outline or selected element
Depth XL
×1
5-layer dark warm shadow — modals, dialogs, elevated panels
Glow Blue
×1
Blue layered glow from below — hero sections, landing spotlights
Glow Purple
×1
Pink+purple outer glow — interactive highlights, hover effects
Z-Index
TokenValueUsage
--z-11Base stacking layer
--z-22Slight elevation above base
--z-35Sticky elements, minor overlays
--z-410Navigation, sticky headers
--z-520Dropdowns, popovers
--z-650Overlays, modals, drawers
--z-79999Top-level dialogs, toasts
--z-82147483636Browser extension layer
--z-92147483637Above extension layer
--z-102147483638Absolute topmost layer
Breakpoints
--breakpoint-xs
376px
Mobile XS — small phones
--breakpoint-sm
500px
Small — large phones
--breakpoint-md
640px
Medium — small tablets
--breakpoint-lg
768px
Large — tablets
--breakpoint-3xl
1024px
3XL — laptops
--breakpoint-bp-11
1280px
BP-11 — desktops
--breakpoint-bp-13
1900px
BP-13 — ultra-wide displays. Full range: 376px → 500px → 640px → 768px → 800px → 900px → 1024px → 1080px → 1100px → 1200px → 1280px → 1536px → 1900px
Opacity
Opacity Tokens
14 tokens — 0.01 → 0.94
1%
--opacity-1
7%
--opacity-7
12%
--opacity-12
25%
--opacity-25
40%
--opacity-40
50%
--opacity-50
60%
--opacity-60
75%
--opacity-75
90%
--opacity-90
94%
--opacity-94
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 normal · AA Large ≥ 3:1 large/bold · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-white--color-black19.61:1AAA
--color-white--color-dark-gray11.77:1AAA
--color-white--color-dark-gray-218.35:1AAA
--color-white--color-dark-gray-317.44:1AAA
--color-white--color-white-21.07:1Fail
--color-blue (gray)--color-black4.34:1AA Large
--color-blue (gray)--color-white-24.83:1AA
--color-blue (gray)--color-dark-gray-24.06:1AA Large
--color-cyan--color-black5.69:1AA
--color-cyan--color-dark-gray-25.33:1AA
--color-cyan--color-dark-gray-35.06:1AA
--color-cyan--color-white-23.69:1AA Large
--color-mid-gray-2--color-black8.13:1AAA
--color-mid-gray-2--color-dark-gray-27.61:1AAA
--color-mid-gray-2--color-dark-gray-37.23:1AAA
--color-dark-gray-6--color-white-27.63:1AAA
--color-dark-gray-6--color-black2.75:1Fail
CSS Variables Reference
Background Colors 9 tokens
Pure Black--color-black#000000
Near Black--color-dark-gray-2#0B0B0F
App Background--color-dark-gray-3#13111C
Card Background--color-dark-gray-13#1C1A28
Elevated Surface--color-dark-gray#33323E
Deep Blue--color-dark-blue#180D43
Deep Purple--color-dark-purple#3D2259
Deep Purple 2--color-dark-purple-2#291839
Pure White--color-white-2#FFFFFF
Text & Accent Colors 10 tokens
Text Primary--color-white#F7F7F8
Text Secondary--color-mid-gray-2#A1A0AB
Text Muted--color-blue#6B7280
Text Disabled--color-dark-gray-6#545260
Brand Green--color-cyan-5#37CD8F
Brand Green Dark--color-cyan#42946E
Accent Yellow--color-orange#F1CD69
Accent Orange--color-orange-3#EF9352
Purple--color-purple#853BCE
Error Red--color-red#D2352B
Typography 62 tokens
Base Font--font-family-baseInter
Display Font--font-family-tightInter Tight
Serif Font--font-family-serifIBM Plex Serif
Mono Font--font-family-monoJetBrains Mono
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
Extrabold--font-weight-extrabold800
Micro--font-size-sm (11px)11px
Caption--font-size-lg (12px)12px
Body Small--font-size-3xl (14px)14px
Body Default--font-size-4xl (16px)16px
Body Large--font-size-5xl (18px)18px
Heading MD--font-size-6xl (20px)20px
Display Hero--font-size-54px54px
Spacing 20 tokens
Space 1--space-12px
Space 2--space-24px
Space 3--space-36px
Space 4--space-48px
Space 5--space-510px
Space Gutter--space-612px
Space MD--space-816px
Space LG--space-1024px
Space XL--space-1232px
Section Gap--space-1640px
Block Gap--space-2048px
Page Padding--space-2464px
Section Inset--space-3280px
Section Padding--space-4096px
Layout 48--space-48104px
Layout 64--space-64128px
Borders & Radius 13 tokens
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Bottom Rounded--radius-sm0 0 4 4px
Rounded--radius-lg4px
Top Rounded--radius-xl4 4 0 0px
Card Small--radius-2xl6px
Card Medium--radius-full8px
Card Large--radius-r712px
Dialog--radius-r816px
Bubble--radius-r928px
Pill--radius-r119999px
Motion, Opacity & Layers 26 tokens
Instant--duration-instant50ms
Fast--duration-fast100ms
Normal--duration-normal150ms
Slow--duration-slow200ms
Slower--duration-slower250ms
Ease Out--easing-ease-outease-out
Ease In Out--easing-ease-in-outease-in-out
12%--opacity-120.12
40%--opacity-400.40
50%--opacity-500.50
75%--opacity-750.75
90%--opacity-900.90
Base--z-11
Navigation--z-410
Popover--z-520
Overlay--z-650
Dialog / Toast--z-79999
Railway Design System · Generated 19/04/2026 · 133 color tokens · 7 font families · 5 font weights · 16 font sizes · 22 line heights · 12 letter-spacing · 20 spacing · 11 radius · 2 border-width · 6 shadow · 9 duration · 3 easing · 10 z-index · 13 breakpoints · 14 opacity