# Newsletter Landing Template — Research Brief

> **Assumption:** A single-page marketing site for a personal or indie email newsletter where the email IS the product — not a pre-launch waitlist (Day 3) or a blog homepage (Day 5). Designed for solo writers, curators, and niche publishers who self-host their subscribe flow via Buttondown.
>
> **Fictional newsletter:** **Marginalia** — a weekly newsletter about overlooked corners of book history, used bookstores, and ephemeral printed objects (broadsheets, pamphlets, ticket stubs, library stamps). Niche enough to be memorable. Broad enough to write plausible sample issue teasers.

---

## Audience & primary CTA

- **Who visits:** Curious readers who stumbled on an issue or a link share; people who follow the author on social media; potential sponsors evaluating reach and fit.
- **Primary CTA:** Subscribe via Buttondown embed (email input + submit inline in the hero). One action, zero friction.
- **Secondary CTAs:** "Read a past issue" (links to the Buttondown public archive); "Follow on Mastodon / follow on Bluesky" in the footer.

---

## Reference sites (real businesses)

- https://www.densediscovery.com — Light minimal, "38,000+ global readers" + issue count as social proof, testimonials block, content-category breakdown, issue screenshot gallery, values section (indie / ethical hosting). Gold standard for indie newsletter landing structure.
- https://craigmod.com/roden/ — Pure editorial restraint; chronological archive of 113 issues; text-only subscribe prompt; no imagery. Proves that longevity and a complete archive are themselves compelling social proof.
- https://robinsloan.com — Literary/author register; "every 29½ days" cadence used as a memorable personality hook rather than hidden; footnote noting no tracking; layered content directory below the subscribe call.
- https://kottke.org/newsletter/ — Minimal form + casual anti-spam copy ("we're not gonna spam you"); playful multi-color logo; no pressure register. Demonstrates that tone and voice can carry a plain page.
- https://lennysnewsletter.com — Substack-hosted; 1.2M subscribers leads the page; profile photo; zero sample issues shown. Proves subscriber scale is the dominant signal — but also shows the ceiling of generic Substack pages.
- https://readtangle.com — Split red/blue hero background as editorial position signal; weekly new-subscriber count; mixed source testimonials. Shows that typography and color can encode the newsletter's POV before reading a word.
- https://thepublishpress.com — Content preview: actual newsletter screenshot embedded above the fold. Converts curiosity into trust before asking for an email.

---

## Existing templates surveyed

- https://astro.build/themes/details/newsletter-kit/ — Paid; includes Hero, BlogGrid, EmailSubscriptionForm, Subscribe page, author pages. Strengths: structured Markdown content, multiple pages. Weaknesses: no palette/typography documented; no issue-archive card pattern; no schema; no Buttondown-specific integration; paid license.
- https://github.com/surjithctly/astroship — Free, Astro + Tailwind. General SaaS/startup landing. No newsletter-specific sections (no issue cards, no cadence signal, no author bio pattern). Wrong form factor.
- Vercel Astro templates directory — General-purpose starters. None ship a newsletter-specific section order: hero → value prop → sample issues → author → testimonials → FAQ → CTA.
- ThemeForest newsletter templates — 800+ templates; all target HTML email layout (inbox rendering), not marketing landing pages. Different category entirely.
- **Saturated pattern:** Email input on a plain light background with a single testimonial quote. Every generic ConvertKit landing page and free Substack page looks exactly like this. No issue archive, no author presence, no cadence signal, no schema.
- **Missing in free tier:** A free, MIT-licensed, GH Pages-ready Astro newsletter landing page with: past-issue cards, cadence + issue-count signal, Buttondown embed with Substack fallback pattern, Periodical schema, variable serif + sans pairing, paper-register palette distinct from SaaS templates.

---

## Must-have sections (in order)

1. **Hero** — Newsletter name + one-sentence positioning + cadence line ("Every Sunday since 2022") + inline subscribe form (email input + button). No countdown. No hero image.
2. **What you get** — Three-item value prop (what topics, what format, what frequency + length). Icon or typographic list, not cards.
3. **Sample issues** — Four past-issue cards: title + date + 1–2 sentence teaser + link to public archive URL. Grid 2×2 desktop, single column mobile. This is the section that converts.
4. **Issue counter bar** — A subtle full-width band: "84 issues · Every Sunday · ~6 min read". Static, updated at deploy.
5. **Author / About** — Name, 2-sentence bio, avatar (SVG geometric, no photo required), one external link (personal site or Mastodon). Signals a real person wrote this.
6. **Reader quotes** — Three short pull-quote testimonials. No star ratings, no company logos — this is a literary newsletter, not a SaaS product.
7. **Final subscribe CTA** — Repeat of the email input form; a secondary "Read the archive instead →" text link for the not-yet-ready visitor.
8. **Footer** — Issue count, founding year, license note, Buttondown link, Mastodon/Bluesky handle, unsubscribe policy note ("One click to leave, no hard feelings").

### Not building

- **Paid-tier UI / Stripe paywall:** Requires server-side charge handling. Out of scope for a static template. Writers who need paid tiers use Buttondown's native paid tier or Substack.
- **Referral / leaderboard system (SparkLoop, Beehiiv):** Server-side referral tracking. Not static-compatible. Not MIT-licensable without a third-party dependency.
- **Threaded comments:** Requires auth and persistent state. Linked issues live on the email platform's hosted archive; comments belong there.
- **Multi-newsletter switcher:** One template, one newsletter. The Atlantic's multi-newsletter directory pattern is out of scope.
- **Live subscriber counter via API:** Buttondown's API is server-side. Static substitute: manually updated `config.ts` field — `subscriberCount: 4200`.

---

## Design conventions

- **Typography:** **Spectral** (Google Fonts, variable, 7 weights, transitional serif optimized for screen reading) for headings, issue card titles, pull quotes, and the newsletter name logotype. **Work Sans** (Google Fonts, variable) for body copy, UI labels, form elements, and the nav. Both are free, variable, and unused in Days 1–10. The pairing reads as "well-edited written work" — Spectral carries the literary weight; Work Sans keeps UI legible without decoration.
- **Color palette tendency:** **Warm cream base** (`#FAF7F2`) with **oxblood/deep maroon accent** (`#881337` — Tailwind `rose-900`). Secondary text in warm charcoal (`#3D2B2B`). Muted warm-gray dividers. No dark mode (paper register — see below). Accent is distinct from Day 5's forest green, Day 7's magenta, Day 4's terracotta, Day 8's burnt orange. The oxblood reads as ink on paper, not tech.
- **Imagery style:** No photography. Decorative dropped-capital initials (CSS only) on the sample-issue cards. A subtle halftone dot-grid texture on the issue-counter band (pure CSS `radial-gradient`, no image file). Optional: inline SVG bookplate mark in the author section. Zero external image dependencies.
- **Density:** Sparse editorial. Wide single-column layout with a narrow content column (~680px) for all text sections. The sample-issue grid breaks to two columns. Generous leading (1.75) in body copy. The page breathes — it signals "this is for reading, not scanning."
- **Light-default only:** Newsletter landing pages are overwhelmingly light-default (Dense Discovery, Craig Mod, Robin Sloan, Kottke, Lenny's). Dark mode would undercut the paper-and-ink register. No toggle.

---

## Trust signals to include

- Issue count + founding year in the hero subline ("84 issues · since 2022")
- Static subscriber count in the hero ("Read by 4,200 people")
- Three reader pull-quotes (no names required if fictional — attribute to "a reader in Berlin" etc. for plausible deniability in a template context)
- Sample issues section — actual content teasers are the strongest possible trust signal for a writing-focused newsletter
- Author section with real name, bio, and one verifiable external link
- Buttondown trust badge or "delivered via Buttondown" footer note — signals the email is not spam-farmed
- Founding year in footer ("Est. 2022") — longevity signal for a writing product

---

## SEO / schema.org

- **Type:** `Periodical` (subtype of `CreativeWork`) — the closest schema.org type for a recurring publication. `Newsletter` is not a valid schema.org type. `Periodical` supports `name`, `issn` (omit if none), `publisher` (ref to `Person` or `Organization`), `url`, `description`, `inLanguage`.
- **Required properties:** `name` ("Marginalia"), `url`, `description`, `publisher` (`@type: Person`, `name`, `url`), `inLanguage` ("en")
- **Each sample issue card:** `Article` micro-schema with `headline`, `datePublished`, `url`, `author`
- **Suggested OG image direction:** Newsletter name in Spectral display weight on the cream base (`#FAF7F2`), with a faint halftone texture and a single oxblood rule below the title. Static committed `og-image.png`. 1200×630.

---

## Static-only fit

No concerns. All features are static-compatible:

- **Subscribe form:** Buttondown public form endpoint — plain `<form action="https://buttondown.email/api/emails/embed-subscribe/SLUG" method="post">`. No JS SDK. Zero runtime. Documented config swap to Mailchimp and ConvertKit action URLs in `config.ts`. Substack fallback: replace the form with a `<a href="https://SLUG.substack.com">` CTA button — one config boolean toggles this.
- **Sample issues:** Four static `content/issues/` MDX entries with `title`, `date`, `teaser`, `archiveUrl` frontmatter. `getStaticPaths` renders nothing — they're data-only, not pages. Rendered as cards in the landing page component.
- **Issue counter / subscriber count:** Two fields in `src/config.ts` — `issueCount: 84`, `subscriberCount: 4200`. Updated manually or via a build-time `fetch` to Buttondown's stats endpoint with a fallback default.
- **Reader quotes:** Static array in `src/data/testimonials.ts`. No CMS, no API.
- **Schema JSON-LD:** Emitted as `<script type="application/ld+json">` in `<head>` at build time.

---

## Differentiation — what we'll do better

1. **Sample-issue cards with archive links:** Free Substack pages show zero past content above the subscribe button. Our template's 2×2 issue grid converts curious readers who need to see the writing before committing.
2. **Spectral + Work Sans — unused in Days 1–10 and in every surveyed free template:** Immediately recognizable as a writing-register template, not a repainted SaaS starter.
3. **Oxblood on cream — unused in Days 1–10:** The paper-and-ink palette is editorially coherent, not decorative. Substack's default palette (white + black + Substack orange) and ConvertKit's templates (white + blue) look generic by comparison.
4. **Issue counter bar:** "84 issues · Every Sunday · ~6 min read" in a single typographic band. No other free template ships this. It is the single most efficient trust signal for an ongoing newsletter — it proves the writer shows up.
5. **Buttondown / Substack dual-mode config:** One boolean in `config.ts` switches between an embedded form and a "go to Substack" link. No other free template ships this two-mode pattern with documentation.
6. **`Periodical` schema:** No surveyed free newsletter template emits proper schema.org markup. Search engines understand what the page is about; the newsletter archive URL gets `Article` markup on each card.
7. **GH Pages one-click deploy, MIT license, zero paid dependencies:** Substack hosted pages require Substack. ConvertKit landing pages require ConvertKit. Beehiiv templates require Beehiiv. Our template is owned by the author, lives in their repo, and costs nothing to host.
8. **No bloat:** No animation library, no scroll effects, no cookie banner, no chat widget. The page's purpose is to get an email address — everything else is noise.
