# 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`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### 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

- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 16px
- **Max content width:** 1200px

## Components

### buttons
**Role:** buttons component

- **description:** `Buttons treatment documented in the source analysis.`

### cards containers
**Role:** cards containers component

- **description:** `Cards & Containers treatment documented in the source analysis.`

### navigation
**Role:** navigation component

- **description:** `Navigation treatment documented in the source analysis.`

### image treatment
**Role:** image treatment component

- **description:** `Image Treatment treatment documented in the source analysis.`

### distinctive components
**Role:** distinctive components component

- **description:** `Distinctive Components treatment documented in the source analysis.`

## Do's and Don'ts

### Do

- Use `--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` for the brand's primary interaction treatment.
- Keep page surfaces anchored to `--color-dark-surface`.
- Preserve every typography style's documented size, line height, and letter spacing.
- Compare major implementation decisions against [the live Runway website](https://runwayml.com/).

### Don't

- Do not introduce colors outside the documented color token set.
- Do not replace `--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` with an arbitrary neutral.
- Do not flatten documented component states or spacing relationships.
- Do not treat this extracted snapshot as newer than the live source website.

## 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/).