Runway Cinematic Editorial demo
Runway Cinematic Editorial

A high-fashion, runway-inspired editorial style with cinematic full-bleed visuals, dramatic typography, and luxurious studio-grade presentation.
Category: Luxury & Editorial
Era: 2020s Modern
Prompt: 12.8 KB · 1744 words
# SYSTEM PROMPT — Build the "Runway Cinematic Editorial" Landing Page

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-grade landing page in a single attempt — no partial deliverables, no TODOs, no stub sections.

**Mission:** Create a cinematic, editorial-magazine-style landing page for an AI video generation platform (Runway-inspired), where full-bleed photography and video act as the primary UI elements, typography is composed like film titles, and the interface itself is intentionally invisible — zero shadows, minimal borders, pure editorial craft.

---

## 1. THEME DEFINITION & DESIGN LANGUAGE

* **Name:** Runway Cinematic Editorial
* **Type:** Cinematic · Full-Bleed Photography · Single Typeface · Zero Shadows · Film-Title Typography
* **Era:** 2024–2026 AI Cinematic Creative
* **Keywords:** runway, cinematic, full-bleed photography, single font, film titles, cool neutrals, editorial magazine, AI video
* **Visual Direction:** Full-bleed cinematic photography and video as primary UI elements. One single typeface for everything — from 48px+ display headlines down to 11px micro labels. Tight headlines (`line-height: 1.0`) with negative tracking (-0.9px to -1.2px) styled like film titles. Zero shadows, minimal borders — an intentionally invisible interface. Cool-toned neutrals. Uppercase labels with positive letter-spacing (0.35px). An unusual font-weight of 450 for labels — precision typographic craft. Editorial magazine layout with mixed-size image grids.
* **Color Palette (use exactly these values):**
  * Primary: Black `#000000`, White `#ffffff`, Dark `#1a1a1a`, Cool Cloud `#e9ecf2`
  * Secondary: Charcoal `#404040`, Cool Slate `#767d88`, Mid Slate `#7d848e`, Border `#27272a`

---

## 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First Architecture & Zero Inline CSS**
* No `style="..."` attributes anywhere in the HTML. All styling lives in `style.css`, targeted exclusively via class/ID selectors.
* HTML must remain semantic and style-agnostic — restyling the entire page must only require editing the CSS file, never the markup.

**2.2 CSS Variables & Theme Tokens**
Store every visual token in `:root` and theme classes:
* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Dark theme (cinematic default):** `--bg-primary: #000000`, `--bg-secondary: #1a1a1a`, `--text-primary: #ffffff`, `--text-secondary: #767d88` (muted: `#7d848e`), `--border-default: #27272a`, `--primary: #ffffff` (inverted white button carrying black text).
* **Light theme:** `--bg-primary: #e9ecf2` (Cool Cloud — never pure white), `--bg-secondary: #fefefe`, `--text-primary: #000000`, `--text-secondary: #404040`, muted `#767d88` (uppercase/large text only), `--border-default: rgba(0,0,0,0.15)`, `--primary: #000000`.
* **Functional semantic colors** (outside the brand palette, kept cool/desaturated): `--text-error: #e5484d`, `--border-error`, `--text-success: #30a46c`, `--border-success`.
* **Contrast pairing:** every light background token must pair with a dark text token and every dark background token with a light text token — enforced in both themes, not just the default.
* **Radius:** `--radius-sm: 4px`, `--radius-md: 4px` (functional: buttons, inputs, cards, imagery), `--radius-lg: 16px` (alerts/modals only).
* **Shadows:** define `--shadow-sm` and `--shadow-md` but resolve both to `none` — explicit theme exception; elevation is achieved only through 1px borders and background shifts.
* **Spacing & transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent layered-component conflicts.

**2.3 Mandatory Dark Mode**
* Both full light and full dark themes are required. Provide dark tokens under a `.dark` class selector AND an `@media (prefers-color-scheme: dark)` fallback; also set the `color-scheme` property so native controls match.
* First visit follows `prefers-color-scheme`; when no preference is expressed, default to dark (the cinematic identity). Persist the user's choice in `localStorage` under a named key.
* Include a visible toggle in the header using Material Symbols `dark_mode`/`light_mode`, with correct `aria-pressed` and `aria-label` state. Switching themes must never require HTML restructuring.

**2.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified (allowed exception: `stretch` on mixed-size image-grid cells to preserve aspect ratios).
* Mixed-size editorial grids must be built with differing `flex-grow`/`flex-basis` values on siblings, collapsing to a single column below 768px. No horizontal scrolling at any viewport width.

**2.5 Framework Default**
* Use Tailwind CSS (CDN or compiled) or clean custom CSS driven by Tailwind's `@layer`/`@apply` directives. All utility classes must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.input-group`).

**2.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Google Fonts only. **Exception clause:** the source specification names `abcNormal`, a commercial typeface not available on Google Fonts — keep the Google Fonts rule and load **Inter (variable)** from Google Fonts as the single approved substitute; do not load `abcNormal` or any non-Google-Fonts typeface. The source's `system-ui` fallback is likewise overridden by Inter.
* **Single typeface for everything:** `--font-base: 'Inter', sans-serif` — from display to micro labels; no secondary font at any size.
* **Type scale:** Display XL `clamp(48px, 9vw, 96px)`, `line-height: 1.0`, `letter-spacing: -1.2px`, weight 500; section titles 32–40px, `letter-spacing: -0.9px`; body 16px, `line-height: 1.6`, `letter-spacing: 0`; micro labels 11px, uppercase, `letter-spacing: 0.35px`, weight 450 (via the variable font axis).
* **Icons:** Google Material Symbols (Outlined) only — inline SVGs and local icon files are forbidden. Use icons sparingly; the interface is intentionally invisible.

---

## 3. COMPONENT DESIGN SPECIFICATIONS

**3.1 Buttons** — every state styled via CSS classes:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum 44×44px touch target, radius 4px, zero shadows. Primary = inverted (white bg/black text in dark mode; black bg/white text in light mode). Secondary = transparent with 1px `--border-default`.
* **Hover:** background/brightness shift with `cursor: pointer` — never a shadow.
* **Focus:** distinct 2px `outline` in a high-contrast token with offset — never `box-shadow` (zero-shadow theme).
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** disables interaction and double-clicks; renders a CSS spinner or animated Material Symbol without changing button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback states driven by `--text-success` / `--text-error`.
* **`.btn-danger`:** must be visually distinct in both light and dark themes (define it even if unused on this page).

**3.2 Cards** (feature, testimonial, and pricing cards):
* **Default:** flexible Flexbox layout, `--bg-secondary` surface, 1px `--border-default`, radius 4px, zero shadow.
* **Hover:** border-color shift toward `--text-secondary` and/or subtle `transform: translateY(-2px)` — no shadow.
* **Focus-within:** card border highlights when a child link/button receives focus.
* **Loading:** CSS-only shimmer skeleton that prevents layout jumps.
* **Empty state:** structured fallback with a Material Symbol and clear guidance text.
* **Pricing tiers:** the featured middle tier is inverted (background `--primary`, text `--bg-primary`) with an uppercase micro label "Most popular" — distinct without shadows.

**3.3 Forms & Inputs** (newsletter email capture):
* **States:** empty, focused (outline ring), filled, valid (success border + icon), invalid (error border, error text, error icon), disabled, read-only.
* **Structure:** flex container wrapping a label, the input, and a dedicated error-feedback container with `aria-live="polite"`.
* Radius 4px, 1px border, zero shadow.

**3.4 Modal** ("Watch the film" video modal triggered from the hero):
* **States:** opening, open, loading, success/error, closing — all animated via CSS transitions.
* **UX:** centered flex container (`align-items: center`), rgba(0,0,0,0.7) backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click. Radius `--radius-lg` (16px).

**3.5 FAQ Accordion:**
* Semantic pattern: `<button aria-expanded aria-controls>` + panel region (or `<details>`/`<summary>`).
* **States:** collapsed, expanded (smooth CSS height animation), hover, focus-visible ring.
* Feedback via a rotating Material Symbol `expand_more` plus `aria-expanded` — never color alone.

---

## 4. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATION

**Global:** sticky minimal header — wordmark set in the uppercase label style, nav anchor links (smooth scroll, disabled under reduced motion), theme toggle, header CTA; 1px bottom border; backdrop blur allowed. Editorial container max-width 1200px. Every section opens with an uppercase micro-label eyebrow (11px / 0.35px / weight 450) using editorial numbering ("01 — Features"). **All user-facing copy in English** — real, product-appropriate copy for an AI video platform; lorem ipsum is prohibited. Imagery: `https://picsum.photos` with seeds and explicit dimensions, using `?grayscale` for cool cinematic monochrome consistency, with descriptive alt text.

**4.1 Hero:** Full-viewport, full-bleed photograph (1920×1080) as the primary UI element, with a dark gradient scrim for legibility and white text in both themes. Film-title headline at Display XL (`line-height: 1.0`, -1.2px tracking). Two CTAs: primary "Start creating" and secondary "Watch the film" (Material Symbol `play_arrow`, opens the modal). Content anchored bottom-left, editorial style.

**4.2 Features (3 cards):** Mixed-size editorial image grid — the first card spans wider (larger flex-basis) than the other two. Each card: image, uppercase micro label, tight title, one-line body. Topics: text-to-video generation, motion brush, camera control.

**4.3 How It Works (3 steps):** Flex row collapsing to a column on mobile. Oversized numerals (01/02/03) in Cool Slate display type, step title, and description per step.

**4.4 Testimonials:** Mixed-size editorial grid — one featured large quote plus two smaller ones. Quotes set in 24–32px tight type; authors rendered as uppercase micro labels with roles; optional grayscale avatars.

**4.5 Pricing (3 tiers):** Free / Pro / Unlimited with real feature lists (Material Symbol `check`), display-size prices, and a CTA per tier; featured middle tier inverted per 3.2.

**4.6 FAQ:** 5–6 real questions about the AI video platform using the accordion pattern from 3.5.

**4.7 Final CTA:** Full-bleed image band or bold typographic block; Display headline; inline-flex email capture (input + button) implementing all form states from 3.3 with visible success/error feedback.

**4.8 Footer:** Secondary link columns (Product, Company, Resources, Legal), wordmark, copyright line, and small print. Links in `--text-secondary`, transitioning to `--text-primary` on hover.

---

## 5. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` sizing and breakpoints with zero horizontal overflow.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion`.
* **Accessibility:** AA contrast in both themes (Cool Slate `#767d88` on Black ≈ 5:1; Charcoal `#404040` on Cool Cloud passes); never rely on color alone to communicate state; semantic HTML5; correct ARIA roles/labels on the accordion, modal, and theme toggle; logical DOM/focus order; full keyboard operability; `aria-live` regions for form feedback and dynamic states.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Zero shadows everywhere:** elevation via borders and background shifts only.
* **Destructive actions:** `.btn-danger` visually distinct in both light and dark themes.

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **File structure:** separate `index.html`, `style.css`, and `script.js`. No inline styles; no inline `<script>` blocks beyond a single deferred `script.js` reference.
* **Naming convention:** BEM (`block__element--modifier`) applied consistently across the entire deliverable — never mix conventions.
* **No unrequested placeholders:** write real English copy for every label, heading, and body text; use picsum imagery only for photographic content.
* **Completeness:** all 8 sections, every component state, both themes, theme persistence, and all interactions fully functional on the first attempt.