RunwayML

# RunwayML Design System

## Visual Theme & Atmosphere
Cinematic creativity. Dark canvas (#0A0A0A) puts media content front and center. Red accents (#FF4D4D) signal creative power. The UI feels like professional video editing software—powerful, immersive, media-first.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #FF4D4D | Creative accent, CTAs |
| Background | #0A0A0A | Deep black canvas |
| Surface | #1A1A1A | Cards, panels |
| Text | #FFFFFF | White text |
| Muted | #888888 | Secondary text |
| Border | #333333 | Subtle borders |

## Typography Rules
- **Heading Font**: Inter, system-ui, sans-serif
- **Body Font**: Inter, system-ui, sans-serif
- **Base Size**: 16px
- **Line Height**: 1.5

## Component Stylings
- **Buttons**: Red accent, rounded
- **Media Cards**: Full-bleed thumbnails, dark overlays
- **Timeline UI**: Dark theme, clear hierarchy

## Agent Prompt Guide
Use deep black backgrounds, red accents for creative actions, media-first layouts, cinematic spacing.