Skip to content
Brand / Corporate

Runway

Cinematic from top to bottom: the product is demonstrated with the product itself, full-screen video and not a single static screenshot. The interface steps aside so the footage leads, with typography almost invisible holding the narration together.

DarkVideoCinemaProduct
runwayml.com Desktop
Full screenshot of runwayml.com on desktop
Full screenshot of runwayml.com on mobile, part 1 of 2Full screenshot of runwayml.com on mobile, part 2 of 2
Mobile

Screenshots of the real site. Scroll inside each frame to go through it.

The feeling

An editing suite: dark, fast, built to be watched rather than read.

Design system Extracted from the site

Colors

Background
#0c0c0c
Text
#ffffff
Accent
#eef1f5
Surface
#ffffff
Border
#e5e7eb
Palette: #eef1f5 #0c0c0c #ffffff #e5e7eb #3b82f6 #374151

Typography

abcNormal Headlines
Scale 50px24px20px15px

Weights: 400 · heading tracking -2px

Spacing, borders and layout

Spacing scale
4 · 8 · 12 · 16 · 20 px
Base unit
4px
Radii
6px · 8px · 4px · 12px
Border
1px #e5e7eb
Content width
1600px

Third-party style reference. AIGiner is not affiliated with or sponsored by Runway; the brand, design and content belong to their owners. Shown for illustrative purposes. Are you the owner and would rather we remove it? Write to us.

Similar pages

See all
a24films.com
Screenshot of A24's website

We design websites at this level

Tell us about your brand, launch or event and we'll propose a creative website with this attention to detail and this finish.