Runway Design System
Generated 17/04/2026 · 16 colors · 37 type tokens · 35 spacing steps · 7 breakpoints · 6 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#000000
Black 2
#0C0C0C
Black 3
rgba(9,9,11,.7)
Dark Gray 5
#262626
Dark Gray 6
#303030
White 2
#F7F7F7
White
#FFFFFF
Blue 3
#2B22FA
Text Colors
Dark Gray 2
#1A1A1A
Dark Gray 4
#2A2A2A
Dark Gray
#404040
Blue
#6B7280
Blue 2
#666E7A
Mid Gray
#999999
Border Colors
Light Gray
#E5E7EB
Dark Gray 3
#27272A
Typography
Base Font · Times / Times New Roman
Times Italic
Building AI to simulate the world. Every frame, every motion, every story — crafted with intelligence.
Regular · 400 w450 · 450 Medium · 500 Semibold · 600
Mono Font · abcNormal / DM Mono
abcNormal
generate({ model: "gen-4", prompt: "cinematic aerial shot", duration: 10 })
Regular · 400 Medium · 500
Simulate the World
Display · 48px · Regular · italic · line-height: 48px · letter-spacing: −1.2px
AI Video Generation
Heading XL · 40px · Regular · line-height: 44px · letter-spacing: −1px
Create anything. Instantly.
Heading LG · 36px · Regular · line-height: 40px · letter-spacing: −0.9px
Next-generation creative tools
Heading MD · 24px · Regular · line-height: 24px · letter-spacing: −0.26px
Gen-4 is our most capable video generation model, enabling unprecedented fidelity and consistency.
Body Large · 18px · Regular · line-height: 25px · letter-spacing: −0.26px
Generate high-quality video from text, images, or existing footage. No technical expertise required.
Body Default · 16px · Regular · line-height: 24px · letter-spacing: −0.16px
Runway helps teams create professional video content at scale — from social media to feature film.
Body Small · 14px · Regular · line-height: 24px · letter-spacing: 0
GEN-4 · VIDEO AI · CREATIVE TOOLS
Caption / Label · 11px · Regular · monospace · letter-spacing: +0.35px
Line Heights
Tight
14px
Snug
15px
Normal
16px
Relaxed
16.9px
Loose
17.5px
LH-6
20px
LH-8
24px
LH-9
25px
LH-10
36px
LH-11
40px
LH-12
44px
LH-13
48px
Letter Spacing
Runway
Tight · −1.2px
--letter-spacing-tight · display & hero at 40–48px
Generate
Normal · −1px
--letter-spacing-normal · headings at 36–40px
Simulate
Wide · −0.9px
--letter-spacing-wide · mid-size headings
GEN-4 MODEL
LS-7 · +0.35px
--letter-spacing-ls-7 · uppercase labels & captions
Spacing
Spacing Scale
35 tokens — 4px → 240px
4
6
8
10
11.4
12
14
16
20
21.9
22.7
32
36
40
41.5
43.8
48
54.6
55
56
60.2
64
80
96
109
110
112
128
160
176
208
240
Borders
Border Radii
SM
4px
MD
6px
LG
8px
XL
12px
2XL
16px
Runway uses a 5-step radius system from tight 4px through standard 8px to generous 16px for modals and panels.
Border Width
--border-width-hairline
1px · universal across all surfaces
A single 1px border is used throughout the system — applied to cards, inputs, modals, and dividers. Dark and light border colors (#27272A / #E5E7EB) adapt to surface context.
Shadow / Elevation
No Shadow Tokens Defined
Runway's design system contains no explicit shadow or elevation tokens. Depth is achieved through background fills, borders, and opacity — not box-shadows.
Flat
Border-defined
1px solid border provides surface definition without shadow depth
Raised
Fill-elevated
#F7F7F7 background against white creates subtle perceived elevation
Overlay
Inverted layer
Pure black surface signals maximum depth / modal layer
Z-Index
LayerValueUsage
--z-110Sticky navigation, floating headers, fixed elements
--z-220Dropdowns, tooltips, popovers, overlays
--z-340Modals, dialogs, full-screen panels, command palette
Breakpoints
📱
--breakpoint-xs
640px
Mobile landscape
📟
--breakpoint-sm
768px
Tablet portrait
💻
--breakpoint-md
1024px
Small laptop
🖥️
--breakpoint-lg
1200px
Desktop
🖥️
--breakpoint-xl
1280px
Wide desktop
🖥️
--breakpoint-2xl
1536px
Large monitor
🖥️
--breakpoint-3xl
1600px
Ultrawide
Opacity
Opacity Tokens
2 tokens · 0.5 and 0.6 — a minimal, intentional opacity vocabulary
--opacity-50
50% · dimmed states
--opacity-60
60% · semi-visible
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray--color-black2.03:1Fail
--color-dark-gray--color-white10.37:1AAA
--color-dark-gray--color-black-21.89:1Fail
--color-dark-gray--color-dark-gray-51.46:1Fail
--color-dark-gray-2--color-black1.21:1Fail
--color-dark-gray-2--color-white17.4:1AAA
--color-blue--color-black4.34:1AA Large
--color-blue--color-white4.83:1AA
--color-blue--color-black-24.05:1AA Large
--color-blue--color-dark-gray-53.13:1AA Large
--color-dark-gray-4--color-black1.46:1Fail
--color-dark-gray-4--color-white14.35:1AAA
--color-mid-gray--color-black7.37:1AAA
--color-mid-gray--color-white2.85:1Fail
--color-mid-gray--color-black-26.87:1AA
--color-mid-gray--color-dark-gray-55.31:1AA
CSS Variables Reference
Background Colors 8 tokens
Black--color-black#000000
Black 2--color-black-2#0C0C0C
Black 3--color-black-3rgba(9,9,11,.7)
Dark Gray 5--color-dark-gray-5#262626
Dark Gray 6--color-dark-gray-6#303030
White 2--color-white-2#F7F7F7
White--color-white#FFFFFF
Blue 3--color-blue-3#2B22FA
Text & Border Colors 8 tokens
Dark Gray 2--color-dark-gray-2#1A1A1A
Dark Gray 4--color-dark-gray-4#2A2A2A
Dark Gray--color-dark-gray#404040
Blue--color-blue#6B7280
Blue 2--color-blue-2#666E7A
Mid Gray--color-mid-gray#999999
Light Gray--color-light-gray#E5E7EB
Dark Gray 3--color-dark-gray-3#27272A
Typography 37 tokens
Base Font--font-family-baseTimes
Mono Font--font-family-2abcNormal
Regular--font-weight-regular400
W450--font-weight-w450450
Medium--font-weight-medium500
Semibold--font-weight-semibold600
2XS--font-size-2xs11px
XS--font-size-xs12px
SM--font-size-sm13px
Base--font-size-base14px
LG--font-size-lg16px
XL--font-size-xl18px
2XL--font-size-2xl20px
3XL--font-size-3xl24px
4XL (heading)--font-size-4xl36px
5XL (display)--font-size-5xl40px
6XL (hero)--font-size-6xl48px
Tight (display)--letter-spacing-tight−1.2px
Normal (heading)--letter-spacing-normal−1px
Wide--letter-spacing-wide−0.9px
Wider--letter-spacing-wider−0.26px
Label (positive)--letter-spacing-ls-7+0.35px
Spacing 35 tokens
Space 1--space-14px
Space 2--space-26px
Space 3--space-38px
Space 4--space-410px
Space 6--space-612px
Space 8--space-814px
Space 10--space-1016px
Space 12--space-1220px
Space 40--space-4032px
Space 48--space-4836px
Space 64--space-6440px
Space 128--space-12848px
Space 25--space-2564px
Space 28--space-2880px
Space 29--space-2996px
Space 32--space-32112px
Space 33--space-33128px
Space 34--space-34160px
Borders & Radius 6 tokens
Hairline--border-width-hairline1px
Small--radius-sm4px
Medium--radius-md6px
Large--radius-lg8px
X-Large--radius-xl12px
2X-Large--radius-2xl16px
Motion, Opacity & Layers 10 tokens
Instant--duration-instant150ms
Fast--duration-fast200ms
Normal--duration-normal250ms
Slow--duration-slow500ms
Slower--duration-slower1s
Easing--easing-linearlinear
Dim--opacity-5050%
Muted--opacity-6060%
Navigation--z-110
Overlay--z-220
Modal--z-340
Design System Preview · Runway (Light) · Generated 17/04/2026 · 16 color tokens · 11 font-size · 2 font-family · 4 font-weight · 13 line-height · 7 letter-spacing · 35 spacing · 5 radius · 1 border-width · 5 duration · 1 easing · 3 z-index · 7 breakpoints · 2 opacity