--- version: alpha name: "The New Yorker" website: "https://www.newyorker.com" description: >- A 99-year-old weekly magazine whose website refuses every dev-era convention — Adobe Caslon Pro sets every headline and body paragraph in true Old Style serif, Irvin (the in-house display face cut from Rea Irvin's 1925 lettering) carries section eyebrows and the masthead, Neutraface New Yorker handles small-caps category labels, and Graphik runs only the utility chrome. The canvas is white-on-white with hairline-only dividers in cool gray, a single editorial accent red lit at #db3334 for one breaking-news strip, and a long black-and-white photograph of the cover dandy that anchors the masthead. Body text sits at 21px / 31.5px leading in the Caslon serif rather than the 16px sans every news site defaults to — a deliberate magazine-on-screen choice that signals print provenance, not blog cadence. seo: title: "The New Yorker Design System for React — print serif on screen, Irvin display, 18 components" metaDescription: "The New Yorker's marketing system as a DESIGN.md file. Adobe Caslon Pro body at 21px, Irvin display, single editorial red for breaking news, 7 colors, 18 components. For React, Next.js, and AI tools." highlights: - "Caslon body at 21px — the running text is a serif at print magazine size, not the 16px sans every news site uses; reading rhythm matches the print edition" - "Three proprietary faces, one workhorse — Adobe Caslon Pro, Irvin, and Neutraface New Yorker each own a tier; Graphik handles only nav, captions, and footer" - "Editorial red used once — #db3334 lights a single breaking-news strip; the rest of the page is ink-on-cream with no chromatic competition" - "Hairline-only dividers — section breaks come from 1px #e5e5e5 rules rather than card surfaces; the page reads as a continuous broadsheet" - "Square corners across the system — buttons sit at 4px max, photographs at 0px; rounded radii belong to the cookie banner overlay, not the editorial chrome" tags: - "News & Publishing" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.newyorker.com" title: "The New Yorker — official site" description: "The New Yorker's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is The New Yorker's primary brand color?" answer: "The New Yorker's chromatic identity is essentially monochrome: ink black, soft gray, white, and a single editorial red at the breaking-news strip. The red is wired only into the live news banner and a footer alert overlay; everywhere else the page runs ink on white with cool-gray hairlines for dividers. The magazine's print identity has always been near-monochrome, with cover illustration and cartoon ink carrying any color voltage; the web design preserves the same restraint. Across the captured page the ink black appears 972 times as text and 917 as border, while the accent red appears 64 times as text and 64 as border, all confined to a single live-news strip." - id: "typography" title: "What typefaces does The New Yorker use, and what should I use as substitutes?" answer: "The New Yorker runs three proprietary faces plus one open utility sans. Adobe Caslon Pro (wired as TNYAdobeCaslonPro) sets every article headline, pull quote, and body paragraph at 17-22px in weight 400, the same Old Style serif used in the print magazine. Irvin (wired as IrvinHeadingPro and IrvinText) carries the masthead and section h2 / h3 titles at 28-36px in weight 400 — this is the face cut from Rea Irvin's original 1925 lettering. Neutraface New Yorker handles small-caps eyebrows, section labels, and metadata at 10-15px. Graphik runs nav links and captions at 12-14px. The closest substitutes: Source Serif 4 for Caslon, ITC Garamond Condensed for Irvin display, Futura Light Condensed for Neutraface labels, and Inter for the Graphik utility tier." - id: "body-size" title: "Why is the body text 21px instead of the 16px every other news site uses?" answer: "The default running text is Adobe Caslon Pro at 21px with a 31.5px line height — about 30% larger than the 16px sans most digital news sites default to. The choice is deliberate magazine-on-screen behavior: at 21px the Caslon serif renders its characteristic Old Style proportions cleanly and the long-form reading rhythm matches the print edition rather than the news-blog cadence. Combined with the wider line measure (around 576px in the main column) and the 1.5 leading ratio, the typesetting reads as if the page were laid out by a print art director rather than a CMS template. The cost is reduced information density above the fold; the gain is reader settling-in time on long features." - id: "use-of-color-red" title: "When does The New Yorker use its accent red?" answer: "The red #db3334 is reserved for the breaking-news strip and a single footer alert overlay. It appears 64 times as text and 64 as border in the captured page, all within those two narrow surfaces. The rest of the system runs ink on white with cool-gray hairlines. This is the inverse of how most news brands use red — at CNN, BBC, and Fox News the brand red is a constant chromatic presence in the masthead, nav, and headlines; The New Yorker holds it back so the one moment it appears reads as genuinely urgent rather than as decorative chrome. If you copy this system, do not light a CTA in this red." - id: "rounded-style" title: "What is The New Yorker's corner-radius philosophy?" answer: "The system is essentially square. Photographs render at 0px radius. Article tiles, byline blocks, and the masthead all sit on 0px corners. The buttons in the editorial chrome are 4px at most. The 8-16px radii in the captured CSS belong to the cookie-consent banner overlay (a third-party Fides modal styled with Inter at #2b2e35) and the 48px / 60px values belong to a single video-player chrome surface. Within the editorial system itself, square corners reinforce the print-broadsheet metaphor — the page reads as continuous columns of type and plate-style photography rather than as a grid of cards." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own longform-magazine site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce The New Yorker's specific moves: Adobe Caslon Pro at print body size, Irvin-style display for section headers, Neutraface small-caps eyebrows above each tile, square corners on every editorial surface, hairline-only dividers, and a single editorial red reserved for breaking news. The token references resolve cleanly. One caveat: the move only works if your content rewards the reading time. A two-paragraph product update set in 21px Caslon will feel labored; a 6,000-word feature will feel inevitable." mockups: - "marketing-hero" - "editorial-article" colors: ink: "#000000" ink-soft: "#121212" ink-muted: "#333333" ink-subtle: "#a2a2a2" canvas: "#ffffff" hairline: "#e5e5e5" accent-red: "#db3334" typography: display-xl: fontFamily: "\"IrvinHeadingPro\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 400 lineHeight: 40px letterSpacing: 0 display-md: fontFamily: "\"IrvinHeadingPro\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 28px fontWeight: 400 lineHeight: 32px letterSpacing: 0 body-feature: fontFamily: "\"TNYAdobeCaslonPro\", \"Times New Roman\", Times, serif" fontSize: 21px fontWeight: 400 lineHeight: 31.5px letterSpacing: 0 body-deck: fontFamily: "\"TNYAdobeCaslonPro\", \"Times New Roman\", Times, serif" fontSize: 22px fontWeight: 400 lineHeight: 28px letterSpacing: 0 body-md: fontFamily: "\"TNYAdobeCaslonPro\", \"Times New Roman\", Times, serif" fontSize: 17px fontWeight: 400 lineHeight: 24px letterSpacing: 0 eyebrow-lg: fontFamily: "\"NeutrafaceNewYorker\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 15px fontWeight: 600 lineHeight: 17.14px letterSpacing: 0 eyebrow-cap: fontFamily: "\"NeutrafaceNewYorker\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 10px letterSpacing: "1.5px" section-label: fontFamily: "\"IrvinText\", \"IrvinHeadingPro\", Georgia, \"Times New Roman\", Times, serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 utility-link: fontFamily: "\"Graphik\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 23.94px letterSpacing: "-0.175px" utility-meta: fontFamily: "\"Graphik\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 16px letterSpacing: "-0.1625px" nav-link: fontFamily: "\"Graphik\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 15.24px letterSpacing: "-0.15px" caption: fontFamily: "\"Graphik\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 10px fontWeight: 500 lineHeight: 12.7px letterSpacing: "-0.125px" rounded: none: "0px" xs: "1px" sm: "4px" md: "8px" lg: "16px" spacing: xs: "4px" sm: "8px" base: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.utility-link}" rounded: "{rounded.sm}" padding: "8px 16px" height: "36px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.utility-link}" rounded: "{rounded.sm}" padding: "8px 16px" height: "36px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.nav-link}" padding: "16px 32px" height: "48px" nav-link: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.nav-link}" padding: "0px 8px" masthead: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "16px 0px 48px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0px 0px 16px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-feature}" padding: "0px" body-deck: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-deck}" padding: "0px 0px 16px" article-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px 0px 16px" article-tile-headline: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-deck}" padding: "8px 0px" eyebrow: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.eyebrow-cap}" padding: "0px 0px 8px" byline: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.utility-meta}" padding: "8px 0px" divider: backgroundColor: "{colors.hairline}" height: "1px" padding: "0px" photo-plate: backgroundColor: "{colors.canvas}" rounded: "{rounded.none}" padding: "0px" breaking-news-strip: backgroundColor: "{colors.accent-red}" textColor: "{colors.canvas}" typography: "{typography.eyebrow-lg}" padding: "8px 16px" height: "32px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "8px 16px" height: "40px" borderColor: "{colors.ink}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "16px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" padding: "48px 32px" --- ## Overview The New Yorker's website does something almost no contemporary news brand does. **Print cadence on a screen.** 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 magazine reading rhythm on a backlit display. Where The Atlantic moved to a custom geometric sans and The New York Times softened its serif into a screen-tuned variant for utility-density reasons, The New Yorker held the line — Adobe Caslon Pro at editorial body size, with three additional proprietary faces stacked above it. Compared to CNN's red-saturated masthead or NPR's NPRSans-only utility system, The New Yorker reads as a broadsheet rendered in pixels rather than a news app borrowing magazine words. The chromatic system reinforces the restraint. There are five neutral tones — `{colors.ink}`, `{colors.ink-soft}`, `{colors.ink-muted}`, `{colors.ink-subtle}`, `{colors.canvas}` — plus the `{colors.hairline}` divider gray and a single editorial accent red (`{colors.accent-red}`). The red is wired only to the breaking-news strip and a footer alert overlay; everywhere else the page is ink on white. The accent red appears 64 times as text and 64 as border across the captured page, but those occurrences cluster inside the two narrow strips that carry it. The hairline gray functions as the page's structural mortar, drawing 1px lines between editorial tiles where most contemporary news sites would draw card outlines. Typography is three proprietary faces and one utility sans. Adobe Caslon Pro (TNYAdobeCaslonPro) sets every article headline, deck, pull quote, and body paragraph. Irvin (IrvinHeadingPro / IrvinText) carries the masthead and section h2 / h3 titles — this is the face cut from Rea Irvin's 1925 lettering. Neutraface New Yorker handles small-caps eyebrows above each article tile. Graphik runs only nav links, captions, and footer chrome. The hierarchy is unmistakable: the serif voices belong to the editorial, the sans belongs to the wayfinding. **Key Characteristics:** - Adobe Caslon Pro body at 21px / 31.5px line height — about 30% larger than the 16px sans most digital news sites default to, deliberately matching the print magazine's reading rhythm. - Three proprietary display / text faces — Caslon for body, Irvin for masthead and section titles, Neutraface for small-caps eyebrows; Graphik handles only utility chrome. - Single editorial red (`{colors.accent-red}`) reserved for the breaking-news strip and one footer alert overlay; the rest of the page is ink on white. - Hairline dividers (`{colors.hairline}` at 1px) carry every structural separation; the page reads as continuous editorial columns rather than as a grid of cards. - Square corners on every editorial surface — photographs at 0px, article tiles at 0px, buttons at 4px max. The 8-48px radii in the captured CSS belong to the cookie-consent overlay, not the editorial system. - Eyebrow-then-headline lockup: every article tile begins with a Neutraface small-caps category label (8-15px) above a Caslon headline (21-22px), with the byline rendered in Graphik below. - Editorial photography sits as full-bleed plates with no border, no rounding, no shadow — the photo IS the visual frame. - The masthead lockup at the top of the page renders the New Yorker wordmark in Irvin against pure white, with a black utility bar carrying the section navigation below it. ## Colors - **Ink** (`{colors.ink}` — #000000): frequency 1895. Used as text (972), bg (6), border (917). The dominant text and structural color; every Caslon headline, byline, deck, and body paragraph renders in pure ink. - **Ink Soft** (`{colors.ink-soft}` — #121212): frequency 468. Used as text (233), bg (2), border (233). A near-black with a 5% lightness lift over pure ink — used on secondary text and the darker editorial divider rules. Most users won't perceive the difference from pure black. - **Ink Muted** (`{colors.ink-muted}` — #333333): frequency 71. Used as text (35), bg (0), border (36). Reserved for bylines and small-meta labels where the contrast against white needs to soften slightly without losing read-time legibility. - **Ink Subtle** (`{colors.ink-subtle}` — #a2a2a2): frequency 71. Used as text (35), bg (0), border (36). Tertiary metadata — timestamps under article tiles, secondary footer links, disabled state on Graphik utility links. - **Canvas** (`{colors.canvas}` — #ffffff): frequency 80. Used as text (36), bg (2), border (42). The page floor. Pure white, not a softened cream — every editorial surface sits on it. The "text" occurrences are for inverted treatments inside the top-nav black bar and the accent-red strip. - **Hairline** (`{colors.hairline}` — #e5e5e5): frequency 136. Used as text (51), bg (1), border (84). The structural mortar — 1px hairline rules separate article tiles, section bands, and footer columns. This is the only divider tone in the system; the page never escalates to a heavier 2px or 4px border for structural separation. - **Accent Red** (`{colors.accent-red}` — #db3334): frequency 128. Used as text (64), bg (0), border (64). The single editorial accent. Lit only on the live breaking-news strip and one footer alert overlay; never used on CTAs, links, or section eyebrows. The discipline is the point — if you copy this system, do not light a button in this red. ## Typography ### Font Family The system runs **four families**, three of them proprietary to the magazine. **Adobe Caslon Pro** (wired as TNYAdobeCaslonPro) is the workhorse — every article headline, deck, pull quote, and body paragraph uses it. **Irvin** (IrvinHeadingPro and IrvinText) carries the masthead lockup and section h2 / h3 titles, cut from Rea Irvin's 1925 lettering for the original magazine cover. **Neutraface New Yorker** handles small-caps category eyebrows and small editorial labels. **Graphik** runs nav links, captions, byline metadata, and footer chrome. The serif voices belong to the editorial layer, the sans belongs to the wayfinding layer. ### Hierarchy | Token | Family | Size | Weight | Line Height | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | Irvin Heading Pro | 36px | 400 | 40px | Hero feature headline ("Majority Rules") on the cover plate | | `{typography.display-md}` | Irvin Heading Pro | 28px | 400 | 32px | Section h2 ("Today's Mix," "The Lede") | | `{typography.body-feature}` | Adobe Caslon Pro | 21px | 400 | 31.5px | Long-form article body — the print-cadence default | | `{typography.body-deck}` | Adobe Caslon Pro | 22px | 400 | 28px | Article tile decks and headline-tile headings | | `{typography.body-md}` | Adobe Caslon Pro | 17px | 400 | 24px | Secondary article body and inline editorial links | | `{typography.eyebrow-lg}` | Neutraface New Yorker | 15px | 600 | 17px | Larger category eyebrow above feature tiles | | `{typography.eyebrow-cap}` | Neutraface New Yorker | 10px | 400 | 10px | All-caps category labels with 1.5px tracking | | `{typography.section-label}` | Irvin Text | 12px | 400 | 16px | Section dividers and small editorial labels | | `{typography.utility-link}` | Graphik | 14px | 500 | 24px | Top-nav links, utility CTAs | | `{typography.utility-meta}` | Graphik | 13px | 500 | 16px | Bylines, timestamps, tile metadata | | `{typography.nav-link}` | Graphik | 12px | 500 | 15.24px | Secondary nav row and footer links | | `{typography.caption}` | Graphik | 10px | 500 | 12.7px | Photo captions and the smallest metadata labels | ### Principles The default running text is 21px Caslon at a 31.5px line height — 30% larger than the 16px sans most digital news sites default to. The choice is deliberate magazine-on-screen behavior: at 21px the Caslon serif renders its Old Style proportions cleanly, and the long-form reading rhythm matches the print edition rather than the news-blog cadence. Display weight tops at 600 only on Neutraface eyebrows; the Caslon and Irvin tiers never escalate above 400. There is no semibold or bold treatment on Caslon at all — emphasis comes from italic, never from weight. ### Note on Font Substitutes All four families are licensed. For Adobe Caslon Pro use **Source Serif 4** (Adobe's open-source serif designed by Frank Grießhammer) at the same weights — proportions transfer closely. For Irvin display use **ITC Garamond Condensed** or the open **EB Garamond** at the display sizes; neither matches the lettering exactly but both share the high-contrast Old Style feel. For Neutraface small-caps use **Futura PT Light Condensed** or open **Inter** with a small-caps OpenType feature enabled. For the Graphik utility tier use **Inter** at the same weights — the proportions are close enough that most readers won't notice the swap. ## Layout ### Spacing System - **Base unit:** 8px (the dominant module with 119 occurrences across the captured page). - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px. - **Page padding (horizontal):** `0px 64px` on the outer container — wider than typical news sites because the long-measure Caslon column needs the breathing room. - **Section padding (vertical):** `64px 48px 24px` on major editorial bands; `16px 0px 48px` between article tiles. - **Article tile padding:** `0px 0px 16px` internal; the photograph sits flush at the top with no inset. ### Grid & Container - **Max content width:** ~1280px on the outer container, with the main feature column constrained to ~576px wide so the 21px Caslon body holds at ~65-character measure. - **Article-tile grid:** 3-column at desktop on the "Today's Mix" and "The Lede" bands, collapsing to 1-column on narrow viewports. Tiles separated by 32px gutters; no card borders. - **Cover plate:** full-bleed black-and-white photograph at the top of the page, with the feature headline rendered in white Irvin display over the lower-left quadrant. - **Masthead lockup:** centered Irvin wordmark above the black top-nav bar, with the bar carrying section-nav links in 12px Graphik. ### Rhythm The page alternates between **edge-to-edge photographic plates** (the cover, the section break image, the cartoon strip) and **constrained editorial columns** (the article-tile grids). There is no atmospheric gradient between bands — every section terminates on pure white with a 1px hairline rule, and depth comes from photographic plates rather than from background tone shifts. The reading rhythm is broadsheet-on-screen: large plate, dense column, small plate, dense column. ## Elevation The system has essentially **no shadow tier**. Article tiles, byline blocks, and the masthead all sit flat on the white canvas. Where most contemporary news sites use a 4-8px drop shadow under each tile to suggest tactility, The New Yorker uses a 1px `{colors.hairline}` rule between rows — the same divider that print uses to separate column-bands on a broadsheet page. - **Flat (no shadow):** every editorial surface — article tiles, byline blocks, photographs, the masthead, the footer. - **Hairline divider:** `{colors.hairline}` (#e5e5e5) at 1px between rows of article tiles and between section bands. - **Photographic depth:** the only "elevation" on the page is photographic — full-bleed cover images, character portraits, and editorial illustrations. They sit at 0px radius with no border. ## Shapes The radius scale is **square-by-default**, with rounding reserved for utility chrome: - `{rounded.none}` 0px — every editorial surface. Photographs, article tiles, section dividers, the masthead, the cover plate. - `{rounded.xs}` 1px — text inputs in the newsletter signup form (frequency 1 in the captured CSS). - `{rounded.sm}` 4px — utility buttons in Graphik (subscribe CTA, footer chrome buttons). Frequency 35 in the captured CSS. - `{rounded.md}` 8px — secondary utility chips and the search dropdown surface. Frequency 7. - `{rounded.lg}` 16px — the cookie-consent banner overlay only (a third-party Fides modal). Frequency 6 — not part of the editorial system. The 48px radius (frequency 45 in the captured CSS) belongs entirely to a single video-player chrome surface (rounded play / pause buttons inside an embedded player) and the 60px belongs to the same player. Within the editorial system itself, square corners reinforce the print-broadsheet metaphor. ## Components **`button-primary`** — Ink fill, white text, `{rounded.sm}` 4px radius, 8x16 padding, 36px height. The "Subscribe" CTA in the masthead and footer. Uses `{typography.utility-link}` (Graphik 14px / 500). The only filled button in the editorial chrome. **`button-secondary`** — Transparent fill, ink text, 1px ink border, `{rounded.sm}` 4px radius. The "Sign In" treatment in the top-nav and the "Read more" tertiary CTAs at the foot of article tiles. **`top-nav`** — Ink fill (`{colors.ink}`), white text, 48px height, 16x32 padding. Sits as a black utility bar beneath the centered masthead. Houses the section-navigation links (News, Books & Culture, Fiction & Poetry, Humor & Cartoons, Magazine, Video, Podcasts, Archive, Goings On) in 12px Graphik. **`nav-link`** — Transparent background, white text on the black nav bar, `{typography.nav-link}` (Graphik 12px / 500). 8px horizontal padding. No hover background visible in the captured surface. **`masthead`** — White canvas, ink text, centered Irvin wordmark at 28px display-md sizing, with 48px bottom padding before the black top-nav bar begins. **`hero-heading`** — White text on the black-and-white cover plate, `{typography.display-xl}` (Irvin Heading Pro 36px / 400). 0 padding because the headline floats over the photograph in the lower-left quadrant. **`section-heading`** — Ink text on white, `{typography.display-md}` (Irvin 28px / 400). Used for "Today's Mix," "The Lede," "The Mail," "The Cycle" — the standing-section labels. **`body-paragraph`** — Default ink text at `{typography.body-feature}` (Caslon 21px / 31.5px). The long-form article body — 30% larger than the typical 16px news-blog default. **`body-deck`** — Caslon 22px / 28px for the deck (article-tile subhead) that sits below each headline. Slightly tighter leading than the body to keep tile heights compact. **`article-tile`** — White canvas, ink text, square corners, 0 internal padding. The photograph sits flush at the top; the eyebrow, headline, and byline stack below. **`article-tile-headline`** — Ink text, `{typography.body-deck}` (Caslon 22px / 28px), 8px vertical padding. The Caslon serif headline above each article tile. **`eyebrow`** — Neutraface small-caps at 10px / 400 with 1.5px tracking, ink color, 8px bottom padding. Sits above every article-tile headline as the category label ("THE CURRENT MOMENT," "Q. & A.," "ANNALS OF TECHNOLOGY"). **`byline`** — Graphik 13px / 500, ink-muted color, 8px vertical padding. The named-author byline below each headline ("By Susan B. Glasser," "By Atul Gawande"), with the section's "Annals of …" small-caps label trailing as needed. **`divider`** — 1px `{colors.hairline}` rule between article-tile rows and between section bands. The structural separator throughout the page. **`photo-plate`** — White canvas, 0px radius, 0 padding. Every photograph and illustration renders edge-to-edge on its container with no border, no shadow, no inset. **`breaking-news-strip`** — Accent-red fill (`{colors.accent-red}`), white text, `{typography.eyebrow-lg}` (Neutraface 15px / 600), 8x16 padding, 32px height. The single chromatic moment in the editorial chrome — used only on the live breaking-news banner and one footer alert overlay. **`text-input`** — White canvas, ink text, 1px ink border, `{rounded.xs}` 1px radius, 8x16 padding, 40px height. Used in the newsletter-signup form at the foot of the page. The 1px radius is the only non-zero editorial rounding in the system. **`card`** — White canvas, ink text, square corners, 1px `{colors.hairline}` border, 16px padding. Used sparingly for utility blocks (newsletter signup callout, cartoon caption-contest tile). **`footer`** — White canvas, ink-muted text, `{typography.caption}` (Graphik 10px / 500), 48x32 padding. Carries the standing footer columns (News, Books & Culture, Fiction & Poetry, About Us, Contact) in Graphik utility type, with the accent-red alert overlay riding above as needed. ## Do's and Don'ts **Do** set body type in `{typography.body-feature}` (Caslon 21px / 31.5px) for long-form features. The print-cadence body size is the system's most distinctive move — dropping to 16px to "match the web" forfeits the entire magazine-on-screen positioning. **Do** use `{colors.hairline}` (1px #e5e5e5 rules) instead of card borders or box-shadows between rows of article tiles. The page should read as continuous editorial columns, not as a grid of containers. **Do** stack the eyebrow-headline-byline lockup in that exact order on every article tile — Neutraface small-caps category label first, Caslon headline second, Graphik byline third. Reversing the order or swapping the families breaks the print-derived information hierarchy. **Do** render photographs and illustrations at `{rounded.none}` (0px) with no border, no shadow, no inset. The photographic plate IS the frame; adding rounding turns the editorial page into a Pinterest grid. **Don't** light a CTA or a link in `{colors.accent-red}` (#db3334). The red is reserved for the breaking-news strip and the footer alert overlay; multiplying it into buttons or section accents dilutes the single editorial moment it owns and breaks the chromatic restraint that distinguishes this brand from CNN-style red-saturated news chrome. **Don't** introduce a 4px or 8px radius on article tiles, photographs, or the cover plate. The system is square-by-default for everything editorial; the 8-16px radii in the captured CSS belong to the cookie-consent overlay (a third-party Fides modal) and should not propagate into the editorial chrome. **Don't** swap Adobe Caslon Pro for a screen-tuned serif (Charter, Source Serif, Georgia) on the body. The Old Style proportions of Caslon are the magazine's print signature; substituting a screen-optimized serif at the same 21px size loses the high-contrast vertical stress that makes the body read as broadsheet rather than blog. **Don't** render Graphik in any tier above 14px. Graphik is the utility voice — nav links, captions, bylines, footer chrome. Bumping it to display size shoulders aside the Irvin display face and confuses the wayfinding-vs-editorial hierarchy that the four-family stack is built to enforce. ## Known Gaps - **Hover and focus states:** documented only for the `{component.button-primary}` resting state; the full state matrix (focus rings, disabled tints, error states) is not captured from the marketing surface. - **Form input validation:** the `{component.text-input}` field carries the newsletter-signup resting state only; success / error / loading variants are not exposed on the captured surface. - **Dark mode:** there is none. The captured surface is light-only, and there is no `prefers-color-scheme: dark` rule in the page CSS. - **Long-form article surfaces:** this DESIGN.md captures the homepage editorial chrome. The full long-form reading experience (drop-cap treatments, pull-quote framing, illustrated section breaks, footnote styling) lives behind the paywall and is not represented here. - **Cartoon and caption-contest chrome:** the cartoon strip embeds a custom layout (illustration plate plus caption box plus voting tray) that is not tokenized in this file. - **The third-party cookie-consent overlay:** the 4-48px radii, the Inter font family, and the #2b2e35 primary-button color in the captured CSS all belong to a Fides modal that is not part of the editorial system and should be ignored when building from these tokens. - **Video player chrome:** the 48px / 60px rounded play / pause buttons in the captured radii belong to a single embedded player and are not part of the editorial radius scale.