---
version: alpha
name: runwayml.com
description: "Light product system built on #ffffff with #f7f7f7 as the primary CTA accent. Type anchored in abcNormal at 40px / weight 400. Extracted automatically from https://runwayml.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  runwayml.com is built on a pure-white canvas (rgb(255,255,255)).
  The system uses rgb(247, 247, 247) as the singular interactive color.
  AbcNormal as the primary typeface.
  AbcNormal is paired with abcNormal Fallback for secondary roles.
  Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model.
  Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

colors:
  background: "#ffffff"
  surface-1: "#e5e7eb"
  surface-2: "#eef1f5"
  ink: "#404040"
  ink-subtle: "#0c0c0c"
  primary: "#f7f7f7"
  on-primary: "#111111"
  primary-hover: "#f7f7f7"
  hairline: "#404040"

typography:
  display-xl:
    fontFamily: "abcNormal, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -1.2px
  display-md:
    fontFamily: "abcNormal, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0.35px
  headline:
    fontFamily: "abcNormal, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
  body:
    fontFamily: "abcNormal, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "abcNormal, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 11px
    fontWeight: 450
    lineHeight: 1.3
    letterSpacing: 0
  button:
    fontFamily: "abcNormal, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 40px
  xxl: 64px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.background}"
    typography: "{typography.display-md}"
    rounded: "{rounded.xs}"
    padding: 4px 8px
  button-light--invert:
    backgroundColor: "{colors.surface-2}"
    textColor: "#1a1a1a"
    typography: "{typography.display-md}"
    rounded: "{rounded.xs}"
    padding: 6px 10px
  button-secondary:
    backgroundColor: "#262626"
    textColor: "{colors.background}"
    typography: "{typography.display-md}"
    rounded: "{rounded.xs}"
    padding: 6px 10px

extracted_at: "2026-06-11T05:02:19.989Z"
completeness: 57
scoreVersion: "v2"

---

# Design System — runwayml.com
> Extracted automatically by Prism from https://runwayml.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: moderate  |  **Motion**: subtle  |  **Weight**: medium  |  **Aesthetic**: engineering-minimal

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (abcNormal) | "AI is changing how stories are" |
| Color assertion | single-accent | #f7f7f7 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | subtle | 3 keyframes, 8 transitions |
| Radius language | 6px-rounded | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · single-accent · 6px-rounded · subtle-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255,255,255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(247, 247, 247)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 24px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
> - **Forbidden**: Do NOT introduce heavy box-shadows — this system relies on borders for separation
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

runwayml.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Typography is anchored in **abcNormal**. Negative letter-spacing at display sizes (-1.2px at 48px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Charcoal (`#404040`). **Off-White** (`#f7f7f7`) provides interactive distinction without visual aggression. Shadow is absent by design — depth is conveyed through borders, spacing, and color differentiation rather than light simulation. 
Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: abcNormal
- Primary text: Charcoal (`#404040`)
- Accent: Off-White (`#f7f7f7`)
- Display: 48px weight 400, letter-spacing -1.2px
- Custom fonts loaded: abcNormal, abcNormal Fallback, timesNow, timesNow Fallback

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Whitesmoke** (`#e5e7eb`): Surface / elevated background
- **Off-White** (`#eef1f5`): Surface / elevated background
- **Off-White** (`#f7f7f7`): Surface / elevated background
- **Light Gray** (`#e0e4eb`): Surface / elevated background

### Text & Content
- **Charcoal** (`#404040`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Near-Black** (`#0c0c0c`): Secondary text
- **Near-Black** (`#1a1a1a`): Secondary text
- **Near-Black** (`#262626`): Secondary text

### Accent & Interactive
- **Slate Gray** (`#6b7280`): Interactive / accent

### Full Extracted Palette
**14 colors rendered on the page**. (11 categorized above + 3 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#2a2a2a` — Near-Black
- `#666e7a` — Dim Gray
- `#999999` — Grey

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--tw-ring-offset-shadow`: `0 0 #0000`
- `--tw-ring-shadow`: `0 0 #0000`
- `--tw-shadow`: `0 0 #0000`
- `--tw-shadow-colored`: `0 0 #0000`

**Spacing Token**
- `--tw-numeric-spacing`: ``
- `--tw-border-spacing-x`: `0`
- `--tw-border-spacing-y`: `0`

**Other tokens**
- `--tw-bg-opacity`: `1`
- `--tw-text-opacity`: `1`
- `--tw-ring-color`: `#3b82f680`
- `--tw-ring-offset-color`: `#fff`

## 3. Typography Rules

### Font Families
- **Primary**: `abcNormal`
- **Secondary**: `abcNormal Fallback`
- **Font 3**: `timesNow`
- **Font 4**: `timesNow Fallback`

### Custom Fonts Loaded
- **abcNormal** weight 300 (normal)
- **abcNormal** weight 400 (normal)
- **abcNormal** weight 500 (normal)
- **abcNormal** weight 600 (normal)
- **abcNormal Fallback** weight normal (normal)
- **timesNow** weight normal (normal)
- **timesNow Fallback** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | abcNormal | 48px | 400 | 1 | -1.2px | Main headline (h1) |
| Label Heading | abcNormal | 24px | 400 | 1 | normal | Small heading (H4) |
| Body | abcNormal | 16px | 400 | 1.5 | normal | Standard reading text |
| Button Large | abcNormal | 16px | 600 | 1.5 | normal | Button label (16px) |
| Sub-heading | abcNormal | 14px | 500 | 1.43 | 0.35px | Third-level heading (h3) |
| Button | abcNormal | 14px | 600 | 1.43 | normal | Button label (14px) |
| Link Small | abcNormal | 11px | 450 | 1.3 | normal | Link (11px) — Decoration: none |

### Full Font Size Scale

Sizes detected in the design (descending): `48px`, `40px`, `36px`, `24px`, `20px`, `16px`, `14px`, `13px`, `11px`

> 4 size(s) detected outside the sampled hierarchy (40px, 36px, 20px, 13px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#ffffff` `{colors.background}`
- Padding: 4px 8px
- Radius: 4px
- Font: 14px weight 600
- Use: Subtle action, toolbar, nav button

**Light / Invert**
- Background: `#eef1f5` `{colors.surface-2}`
- Text: `#1a1a1a`
- Padding: 6px 10px
- Radius: 6px
- Font: 14px weight 600
- Use: Bright CTA on dark sections

**Secondary**
- Background: `#262626`
- Text: `#ffffff` `{colors.background}`
- Padding: 6px 10px
- Radius: 6px
- Font: 14px weight 600
- Use: Secondary action

**Light / Invert**
- Background: `#f7f7f7` `{colors.primary-hover}`
- Text: `#0c0c0c` `{colors.ink-subtle}`
- Padding: 8px 12px
- Radius: 8px
- Font: 16px weight 600
- Use: Bright CTA on dark sections

**Secondary**
- Background: `#262626`
- Text: `#ffffff` `{colors.background}`
- Padding: 4px 8px
- Radius: 4px
- Font: 14px weight 600
- Use: Secondary action

**Light / Invert**
- Background: `#ffffff` `{colors.background}`
- Text: `#1a1a1a`
- Padding: 4px 8px
- Radius: 4px
- Font: 14px weight 600
- Use: Bright CTA on dark sections

**Subtle**
- Background: `rgba(247, 247, 247, 0.05)` `{colors.primary-hover}`
- Text: `#ffffff` `{colors.background}`
- Padding: 6px 10px
- Radius: 6px
- Font: 14px weight 600
- Use: Quiet action against page bg


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Button**:
  - **focus:** shadow added
- **Link**:
  - **hover:** text #0c0c0c → #d0d4d4
- **NavLink**:
  - **hover:** text #c8c8c8 → #d0d4d4

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(12, 12, 12)"
    hover:
      bg: "transparent"
      fg: "rgb(208, 212, 212)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(200, 200, 200)"
    hover:
      bg: "transparent"
      fg: "rgb(208, 212, 212)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
    hover:
      bg: "transparent"
      fg: "inherit"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **4 shape(s)** in this system: `Ghost`, `Light / Invert`, `Secondary`, `Subtle`
- **DO NOT introduce new buttons variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 8px |
| md | 12px |
| base | 16px |
| lg | 24px |
| xl | 40px |
| 2xl | 48px |
| 3xl | 64px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 20px | Large rounded elements, pill segments |
| Xl | 32px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `4px` |
| Page Body | `0px` |
| Navigation | `0px` |

**Shape Personality**: Subtly Rounded — Minimal corner rounding (1–4px). Professional restraint.

**Full Radius Spectrum**: 4px, 6px, 8px, 12px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `40px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `12px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**4/8 structural patterns detected.**

### Hero Pattern

- **Composition:** left-aligned — 
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Building AI to Simulate the World" — 48px left-aligned
- **Subheading:** "Media and Entertainment↗"
- **CTAs:** 1 (primary: "Get Started")
- **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 64px
- **Logo:** ✗ absent
- **Nav links:** 5 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static unknown navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 4 cards detected
- **Columns (desktop):** 5-up grid
- **Card dimensions:** 294×507px (aspect 0.58:1)
- **Gap:** 16px between cards
- **Content:** ✓ image + CTA
- **Image position:** none
- **Clone instruction:** Build a 5-column grid (desktop) with cards at ~0.58:1 aspect ratio. Each card has an image at the none.

### Footer Pattern

- **Columns:** 1
- **Links:** 45 total
- **Height:** 561px
- **Includes:** ✗ no newsletter | ✓ social icons | ✓ language switcher ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~45 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |

**Shadow Philosophy**: Flat design — no shadows used. Borders and spacing define structure.

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `cubic-bezier(0.4,0,0.2,1)` | Material Standard — Balanced |
| `linear` | Linear — No Easing |

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `150ms` | Fast | Hover states, micro-interactions |
| `200ms` | Normal | Panel open/close, navigation |
| `250ms` | Normal | Panel open/close, navigation |
| `500ms` | Slow | Hero animations, page transitions |

### Copy-Paste Transition Snippets

**All Props**
```css
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
```

**All Props**
```css
transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
```

**Opacity**
```css
transition: opacity 0.25s;
```

**Opacity**
```css
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `pulse` | Fade | opacity | Attention / status |
| `spin` | Rotate / Spin | transform | Loading indicator |
| `fadeIn` | Fade + Move | opacity, transform | Element entrance |

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `250ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 3 unique animations (3 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use abcNormal as the primary typeface — it defines the brand personality
- Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy
- Use negative letter-spacing (-1.2px) at display sizes for compressed, editorial headlines
- Use Off-White (`#f7f7f7`) as the primary accent — it's the brand's signature interactive color
- Use 6px border-radius on buttons — the standard corner rounding for interactive elements
- Maintain nav height at 64px — consistent vertical space for the navigation bar
- Respect the 4px–40px spacing range — the design uses a wide scale for visual breathing room
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Use a single primary CTA in the hero — the design intentionally avoids choice paralysis
- Each card includes a none image — imagery is part of the card identity, not optional
- Use a 5-column grid on desktop — density matters for this content type

### Don't
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't use weight 700 (bold) or above — 600 is the maximum weight in this system
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't put a CTA button in the nav — this design uses links only at the top


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(255,255,255)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(255,255,255)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(247, 247, 247)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(247, 247, 247)\"]').length <= 3 per fold"
  - id: brand-depth-001
    type: dont
    rule: "Do NOT introduce drop shadows on cards or sections"
    why: "Containment is achieved via borders, not elevation — adding shadows breaks the depth contract"
    test: "getComputedStyle(card).boxShadow === 'none'"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Large | 640px | Expanded mobile layout |
| Tablet | 768px | Multi-column grids begin |
| Tablet | 1024px | Multi-column grids begin |
| Desktop | 1200px | Full feature layout |
| Desktop | 1280px | Full feature layout |
| Large Desktop | 1536px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| nav | height | `64px` | `0px` |
| button | padding | `4px 8px` | `4px` |
| button | font-size | `14px` | `16px` |
| button | width | `114px` | `24px` |

### Collapsing Strategy
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 4px 8px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Card grid: 5-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Glassmorphism** — 5 frosted/blur layer(s) (e.g. `blur(4px)`).
- **Clip-path shapes** — 8 non-rectangular cut(s).

> **Motion fingerprint**: glassmorphism (9 layers), non-rectangular shapes (10)

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://runwayml.com/opengraph-image.png?opengraph-image.0bt75ga2._tb4.png (2400×1260px)
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.89:1 (landscape (16:9-ish))
- Rendered size: 1408×746px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 5 (100%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 0 (0%)

**Media Format Mix:**
- JPG: 2 (typically photographic content)
- WebP: 1 (optimized photo/illustration hybrid)
- PNG: 2 (logos, transparent UI elements, mockups)

**Average rendered image size:** 522×276px
**Above-fold image count:** 1 / 5

**Decorative Patterns Detected:**
- 2 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 7 background patterns (non-photo url() backgrounds) — textures/illustrations as backdrops
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** Glassmorphism is a brand signature — use `backdrop-filter: blur(20px)` on overlapping surfaces.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Charcoal (`#404040`)
- Accent: Off-White (`#f7f7f7`)
- Border: Charcoal (`#404040`)
- Font: abcNormal
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 48px abcNormal weight 400, line-height 1, letter-spacing -1.2px, color #404040."
- "Create the primary CTA button: `#f7f7f7` background, `#ffffff` text, 4px border-radius, 4px 8px padding, 600 weight, abcNormal font."
- "Build navigation: static on `#ffffff`. abcNormal 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in abcNormal, weight range 400–600. Never exceed 600 — heavier weights break the brand's tonal restraint.
3. **Accent**: Off-White (`#f7f7f7`) is the sole interactive color. On hover → Off-White (`#f7f7f7`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `6px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (4px–40px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-background: #ffffff;
  --ca-surface-1: #e5e7eb;
  --ca-surface-2: #eef1f5;
  --ca-hairline: #404040;
  --ca-ink-subtle: #0c0c0c;
  --ca-primary-hover: #f7f7f7;
  --ca-on-primary: #111111;
}

/* Typography */
:root {
  --ca-font-primary: "abcNormal", system-ui, sans-serif;
  --ca-text-display: 48px;
  --ca-text-body: 16px;
  --ca-text-small: 11px;
  --ca-text-button: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 40px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 32px;
  --ca-radius-full: 9999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    classes: ["flex-1"]
    height: 5636px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: main
    height: 5612px
    width: full-bleed
    layout: block
    children: 8
  - section: feature-section
    tag: section
    classes: ["bg-white", "pb-6", "relative", "transition-all"]
    height: 834px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    padding: "0px 0px 24px"
  - section: feature-section
    tag: div
    classes: ["!px-0", "lg:!px-4", "w-full", "h-full"]
    height: 810px
    width: full-bleed
    layout: flex-row justify=normal
    children: 1
    padding: "0px 16px"
  - section: content-section
    tag: div
    classes: ["!px-0", "lg:!px-4", "w-full", "h-full"]
    height: 746px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 16px"
  - section: content-section
    tag: div
    classes: ["absolute", "inset-0", "object-cover", "w-full"]
    height: 746px
    width: 1408px
    layout: grid: 1-col gap=normal
    children: 3
  - section: logo-strip
    tag: section
    classes: ["mt-12", "lg:mb-32"]
    height: 100px
    width: full-bleed
    layout: block
    children: 1
  - section: logo-strip
    tag: div
    height: 100px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 20px"
  - section: content-section
    tag: section
    classes: ["my-12", "lg:my-24"]
    height: 635px
    width: full-bleed
    layout: block
    children: 1
  - section: content-section
    tag: div
    height: 635px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 20px"
  - section: content-section
    tag: div
    classes: ["h-full", "w-full", "object-cover", "transition-all"]
    height: 297px
    width: 297px
    layout: grid: 1-col gap=normal
    children: 3
  - section: content-section
    tag: div
    classes: ["h-full", "w-full", "object-cover", "transition-all"]
    height: 297px
    width: 297px
    layout: grid: 1-col gap=normal
    children: 3
  - section: content-section
    tag: section
    classes: ["my-20", "lg:my-40"]
    height: 699px
    width: full-bleed
    layout: block
    children: 1
  - section: content-section
    tag: div
    height: 699px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 20px"
  - section: content-section
    tag: div
    classes: ["w-full", "h-full", "object-cover", "absolute"]
    height: 699px
    width: 1400px
    layout: grid: 1-col gap=normal
    children: 3
  - section: feature-section
    tag: section
    classes: ["my-40", "lg:my-44"]
    height: 1202px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    height: 1202px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 20px"
  - section: content-section
    tag: div
    classes: ["!flex", "w-full", "h-full", "object-cover"]
    height: 322px
    width: 573px
    layout: flex-row justify=normal
    children: 3
  - section: content-section
    tag: div
    classes: ["w-full", "h-full", "object-cover", "absolute"]
    height: 322px
    width: 573px
    layout: grid: 1-col gap=normal
    children: 3
  - section: content-section
    tag: section
    height: 595px
    width: full-bleed
    layout: block
    children: 1
  - section: content-section
    tag: div
    height: 595px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 20px"
  - section: content-section
    tag: section
    classes: ["mt-40", "lg:mt-44", "mb-6"]
    height: 684px
    width: full-bleed
    layout: block
    children: 1
  - section: content-section
    tag: div
    height: 684px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~240px (airy)
    padding: "0px 20px"
  - section: content-section
    tag: div
    classes: ["w-full", "h-full", "object-cover", "absolute"]
    height: 684px
    width: 1400px
    layout: grid: 1-col gap=normal
    children: 3
  - section: footer
    tag: footer
    height: 561px
    width: full-bleed
    layout: block
    children: 1
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Runway Characters"
    - "Gen-4.5: A new frontier for video generation."
  sub-headings:
    - "RUNWAY CHARACTERS ↗"
  ctas:
    - "Enterprise Sales"
    - "Login"
    - "Try Runway"
    - "Get Started"
    - "Learn more"
    - "Try now"
  navigation:
    - "RESEARCH"
    - "PRODUCT"
    - "RESOURCES"
    - "SOLUTIONS"
    - "COMPANY"
    - "Enterprise Sales"
    - "Login"
    - "Try Runway"
  footer-links:
    - "Explore Examples"
    - "TERMS OF USE"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  hero:
    count: 1
    avg-ratio: 1.89
    common-aspect: "~16:9 landscape"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Enterprise Sales
</button>
```
_Source pattern detected: padding `6px 10px` · radius `6px` · weight `600`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 5 · **cta** 4 · **auth** 1 · **product** 8 · **docs** 1 · **blog** 9 · **project** 8 · **footer** 11 · **other** 13

**Primary actions (conversion path):**
- Primary call-to-action — "Get Started" (the conversion path) → `https://app.runwayml.com/`
- Account access — "Login" (login/signup) → `https://app.runwayml.com/login`
- Primary call-to-action — "Try Runway" (the conversion path) → `https://app.runwayml.com/`
- Primary call-to-action — "Try now" (the conversion path) → `https://app.runwayml.com/`
- Primary call-to-action — "Try now" (the conversion path) → `https://app.runwayml.com/characters`

**Projects / case studies detected** (clustered by URL + featured image):

*Customers* — high confidence, 2 items:

| Title | Featured image | Link |
|---|---|---|
| UCLA's Department of Film, Television and Di | `rw-uclathumbnail-03.jpg` (ar 1.49) | https://runwayml.com/customers/ucla-film-tv-development-hans-martin-liebing |
| How KPF is incorporating AI into Architectur | `kpf-card-v2.png` (ar 1.49) | https://runwayml.com/customers/how-kpf-is-incorporating-ai-video-into-architectural-workflows |

**Signals:** 15/60 links carry a featured image · device mockups detected: laptop ×5 · dominant link roles: content-card (21), inline-link (17), footer-link (15).


---
## Extraction Completeness: 57/100 (D)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 15 | 25 | 11 named colors |
| Typography | 18 | 20 | 7 roles defined |
| Components | 4 | 20 | 1 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 3 | 10 | 55 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (abcNormal, timesNow)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 55 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 7 typography roles inferred |
| §4 Components | Low | 1 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 18 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 5 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

4 font file(s) captured (236KB total). When running `prism add`, fonts are saved to `extractions/runwayml.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'abcNormal';
  /* src: url('/fonts/abcNormal.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'abcNormal';
  /* src: url('/fonts/abcNormal.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'abcNormal';
  /* src: url('/fonts/abcNormal.woff2') format('woff2'); */
  font-weight: 500;
  font-style: neutral;
  font-display: swap;
}
@font-face {
  font-family: 'abcNormal';
  /* src: url('/fonts/abcNormal.woff2') format('woff2'); */
  font-weight: 600;
  font-style: neutral;
  font-display: swap;
}
@font-face {
  font-family: 'abcNormal Fallback';
  /* src: url('/fonts/abcNormal-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'timesNow';
  /* src: url('/fonts/timesNow.woff2') format('opentype'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'timesNow Fallback';
  /* src: url('/fonts/timesNow-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**3 @keyframes found** — these are the real animation definitions:

```
@keyframes pulse { ... }
@keyframes spin { ... }
@keyframes fadeIn { ... }
```

<details><summary>Full keyframes CSS (3 animations)</summary>

```css
@keyframes pulse{50%{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}
```
</details>

### Brand Gradient Palette

**1 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(to bottom right, var(--tw-gradient-stops);

```

### Hover State CSS (Intercepted)

**1 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--abcNormal);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;lin
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 1095 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**7 breakpoints** read from the live `@media` rules (not guessed):
`640px` · `768px` · `1024px` · `1200px` · `1280px` · `1536px` · `1600px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×849 · `14px`×125 · `11px`×48 · `13px`×30 · `24px`×18 · `48px`×6 · `40px`×6 · `20px`×6

**Radius scale** (× = paint count): `4px`×34 · `8px`×17 · `6px`×14 · `12px`×1

**Weights** (× = paint count): `400`×938 · `600`×88 · `450`×48 · `500`×20

**Layout gaps** (× = paint count): `8px`×57 · `80px`×6 · `28px`×4 · `6px`×2 · `4px`×2 · `10px`×1 · `14px`×1 · `40px 16px`×1

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { font-family:var(--abcNormal) }
header { color:rgb(12 12 12/var(--tw-text-opacity)) }
h1 { font-size:3rem }
h2 { font-size:28px }
@media (min-width: 768px) h2 { font-size:32px }
@media (min-width: 1024px) h2 { font-size:36px }
button { font-family:inherit; font-size:100%; font-weight:inherit; color:inherit }
button { gap:.5rem }
button { border-radius:4px }
button { font-size:.875rem }
button { font-weight:600 }
button { color:rgb(255 255 255/var(--tw-text-opacity)) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://runwayml.com | 2026-06-11T05:02:20.007Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*