Runway
Runway's interface is a cinematic reel — dark, editorial, film-production-grade design where full-bleed photography and video ARE the primary UI elements. Single typeface abcNormal handles everything.
Homepage Example
Color Palette (12)
Typography (8)
Components (4)
Border Radius
Design Philosophy
Overview
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.
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.
Key Characteristics
- Cinematic full-bleed photography and video as primary UI elements
- Single typeface system: abcNormal for everything
- Dark-dominant palette with cool-toned neutrals
- Zero shadows, minimal borders
- Tight display typography (line-height 1.0) with negative tracking
Do's and Don'ts
Use full-bleed cinematic photography as the primary visual element. Use abcNormal for all text. Keep display line-heights at 1.0 with negative letter-spacing. Maintain zero shadows.
Design Insights
Visual Identity & Brand Recognition
What makes Runwayml's design system memorable is not any single element but the cohesive interaction of its parts. The #000000 brand color, the consistent use of abcNormal across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.
Visual Identity & Brand Recognition
What makes Runwayml's design system memorable is not any single element but the cohesive interaction of its parts. The #000000 brand color, the consistent use of abcNormal across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.
Visual Identity & Brand Recognition
What makes Runwayml's design system memorable is not any single element but the cohesive interaction of its parts. The #000000 brand color, the consistent use of abcNormal across touchpoints, and the predictable component patterns create a recognizable visual language that users come to trust. This kind of systematic brand building is what distinguishes professionally managed design systems from ad-hoc visual decisions. It signals to users that the same care applied to the visual surface extends to the underlying product quality.
Frequently Asked Questions
Q. What are Runway's brand colors?
The Runway palette uses 12 colors, led by runway-black (#000000), deep-black (#030303), dark-surface (#1a1a1a), pure-white (#ffffff), near-white (#fefefe). The primary brand color is runway-black (#000000).
Q. What fonts does the Runway design system use?
Display type is set in abcNormal at 48px / weight 400, while body and UI text uses abcNormal at 11px / weight 450.
Q. What kind of website is Runway?
Runway is a AI & LLM Platforms brand. Its design system documents 12 colors, 8 type styles and a 4-step border-radius scale.
Q. What border radius values does Runway use?
The radius scale runs from 4 (4px) to 16 (16px): 4 (4px), 6 (6px), 8 (8px), 16 (16px).
Q. Where can I see the Runway design system?
This page shows Runway's color palette, typography scale, components, border radii and design philosophy in English, Korean and Japanese.