# The New York Times - Breaking News, US News, World News and Videos — Design System

## North Star
> America's newspaper of record on the web — Cheltenham masthead, dense print-grid layout, photojournalism front and center.

**Theme:** light
**Category:** media
**Tags:** `achromatic` · `serif-heavy` · `editorial` · `dense` · `minimal` · `media` · `grid-driven`

## Description
The New York Times website carries decades of editorial design DNA into the browser. A blackletter masthead anchors the top, headlines are set in NYT's house display serif (Cheltenham/Imperial), and body copy is a clean serif. Layout is unapologetically dense: multi-column grids, small image thumbnails, generous use of dotted dividers, italics for credits. White canvas, near-black text, and a single muted blue for links. The personality is journalistic restraint, built for reading.

## Colors
| Name | Hex | Group | Role | Tailwind |
|---|---|---|---|---|
| neutral-900 | `#121212` | neutral | neutral step 900 | `neutral-900` (Δ0.022) |
| neutral-50-1 | `#ffffff` | neutral | neutral step 50 | `zinc-50` (Δ0.015) |
| neutral-950 | `#000000` | neutral | neutral step 950 | — |
| neutral-600 | `#5a5a5a` | neutral | neutral step 600 | — |
| neutral-700 | `#333333` | neutral | neutral step 700 | — |
| blue-700 | `#2d3748` | blue | blue step 700 | — |
| neutral-500 | `#727272` | neutral | neutral step 500 | `neutral-500` (Δ0.003) |
| neutral-100-1 | `#e1e7ee` | neutral | neutral step 100 | `slate-200` (Δ0.004) |
| neutral-200 | `#c7c7c7` | neutral | neutral step 200 | — |
| neutral-50-2 | `#f8f8f8` | neutral | neutral step 50 | `gray-50` (Δ0.006) |
| neutral-100-2 | `#edf2f7` | neutral | neutral step 100 | `slate-100` (Δ0.01) |
| neutral-400 | `#8b8b8b` | neutral | neutral step 400 | — |
| neutral-100-3 | `#dfdfdf` | neutral | neutral step 100 | `zinc-200` (Δ0.017) |
| neutral-100-4 | `#ebebeb` | neutral | neutral step 100 | `gray-200` (Δ0.014) |

## Surfaces (Elevation)
| Level | Name | Hex | Purpose |
|---|---|---|---|
| 0 | background | `#ffffff` | Page background |
| 1 | surface-1 | `#edf2f7` | Cards / elevated panels |
| 2 | surface-floor | `#dfdfdf` | Elevation tier 2 |

**Elevation philosophy.** Completely flat. Hierarchy comes from typographic weight and grid columns, not from shadow. Section bands occasionally use a near-white tint to separate Opinion / Wirecutter / Cooking, but never lift.

## Typography

### Times New Roman — weight 400
*serif*

### nyt-franklin — weight 400
*body*

### nyt-cheltenham — weight 700
*body*

### nyt-imperial — weight 400
*body*

## Type Scale
| Role | Size | Line-height | Tracking |
|---|---|---|---|
| `body` | 16px | 1 |  |
| `display` | 16px | 1 |  |
| `h2` | 16px | 1 |  |
| `link` | 14px | 1.4 |  |
| `ui-action` | 14px | 1.4 |  |
| `h3` | 13px | 1.15 |  |

## Spacing & Radius

**Radius**
- `none`: 0
- `sm`: 3px

**Spacing**
- `base`: 1px

## Layout
Three to four narrow columns of headline-deck-thumbnail triplets, separated by dotted gray rules. Above-the-fold runs a wide hero spanning two columns. The reading rhythm is unmistakably print-newspaper.

## Imagery
Photojournalism on every story — large hero photos for top stories, small thumbnails for everything else. Black-and-white archival imagery for retrospectives, color for breaking news. Photo captions in italic gray.

## Do
- Set headlines in a serif display face (Cheltenham/Imperial); body in a sans or readable serif
- Use a multi-column print grid with thin gray dividers between articles
- Reserve color for links and section badges; keep the canvas near-white
- Pair small thumbnail photos with dense headline-deck-byline triplets

## Don't
- Don't use rounded buttons or pill UI — the voice is journalistic, not consumer
- Don't introduce additional accent colors beyond NYT's editorial blue
- Don't break the grid for marketing-style hero blocks — the homepage is a newsroom
- Don't reduce information density; readers come to scan many stories quickly