Runway

• Black as a gallery wall, not a theme — the canvas is true #000000 so every video still reads like a projected frame in a dark room. The interface disappears and the generated imagery becomes the only light source.
• Editorial serif against neutral grotesque — a Times-lineage display face (timesNow) handles the art-direction voice while ABC Normal does the quiet operational work. Two families, two registers: one curatorial, one functional.
• Motion is the product demo — with Framer Motion and GSAP both present and an 'expressive' motion profile, the page treats movement as proof-of-capability. A static screenshot can't sell a video model; the live page does.
• Near-total color abstinence — the entire surface runs on black, white, and a thin gray ladder. No brand-accent fill anywhere. Color is delegated to the work itself, which is the most confident move a creative tool can make.
• Hairline structure over boxes — a single 1px solid border (#e5e7eb-tier) and a wide 1600px rail organize the page. Cards are implied by line, not by shadow or fill, keeping the eye on the imagery.
• Cinematic widescreen as the unit of composition — hero and feature stills sit at 16:9 (1920×1080, 2048×1152), the native aspect of the medium being sold. The layout is built around the frame, not around text columns.

• How a pure-black canvas turns generated media into gallery work — study the discipline of letting the imagery be the only saturated thing on the page, with the UI reduced to white type and hairlines.
• The two-family editorial pairing — a serif display (Times-lineage) for art-directed headlines plus a neutral grotesque (ABC Normal) for UI. Learn when a serif earns its place: when the brand is selling taste, not throughput.
• Motion-as-evidence for a generative medium — Runway runs an expressive motion layer (Framer Motion + GSAP) precisely because the product is motion. Study how the page choreography mirrors the thing it sells.
• Widescreen-first layout math — composing around 16:9 video stills rather than around a text grid. Note how the 1600px rail and cinematic aspect ratios cooperate to keep frames uninterrupted.

• Don't paint pure #000000 across a text-heavy product page — it works for Runway because the page is mostly imagery and very little reading. On a documentation- or pricing-dense surface it becomes fatiguing and crushes contrast nuance.
• Don't reach for the editorial serif unless your brand is genuinely selling taste — a Times-lineage display face on a throughput-oriented SaaS reads as costume, not curation. The serif here is earned by the creative-professional audience.
• Don't replicate the expressive motion budget on a low-end device baseline — Runway's audience runs creative workstations. Without aggressive prefers-reduced-motion fallbacks the same choreography will stutter for everyone else.

The page feels like the lights-down moment before a screening — a black room where the only thing that glows is the work. Authority comes from subtraction: no accent color to lean on, no shadow theatrics, just a serif that whispers 'art house' over a grotesque that quietly runs the controls. The widescreen stills do the persuading while the chrome practices an almost monastic restraint. It is a page confident enough to let its output, not its design, make the case.

• Sits in the front rank of the generative-media studio cohort alongside Midjourney and Luma AI — creative-AI tools that market through gallery-grade output and cinematic dark canvases rather than feature checklists.
• Shares the editorial-dark, art-directed posture of OpenAI's Sora and Pika presentations — the wave of 2024+ video-generation interfaces that treat the landing page as a screening room.
• Descends from the design lineage of Adobe and Figma's creative-tool marketing, but strips the chrome further: where those keep brand color and UI scaffolding visible, Runway delegates all saturation to the generated frame.