Runway

runwayml.com

The 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