A complete newsletter publication design system — hero masthead, asymmetric article grid, author profile, and signup form. Warm paper tones, serif display headings, and an editorial layout inspired by Substack, Every.to, and the best independent newsletters. Includes a full AI prompt and live HTML demo.
What Is Newsletter UI?
Newsletter UI is a complete design system for independent publications — the landing pages, article grids, author profiles, and signup forms that turn a newsletter into a publication that people actually want to join.
The defining characteristic: every design decision serves the reader, not the product. Generous line-height, warm paper tones, serif headlines that reward slowing down, and a layout structure borrowed from the editorial tradition of magazine and broadsheet design. It says: there is real thinking here, and it's worth your time.
The Vibe
A publication you'd actually subscribe to.
Warm paper background. Serif headlines with editorial weight. Article cards that make you want to read rather than click. An author you can get to know. A signup form that feels like joining something, not filling out a form.
Core Design Decisions
Warm Paper Over White
The #FAF7F2 background is not a small decision. Pure white feels like a web app. Warm off-white feels like a publication — like something created with care rather than deployed from a template. Every other warm tone in the palette (border, tag background, muted text) reinforces this through the whole page.
Two-Font Editorial Stack
Playfair Display (or Lora) for headlines, Inter for body UI. The serif does the emotional work — it signals seriousness, editorial tradition, and content worth reading. The sans does the functional work — navigation, meta, tags, forms. This pairing is precise and non-negotiable: swapping in a third font or using sans-serif for headlines destroys the editorial register.
The Issue Bar — Publication Authenticity
The thin dark strip above the navbar showing the current issue number and date is borrowed directly from print magazine mastheads. It costs almost nothing to implement and immediately shifts the perceived identity of the product from "website" to "publication." It answers the reader's subconscious question: is this a real thing? — before they read a single word.
Asymmetric Article Grid
A uniform 3-column card grid says "blog." An asymmetric mixed-size grid — one wide featured article beside a narrow one, then three equal, then the proportions flip — says "editorial." The layout itself communicates hierarchy: this article matters more than that one. Readers navigate that hierarchy instinctively.
The Dark Signup Section
Placing the newsletter signup in a full-bleed dark panel (#1A1410) does three things: it creates a dramatic visual break at the bottom of the page, it makes the rust-colored submit button pop against the dark background, and it signals that this is a moment of commitment — you're joining something, not just handing over an email. The trust signals (subscriber count, frequency, unsubscribe promise) are placed here because this is the last objection-handling moment before conversion.
Author as Identity
The author section is not a byline. It is the reason subscribers stay subscribed. Giving the author a full horizontal band with their avatar, bio, stats, and credentials communicates something essential: a real person made this. Readers subscribe to people, not topics. The design should make that person visible and trustworthy before asking for the email.