| name | Runway ML | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| version | beta | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| description | Creative AI platform for video, image, and 3D generation. Uses a vibrant futuristic purple aesthetic reflecting its position at the intersection of AI and filmmaking. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
Runway's visual identity is shaped by the film industry context. The deep purple palette evokes creativity, futurism, and cinematic night scenes. The interface is designed around a timeline-based video editor aesthetic—layers, keyframes, and preview windows are the primary visual language rather than chat bubbles. The product is a professional creative tool, and the interface reflects that with more complexity than consumer AI apps. Panels for model selection, parameter adjustment, and output preview coexist in a workspace-style layout. The aesthetic is functional but dramatic—a production studio for AI filmmaking. Runway's brand communicates that AI is a new creative medium, not just a productivity tool. The visual language borrows from both traditional video editing software (timelines, bins, previews) and futuristic sci-fi interfaces (glowing accents, dark backgrounds).
Purple is the unmistakable brand signal—used for chrome, active states, and the logo. Backgrounds are near-black with subtle blue-purple undertones. Surface cards use layered transparency to create depth. The accent purple-lighter provides readable contrast for links and highlights. Green success and red error are standard but muted to maintain the dramatic palette. Gradient treatments are used sparingly for emphasis.
Inter provides excellent legibility at small sizes for information-dense creative tools. The type scale supports both editorial headings (in marketing) and compact UI labels (in the editor). Monospace is used for technical parameters and code-like model configuration. Display sizes appear in marketing and splash screens but not in the editor workspace.
The Runway editor is a multi-panel workspace: timeline at the bottom, preview centre, tool panels on the right, and layer list on the left. This complex layout follows video editing conventions rather than web standards. The app is full-screen and immersive. Marketing pages use a more conventional centred layout with large product showcases.
The timeline is the core component—track-based with clip segments, keyframe markers, and scrub controls. Model cards show preview thumbnails with one-click apply. The preview window supports real-time playback of generated content. Prompt input includes negative prompt, seed, and parameter controls. Export dialogs offer format, resolution, and quality options.
DO design for the professional creative user—the interface should feel powerful, not simplified. DON'T use chat-based interaction patterns. DO follow video editing software conventions for timeline and playback controls. DON'T make the interface feel like a web form—it's a creative workspace. DO use keyboard shortcuts as first-class interaction.
The editor workspace does not responsively resize for mobile—it's a desktop-only experience. The marketing site uses standard responsive breakpoints. The model browser and asset library adapt from grid to list view at 1024px. Preview panels collapse to overlay on smaller laptop screens (1366px).
No public design system. The editor and marketing site use different design languages. Mobile version is absent. Accessibility for low-vision users is challenging with the dark dramatic palette. The undo/redo system is not visually documented. No consistent loading state pattern across the product.