# Hero 16 — Generative Studio · Replication Prompt

Paste into Claude, Cursor, or v0:

```
Build a technical generative-art newsletter hero as a single self-contained HTML file (inline CSS, no frameworks). The mood is "design studio lab notes": a full-bleed monochrome particle-dispersion render covers the entire viewport edge-to-edge, a faint technical grid with crosshair marks overlays it, and the typography is set in Inter with IBM Plex Mono annotations. One accent only: a lime highlight (#d9f24f) behind "your inbox." in the headline.

BACKDROP (single full-bleed image)
- Page background fallback: #ececea warm light gray. The image is fixed full-bleed, object-fit cover, centered (68% 30% on mobile so the particle form stays visible behind the text column).
- Image generation prompt: "Monochrome generative art hero background for a technical design studio website. A dense swarm of thousands of tiny black particles and fine dots forming one abstract organic blob shape, like a murmuration or dispersion simulation, positioned in the right third of the frame, particles scattering and dissolving outward at the edges of the blob. Clean very light warm-gray background (#ECECEA), flat and even, no gradients, no object shadows. The left half of the frame is almost completely empty negative space for text overlay. Minimal, precise, technical aesthetic, high detail, print-quality generative art, black and light gray only, no other colors. Wide 16:9 composition."
- The particle form must sit right-of-center with clean negative space left — the text column lives in that empty zone. Full bleed means the image touches all four viewport edges; no card, no frame, no rounded corners.

TYPE & COLOR
- Fonts via Google Fonts: "Inter" (400/500/600/700) for wordmark, headline, body, stats numbers; "IBM Plex Mono" (400/500) for kickers, nav links, captions, microcopy, stat labels.
- Ink: #111311. Dim ink: rgba(17,19,17,0.64). Faint ink: rgba(17,19,17,0.42). Hairlines: rgba(17,19,17,0.14).
- Single accent: #d9f24f lime — used ONLY for the headline highlight, the wordmark's small square, and the Subscribe hover text. Restraint is the point.

LAYOUT
- Technical grid overlay (fixed, above the image, below content): three vertical hairlines at 25%/50%/75%, plus small 13px crosshair "+" marks along the top. Subtle — 55% opacity max.
- Nav (fixed top, 26px 40px): left wordmark "Dispatch" (Inter 600, 15px) prefixed by a 9px lime square with a 1px ink border; right mono links "Index / Manifesto / Archive" (11px, uppercase, 0.14em tracking, dim ink) plus a black pill "Subscribe" CTA (white text; hover turns text lime).
- Hero (full viewport, left-aligned, padding 120px 40px 140px, content max-width 640px):
  - Kicker: "The Weekly Dispatch · Issue N°142" — IBM Plex Mono 11px, uppercase, 0.22em tracking, dim ink, prefixed by a 26px ink rule.
  - Headline: "The ideas worth" / "your inbox." — Inter 700, clamp(46px, 6.2vw, 88px), line-height 1.0, letter-spacing -0.035em. "your inbox." carries the lime highlight (background #d9f24f, 0.12em horizontal padding, box-decoration-break: clone).
  - Subhead: "One email every Friday. Big ideas, clear thinking, and zero noise — for 24,000 readers who like their insights sharp and their inboxes calm." — Inter 15px/1.72, dim ink, max-width 470px.
  - Signup: left-aligned pill form (max-width 470px, rgba(255,255,255,0.72) background, 1px solid ink border, 8px backdrop blur); transparent input (placeholder "you@example.com", faint ink); black "Subscribe" pill button (Inter 600; hover lifts 1px and turns text lime).
  - Microcopy: "Free forever. Unsubscribe anytime." — IBM Plex Mono 10.5px, 0.08em tracking, faint ink.
- Figure caption (fixed, right edge, vertically centered, rotated vertical-rl): "Fig. 01 — Dispersion field · N = 24,000" — IBM Plex Mono 10px, uppercase, 0.3em tracking, dim ink. Hidden below 900px.
- Stats bar (fixed bottom, 4-column grid, hairline top border, soft paper-gradient backing so it stays readable over the image):
  "24,000+ / Subscribers" · "Weekly / Every Friday" · "5 min / Average read" · "100% / Free, no ads"
  Numbers: Inter 600, 15px. Labels: IBM Plex Mono 10px, uppercase, 0.18em tracking, dim ink. Columns 2–4 get a hairline left border with 26px padding.

RESPONSIVE
- Below 900px: hide the vertical figure caption.
- Below 760px: nav condenses to wordmark + Subscribe CTA; hero bottom-aligns with 22px gutters; scene repositions to 68% 30%; grid drops to the single center hairline; stats become a 2×2 grid with a stronger paper gradient.
- Below 560px: signup stacks vertically (22px radius, full-width button).

DETAILS
- No cards, no shadows, no rounded media — the render is the page. UI floats on hairlines and mono type.
- Exactly one lime element per zone: wordmark square, headline highlight, button hover. Never more.
- Keep the left half quiet: the particle form does the talking on the right.
```