Broadsheet Design System

Broadsheet Design System mockup preview
Click to expand

A newspaper-inspired design system built for online newspapers and journalism platforms with a column-grid layout, serif typography, and flat newspaper aesthetic.

Color Primary#0A0A0A
Color Secondary#DC2626
Color Tertiary#4B5563
Surface Base#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Libre Baskerville · 48px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Libre Baskerville · 36px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Libre Baskerville · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Libre Baskerville · 22px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodySource Serif Pro · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallSource Serif Pro · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

xsSource Serif Pro · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

A newspaper-inspired design system built for online newspapers and journalism platforms with a column-grid layout, serif typography, and flat newspaper aesthetic.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterStatus SuccessStatus WarningStatus Error

List

Default

Checkbox

Default

RadioButton

Default

Tooltip

Default

Do's & Don'ts

Do

use horizontal rules (1-2px black) to separate sections, mimicking newspaper column dividers
rely on serif typography at generous line heights for comfortable long-form reading
reserve the secondary red (#DC2626) exclusively for breaking news, urgent alerts, and destructive actions
use uppercase 12px labels with tracking for category tags and metadata
maintain a strong vertical rhythm using the 8px spacing grid across all column layouts
use the tertiary gray (#4B5563) for all secondary information like dates, bylines, and read-time estimates

Don't

add border-radius to any element; the system demands sharp, print-style corners throughout
use sharp drop shadows or glows; hierarchy comes from borders, weight, and whitespace only
use bright accent colors beyond the defined red (#DC2626); the palette is intentionally restrained
center-align body text; always left-align for readability, as in traditional newspapers
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.5 KB
Downloads 0
clean editorial media minimal news

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/broadsheet and implement it in my code

Don't have the MCP? Install it here