BroadsheetLegacy format
Broadsheet is a design system for news sites, longform investigative journalism, and editorial publications. The aesthetic is rooted directly in print broadsheet typography — heavy display serifs that announce, a precise text serif that holds long-form weight, multi-column flow on desktop, and a masthead red used with strict restraint for breaking news and section bylines. Above-the-fold rhythm matters: hero stories anchor with oversized headlines, a deck (subtitle), reporter byline, and dateline before the body even starts. Density is high but legibility is uncompromised — leading is generous, columns are narrow enough to read fluidly, and rules between columns echo a printed front page. Broadsheet rejects the modern news-blog convention of card-card-card grids in favor of a layered editorial hierarchy where some stories are louder, some are quieter, and the page itself communicates editorial judgment.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxBroadsheet is a design system for news sites, longform investigative journalism, and editorial publications. The aesthetic is rooted directly in print broadsheet typography — heavy display serifs that announce, a precise text serif that holds long-form weight, multi-column flow on desktop, and a masthead red used with strict restraint for breaking news and section bylines. Above-the-fold rhythm matters: hero stories anchor with oversized headlines, a deck (subtitle), reporter byline, and dateline before the body even starts. Density is high but legibility is uncompromised — leading is generous, columns are narrow enough to read fluidly, and rules between columns echo a printed front page. Broadsheet rejects the modern news-blog convention of card-card-card grids in favor of a layered editorial hierarchy where some stories are louder, some are quieter, and the page itself communicates editorial judgment.
Components
Masthead
default
Lead Story Block
default
default
default
Breaking News Strip
default
breaking
opinion
analysis
correction
Pull Quote
default
Drop Cap
default
default
Byline Block
default
Newsletter Signup
default
Subscribe Wall
default
Live Updates Feed
default
Election/Sports Ticker
default
Do's & Don'ts
Do
Don't
Icons
Font AwesomeLibrary: Font Awesome · Style: outline · Size: 18px
Motion
Motion is minimal — Broadsheet behaves like paper that occasionally updates. Standard duration is 160ms with cubic-bezier(0.4, 0, 0.2, 1) easing. Article navigation uses fade-only transitions over 200ms. Live update entries fade in with a 320ms masthead-red flash on the new timestamp before settling to neutral. Breaking-news strips slide down from the top edge over 240ms. The system intentionally avoids parallax, scroll-triggered animations, and any decorative motion in body content.
Voice and Tone
• Journalistic. Subject-verb-object. Active voice.
• Headlines are written for clarity, not curiosity gap. Lead with the news.
• Use journalism idiom: "according to," "officials said," "the bureau reported," "—," (em dash) for parenthetical attribution.
• Dates spell the month: "March 5, 2026" — not "3/5/26."
• Pull quotes are short and load-bearing. Never decorative filler.
• Corrections are explicit and prominent: "A previous version of this article incorrectly stated…"
• Empty states keep the journalistic tone: "No articles in this section today."
Use with MCP
Don't have the MCP? Install it here