Design System: Runway

1. Visual Theme & Atmosphere

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:

• 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