Runway
runwayml.comThe reference for a full-bleed cinematic video hero carrying white neo-grotesque type as a research statement, sitting on an otherwise monochrome ink-black-on-white system with zero ornament.
Creative Tool flagship
Design tokens
background
surface
text
textMuted
accent
border
tone1
tone2
- display
- abcNormal
- body
- abcNormal
- mono
Do / Don't
Reference it for
- Full-bleed autoplay video hero (waterfall/jungle still) with type overlaid bottom-left, no scrim gradient, letting the footage set the mood
- Headline as a plain research statement: 'Building AI to Simulate the World' in a tightly-tracked neo-grotesque (abcNormal-like), ~48px, weight 500, white on video
- White pill CTA 'Get Started' with a small chevron, 8px radius, sitting directly on the footage
- Minimal top nav: lowercase wordmark left, centred text links (Research/Product/Resources/Solutions/Company), and a two-tier right cluster (ghost 'Login' + dark filled 'Try Runway')
- A quiet capability list beside the headline in ALL-CAPS muted white (RUNWAY CHARACTERS / MEDIA AND ENTERTAINMENT / ...) acting as an editorial index rather than nav
- Strict monochrome palette off ink black #0c0c0c and pure white #ffffff, with steel #6b7280 for muted text
- Flat print treatment: hairline 1px borders (#e5e7eb) and whitespace for separation, never drop shadows or elevation
- Square-cornered image and content cards (0px radius) so AI-generated stills read as gallery plates, not app tiles
Do not copy
- The lowercase 'runway' wordmark
- The specific jungle-waterfall hero footage and any Runway-generated stills
- The exact cobalt signal #2b22fa as your own brand accent
- 'Building AI to Simulate the World' and the world-models / research-lab positioning copy
- The RUNWAY CHARACTERS / MEDIA AND ENTERTAINMENT capability labels
- The 'Enterprise Sales' + 'Try Runway' nav cluster wording