# Nocturne Hummingbird: Replication Prompt

Optimized for AI code builders (Claude, Cursor, v0). Paste the block below, then attach or link the artwork asset.

```
Build a dark, painterly newsletter hero as a single self-contained HTML file (inline CSS, no frameworks, no JS). The mood is "nocturne natural-history plate": a pure black canvas with a single glowing hummingbird illustration filling the right two-thirds edge to edge, like a specimen plate, and quiet typography floating over the empty black left third.

ARTWORK
- Generate the hero image first, in landscape: "Painterly digital illustration on a pure near-black background: a single hummingbird hovering in three-quarter view, wings raised high and spread wide in a tall V above its body, dominating the right two-thirds of the frame with wingtips near the top edge and tail feathers reaching the bottom. Wings rendered as large translucent glowing membranes of coral pink and warm peach light, like stained glass lit from within, delicate visible feather veins, soft motion blur at the tips. Dark charcoal body with a subtle emerald-green iridescent sheen on the chest, long slender needle beak pointing upward, one tiny pale glowing eye. Heavy analog film grain, soft bloom halo around the wings, cinematic nocturne mood. The left third of the frame stays vast empty black for typography. No text." Export as JPG and reference it from assets/.
- Display full-bleed: an absolute inset-0 stage background with the image at width/height 100%, object-fit: cover, object-position ~68% 50% so the bird stays anchored right. The image runs edge to edge with no masks or rounded corners.
- Two scrims keep type readable without dimming the bird: a left-to-right linear gradient (rgba(2,2,2,0.78) at the left edge → 0.45 at 30% → 0.08 at 55% → transparent by 70%) and a top-to-bottom gradient (0.35 at top → transparent by 22% → transparent until 62% → 0.82 at the bottom edge, protecting the stats dock).
- Plate caption: "NOCTURNE · PLATE 142" set vertically (writing-mode: vertical-rl), 11px, uppercase, letter-spacing 0.24em, color rgba(244,241,236,0.34), floating at the right edge just above the stats dock.

PAGE & PALETTE
- Background: #020202 pure black. Primary text: #f4f1ec warm off-white. Dim text: rgba(244,241,236,0.6). Faint: rgba(244,241,236,0.42).
- Accents: coral #ff8a6b and peach #ffb39c, used sparingly (kicker rule, serif headline line, stat symbols, logo squares).

TYPOGRAPHY
- Google Fonts: "Inter Tight" (400/500/600) for UI and headline roman; "Instrument Serif" italic for display accents and stat values.
- Kicker: 11.5px, weight 500, uppercase, letter-spacing 0.32em, faint white, preceded by a 34px × 1px coral rule.
- Headline: two lines. Line 1 "The ideas worth" — Inter Tight 600, clamp(46px, 5.6vw, 80px), line-height 1.03, letter-spacing -0.034em. Line 2 "your inbox." — Instrument Serif italic, same size, peach color, on its own block line. The headline deliberately overlaps the wing's dark left edge.
- Subhead: 16.5px, line-height 1.68, dim white, max-width 470px.

LAYOUT (desktop)
- The stage is a full-viewport flex column (min-height 100svh, overflow hidden): nav on top, hero copy in the middle-left, stats dock at the bottom.
- Nav: wordmark left ("Dispatch" + 2×2 grid SVG logo — rounded squares, two off-white, two coral at reduced opacity). Right: "Login" text link + "Get started" off-white pill button (dark text). Padding 26px, fluid horizontal clamp(20px, 4.5vw, 56px).
- Hero copy: left-aligned, vertically centered, max-width ~560px, floating over the scrimmed black left third. Kicker, headline, subhead, signup, microcopy.
- Signup form: max-width 470px pill, frosted glass (rgba(255,255,255,0.05) background, 1px rgba(244,241,236,0.14) border, 14px backdrop blur with -webkit prefix), 6px padding. Transparent input (placeholder "you@example.com", faint placeholder color) + off-white "Subscribe" pill button (dark text, weight 600). Below: microcopy "Free forever. Unsubscribe anytime." at 12.5px faint, with "Free forever." set in Instrument Serif italic peach.
- Stats dock: bottom of the stage, full width inside the side margins, 4 equal columns with a 1px top border (rgba(244,241,236,0.14)) and hairline left dividers between columns. Value in Instrument Serif italic ~clamp(28px, 2.6vw, 38px); the "+" and "%" symbols rendered in Inter Tight 600 at 0.62em, coral, raised 0.34em. Label 14px semibold off-white; note 12.5px faint one-liner beneath.
  Stats: "24,000+ / Subscribers / Readers who open, finish, and forward." · "Weekly / Every Friday / One email, same time. Predictable by design." · "5 min / Average read / Long enough to matter. Short enough to finish." · "100% / Free, no ads / No sponsors, no tracking pixels. Just the ideas."

EXACT COPY (never alter)
- Kicker: "The Weekly Dispatch · Issue N°142"
- Headline: "The ideas worth" / "your inbox."
- 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."
- Placeholder: "you@example.com" · Button: "Subscribe" · Microcopy: "Free forever. Unsubscribe anytime."

RESPONSIVE
- Below 980px: artwork object-position shifts to ~62% 30%; stats wrap to 2 columns.
- Below 560px: signup stacks vertically (24px radius, full-width button); stats stack full-width; nav padding tightens.
- No horizontal scroll at any width.

DETAILS
- Buttons: hover lift translateY(-1px), brighten to pure white.
- Text selection: coral background, dark text.
- Keep generous black space — the emptiness is the design. Do not add cards, page-wide gradients beyond the two scrims, or extra sections.
```