Runway Design System

Overview

Runway's design system is built around a single conviction: the AI-generated visual content IS the product, and the interface should disappear. The base canvas is Runway Black ({colors.runway-black} — #000000) with Pure White ({colors.pure-white} — #ffffff) inverse text, and the secondary text color is Cool Slate ({colors.cool-slate} — #767d88) — a distinctly blue-gray neutral that reads cinematic rather than corporate. There is no brand accent color, no gradient system, and no decorative palette. All visual richness comes from full-bleed photography and video; the chrome stays out of the way.

Type runs abcNormal, a custom geometric sans-serif, across every role from a 48px display hero down to 11px uppercase micro tags. The system makes no font-family switches — variety comes from size, weight, case, and letter-spacing rather than family contrast. Display headlines sit at line-height 1.00 with -0.9px to -1.2px tracking, compressing into film-title density. An unusual weight 450 (between regular and medium) is used on micro labels — a precision detail signaling typographic craft.

The shape language is subtly rounded, not pill-shaped. Buttons use 4px ({rounded.sharp}), small links use 6px ({rounded.subtle}), image cards use 8px ({rounded.comfortable}), and alert-style containers use 16px ({rounded.generous}). There is no rounded.full in the system — Runway's geometry is deliberately not circular.

Key Characteristics:

• No brand accent: the only "color" in the interface is {colors.cool-slate} (#767d88) for secondary text. All saturation comes from photography and video content.
• Single typeface commitment: abcNormal handles 48px display through 11px tags. Weight 450 used on micro labels — an uncommon intermediate step.
• Zero box-shadow across the entire system. Depth comes from dark/light section alternation ({component.dark-section} vs {component.light-section}), photographic depth-of-field, and overlay transparency.
• Tight display line-heights (1.00) with negative tracking (-0.9px to -1.2px) — the headline blocks read as film titles, not marketing copy.
• Cool-slate neutrals ({colors.cool-slate} and {colors.mid-slate} — #7d848e) for secondary text, not warm grays. The cool tint is the system's most distinctive non-photographic signal.
• Uppercase navigational labels at 14px with 0.35px positive tracking ({typography.caption-label}) — the only tracking that goes positive in the entire system.
• Image-first cards: research and feature cards use a cinematic photo plate at 8px corner clipping with a single title line below — no metadata stack, no badge cluster.
• 8px base spacing scale extending up to 78px section padding — generous section breathing room paired with tight component interiors.

Colors

Primary

• Runway Black ({colors.runway-black} — #000000): The primary page background and maximum-emphasis text color. The dominant surface across the system.
• Deep Black ({colors.deep-black} — #030303): A near-imperceptible variant for layered dark surfaces.
• Dark Surface ({colors.dark-surface} — #1a1a1a): Card backgrounds and elevated dark containers.
• Pure White ({colors.pure-white} — #ffffff): Primary text on dark surfaces and the canvas for light editorial sections.

Surface

• Near White ({colors.near-white} — #fefefe): The lightest surface variant, barely distinguishable from pure white.
• Cool Cloud ({colors.cool-cloud} — #e9ecf2): Light section backgrounds with a cool blue-gray tint. Used on {component.light-section}.

Borders

• Border Dark ({colors.border-dark} — #27272a): The single dark-mode border color. Used only on {component.alert-container} — barely visible containment.
• Cool Silver ({colors.cool-silver} — #c9ccd1): Light borders and dividers.
• Light Silver ({colors.light-silver} — #d0d4d4): The lightest border/divider variant.

Text

• Charcoal ({colors.charcoal} — #404040): Primary body text on light surfaces and secondary text inside {component.research-card}.
• Near Charcoal ({colors.near-charcoal} — #3f3f3f): A slightly lighter variant for dark-section secondary text.
• Cool Slate ({colors.cool-slate} — #767d88): Secondary body text — a distinctly blue-gray cool neutral. The system's signature non-photographic color.
• Mid Slate ({colors.mid-slate} — #7d848e): Tertiary text and metadata descriptions.
• Muted Gray ({colors.muted-gray} — #a7a7a7): De-emphasized content, timestamps.
• Tailwind Gray ({colors.tailwind-gray} — #6b7280): Standard supplementary text fallback.
• Dark Link ({colors.dark-link} — #0c0c0c): Darkest link text — nearly black.
• Footer Gray ({colors.footer-gray} — #999999): Footer links and deeply muted content.

Gradient System

There is no gradient in the interface. All visual richness comes from AI-generated and enhanced photographic content. The interface itself is intentionally colorless.

Typography

Font Family

The system runs abcNormal with abcNormal Fallback as the immediate fallback. For external implementations, Inter or DM Sans serve as close geometric substitutes — both transfer the proportions cleanly, though you'll need to set weight 450 explicitly on micro labels.

There is no separate display family. The single variable carries the entire scale.

Hierarchy

Principles

• One typeface, complete expression. abcNormal handles every text role. The design achieves variety through size, weight, case, and letter-spacing rather than family switching.
• Tight everywhere. Nearly every size uses line-height 1.00–1.30 — even body text is relatively compressed. This creates a dense, editorial feel.
• Weight 450 as precision detail. Some small uppercase labels use weight 450, an uncommon intermediate between regular (400) and medium (500). This signals typographic sophistication.
• Negative tracking as default. Even body text uses -0.16px to -0.26px letter-spacing, keeping everything slightly tighter than default.
• Uppercase as structure. Labels at 14px and 11px use text-transform: uppercase with positive letter-spacing (0.35px) to create navigational signposts that contrast with the tight lowercase display text.

Layout

Spacing System

• Base unit: 8px (with 4px and 6px micro steps).
• Tokens: {spacing.xxs} 4px · {spacing.xs} 6px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.xxl} 28px · {spacing.section} 32px · {spacing.section-lg} 48px · {spacing.section-xl} 64px · {spacing.section-xxl} 78px.
• Section vertical padding: generous 48–78px on major bands. The scrolling experience reads like watching scenes change in a film.
• Component gaps: 16–24px between elements inside sections.

Grid & Container

• Max content width: up to 1600px (cinema-wide) on full-bleed sections; content sections center with generous margins.
• Hero: full-viewport, edge-to-edge.
• Image grids: intentionally asymmetric, magazine-style — large feature image paired with smaller supporting images creates visual rhythm.
• Footer: full-width dark section.

Whitespace Philosophy

Runway uses cinema-grade breathing room between sections (48–78px vertical gaps) but replaces typical whitespace inside sections with photography. The visual content IS the breathing room. Editorial grid asymmetry — large hero paired with smaller supporting images — generates rhythm without relying on empty space.

Elevation

The system uses zero box-shadow. This is a deliberate film-production decision: in cinema, depth comes from lighting, focus, and composition, not drop shadows. Runway's interface mirrors this.

Depth is communicated through dark/light section alternation, photographic depth-of-field, and overlay transparency — never through CSS box-shadow.

Components

Buttons

button-primary — Transparent fill with white text, 14px weight 600, 1px {colors.border-dark} border, 4px radius ({rounded.sharp}). The button is extremely restrained — no heavy fills or bright surfaces. Interactive elements blend into the editorial flow rather than competing with photography.

button-light — Same restrained geometry on light surfaces, with {colors.charcoal} text instead of white. 4px radius, 14px weight 600.

Cinematic Hero

cinematic-hero — Full-viewport image or video with a text overlay. The headline runs in {typography.display-hero} (48px abcNormal, weight 400, line-height 1.00, -1.2px tracking) in white on dark imagery. Supporting body text uses {component.hero-subtext} (16px body in {colors.cool-slate}). The image is always cinematic quality — film-grade composition is non-negotiable.

Sections

dark-section — {colors.runway-black} background with {colors.pure-white} text. 78px vertical padding. Used for hero, features, and mission bands.

light-section — {colors.cool-cloud} (#e9ecf2) background with {colors.charcoal} text. 64px vertical padding. Used for editorial content and research bands.

Section-to-section alternation IS the elevation strategy. There are no medium gray surfaces between dark and light — the contrast is hard.

Research Article Cards

research-card — Photographic thumbnail at 8px corner clipping ({rounded.comfortable}) with a {typography.card-title} (24px abcNormal) caption beneath. On light surfaces the title renders in {colors.charcoal}. Cards are primarily photographic — the image IS the card.

research-card-dark — The same recipe on dark surfaces, with the title in {colors.pure-white}.

Cards arrange in mixed-size grid layouts: one large feature card paired with two smaller supporting cards, creating asymmetric editorial rhythm.

Section Labels

section-label — A 14px uppercase abcNormal at weight 500 with 0.35px letter-spacing in {colors.cool-slate}. No border, no background, no surface. The label sits above section headings as a navigational signpost.

Trust Bar

trust-logo — Company logos rendered in monochrome ({colors.muted-gray} or {colors.pure-white} depending on background). Horizontal layout with generous spacing. Clean and restrained — the brand wordmarks read flat and respectful.

Alert Container

alert-container — The single bordered surface in the system. {colors.dark-surface} (#1a1a1a) background, 1px {colors.border-dark} (#27272a) border, 16px radius ({rounded.generous}), 24px interior padding. White text in {typography.body}. The only place a border appears.

Mission Statement

mission-statement — A {colors.runway-black} band with {typography.sub-heading} (36px abcNormal, line-height 1.00, -0.9px tracking) white text, centered with 78px vertical padding. The emotional close of the page — artistic and philosophical rather than a CTA.

Navigation

nav-link — Transparent background, 16px abcNormal, weight 400. Sits transparent over hero content. On hover, opacity lifts. Extremely subtle — designed not to compete with visual content.

Footer

footer-link — {colors.footer-gray} (#999999) text in {typography.small} (13px). Sits inside the full-width dark footer band, restrained and quiet.

Image Treatment

image-card — Product screenshots and editorial photos render with 8px corner clipping ({rounded.comfortable}). Full-bleed cinematic photography dominates everywhere else, with dark overlays on hero images for text readability.

Tags

tag-uppercase — The smallest text role in the system: 11px abcNormal at the unusual weight 450, line-height 1.30, no tracking adjustment. Used for tiny labels and category tags. Weight 450 is the precision detail — the system's quietest signal of typographic craft.

Responsive Behavior

Touch Targets

• Navigation links sit at a comfortable 16px tap target.
• Article cards serve as large touch targets — the entire card surface is interactive.
• Buttons at 14px weight 600 with adequate surrounding padding.

Collapsing Strategy

• Navigation collapses to hamburger on mobile.
• Hero maintains full-bleed at every size; text scales down.
• Image grids reflow from multi-column → 2-column → single column.
• Research cards drop from feature-size into stacked full-width.
• Trust logos switch to horizontal scroll or reduced grid.
• Video content maintains aspect ratio across all sizes.

Known Gaps

• Button hover and active states: the system's interactivity is so subtle that hover deltas are hard to extract reliably — the spec captures rest states only.
• Form inputs: text inputs, selects, and validation states are not visible on the captured marketing surfaces.
• Modal and dialog patterns: scrim color, dialog radius, and close-affordance treatment aren't documented here.
• In-app Studio interface: the timeline, generation controls, asset library, and project view live behind authentication inside Runway Studio and aren't represented in this DESIGN.md.
• Mobile menu treatment: the hamburger-expanded panel styling and full-screen overlay specifics aren't fully captured.
• Animation and transition timing: the spec describes static states; the easing curves and durations used between section reveals aren't documented.