Data Journalism Editorial

---
name: data-journalism-editorial
description: Apply the Data Journalism Editorial visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Data Journalism Editorial, mentions NYT graphics style, visual journalism, data storytelling editorial, or describes annotated charts as heroes, serif headline over sans chart labels, gray-by-default data series — 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
---

# Data Journalism Editorial Design System

Newsroom data-graphics conventions: serif headlines over clean white, charts with direct labels and sentence-length annotations instead of legends, a restrained palette where gray is the default and color means something, and methodology notes in the footer.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Data Journalism Editorial.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (NYT graphics style, visual journalism, data storytelling editorial, annotated chart editorial, explanatory data graphics), or describes its traits: annotated charts as heroes; serif headline over sans chart labels; gray-by-default data series; direct labeling instead of legends; restrained meaningful color; methodology footnotes.

## Design tokens

### Color palette

- Clean white article ground: `#ffffff` (--color-bg)
- Chart wells and methodology blocks: `#f7f7f5` (--color-bg-alt)
- Headlines and body text: `#121212` (--color-text)
- Bylines, captions, axis labels, source lines: `#5a5a5a` (--color-text-muted)
- Steel blue — links and the primary highlighted data series: `#2b5f8a` (--color-accent)
- Second data hue, reserved for contrast series or negative values: `#b3372c` (--color-data-red)
- Context series and de-emphasized data marks: `#b8b8b8` (--color-data-gray)
- Chart gridlines and hairline rules: `#e2e2e2` (--color-grid)

### Typography

- Display / headings: Newsreader (fallback: Georgia, serif) (ideal: NYT Cheltenham, premium — use Newsreader as the free substitute)
- Body: Source Sans 3 (fallback: Helvetica Neue, Arial, sans-serif) (ideal: Franklin Gothic, premium — use Source Sans 3 as the free substitute)
- Mono / data: IBM Plex Mono (fallback: Menlo, monospace)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.15, letter-spacing -0.01em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 40, 64, 96 — Article-paced: a comfortable 680px reading column with charts breaking out wider; tight, purposeful spacing inside graphics, generous air between narrative beats.
- Border radius: none 0px, sm 3px — Essentially square; 3px only on interactive chips and tooltips.
- Border treatment: 1px solid #e2e2e2 — Hairline rules above charts, under the header, and around methodology wells; the byline rule is a signature.

### Shadows

- none: `none` — Default — the article surface is flat
- tooltip: `0 2px 10px rgba(18, 18, 18, 0.15)` — Chart tooltips and sticky UI only

### Layout

- Max content width: 1200px
- 680px prose column; charts break out to 945px or full-width when the data needs room
- Kicker, serif headline, dek, byline with hairline rule — in that order, every time
- Every chart carries a title stating its takeaway, a unit note, and a source line
- Methodology and data-source notes collected in a bg-alt well at article end

### Effects

- Thin leader lines connecting annotations to data points
- Scroll-triggered chart state changes for step-through explanations (used sparingly)
- Hover crosshair with a single well-designed tooltip

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 150ms / 300ms / 600ms
- Chart transitions animate one encoding at a time (position, then color) so changes stay traceable
- Tooltips appear instantly; nothing about data exploration should feel laggy
- No decorative animation in the prose column

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f5;
  --color-text: #121212;
  --color-text-muted: #5a5a5a;
  --color-accent: #2b5f8a;
  --color-data-red: #b3372c;
  --color-data-gray: #b8b8b8;
  --color-grid: #e2e2e2;
  --radius-none: 0px;
  --radius-sm: 3px;
  --shadow-tooltip: 0 2px 10px rgba(18, 18, 18, 0.15);
  --border-default: 1px solid #e2e2e2;
  --font-display: Newsreader, Georgia, serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, monospace;
  --text-base: 17px;
  --leading-heading: 1.15;
  --leading-body: 1.65;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Newsreader:wght@500;700&family=Source+Sans+3:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Quiet newsroom chrome: small wordmark, section name, share tools right-aligned, hairline bottom rule
- **Hero:** Kicker in letterspaced sans caps, Newsreader headline, one-sentence dek, byline and date over a hairline rule — often followed immediately by the lead chart
- **Card:** Chart module: sans chart title stating the takeaway, the graphic, unit note top-left, source and credit line in muted text below
- **Button (primary):** Steel-blue fill, white text, 3px radius, small firm label — used for data-explorer controls, not persuasion
- **Button (secondary):** White with hairline border; used for chart toggles and download links
- **Form fields:** White fill, hairline border, 3px radius; focus ring in steel blue; used for search-your-district style inputs

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

The annotated chart: one restrained line or bar chart where context series sit in gray, the subject series is the only colored line, and short sentence annotations with thin leader lines point directly at the moments that matter. Spend boldness here; keep everything else quiet.

## Do

- State the takeaway in the chart title — 'Rents rose fastest downtown', not 'Rent by neighborhood'
- Default every series to gray and spend color only on the subject of the sentence
- Label lines directly at their endpoints; legends are a last resort
- Always include units, source, and methodology — credibility is a visual feature here

## Don't

- Don't use more than two data hues plus gray in a single graphic
- Don't add chart junk: 3D, drop shadows, gradient fills, or decorative icons in graphics
- Don't animate charts on scroll unless the steps genuinely explain sequence
- Don't let interactive features replace a clear static takeaway — the default view must tell the story

## Accessibility notes

- The gray context series (#b8b8b8) is intentionally low-contrast — ensure the highlighted series and its direct labels carry the full story for low-vision readers
- Never encode meaning by color alone; pair the blue/red distinction with direct labels or line style
- Chart content needs text equivalents: a takeaway title, alt text describing the pattern, and ideally a data table link

## Reference sites

- The Pudding: https://pudding.cool
- NYT The Upshot: https://www.nytimes.com/section/upshot
- Datawrapper: https://www.datawrapper.de
- FlowingData: https://flowingdata.com

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

Install this skill

unzip data-journalism-editorial.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → data-journalism-editorial.zip