## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/runwayml-com/e724fd81-b6a6-43a2-b9ac-10cfe806f6fa-1789074862354-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/runwayml-com/e724fd81-b6a6-43a2-b9ac-10cfe806f6fa-1789073694936.webp
- Design on Kage: https://kage.design/designs/runwayml-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type family, product screenshots or video stills). Wait for the answers. Everything below is applied to *their* product, not to the reference site — the reference is only the design language.

## Page structure
Build a single scrolling landing page with these sections, top to bottom:

1. **Announcement banner** — full-width strip (~40px) in a subtle indigo-to-purple gradient, one line of small white event/announcement text left-of-centre, a small white pill button with a chevron on the right.
2. **Navigation bar** — white, sticky. Lowercase wordmark left; 6–7 dropdown menu items centre-left in 13px text; right side a text link and a black rounded-rectangle CTA button.
3. **Hero** — a full-width cinematic still or muted video loop inset from the page edges inside a large-radius (~16px) container, no text centring: headline top-left in 52–60px white display type, a 3–4 line white paragraph below at ~15px, and one white filled CTA button lower-left. Copy says one sentence about the mission, nothing more.
4. **Partner strip** — white section, one centred gray caption line ("We partner with the world's leading organizations…") and a single row of 6–7 monochrome logos, evenly spaced, generous vertical padding.
5. **Platform trio** — a very large centred two-line statement headline (~44px, tight tracking), then three equal columns. Each column: rounded cinematic image on top, bold ~20px column title, a bold one-sentence lede, a small gray 3–5 line paragraph, and a row of 2–3 buttons (one black filled, the rest light-gray filled or outline). Optional 11px legal footnote under the first column.
6. **Tabbed showcase** — a horizontal tab bar of three product/section names with an animated underline on the active one, then a wide light-bordered card: left rail of feature titles (active one black and bold, the rest gray, scroll- or click-synced), right side a large rounded video/image panel. This is the page's only interactive proof section.
7. **Statement band** — full-bleed blurred organic gradient background (warm olive/green tones work well; pick a hue from the brand). Left column: small uppercase-ish eyebrow label, a large ~28–32px white multi-line statement paragraph, and an outlined "Learn more" button. Right column: three stacked entries, each with title, gray description and a north-east arrow, separated by 1px white/20% hairlines.
8. **News grid** — heading "See the latest from {brand}" in ~32px, then a 2×2 grid of story cards: small rounded thumbnail image on the left (~40% width), bold headline, 2–4 line gray excerpt, and a "Learn more →" text link on the right.
9. **Footer** — black, dense. Two rows of four link groups, each with a tiny gray group label and 5–8 white/gray 13px links. Bottom bar: wordmark left, one-line legal text with inline links, social icons right.

## Design language
- **Hierarchy by scale and weight, not decoration.** One grotesque sans family everywhere; display sizes 44–60px with -0.02em tracking, column titles ~20px bold, body 14–15px regular in gray (#7A7A7A), footnotes 11px. Colour does almost no work — weight and size do.
- **Monochrome base, immersive bands for colour.** Canvas #FFFFFF, ink #0F0F0F, secondary gray #7A7A7A, hairlines #E6E6E6. Brand colour appears only as atmosphere: a gradient announcement strip (#5A5BD8 → #7A3FD0) and full-bleed blurred image bands (olive #5C6B33 / #8A9450 tones). Never tint buttons, cards or headings with brand colour.
- **Rhythm: airy → dense → immersive.** Statements sit in lots of whitespace (100px+ vertical padding); grids and the footer tighten up; image bands have copy pinned to the left edge with generous inset. Each section makes exactly one claim with one proof image and one CTA.
- **Flat and shadow-free.** Use 1px hairline borders (#E6E6E6) to define cards and dividers; no drop shadows, no gradients on UI chrome, no coloured fills.
- **Radius scale.** Media and cards 12–16px, buttons 6–8px, pills (fully rounded) reserved for the utility banner button and tiny chips.
- **Button tiers.** 1) Black filled (#111111, white text) for primary actions; 2) light-gray filled (#F2F2F2, black text) for secondary; 3) white filled or 1px outline with white text when sitting on imagery.
- **Motion is quiet.** Autoplaying muted video loops in hero and showcase; tab underline slides and the panel swaps on click; links underline or nudge an arrow on hover. No parallax, no scroll-jacking.
- **Copy style.** Short, declarative, factual. Headlines are statements of what the thing *is*; descriptions stay under ~40 words; CTAs are 2–3 words.

## Never
- Do not use the Runway name, lowercase "runway" wordmark, tagline, or any of its copy (e.g. "Building Real-World Intelligence", "Real-World Intelligence models").
- Do not reuse its partner logos, model names (GWM-1, Gen-4.5, Aleph), research text, news items, or its photography/video stills — use the user's own assets or neutral placeholders.
- Do not copy the specific illustration/icon set or the exact section claims; rebuild the structure with the user's product, audience and brand, and never present the result as Runway.