# Graffiti Editorial: Replication Prompt

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

```
Build a graffiti-editorial newsletter hero as a single self-contained HTML file (inline CSS, no frameworks, no JS). The mood is "CMYK street-art zine": a full-bleed spray-paint splatter scene with vintage print illustrations, per-letter multicolor display type, and hard offset shadows on every solid block.

ARTWORK
- Generate the scene first, landscape: "Editorial collage illustration on warm off-white paper texture: vintage etching-style print illustrations of an open book, a fountain pen, a feather quill, a typewriter, and a hand holding a pen, arranged across the frame, overlaid with energetic spray-paint splatter in bright yellow, cyan blue, lime green, and hot pink, CMYK print aesthetic, halftone dots, paint drips, high energy street-art poster, large calmer paper area in the center-left for typography. No text." Export as JPG and reference from assets/.
- Display fixed full-bleed (position: fixed, inset 0), object-fit: cover, centered. On mobile switch to absolute with object-position ~62% center.
- Add a "veil" overlay: a radial gradient (ellipse 70% 55% at 38% 40%) from rgba(20,20,20,0.34) to transparent, darkening only the copy zone so the artwork stays loud everywhere else.

PALETTE
- Paper cream #f5f2ea, charcoal #171717, yellow #ffd23f, pink #e84393, lime #a8e10c, cyan-blue #3ec5ff.
- Every solid UI block (kicker strip, signup bar, stats bar) gets a hard offset box-shadow (3-6px, no blur, rgba(10,10,10,0.25-0.3)) and a slight rotation (-0.6 to -1deg). That tilt-plus-shadow combo is the design's personality.

TYPOGRAPHY
- Google Fonts: "Space Grotesk" (700) for display and UI, "Inter" (400/600) for body.
- Wordmark: "Dispatch" set letter by letter, each letter a different CMYK color (yellow, blue, pink, lime, rotating).
- Kicker: "The Weekly Dispatch · Issue N°142" on a yellow tape strip — Space Grotesk 700, 12px, uppercase, letter-spacing 0.22em, charcoal text on #ffd23f, rotated -1deg, hard shadow.
- Headline: uppercase Space Grotesk 700, clamp(44px, 6.4vw, 96px), line-height 1.0, letter-spacing -0.02em, max-width 13ch. "THE IDEAS" in cream; "WORTH YOUR" and "INBOX." with individual letters alternating yellow/blue/pink/lime. Multicolor letters get a dark glow text-shadow stack (0 0 3px, 0 0 8px, 0 2px 14px in layered rgba(10,10,10,...)) so they read over the splatter.
- Subhead: Inter 15px, line-height 1.7, cream, max-width 460px, dark text-shadow for readability.

LAYOUT
- Nav: multicolor wordmark left, center links (Issues / Topics / About) in cream, right "Get started" as a charcoal block button with hard shadow.
- Hero content: left-aligned column, padding ~5vh top, min-height 88vh.
- Signup: charcoal bar (rotated -0.8deg, hard shadow) containing a transparent input (placeholder "you@example.com", cream placeholder) and a hot-pink uppercase "Subscribe" button (Space Grotesk 700, scales to 1.04 on hover). Microcopy below: "Free forever. Unsubscribe anytime." at 12.5px, cream with text-shadow.
- Arm words: "Ideas / Essays / Stories / Notes" set vertical (writing-mode: vertical-rl), rotated ~38deg, positioned over the arm illustration at right, letters colored yellow/blue/pink/lime. Hide below 900px.
- Stats: a charcoal bar (rotated -0.6deg, hard shadow) with 4 flex columns separated by 2px cream dividers. Values uppercase Space Grotesk 700, clamp(20px, 2vw, 28px), colored per position: yellow "24,000+", blue "Weekly", pink "5 min", lime "100%". Labels 11px uppercase, 75% cream.

EXACT COPY (never alter)
- Kicker: "The Weekly Dispatch · Issue N°142"
- Headline: "The ideas worth your inbox." (split and colored as above)
- 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."
- Stats: "24,000+ / Subscribers", "Weekly / Every Friday", "5 min / Average read", "100% / Free, no ads".

RESPONSIVE
- Below 900px: stats wrap to 2 columns, arm-words hidden, scene repositions.
- Below 560px: signup stacks vertically (full-width pink button), stats stack full-width without dividers.
- No horizontal scroll at any width.
```