# Runway — Design System
> Foundational AI research company building General World Models for simulation and creative generation.
- **Canonical:** https://uiuxskills.com/library/runway
- **Source:** https://runwayml.com
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:51.169Z

---

---
version: alpha
name: Runway
description: >-
  Foundational AI research company building General World Models for simulation and creative
  generation.
tone: Academic, visionary, precise, and professional.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-dim: "#F5F5F5"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  neutral-800: "#262626"
  error: "#DC2626"
  success: "#16A34A"
  outline: "#E5E5E5"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 24px
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 20px
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 16px
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 14px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.neutral-800}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  link-hover:
    textColor: "{colors.neutral-800}"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Runway maintains a stark, high-contrast aesthetic that prioritizes content and research output. The brand identity is minimalist and utilitarian, designed to feel like a high-performance research laboratory rather than a traditional consumer app.

## Colors

The color strategy is strictly monochromatic, utilizing a high-contrast palette to ensure clarity and professional focus.

*   Primary (#000000): Core brand color for text and primary UI elements.
*   Surface (#FFFFFF): Primary background color for the application and marketing site.
*   Surface-dim (inferred) (#F5F5F5): Subtle background for section dividers and secondary containers.
*   On-surface (#1A1A1A): Primary text color for high readability.
*   On-primary (#FFFFFF): Text color for elements on black backgrounds.
*   Neutral-800 (#262626): Secondary neutral for borders and subtle UI elements.
*   Error (inferred) (#DC2626): Standard semantic error color for alerts.
*   Success (inferred) (#16A34A): Standard semantic success color for status indicators.
*   Outline (inferred) (#E5E5E5): Border color for cards and input fields.
*   Focus-ring (inferred) (#000000): High-contrast focus state for accessibility.

## Typography

The typography uses the Inter font family exclusively to maintain a clean, academic, and highly legible interface.

*   Display-lg (inferred): Hero headlines.
*   Display-md (inferred): Section titles.
*   Headline-lg (inferred): Sub-section headers.
*   Headline-md: Card titles.
*   Headline-sm (inferred): Secondary headers.
*   Body-md: Standard body text for research descriptions and long-form content.
*   Label-sm: UI labels, buttons, and metadata.

## Layout

The site follows a clean, centered layout with a maximum content width that preserves readability. It employs a 4px/8px grid system to maintain vertical rhythm, with {spacing.md} (16px) used consistently between major content sections. The page structure follows the sequence: nav, hero, features, research-highlights, partnerships, and footer. The hero pattern features a centered headline with a single primary CTA, and the design is mobile-first, with navigation collapsing into a drawer on smaller screens.

## Elevation & Depth

Elevation is used sparingly to maintain a flat, modern aesthetic. The system defines depth through subtle borders and color shifts rather than heavy shadows.

*   Elevation.sm: Subtle lift for small UI elements.
*   Elevation.md: Standard lift for cards and interactive containers.
*   Elevation.lg: Used for modal or drawer overlays.

## Shapes

The design system uses moderate rounding to balance a professional, sharp look with modern UI standards. The {rounded.md} (8px) token is the standard for cards and interactive containers, ensuring visual consistency across the interface.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons are flat and high-contrast, utilizing {colors.primary} for primary actions and transparent backgrounds with {colors.primary} borders for secondary actions. Use these for clear, imperative calls to action.

### Card
Cards use {rounded.md} and {colors.outline} borders to define content boundaries. They are designed to be clean and utilitarian, suitable for housing research highlights or product features.

### Input Field
Input fields feature a simple border using {colors.outline} and {rounded.sm}. On focus, the border shifts to {colors.focus-ring} to provide clear accessibility feedback.

### Badge
Badges are used for metadata or status, utilizing {colors.surface-dim} for neutral tags or semantic colors like {colors.success} for positive indicators.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs | Use drop shadows on buttons |
| Apply {typography.body-md} for research descriptions | Mix font families outside Inter |
| Use {rounded.md} for all card containers | Use {rounded.full} on standard cards |
| Maintain {spacing.md} between sections | Break content connections with excessive whitespace |
| Use {colors.outline} for subtle dividers | Use {colors.error} for non-critical status |
| Apply {typography.headline-md} for section headers | Use {typography.display-lg} for body text |
| Use {input-field-focus} for active form states | Use low-contrast borders for inputs |
| Use {badge-success} for verified status | Use non-standard border-radii on inputs |

## Content Style

CTA labels are imperative, concise, and action-oriented, such as "Get Started" or "Try now." They should be direct and avoid unnecessary fluff to maintain the professional tone.

Headings are visionary and declarative, focusing on the impact of AI on the world. They should be used to anchor sections and guide the user through the research narrative.

Copy density is designed to be scannable. Use short paragraphs and clear, descriptive headers to break up information, ensuring the content remains accessible and easy to digest.

## Imagery & Icons

Imagery consists of high-fidelity cinematic video stills and clean, professional partner logos. The visual style is mixed, prioritizing realistic, high-contrast assets that reflect the cutting-edge nature of the research. Iconography should remain minimal and sharp, adhering to the same monochromatic constraints as the UI.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Runway, a minimal enterprise AI research brand with an academic, high-contrast aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its YAML token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never by hardcoded hex, pixel values, or font sizes.
2. Use only components defined under `components:`. Do not introduce variants (e.g., outlined cards, pill buttons) that the spec does not list.
3. Follow the Layout section for page structure (nav → hero → features → research-highlights → partnerships → footer), centered layout, and mobile-first breakpoints; collapse navigation to a drawer below 768px.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values take precedence over the spec.

## Output contract

**Must:**
- Use all tokens by name on every component and layout decision.
- Implement hover, focus, and disabled states for interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Apply `{rounded.sm}` to inputs, `{rounded.md}` to cards and interactive containers.
- Write CTAs as imperative, concise labels per the Content Style section (e.g., "Get Started").

**Must NOT:**
- Invent colors, font families, radii, or spacing values outside the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, decorative flourishes, or drop shadows on buttons.
- Reference any specific framework or toolchain.
- Rewrite, replace, or invent page copy, headings, or navigation items.
- Alter information architecture as a side effect of applying design tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface}`; for secondary containers, use `{colors.surface-dim}`.
- For text on dark backgrounds, use `{colors.on-primary}`; for standard body text, use `{colors.on-surface}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.