Editorial Broadsheet

---
name: editorial-broadsheet
description: Apply the Editorial Broadsheet visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Editorial Broadsheet, mentions newspaper style, editorial serif, magazine layout, or describes serif display type, hairline rules, multi-column layout — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Editorial Broadsheet Design System

Digital newsprint: warm paper background, high-contrast serif display type, hairline rules organizing dense multi-column layouts, small-caps kickers, drop caps, and an oxblood red reserved for the masthead and links.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Editorial Broadsheet.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (newspaper style, editorial serif, magazine layout, newsprint), or describes its traits: serif display type; hairline rules; multi-column layout; small-caps kickers; warm paper background.

## Design tokens

### Color palette

- Warm newsprint paper: `#faf7f0` (--color-bg)
- Sidebar and pull-quote panels: `#f3efe6` (--color-surface)
- Body ink: `#1a1a1a` (--color-text)
- Bylines, captions, folios: `#5c574f` (--color-text-muted)
- Oxblood red for masthead, links, and small caps: `#8f2d2d` (--color-accent)
- Rules — hairline (0.5–1px) in ink color: `#1a1a1a` (--color-border)

### Typography

- Display / headings: Playfair Display (fallback: Georgia, Times New Roman, serif) (ideal: Chronicle Display, premium — use Playfair Display as the free substitute)
- Body: Source Serif 4 (fallback: Georgia, serif)
- Type scale: 1.333 ratio, base 18px — computed steps: 18px / 24px / 32px / 43px / 57px / 76px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 800, line-height 1.05, letter-spacing -0.01em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 72 — Print-dense: tight column gutters (24–32px) and compact vertical rhythm, offset by generous margins around the page block.
- Border radius: none 0px — Print has no rounded corners.
- Border treatment: 1px solid #1a1a1a — The system is built from rules: 0.5–1px hairlines between columns, 2–3px doubled rules under mastheads and section heads.

### Shadows

- none: `none` — Flat like paper; hierarchy comes from type and rules

### Layout

- Max content width: 1280px
- CSS multi-column or grid mimicking 3–5 newspaper columns with hairline column rules
- Lead story spans 2–3 columns with subordinate stories stacked beside it
- Pull quotes break column flow at 1.5x body size in italic
- Folio line (date, section, page) at the very top in small caps

### Effects

- Drop caps (initial-letter or float, 3 lines tall)
- Letterspaced small-caps kickers above headlines
- Doubled rules (thick over thin) under section mastheads

### Motion

- Easing: ease; durations 100ms / 200ms / 300ms
- Nearly static, like paper; only link underlines and image reveals transition
- No parallax, no scroll-triggered choreography

## CSS variables (drop-in)

```css
:root {
  --color-bg: #faf7f0;
  --color-surface: #f3efe6;
  --color-text: #1a1a1a;
  --color-text-muted: #5c574f;
  --color-accent: #8f2d2d;
  --color-border: #1a1a1a;
  --radius-none: 0px;
  --border-default: 1px solid #1a1a1a;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --text-base: 18px;
  --leading-heading: 1.05;
  --leading-body: 1.65;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: ease;
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;800&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A masthead: centered serif wordmark at 40–56px, folio line above, section links in small caps below, doubled rule underneath
- **Hero:** Lead-story block: small-caps kicker, 56–88px serif headline, italic standfirst, byline with rule, opening columns with drop cap
- **Card:** Ruled story block — hairline top rule, small-caps section label, serif headline, 2–3 line summary; no box, no shadow
- **Button (primary):** Rare in this style: ink-filled rectangle, paper-colored small-caps label, square corners
- **Button (secondary):** Small-caps text link in oxblood with underline on hover
- **Form fields:** Underline-only input with small-caps label; focus doubles the underline

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Hairline-ruled column architecture under a high-contrast serif headline stack: kicker in letterspaced small caps, huge serif headline, italic standfirst, byline rule, then justified columns with a drop cap. Spend boldness here; keep everything else quiet.

## Do

- Build hierarchy purely with the headline stack: kicker, headline, standfirst, byline
- Use hairline rules to separate everything; they are the style's grid made visible
- Justify body columns and hyphenate (hyphens: auto) for the print texture
- Keep imagery editorial — documentary photography with proper captions and credits

## Don't

- No shadows, gradients, or rounded corners anywhere
- Don't set body copy in a sans-serif; sans is only for captions/folios if at all
- Never use more than the one accent red
- Don't loosen the density — generous padding inside story blocks kills the newsprint feel

## Accessibility notes

- Ink on paper (#1a1a1a on #faf7f0) passes AAA; oxblood #8f2d2d on paper passes AA (≈7:1)
- Justified + hyphenated text can hurt dyslexic readers — offer comfortable line lengths (60–75ch) and don't justify below 3-column widths
- Drop caps need aria-hidden duplication or careful markup so screen readers don't spell the first word letter by letter

## Reference sites

- The New York Times: https://www.nytimes.com
- Financial Times: https://www.ft.com
- The Atlantic: https://www.theatlantic.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip editorial-broadsheet.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/editorial-broadsheet.json

Settings → Capabilities → Skills → Upload skill → editorial-broadsheet.zip