Prompt Lab
Plain-text version
Paste into Claude, v0, Lovable, Framer, Webflow, or Beaver Builder AI to build this page for a client's newsletter.
Build a single-page landing page for a creator's email newsletter. It sells a free subscription by showing a sample issue inline. Register: expressive, a quiet evening edition on a dark cool ground. It must work as a real page a client could ship.
Palette: slate ground #161C2C; panels #1E2638 and #252F46; warm off-white text #ECE5DA; muted text #B9BDCB; one rose madder accent #E4577F for the button, labels, and link underlines; a softer rose #EDA9BD for italic text; pale ochre #D8B26C for small header keys only.
Type: Libre Caslon Display for the headline and every subject line; Literata for body text at 19px, line height 1.7, lines of 60 to 70 characters; Martian Mono at 12 to 13px uppercase for header keys only (From, Sent, To, Subject); other kickers are small Literata italic. No other faces.
Layout:
1. Top bar: newsletter name left, three text links right.
2. Hero on a 3fr/2fr grid. Left: a small italic kicker, a Caslon headline of about 15 characters per line, a two-sentence deck. Right: a subscribe card that doubles as the masthead: a round accent seal holding the issue number, the newsletter name and one-line promise, three label rows (Issue, Sent, Reading time), then one filled button to subscribe and one outlined link. Use real links (RSS, a signup URL); do not fake an email input.
3. A full-width illustration under the hero with a two-part caption.
4. An "about this letter" block on the same 3fr/2fr grid: a short explanation left, a hairline list of what each issue contains right, set in the display face.
5. Sample sections as letter panels, weighted like an inbox: the lead letter on a lighter panel with a larger subject, the last one a quiet outlined brief. Each panel opens with an email header: a row of label/value pairs (From, Sent, To) with a small filled category tag at the far right, then a Subject row where the subject line is the h2. The panel body is a 3fr/2fr grid: hairline-separated items (h3 plus one or two sentences with one inline link) on the left, and on the right a recessed margin list of short named facts.
6. One italic pullquote between panels, indented to the header-key column.
7. A "borrow this" or "why subscribe" block with two label rows and a square illustration.
8. A "plain-text version" panel with a header bar for any long copy block.
9. Footer: numbered sources, previous/next links, colophon.
Components: subscribe card, header rows, subject-line h2, letter panels, margin lists, category tags with solid fills.
Guardrails: body at least 18px; WCAG AA contrast on every label against its real surface; one shadow only (the subscribe card); radius 12 to 14px on panels, 8px on buttons, 4px on tags, no pill shapes; no neon, glow, or gradients on the dark ground; no cyan on black; no accent left-border stripes; no fake inbox chrome (unread counts, star icons, dead reply buttons); hover and focus states on real links with 150ms easing and a prefers-reduced-motion guard. Illustrations: flat overhead gouache diagrams on the same slate, no legible text inside images. On mobile, stack every grid to one column and let the header rows wrap into two columns.