Broadsheet
A classic newspaper theme: Playfair Display headlines, ink-black on paper-white, hairline rules, and a tight reading column.
Build something people love.
A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.
Color system
Click any swatch to copy. Contrast graded against WCAG.
Typography
Body sample. Inter carries running text — readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.
Radius, shadow & fonts
Components
Real UI rendered with this theme's tokens.
A surface for grouping content, with the theme's border, radius, and shadow.
Principles, guidelines & component specs
Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.
Do
- •Let Playfair headlines set the tone; keep body type calm.
- •Use hairline rules and leading instead of boxes and shadows.
Don't
- •Don't use a serif display for body text.
- •Don't introduce bright brand colour into the page.
- •Keep motion minimal — print does not animate.
Hover to feel this theme's base transition.
Lucide · 1.5px stroke · 1rem. Outline icons with a consistent stroke width; size icons to match adjacent text and align them optically.
- Never use color as the only signal — pair it with text, an icon, or a shape.
- Every interactive element must be keyboard reachable and show a visible focus ring.
- Honor prefers-reduced-motion: reduce by disabling non-essential animation.
- Keep a logical heading order and give every form control a label.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.25rem |
| Padding | 0 1rem |
| Height | 2.5rem |
| Weight | 600 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 0.125rem |
| Padding | 0.15rem 0.55rem |
| Font size | 0.7rem |
| Weight | 600 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 0.375rem |
| Padding | 1rem 1.25rem |
| Border | 1px solid var(--border) |
Always pair the color with an icon and a text label — never rely on color alone.
Form field
| Background | var(--background) |
| Border | 1px solid var(--input) |
| Radius | 0.25rem |
| Height | 2.5rem |
| Padding | 0.5rem 0.75rem |
Label sits above the field; helper or error text sits below.
Card
| Background | var(--card) |
| Text | var(--card-foreground) |
| Border | 1px solid var(--border) |
| Radius | 0.375rem |
| Padding | 1.5rem |
| Shadow | 0 4px 14px -6px rgba(26,26,26,0.12) |
The design brief
Broadsheet is a classic newspaper design system: Playfair Display headlines over ink-black-on-paper-white body text, hairline rules, and a disciplined reading column. Built for journalism, essays, and long-form content.
Principles
- Headlines carry the character; body type stays quiet and readable.
- Hairline rules and generous leading do the work of decoration.
- Near-black ink on warm paper white, never pure-on-pure glare.
When to use
Use Broadsheet for news, essays, and editorial publications. Avoid it for dashboards or app chrome where a serif display would feel out of place.
Signature details
- Playfair Display headings, Inter body, JetBrains Mono captions.
- 0.25rem radius and 1px rules for a print feel.
Use this with your AI
Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.
Export tokens
Drop straight into your codebase.
:root {
--radius: 0.25rem;
--background: #fbfaf7;
--foreground: #1a1a1a;
--card: #ffffff;
--card-foreground: #1a1a1a;
--popover: #ffffff;
--popover-foreground: #1a1a1a;
--primary: #1a1a1a;
--primary-foreground: #fbfaf7;
--secondary: #f1efe9;
--secondary-foreground: #1a1a1a;
--muted: #f1efe9;
--muted-foreground: #595650;
--accent: #e8e4da;
--accent-foreground: #1a1a1a;
--destructive: #b91c1c;
--destructive-foreground: #ffffff;
--border: #e2ded4;
--input: #e2ded4;
--ring: #1a1a1a;
--shadow-sm: 0 1px 2px rgba(26,26,26,0.05);
--shadow-md: 0 4px 14px -6px rgba(26,26,26,0.12);
--shadow-lg: 0 16px 36px -14px rgba(26,26,26,0.18);
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Playfair Display', ui-serif, Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--ease-standard: cubic-bezier(0.4,0,0.2,1);
--ease-emphasized: cubic-bezier(0.16,1,0.3,1);
--duration-base: 240ms;
}
.dark {
--background: #111110;
--foreground: #eceae4;
--card: #1a1a18;
--card-foreground: #eceae4;
--popover: #1a1a18;
--popover-foreground: #eceae4;
--primary: #eceae4;
--primary-foreground: #111110;
--secondary: #222220;
--secondary-foreground: #eceae4;
--muted: #222220;
--muted-foreground: #a8a59c;
--accent: #2b2b28;
--accent-foreground: #eceae4;
--destructive: #f87171;
--destructive-foreground: #450a0a;
--border: #2e2e2a;
--input: #2e2e2a;
--ring: #eceae4;
}More designs
Paper
Editorial light theme with a serif display voice.
Folio
A refined portfolio theme: Newsreader serif, near-black ink, and quiet neutrals for designers, studios, and case studies.
Linen
Warm minimal theme on stone neutrals.