The New Yorker Design System

The New Yorker's website does something almost no contemporary news brand does: it sets its body copy in a true Old Style serif at 21px with a 31.5px line height, and trusts the reader to settle into a print cadence on a backlit screen. The Adobe Caslon Pro that runs every story dek and pull quote is the same family the magazine has used in print for decades; the in-house Irvin face that titles every section is cut from Rea Irvin's 1925 lettering for the masthead. Where The Atlantic moved to a custom geometric sans and The New York Times softened its serif into a screen-tuned variant, The New Yorker held the line — the body face is Caslon, period, and the size is editorial, not utility.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 7 color tokens drawn from a near-monochrome palette — ink black, soft gray text, hairline divider gray, a single editorial red lit at one breaking-news strip, white canvas, and the muted body gray for secondary text. 12 typography tokens cover the three proprietary serif and serif-display families (Caslon, Irvin, Neutraface) plus Graphik for utility chrome. 4 corner-radius tokens centered on 0px — every editorial surface is square; the only rounding belongs to the cookie banner overlay at 4px. 18 component definitions cover the masthead lockup, the bordered top-nav, the editorial article tile, the small-caps category eyebrow, the named-author byline, the photograph plate (always 0 radius, no shadow), and the single accent breaking-news strip.

Feed this file to an AI coding tool and it reproduces the moves that distinguish a magazine-on-screen from a news blog: serif body type at print size, three-tier display hierarchy rather than two, hairline-only dividers in place of cards, square corners on every editorial surface, and a single accent color reserved for genuinely urgent moments. The one move worth borrowing only if you have a 99-year typographic identity to draw from: the willingness to set a 21px serif as your default running text. Most teams need the 16px sans because their content is read rather than savored.