---
title: "Runway design system"
variant: extended
source: https://runway.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/runway-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Runway · Design System

> Quiet editorial design, expansive cinematic worlds

**Theme:** light · **Industry:** ai · **Source:** https://runway.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A restrained monochrome interface gives Runway’s AI platform a clear, editorial frame. Expansive cinematic imagery carries the visual impact, while modular product sections and a dense dark footer organize a broad set of offerings.

## North star

Keep the interface quiet and editorial so large, cinematic imagery—not decoration—sets the visual tone.

## Overview

Runway’s homepage uses a near-monochrome interface as a quiet frame for vivid, cinematic product imagery. White is the main canvas; near-black defines navigation, text and the full-width footer, while fine pale-gray rules separate content without adding visual weight. A restrained blue-violet accent appears sparingly rather than driving the palette. The single abcNormal family keeps headings and body copy consistent, with regular-weight display text, compact uppercase captions and stronger button labels. The layout moves from a wide, image-led hero to centered platform messaging, three product cards, a tabbed product showcase, a dark research feature and a compact editorial feed. Spacious gaps give these different blocks room to breathe, while a four-column footer gathers extensive navigation. Rounded buttons and restrained borders are the main interface details; the page otherwise stays flat and lets imagery establish mood.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, header and light content fields; also reverses text and labels on dark imagery and footer. |
| Runway Ink | `#0c0c0c` | `--color-runway-ink` | surface | Navigation and body text, inverse feature and footer surfaces, and high-contrast dark controls. |
| Soft Rule | `#e5e5e5` | `--color-soft-rule` | semantic | Fine section dividers, link boundaries and subtle separators across otherwise open white layouts. |
| Slate Copy | `#404040` | `--color-slate-copy` | neutral | Secondary headings and link copy, including editorial feed titles against the white canvas. |
| Cool Gray | `#6b7280` | `--color-cool-gray` | neutral | Muted supporting link descriptions and secondary interface copy. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Low-emphasis footer text and occasional muted button details. |
| Button Charcoal | `#1a1a1a` | `--color-button-charcoal` | surface | Text on pale Enterprise Sales controls and occasional compact button or link details. |
| Blue Slate | `#666e7a` | `--color-blue-slate` | neutral | Subtle footer copy; a minor text tone rather than a defining brand color. |
| Mid Gray | `#7c7c7c` | `--color-mid-gray` | neutral | Low-emphasis text details; keep subordinate to the main ink and slate hierarchy. |
| Signal Violet | `#2b22fa` | `--color-signal-violet` | accent | Rare accent detail only; it is not a dominant page color or the main CTA treatment. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0c0c0c` (Runway Ink) · `--color-text` → `#0c0c0c` (Runway Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#404040` (Slate Copy) · `--color-border` → `#e5e5e5` (Soft Rule) · `--color-accent` → `#2b22fa` (Signal Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0c0c0c` | `#ffffff` | 19.56:1 | AAA |
| `#ffffff` | `#0c0c0c` | 19.56:1 | AAA |
| `#404040` | `#ffffff` | 10.37:1 | AAA |
| `#404040` | `#0c0c0c` | 1.89:1 | fail |
| `#2b22fa` | `#ffffff` | 7.74:1 | AAA |
| `#2b22fa` | `#0c0c0c` | 2.53:1 | fail |

### Gradients

- `linear-gradient(to right, rgb(255, 255, 255), rgba(0, 0, 0, 0))`
- `linear-gradient(to left, rgb(255, 255, 255), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| abcNormal | `--font-body` | webfont | 400, 600, 500, 450 | Site-wide display and interface type: hero and section headings, navigation, body copy, captions, links and buttons. | Inter |

- **abcNormal:** Use mostly regular weights; display and headings have subtly tight tracking, captions are uppercase, and buttons use a stronger weight.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 400 | 1.1 | -0.015em | — | abcNormal | Large hero or prominent campaign headlines. |
| h1 | 40px | 400 | 1.15 | -0.012em | — | abcNormal | Primary page and major section headings. |
| h2 | 24px | 400 | 1.25 | -0.007em | — | abcNormal | Platform and feature section headings. |
| h3 | 20px | 400 | 1.55 | -0.005em | — | abcNormal | Product titles and supporting feature headings. |
| body | 14px | 400 | 1.25 | 0 | — | abcNormal | Descriptions, explanatory copy, and supporting text. |
| caption | 11px | 450 | 1.3 | 0 | uppercase | abcNormal | Compact uppercase labels and metadata. |
| button | 14px | 600 | 1.43 | 0 | — | abcNormal | Prominent CTA and utility button labels. |
| nav | 16px | 500 | 1.5 | 0 | — | abcNormal | Primary navigation links. |
| link | 14px | 600 | 1.43 | 0 | — | abcNormal | Text links and editorial feed actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 20, 23, 24, 28, 32, 40, 46, 56 px.
- Section rhythm 56px · element gap 8px · card padding — · max content width 1400px.

The measured page max width is 1400px, with the first viewport spanning nearly edge to edge. A compact announcement strip and navigation sit above the hero. Content alternates between centered headings, three-column platform cards, split feature panels, and a two-column content feed. The measured section gap is 56px and the overall density is comfortable; use generous whitespace to separate these varied blocks. A four-column footer gathers deep navigation into a dense dark field.

## Shape & elevation

- Radius: button `6px` · link `4px` · xs `4px` · sm `6px` · md `8px` · lg `12px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat, with no measured shadow system. Thin #e5e5e5 separators and subtle image framing provide structure in place of layered cards. Buttons use compact fills and measured corner radii; the hero and feature media supply depth through photography, not UI elevation.

## Imagery

Large photographic and video-like media lead the page: a cinematic underwater hero, product and use-case imagery, and a soft-focus research feature. Images are broad, often rounded at the corners, and sit directly within the page grid rather than inside heavily decorated frames. Treat the deep blue-green imagery visible in the screenshots as content-specific media color, not as a core interface palette. Product thumbnails in the feed are smaller and more editorial.

## Components

### Announcement strip

A narrow blue-to-violet banner above the white navigation, containing centered promotional copy, a terms link and a contact action.

### Primary navigation

Black Runway wordmark at left, compact product and resource links across the center, and pale Enterprise Sales, Login and dark Try Runway controls at right.

### Hero panel

Wide cinematic image with white headline and supporting copy positioned over the lower-left area, plus a pale Try Runway for free CTA.

### Platform card

Three-column product overview with image, title, short description and compact actions on a white canvas.

### Tabbed showcase

Horizontal product category tabs above a fine-bordered feature panel, pairing a short use-case list with a large image.

### Research feature

Dark, full-width photographic panel with explanatory text on the left and stacked research links separated by thin rules on the right.

### Editorial feed

Two-column list of recent updates pairing small landscape thumbnails with restrained titles, descriptions and Learn more links.

### Footer

Near-black, four-column navigation directory with many small white and muted links, plus the Runway mark and legal details.

### Measured component styles

- **Primary button** (“Enterprise Sales”): background #eef1f5 · text #1a1a1a · radius 6px · padding 6px 10px · 600 14px abcNormal
- **Secondary button** (“Try Runway”): background #262626 · text #ffffff · radius 6px · padding 6px 10px · 600 14px abcNormal
- **Link** (“Introducing Runway Ads”): transparent background · text #404040 · radius 0px · padding 0px · 400 24px abcNormal
- **Card** (“GWM-1 ↗ A state-of-the-art General World”): transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 0px · 400 16px abcNormal
- **Navigation item** (“Creative Dev Robotics Research Resources”): transparent background · text #0c0c0c · radius 0px · padding 0px · 400 16px abcNormal

## Do

- Use white canvas and near-black type as the default.
- Reserve large image areas for cinematic product storytelling.
- Keep headings clean, regular-weight and subtly tight-tracked.
- Separate sections with generous whitespace and fine gray rules.
- Use compact rounded controls with clear contrast.
- Keep violet accents rare and subordinate.

## Don't

- Do not make the interface colorful by default.
- Do not add shadows or layered card effects.
- Do not use decorative gradients across ordinary content sections.
- Do not crowd the hero with secondary interface elements.
- Do not treat image-specific blue-green tones as brand UI colors.
- Do not use oversized bold type for every section.

## Agent prompt

Build a new Runway-style page with a quiet, editorial interface and cinematic imagery. Use Gallery White (#ffffff) as the main canvas and Runway Ink (#0c0c0c) for primary text, navigation and inverse surfaces. Use Soft Rule (#e5e5e5) for delicate dividers and Slate Copy (#404040) or Cool Gray (#6b7280) for supporting copy; keep Signal Violet (#2b22fa) rare. Use a clean sans-serif close to Inter, with mostly regular headings and compact stronger-weight buttons. Structure content as spacious, clear modules, mixing centered headings, image-led splits and restrained product cards. Let broad photography establish mood; keep interface framing flat, without shadows. Use compact rounded CTAs, a simple top navigation, and a dark, well-organized footer. Treat image colors as content, not brand palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide two-column hero with full-bleed cinematic media and copy positioned over the image. | headline-first introduction, single primary CTA | white overlay text, rounded image panel, bottom-left copy |
| 2 | feature-grid | Centered section heading followed by a three-column platform overview. | scan by product, multiple paths to learn more | image-led cards, compact action links, centered heading |
| 3 | product-showcase | Tabbed categories above a two-part feature panel with a list and large image. | switch product categories, select a use case | horizontal tabs, fine panel border, large product image |
| 4 | feature-split | Wide photographic panel split between research copy and stacked model links. | explore research, open model details | dark image field, white text, rule-separated link list |
| 5 | content-feed | Editorial two-column feed with image-and-copy entries on a white background. | browse recent updates, follow learn-more links | small landscape thumbnails, muted supporting copy, minimal text links |
| 6 | footer | Dense four-column navigation directory above a bottom row of brand and legal details. | browse product categories, reach company information | near-black surface, small link lists, muted legal row |

## Source CSS custom properties (selected)

```css
--tw-text-opacity: 1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/runway-com