---
name: Runwayml
description: "This site is a perfect example of a modern, premium AI tool that uses restraint and high-quality photography to communicate complex, visionary concepts."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1A1A1A"
  secondary: "#404040"
  neutral: "#999999"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.9px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.16px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium, cinematic AI platform that uses full-bleed visuals to showcase its world-simulating technology.

*A high-end film studio meets a cutting-edge AI research lab.*

## Colors

Monochromatic and restrained, using high-contrast black and white to let photographic content dominate.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1A1A1A`)** — uses `ink` token
- **Secondary text (`#404040`)** — uses `ink-soft` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Use tight negative letter-spacing for large display headings.
- Maintain a clean, objective tone for body copy.
- Reserve uppercase tracking for navigation and category labels.

## Layout

Full-bleed hero sections transitioning into a structured, grid-based content area.

*Rhythm:* Generous whitespace around large visual blocks to maintain a premium, uncluttered feel.

## Elevation & Depth

- Borders: Subtle 1px solid borders in neutral gray (#E5E7EB) for inputs and light dividers.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimal, rectangular buttons with subtle borders or solid dark backgrounds and clean sans-serif text.
- **card:** Content blocks with clear separation, utilizing a 50/50 split between large photographic assets and descriptive text.
- **chip:** N/A
- **input:** Clean, bordered input fields with ample padding.
- **hero:** Massive, edge-to-edge photographic or video backgrounds with overlaid white typography and primary calls-to-action.

## Do's and Don'ts

**Don't:**
- Don't use vibrant, high-chroma accents — screenshot shows a strictly monochromatic UI with black, white, and gray.
- Don't apply heavy drop shadows to UI elements — screenshot shows a completely flat, surfaceless design.
- Don't use decorative or overly stylized typography — screenshot shows clean, functional geometric sans-serif fonts.
- Don't crowd the interface with too much text — screenshot prioritizes large-scale imagery over dense copy.
- Don't use a wide variety of button styles — screenshot maintains a very consistent, minimal button aesthetic.
- Don't rely on grid-based icon systems — screenshot uses photography and simple text for its visual language.

---

## System Prompt (paste into AI agent)

```
A premium, cinematic AI platform that prioritizes high-fidelity visual demonstrations over dense UI. The design DNA is monochromatic and restrained, featuring a clean white background (#FFFFFF) and sharp black typography (#1A1A1A). Typography is strictly geometric sans-serif for headings and humanist sans-serif for body, utilizing tight negative letter-spacing on large display type. Key elements include massive full-bleed photographic heroes and structured 50/50 content splits. Critical donts: Never use vibrant accent colors; avoid heavy drop shadows; never crowd the interface with excessive text; avoid playful or casual language; and do not deviate from the minimalist, high-contrast black-and-white palette.
```