What is The New York Times' primary brand color?

There isn't one — and that absence is the design. The Times runs no branded accent color in the manner of Bloomberg Orange, Stripe Indigo, or Airbnb Rausch. The chromatic identity is carried by near-black ink (`#121212`) on a white canvas, with chromatic semantics scoped to specific editorial functions — breaking-news red (`#d0021b`) for the live indicator, developing-story orange (`#e6540a`) bound to the `--color-signal-developing` variable, editorial blue (`#326891`) for column accents, and a single highlighter yellow (`#fefad1`) reserved for keyword marks via `--color-signal-highlight`. None of these paint a button fill or a background wash. The closest thing to a brand voltage is the Old English wordmark itself — set as a static SVG, never tinted, never animated.

What typography does the NYT use, and what should I substitute?

Four newsroom-licensed families do the work. nyt-cheltenham (a custom cut of the 1896 Bertram Goodhue Cheltenham) carries 16–20px serif headlines in weight 700, with fallback to cheltenham-fallback-georgia and Georgia. nyt-franklin (the digital cut of Franklin Gothic) handles every UPPERCASE eyebrow, nav link, byline, and section label at 8.96–14px across weights 400/500/600/700/800 — including the signature 10px / 500 / 1px-tracked eyebrow. nyt-imperial carries 14px / 400 body copy at 19px leading. nyt-karnak (a slab serif derived from W. A. Dwiggins' 1942 Karnak) and nyt-cheltenham-text-cond appear rarely for display callouts and condensed headers. If the proprietary cuts are unavailable, Georgia + Libre Franklin + Source Serif substitute cleanly at the published sizes.

Why are corners so square on this homepage?

Three radius values exist on the entire homepage — 3px (the structural default, used on 10+ surfaces), 4px (used on 6 surfaces), and 50% (used on 6 avatar and indicator circles). There is no 8px, no 12px, no pill geometry. The square-corner discipline is deliberate — story cards at 3px radius read as newsprint reproductions rather than as iOS tiles. The image circles at 50% are reserved for byline avatars and Live indicators; everything else stays at 3px or 4px. Round a story card to 12px and the page stops looking like a newspaper-of-record and starts looking like Apple News.

How are the chromatic signal colors used?

Each signal color is bound through a CSS variable to a single editorial function. Breaking-news red (`#d0021b`) is bound to `--color-signal-breaking` — the small LIVE pulse and breaking-news rail kicker, never used as a button fill. Developing-story orange (`#e6540a`) is bound to `--color-signal-developing` — the orange tag on stories that are still updating. Editorial blue (`#326891`) is bound to `--color-signal-editorial` for column-specific accents; the related `#2671dc` accent blue is bound to `--color-signal-accent` for link hover and focus rings. Positive green (`#267c30`) is bound to `--color-signal-positive` — markets-up and confirmation states. Highlighter yellow (`#fefad1`) is bound to `--color-signal-highlight` — the keyword-mark color inside search results. Each color tied to exactly one editorial signal.

Does the NYT have a dark mode for this surface?

The marketing homepage extracted here is light-only. A dark variant exists for the iOS and Android apps and for the authenticated reading view on nytimes.com, but the public homepage canvas stays `#ffffff` with `#121212` ink across every captured frame. If you derive a dark variant from these tokens, invert the canvas to `#121212` (the existing ink color), shift ink to `#ffffff`, keep the chromatic signals pinned to the same hex values — `#d0021b` breaking red and `#326891` editorial blue read correctly against both backgrounds. The CSS variable system on the page already exposes `--color-background-inversePrimary` (`#121212`) and `--color-content-inversePrimary` (`#ffffff`), which suggests the inversion is engineered even if not exposed via a toggle on this surface.

Can I use this DESIGN.md to build a news React app?

Yes. Feed the file to Claude, Cursor, or any agent that reads structured design tokens and it reproduces the Times' voice — white canvas, near-black ink, nyt-cheltenham 16–20px serif headlines, nyt-franklin UPPERCASE eyebrows at 10px / 1px tracking, nyt-imperial 14px body, chromatic editorial semantics tied to CSS variables, and the absent branded CTA. The 19 component entries cover the masthead, top nav, breaking-news banner, story card, photo-essay tile, byline row, section eyebrow, and the text input. Article-detail long-form chrome, the games hub (Wordle, Spelling Bee, Connections), Cooking, and Wirecutter live on separate surfaces with their own sub-brand palettes — those are out of scope here.

The New York Times Design System

NYTimes.com as a DESIGN.md file.

About The New York Times DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source nytimes.com

News & Publishing

The New York Times homepage reads less like a digital product and more like a print front page that learned to scroll. The canvas is white ("#ffffff"), the ink is a near-black "#121212" rather than pure "#000000", and the wordmark is the 174-year-old Old English script — set as a static SVG above a thin "#dfdfdf" rule that runs the full container width. Headlines never escape nyt-cheltenham serif at 16–20px in weight 700; the body sits in nyt-imperial at 14px / 400 with a tight 19px leading; every UPPERCASE section eyebrow uses nyt-franklin 10px / 500 with an unusually aggressive 1px tracking — the eyebrow tier alone accounts for 65 of the page's 280-odd text-color instances. There is no hero illustration, no gradient wash, no animated marquee. The brand voltage is the masthead itself.

This DESIGN.md file packages the homepage into a structured spec. Inside: 19 color tokens organized into ink (near-black #121212, secondary #363636, tertiary #5a5a5a, quaternary #727272), surface (#ffffff canvas, #ebebeb tint, #dfdfdf quaternary stroke), and chromatic signals — breaking-news red "#d0021b", developing-story orange "#e6540a", editorial blue "#326891" with its darker "#a61b1e" negative variant, editorial-accent blue "#2671dc", positive green "#267c30", and the single highlighter yellow "#fefad1"; 11 typography tokens spanning nyt-cheltenham serif headlines (16–20px), nyt-franklin sans UI work (8.96–14px), nyt-imperial body (14px), nyt-karnak display, and nyt-cheltenham-text-cond condensed; a 3-step radius scale dominated by "3px" corners; an 11-step spacing scale built on a 4px unit with a "10px" workhorse; and 19 component specifications covering the top nav, masthead wordmark, story cards, photo packages, breaking-news banners, and the section eyebrow. The format follows the Google Labs DESIGN.md specification.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces the Times' wire-service-meets-serif voice — white canvas, near-black ink, nyt-cheltenham serif headlines, UPPERCASE nyt-franklin labels, square-corner cards at "3px" radius, chromatic editorial semantics, and the load-bearing absence of a branded CTA color. Reference the tokens to paste hex values into Tailwind config, or audit any news surface against the spec's discipline. Where most editorial sites since 2020 have chased the Apple News tile-rounded aesthetic or The Verge's neon hazard chrome, the Times has bet the opposite direction — that restraint, serif typography at 16–20px, and chromatic semantics tied to specific editorial functions can outlast a decade of redesign cycles. That bet is the design.

What makes it distinct

Four-family newsroom stacknyt-cheltenham for 16–20px serif headlines, nyt-franklin for UPPERCASE labels, nyt-imperial for 14px body, nyt-karnak for the rare display callout
Editorial signal palettebreaking-news red #d0021b, developing orange #e6540a, editorial blue #326891, never used as button fills or wash backgrounds
1px UPPERCASE eyebrow trackingnyt-franklin 10px / 500 with 1px letter-spacing carries 65+ section kickers, the densest editorial-label tier in this directory
Square-corner defaultstory cards at 3px radius, image circles at 50%, near-zero pill geometry across 19 component slots
Hairline-as-elevation#ebebeb tertiary tints and #dfdfdf quaternary strokes carry every column rule; zero drop shadows on the captured homepage

Live at nytimes.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

nytimes.com

Explore The New York Times

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

The New York Times design system FAQ

Common questions about The New York Times's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

The New York Times — official site

The newspaper itself — read the homepage to see the Cheltenham serif ladder and Old English masthead rule in motion.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use The New York Times in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→