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