What is Runway's primary brand color?

Runway has no traditional brand accent color. The primary surface is Runway Black (#000000) with Pure White (#ffffff) as the inverse, and the only interface color is cool slate (#767d88 and #7d848e) for secondary text. All visual richness — what would normally be brand color — comes from AI-generated cinematic photography and video, which fills full-bleed sections and provides the gradient and saturation the interface refuses to carry.

What typography does Runway use, and what should I use if abcNormal isn't available?

Runway runs a single custom geometric sans-serif called abcNormal across every text role, from 48px display headlines down to 11px uppercase tags. Display sizes use line-height 1.0 with -0.9px to -1.2px letter-spacing for film-title density. Inter or DM Sans are the closest open-source substitutes; both handle the geometric proportions cleanly. Mind the unusual weight 450 used on micro labels — most variable fonts ship that step, but you'll need to set it explicitly.

Does Runway use a dark mode by default?

Runway is dark-dominant rather than dark-only. The page alternates between true black sections (#000000 and #1a1a1a with white text) and light editorial sections (#ffffff and Cool Cloud #e9ecf2 with #404040 charcoal text). Section-to-section alternation IS the elevation strategy — there are no medium gray surfaces, no progressive shadow tiers, just hard contrast between dark and light bands.

Why does Runway use zero box shadows?

It's a deliberate film-production design choice. In cinema, depth comes from lighting, focus, and composition rather than drop shadows, and Runway's interface mirrors that philosophy. Depth here is communicated through dark/light section alternation, photographic depth-of-field inside the imagery, and overlay transparency — never through CSS box-shadow. The only border is a barely-visible 1px #27272a stroke on alert containers.

Can I use this DESIGN.md to build my own React app?

Yes. The file is designed to be fed into Claude, Cursor, or any AI tool that reads structured tokens, and the agent will reproduce Runway's commitment to cinematic photography and invisible UI rather than a generic dark theme. You can also reference tokens directly: every hex, weight, line-height, and tracking value is a quoted string you can paste into Tailwind config or CSS variables. The system assumes you bring high-quality imagery — without it, the discipline collapses.

What's missing from this DESIGN.md spec?

A handful of things, listed in the Known Gaps section: precise button hover states (the design uses such subtle interactivity that hover deltas are hard to extract), form input styling, modal and dialog patterns, and full mobile menu treatments. The spec captures the marketing and editorial surfaces; the in-app Runway Studio (timeline, generation controls, asset library) lives behind authentication and isn't represented here.

Runway Design System

Runway's design system as a DESIGN.md file.

About Runway DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source runwayml.com

AI & LLM Platforms
Design & Creative Tools

Runway is the AI-powered film and creative platform behind Gen-3 and a generation of generative video tools, and its marketing surface reads like a film reel rather than a tech product page. The interface retreats almost entirely. Full-bleed cinematic photography and AI-generated video fill the viewport while the UI itself shrinks to near-invisibility — minimal 1px borders at #27272a, zero shadows, and a near-monochrome dark palette anchored on Runway Black #000000. Where most SaaS sites compete with their content using gradients, icons, and decorative chrome, Runway commits to the opposite discipline: the photography IS the design, and the chrome stays out of the way.

This DESIGN.md packages that discipline into a machine-readable spec built on the Google Labs format. Inside: 17 color tokens grouped into primary (#000000, #030303, #1a1a1a, #ffffff), surface (#fefefe, #e9ecf2), cool-slate neutrals (#767d88, #7d848e, #a7a7a7), and borders (#27272a, #c9ccd1, #d0d4d4). Nine type styles run on abcNormal at weights 400 through 600 plus the unusual 450 intermediate. Four radius tiers (4px, 6px, 8px, 16px), an 8px-base spacing scale, and roughly a dozen component recipes covering cinematic hero, research article cards, trust bars, and mission statements.

Drop the file into Claude, Cursor, or GitHub Copilot and the agent will reproduce Runway's restraint — cool slate grays instead of warm ones, line-height 1.0 instead of 1.5, photography instead of icons — rather than defaulting to a generic dark theme. Or reference the tokens directly: every hex, weight, and tracking value here is a quoted string you can paste into Tailwind config or CSS variables. The system is worth studying because it answers a hard question with conviction: when AI content is the product, the interface should disappear.

What makes it distinct

Single typeface across every roleabcNormal handles 48px display through 11px tags, no font-family switching anywhere
Zero box-shadow in the entire systemdepth comes from photography and dark/light section alternation, not CSS elevation
Weight 450 for micro labelsan uncommon intermediate between 400 and 500 that signals typographic precision
Cool-slate neutrals (#767d88, #7d848e) instead of warm grayssecondary text reads cinematic, not corporate
Tight display line-height 1.0 with -1.2px trackingheadlines compress into film-title density rather than marketing copy

Live at runwayml.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

runwayml.com

Explore Runway

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Runway design system FAQ

Common questions about Runway's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Runway in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→