Runway — Style Reference

> Runway's interface is a cinematic reel brought to life as a website — a dark, editorial, film-production-grade design where full-bleed photography and video ARE the primary UI elements. This is not a typical tech product page; it's a visual manifesto for AI-powered creativity. Every section feels like a frame from a film: dramatic lighting, sweeping landscapes, and intimate human moments captured in high-quality imagery that dominates the viewport.

**Theme:** light

**Source website:** [https://runwayml.com/](https://runwayml.com/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| cinematic full bleed photography and video as primary ui elements single typeface system abcnormal for everything from display to micro labels dark dominant palette with cool toned neutrals 767d88 7d848e zero shadows minimal borders the interface is intentionally invisible tight display typography line height 1 0 with negative tracking 0 9px to 1 2px uppercase labels with positive letter spacing for navigational structure weight 450 unusual intermediate for small uppercase text precision craft editorial magazine layout with mixed size image grids 2 color palette roles primary | `#000000` | `--color-cinematic-full-bleed-photography-and-video-as-primary-ui-elements-single-typeface-system-abcnormal-for-everything-from-display-to-micro-labels-dark-dominant-palette-with-cool-toned-neutrals-767d88-7d848e-zero-shadows-minimal-borders-the-interface-is-intentionally-invisible-tight-display-typography-line-height-1-0-with-negative-tracking-0-9px-to-1-2px-uppercase-labels-with-positive-letter-spacing-for-navigational-structure-weight-450-unusual-intermediate-for-small-uppercase-text-precision-craft-editorial-magazine-layout-with-mixed-size-image-grids-2-color-palette-roles-primary` | cinematic full bleed photography and video as primary ui elements single typeface system abcnormal for everything from display to micro labels dark dominant palette with cool toned neutrals 767d88 7d848e zero shadows minimal borders the interface is intentionally invisible tight display typography line height 1 0 with negative tracking 0 9px to 1 2px uppercase labels with positive letter spacing for navigational structure weight 450 unusual intermediate for small uppercase text precision craft editorial magazine layout with mixed size image grids 2 color palette roles primary role extracted from the source design |

| deep black | `#030303` | `--color-deep-black` | deep black role extracted from the source design |

| dark surface | `#1a1a1a` | `--color-dark-surface` | dark surface role extracted from the source design |

| pure white | `#ffffff` | `--color-pure-white` | pure white role extracted from the source design |

| near white | `#fefefe` | `--color-near-white` | near white role extracted from the source design |

| cool cloud | `#e9ecf2` | `--color-cool-cloud` | cool cloud role extracted from the source design |

| border dark | `#27272a` | `--color-border-dark` | border dark role extracted from the source design |

| charcoal | `#404040` | `--color-charcoal` | charcoal role extracted from the source design |

| near charcoal | `#3f3f3f` | `--color-near-charcoal` | near charcoal role extracted from the source design |

| cool slate | `#767d88` | `--color-cool-slate` | cool slate role extracted from the source design |

| mid slate | `#7d848e` | `--color-mid-slate` | mid slate role extracted from the source design |

| muted gray | `#a7a7a7` | `--color-muted-gray` | muted gray role extracted from the source design |

| cool silver | `#c9ccd1` | `--color-cool-silver` | cool silver role extracted from the source design |

| light silver | `#d0d4d4` | `--color-light-silver` | light silver role extracted from the source design |

| tailwind gray | `#6b7280` | `--color-tailwind-gray` | tailwind gray role extracted from the source design |

| dark link | `#0c0c0c` | `--color-dark-link` | dark link role extracted from the source design |

| footer gray | `#999999` | `--color-footer-gray` | footer gray role extracted from the source design |

Tokens — Typography

Inter, system-ui, sans-serif · `--font-primary`

Type Scale

| Role | Size | Line Height | Letter Spacing | Token |

|---|---|---|---|---|

| body | 16px | 1.5 | 0 | `--text-body` |

Tokens — Spacing & Shapes

**Density:** comfortable

Spacing Scale

| Name | Value | Token |

|---|---|---|

| 4 | 4px | `--spacing-4` |

| 8 | 8px | `--spacing-8` |

| 12 | 12px | `--spacing-12` |

| 16 | 16px | `--spacing-16` |

| 20 | 20px | `--spacing-20` |

| 24 | 24px | `--spacing-24` |

| 32 | 32px | `--spacing-32` |

| 40 | 40px | `--spacing-40` |

| 48 | 48px | `--spacing-48` |

| 64 | 64px | `--spacing-64` |

Border Radius

| Name | Value | Token |

|---|---|---|

| sm | 4px | `--radius-sm` |

| md | 6px | `--radius-md` |

| lg | 8px | `--radius-lg` |

Layout

Components

buttons

**Role:** buttons component

cards containers

**Role:** cards containers component

navigation

**Role:** navigation component

image treatment

**Role:** image treatment component

distinctive components

**Role:** distinctive components component

Do's and Don'ts

Do

Don't

Layout

Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://runwayml.com/).