Runway is building Real-World Intelligence that understands, simulates, and acts — with tools that make generative video a creative medium. Its UI is cinematic: full-bleed photography and video are the primary interface, abcNormal alone spans display to micro labels, cool-toned neutrals (#767d88 family) sit on a dark-dominant canvas, and zero shadows with minimal borders keep chrome invisible under 1.0 line-height display type.
AIMinimal
Prompt Template
Base Template
Design a Runway-inspired interface. - 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). Colors: #000000, #030303, #1a1a1a, #ffffff.
Variant Prompts
📱 Mobile
Design a mobile app with Runway aesthetics. Use Runway color identity with #000000 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Runway style. Use Runway color identity with #000000 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Runway design language. Use Runway color identity with #000000 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Runway visual identity. Use Runway color identity with #000000 accents. Compelling, conversion-focused.
Usage Examples
Runway App
WebBuild a web app with Runway design language and brand color system.
Runway Dashboard
DashboardCreate a dashboard using Runway style with data visualization and modern typography.
✅ Best For
- AI
- Video and creative generation tools
- Rich-media showcase pages
❌ Avoid For
- Lightweight form-based back offices
- Paper magazine layout sites
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.