Acd Cinematic Runway Design

---
name: acd-cinematic-runway-design
description: Reference DESIGN.md for film-grade dark UI, oversized type, motion-forward hero sections. Use when building UI components, applying design tokens, or implementing visual styles for cinematic runway.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, cinematic, claude-design]
---

# RunwayML — Cinematic Dark Design Mode

You are an expert in the RunwayML — Cinematic Dark aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Reference DESIGN.md for film-grade dark UI, oversized type, motion-forward hero sections.

## 1. Visual Theme & Atmosphere

Cinematic dark. The page is a movie poster. Type is large, motion is present, media is the subject. Creator tools live here.

Mood: atmospheric, premium, kinetic.

## 2. Color Palette & Roles

```
--bg:              #000000
--bg-alt:          #0a0a0a
--surface:         #141414
--text:            #f5f5f5
--text-muted:      #a8a8a8
--text-dim:        #6a6a6a
--border:          #2a2a2a
--accent:          #ff2d8e   /* saturated magenta */
--accent-alt:      #00e5ff   /* electric cyan */
--gradient-1:      linear-gradient(135deg, #ff2d8e 0%, #a855f7 50%, #00e5ff 100%)
--gradient-warm:   linear-gradient(135deg, #ff6b35 0%, #f72585 100%)
```

Gradients are allowed here — and expected.

## 3. Typography Rules

- **Display:** custom grotesque. `PP Editorial New`, `Söhne Breit`, fallback `Inter Display`. Weight 400, tight tracking.
- **Body:** `Inter`, weight 400, 16–18px.
- **Mono:** `JetBrains Mono` for captions, timestamps, technical metadata.

Scale: 14 / 16 / 18 / 24 / 40 / 64 / 96 / 140. Go big.

Oversized display type is a feature, not excess.

## 4. Component Stylings

**Buttons**
- Primary: `--accent` fill, white text, radius 999 (pill), 12/24 padding.
- Secondary: transparent, 1px white border, white text.
- Hover: subtle scale(1.02) + 200ms ease-out. This is the one place lift is OK.

**Cards / media tiles**
- `--surface` bg, radius 12–16px, 1px `--border`.
- On hover: border becomes `--accent`, 300ms transition.
- Video previews autoplay muted on hover.

**Inputs**
- `--bg-alt` fill, radius 10px, 14px padding.
- Focus: 2px `--accent` ring with glow `0 0 16px rgba(255, 45, 142, 0.4)`.

**Nav**
- Fixed top. Transparent with backdrop-filter `blur(12px)` over scrolled content.

## 5. Layout Principles

- Full-bleed hero (100vw × 100vh common).
- 12-column grid, 32px gutter on desktop.
- Generous vertical whitespace between sections (120–160px).
- Media-first above the fold.

## 6. Depth & Elevation

Atmospheric. Soft glows around active elements. Backdrop blur for nav and modals. Drop shadows allowed but keep them deep and soft (`0 24px 64px rgba(0,0,0,0.6)`).

## 7. Do's and Don'ts

**Do**
- Use gradients on text, buttons, and hero backgrounds.
- Show motion: autoplay silent video, subtle parallax, morphing shapes.
- Oversize the hero headline to absurdity.

**Don't**
- Use light backgrounds. Ever. This is a dark system.
- Clutter with copy. Let media breathe.
- Add traditional sidebars or dense chrome.

## 8. Responsive Behavior

- Hero headlines scale 140 → 48 on mobile.
- Media grids collapse to single column below 768px.
- Autoplay disabled on mobile (bandwidth respect).

## 9. Agent Prompt Guide

Bias: pure black canvas, magenta/cyan gradients, oversized display type, pill buttons, media hero, blur-backed nav, generous whitespace between full-bleed sections.

Reject: light mode variants, dense info layouts, 16px headlines, conventional SaaS card grids.

## When to Use This Mode

- When user references **runway** or the **cinematic** family as inspiration
- When building UI in the cinematic aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic