# Runway — Marketing Site Design Spec

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

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Neutrals (light chrome)
| 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 |

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

### Over-video
| 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.

## 3. Typography Rules

- Single family: `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.

## 4. Component Stylings

### Buttons
- **Primary (dark)**: bg `#262626`, text `#ffffff`, radius `6px`, height `32px`, 14/600, padding `0 10px` (nav "Try Runway").
- **Secondary (cool light)**: bg `#eef1f5`, text `#1a1a1a`, radius `6px`, height `32px`, 14/600 (nav "Login", "Enterprise Sales").
- **Hero CTA (off-white)**: bg `#f7f7f7`, text `#0c0c0c`, radius `8px`, height `40px`, 16/600, with trailing chevron.

### Cards / panels
- White with `#e5e7eb` hairline borders, radius `4–12px`; flat, border-driven structure.

### Category link list (over hero)
- Right-aligned stack of links (Runway Characters, Media and Entertainment, Robotics and Autonomy, General World Models), white text with trailing chevron `>`, hover underline.

### Nav
- Height ~64px, white, hairline bottom border. "runway" wordmark left (lowercase); center links (Research, Product, Resources, Solutions, Company) at 11px/450; right: Enterprise Sales + Login (cool-gray) + Try Runway (dark).

## 5. Layout Principles

- Full-bleed cinematic video hero directly under the nav; headline bottom-left (48px white), CTA below, category index bottom-right.
- Below the fold: white editorial sections with hairline dividers, ~1400px content.
- Compact controls; generous whitespace between sections.
- Footer: white/light, multi-column, hairline top border.

## 6. Depth & Elevation

- Radii: `6px` (buttons), `8px` (hero CTA), `4px`/`12px` (cards). Small, restrained.
- Control height: 32px (nav) / 40px (hero CTA).
- Elevation nearly flat — `#e5e7eb` hairline borders instead of shadows; depth comes from the video itself.

## 7. Motion

- Signature motion is the looping generative background video (3 `<video>` elements observed). Micro-transitions on hover (opacity/underline). No heavy scroll animation confirmed; animation library not positively identified (`not captured`).

## 8. Backgrounds, Effects & WebGL

- Full-bleed autoplay background **video** in the hero (dark generative footage — e.g. underwater whales / birds), with dark scrims (`rgba(0,0,0,.3)`) to keep white text legible.
- Elsewhere flat white. No WebGL/canvas or gradient system beyond the video and scrims (`not captured`).

## 9. Do's and Don'ts

### Do
- Keep chrome white with `#e5e7eb` hairline borders; let all color come from cinematic video.
- Use abcNormal (or a neo-grotesque) as the single family, light weight (400) with tight tracking on headings.
- Lead with a full-bleed video hero: white 48px headline bottom-left, off-white CTA, right-aligned category index.
- Make buttons small and compact: dark `#262626` primary and cool `#eef1f5` secondary at radius 6px, 32px tall.
- Add a subtle dark scrim over video so white text stays legible.

### Don't
- Don't introduce a chromatic accent color — the chrome is grayscale.
- Don't use bold display weights; headings stay ~400 with negative tracking.
- Don't use large rounded buttons or heavy shadows — controls are small (6–8px radius) and structure is hairline borders.
- Don't set a dark page canvas; only the video heroes are dark.

## 10. Responsive Behavior

- Not captured (desktop 1512px only). Nav likely collapses to a menu on small screens (not verified).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#000000` / body `#404040` · Border `#e5e7eb` · Dark button `#262626` · Cool fill `#eef1f5`
- Font: `abcNormal` neo-grotesque (h1 48/400/-1.2px, nav 11/450) · Button 14–16/600 · Radius 6px button / 8px hero CTA / 32–40px tall
- No chromatic accent (grayscale) · Hero = full-bleed video + white overlay text + `rgba(0,0,0,.3)` scrim

<runway_design_language>
Use the Runway design language: a clean white canvas (#ffffff, insets #f7f7f7) structured entirely by #e5e7eb hairline borders, with no chromatic accent — the palette is grayscale and ALL color comes from full-bleed cinematic generative video in the heroes. Set everything in one neo-grotesque family (abcNormal) at a light weight: headlines 48px/400 with tight -1.2px tracking, tiny 11px/450 nav labels, body #404040, buttons jump to 600. The signature layout is a full-bleed autoplay video hero with a white 48px headline bottom-left, an off-white CTA (#f7f7f7 bg, #0c0c0c text, radius 8px, 40px tall, trailing chevron), a subtle rgba(0,0,0,.3) scrim for legibility, and a right-aligned index of category links (white + chevron). Buttons are small and compact: dark primary #262626 (white text) and cool-gray secondary #eef1f5 (#1a1a1a text), both radius 6px and 32px tall. Elevation is flat — hairline borders, small 4–12px radii, no heavy shadows. Feels: cinematic, editorial, premium, restrained. Avoid: any accent color, bold display weights, large rounded buttons or heavy shadows, and a dark page canvas (only the video heroes are dark).
</runway_design_language>