skills/creative/popular-web-designs/templates/runwayml.md
Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
- Primary:
Inter| Mono:system monospace stack- Font stack (CSS):
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">Use
write_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
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.
The design language is built on a single typeface — abcNormal — a clean, geometric sans-serif that handles everything from 48px display headlines to 11px uppercase labels. This single-font commitment creates an extreme typographic uniformity that lets the visual content speak louder than the text. Headlines use tight line-heights (1.0) with negative letter-spacing (-0.9px to -1.2px), creating compressed text blocks that feel like film titles rather than marketing copy.
What makes Runway distinctive is its complete commitment to visual content as design. Rather than illustrating features with icons or diagrams, Runway shows actual AI-generated and AI-enhanced imagery — cars driving through cinematic landscapes, artistic portraits, architectural renders. The interface itself retreats into near-invisibility: minimal borders, zero shadows, subtle cool-gray text, and a dark palette that puts maximum focus on the photography.
Key Characteristics:
#000000): The primary page background and maximum-emphasis text.#030303): A near-imperceptible variant for layered dark surfaces.#1a1a1a): Card backgrounds and elevated dark containers.#ffffff): Primary text on dark surfaces and light-section backgrounds.#fefefe): The lightest surface — barely distinguishable from pure white.#e9ecf2): Light section backgrounds with a cool blue-gray tint.#27272a): The single dark-mode border color — barely visible containment.#404040): Primary body text on light surfaces and secondary text.#3f3f3f): Slightly lighter variant for dark-section secondary text.#767d88): Secondary body text — a distinctly blue-gray cool neutral.#7d848e): Tertiary text, metadata descriptions.#a7a7a7): De-emphasized content, timestamps.#c9ccd1): Light borders and dividers.#d0d4d4): The lightest border/divider variant.#6b7280): Standard Tailwind neutral for supplementary text.#0c0c0c): Darkest link text — nearly black.#999999): Footer links and deeply muted content.abcNormal, with fallback: abcNormal FallbackNote: abcNormal is a custom geometric sans-serif. For external implementations, Inter or DM Sans serve as close substitutes.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | abcNormal | 48px (3rem) | 400 | 1.00 (tight) | -1.2px | Maximum size, film-title presence |
| Section Heading | abcNormal | 40px (2.5rem) | 400 | 1.00–1.10 | -1px to 0px | Feature section titles |
| Sub-heading | abcNormal | 36px (2.25rem) | 400 | 1.00 (tight) | -0.9px | Secondary section markers |
| Card Title | abcNormal | 24px (1.5rem) | 400 | 1.00 (tight) | normal | Article and card headings |
| Feature Title | abcNormal | 20px (1.25rem) | 400 | 1.00 (tight) | normal | Small headings |
| Body / Button | abcNormal | 16px (1rem) | 400–600 | 1.30–1.50 | -0.16px to normal | Standard body, nav links |
| Caption / Label | abcNormal | 14px (0.88rem) | 500–600 | 1.25–1.43 | 0.35px (uppercase) | Metadata, section labels |
| Small | abcNormal | 13px (0.81rem) | 400 | 1.30 (tight) | -0.16px to -0.26px | Compact descriptions |
| Micro / Tag | abcNormal | 11px (0.69rem) | 450 | 1.30 (tight) | normal | Uppercase tags, tiny labels |
text-transform: uppercase with positive letter-spacing (0.35px) to create navigational signposts that contrast with the tight lowercase text.#1a1a1a)1px solid #27272a (dark mode) — barely visible containmentCinematic Hero
Research Article Cards
Trust Bar
Mission Statement
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Everything — the dominant state |
| Bordered (Level 1) | 1px solid #27272a | Alert containers only |
| Dark Section (Level 2) | Dark bg (#000000 / #1a1a1a) with light text | Hero, features, footer |
| Light Section (Level 3) | White/Cool Cloud bg with dark text | Content sections, research |
Shadow Philosophy: Runway uses zero shadows. This is a film-production design decision — in cinema, depth comes from lighting, focus, and composition, not drop shadows. The interface mirrors this philosophy: depth is communicated through dark/light section alternation, photographic depth-of-field, and overlay transparency — never through CSS box-shadow.
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column, stacked images, reduced hero text |
| Tablet | 640–768px | 2-column image grids begin |
| Small Desktop | 768–1024px | Standard layout |
| Desktop | 1024–1280px | Full layout, expanded hero |
| Large Desktop | 1280–1600px | Maximum cinema-width container |