Cinematic research-lab editorial: a white canvas framed by #e5e7eb hairline borders, one neo-grotesque family (abcNormal) at light weights, no chromatic accent, and full-bleed dark generative-video heroes with white 48px overlay text, a right-aligned category index and small grayscale buttons.
Browse Runway in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: runwayml.com (live DOM, computed styles), 2026-07-13 (desktop 1512px). Coverage: homepage (cinematic video hero, nav, category list, sections, footer). App/editor: behind login (needs-dashboard). Responsive: breakpoints not captured (desktop only).
Cinematic research-lab editorial: a clean white canvas framed by hairline borders and set in a custom neo-grotesque (abcNormal), punctuated by full-bleed cinematic video heroes with white text laid over them. The contrast is the identity — quiet gallery-white chrome versus immersive dark generative footage — positioning Runway as a serious "world models" research house rather than a toy. Type is set at a light weight with tight tracking; UI is compact, with small buttons and cool-gray fills. Category links sit right-aligned over the hero like a film index. It feels premium, editorial, and a little austere. Feels: cinematic, editorial, premium, restrained.
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Page canvas, sections, cards |
| off-white | #f7f7f7 | Light button fill, insets |
| cool-100 | #eef1f5 | Secondary button fill (cool light gray) |
| border | #e5e7eb | Hairline borders (dominant structural color) |
| ink-900 | #000000 | Primary text |
| ink-800 | #0c0c0c | Buttons text, strong labels |
| ink-700 | #1a1a1a | Secondary button text |
| body | #404040 | Body text, headings in light sections |
| muted | #6b7280 / #666e7a | Secondary text |
| faint | #999999 | Tertiary / captions |
| Token | Hex | Role / usage |
|---|---|---|
| dark-btn | #262626 | Primary "Try Runway" button bg |
| near-black | #0c0c0c | Dark blocks |
| scrim | rgba(0,0,0,.3) | Video overlay scrims |
| Token | Hex | Role |
|---|---|---|
| white | #ffffff | Hero headline / text on video |
| white-90 | rgba(255,255,255,.9) | Category links, secondary over video |
Rule: no chromatic accent — the palette is grayscale. All color comes from the generative video footage in heroes. Chrome stays white with #e5e7eb hairlines.
abcNormal, "abcNormal Fallback", sans-serif — a custom neo-grotesque, used everywhere (no separate display or mono).| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 48 / 53 | 400 | -1.2px (-2.5%) |
| Section (h2) | 36 | 400 | -0.9px |
| Body | 16 | 400 | 0 |
| Button | 14–16 | 600 | 0 |
| Nav | 11 | 450 | 0, small caps feel |
| Caption | 13 | 400 | 0, #999999 |
Patterns: headings are light (400) with tight negative tracking; nav labels are tiny (11px/450). Buttons jump to 600. One family throughout.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.