Skip to content
Fredrin

Blog

Broadsheet

Newsprint editorial with a masthead, a lede, and text set to be read.

A newspaper's discipline on the web: a ruled masthead, a hierarchy that actually ranks stories, and body text measured for a comfortable read.

Best for
Newsletters, magazines, research writing and any site where reading time matters.
Type
"Source Serif 4", "Iowan Old Style", Georgia, serifSet for reading, not scanning: article body at 19/1.75 with a 68-character measure, first paragraph at 21px with no indent, subsequent paragraphs indented 1.5em with no top margin. Kickers and bylines in 12px uppercase sans with +0.1em tracking.
Palette
Background #FBFAF7Surface #FFFFFFInk #14110EMuted #6B6560Accent #B02A1EBorder #DFD9CF
Page structure
  1. Masthead: publication name in large serif, centred, with the date left and issue number right, hairline rules above and below.
  2. Section nav: eight uppercase links on one line, the active one in accent, separated by hairline dividers.
  3. Lead story: a two-thirds column with a kicker, a large serif headline, a standfirst, a byline with reading time, and one image.
  4. Two secondary stories stacked in the right rail with smaller headlines and no images.
  5. A ruled 'More from this issue' row of four story cards — kicker, headline, byline — separated by vertical hairlines.
  6. Article template: centred 68-character measure, a drop cap on the first paragraph, pull-quotes breaking the measure, footnotes, and a next/previous pager.
  7. Author block: a portrait circle, a two-line bio and a follow link.
  8. Subscribe band on a tinted strip with one input and one button.
  9. Footer: sections, about, ethics, contact, and a copyright line in small caps.
Tags
editorial · serif · light · typography

The creation prompt

641 words, self-contained — paste it into a chat session with your coding agent and it builds Broadsheet end to end.

Build an editorial publication or long-form blog using the "Broadsheet" theme — Newsprint editorial with a masthead, a lede, and text set to be read.

## Art direction
Print grammar, honestly applied. A masthead with the publication name centred between two hairline rules and the date and issue number flanking it. Below, a real hierarchy — one lead story at double width, secondaries in columns, and a rule between every column. Red is used the way a newspaper uses it: section kickers, the current nav item, and pull-quote marks. Nothing is rounded and nothing has a shadow.

## Colour palette (use these exact values)
- Background: #FBFAF7
- Surface / cards: #FFFFFF
- Primary text: #14110E
- Secondary text: #6B6560
- Accent (buttons, links, active state): #B02A1E
- Text on accent: #FFFFFF
- Borders / dividers: #DFD9CF
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: "Source Serif 4", "Iowan Old Style", Georgia, serif
- Body: "Source Serif 4", "Iowan Old Style", Georgia, serif
- Set for reading, not scanning: article body at 19/1.75 with a 68-character measure, first paragraph at 21px with no indent, subsequent paragraphs indented 1.5em with no top margin. Kickers and bylines in 12px uppercase sans with +0.1em tracking.

## Page structure
1. Masthead: publication name in large serif, centred, with the date left and issue number right, hairline rules above and below.
2. Section nav: eight uppercase links on one line, the active one in accent, separated by hairline dividers.
3. Lead story: a two-thirds column with a kicker, a large serif headline, a standfirst, a byline with reading time, and one image.
4. Two secondary stories stacked in the right rail with smaller headlines and no images.
5. A ruled 'More from this issue' row of four story cards — kicker, headline, byline — separated by vertical hairlines.
6. Article template: centred 68-character measure, a drop cap on the first paragraph, pull-quotes breaking the measure, footnotes, and a next/previous pager.
7. Author block: a portrait circle, a two-line bio and a follow link.
8. Subscribe band on a tinted strip with one input and one button.
9. Footer: sections, about, ethics, contact, and a copyright line in small caps.

## Components and detailing
Rules do all the work a border-radius would elsewhere — 1px `#DFD9CF` hairlines between everything. Pull-quotes are 28px serif italic, indented, with a 3px accent bar on the left. The drop cap is three lines tall in accent. Images are always captioned in 12px muted sans and never rounded. The subscribe input is a bordered rectangle, 44px, with a solid accent button flush beside it.

## Motion
Effectively none. Links underline on hover. The pager slides nothing. Reading is the interaction; treat any animation as a distraction and leave it out.

## Copy and imagery
Real headlines with verbs in them, standfirsts that summarise rather than tease, and bylines with a date and a reading time on every piece. Aim the lead story at 1,200+ words and let the layout show it. Images are documentary, captioned, and credited.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.

Pasting the prompt is step one. Fredrin runs the agent that builds it, one ticket per look.