The New York Times – Health Section

Overview

The New York Times Health section embodies 'Journalistic Minimalism'—a design philosophy that prioritizes authoritative content over decorative flourish. The aesthetic is rooted in print journalism: classical serif headlines (nyt-karnak at 44px, 900 weight), restrained color palette (primarily #121212 on #ffffff), and generous white space that invites deep reading. The brand personality is trustworthy, precise, and intellectually rigorous. Voice is measured and evidence-based, never sensational. Example: 'New research suggests a link between sleep patterns and cardiovascular health, according to a study published this week.'

Colors

The color system is anchored by a journalistic blue primary (#346eb7), reserved exclusively for interactive elements (CTAs, links, focus states) and secondary navigation. This accent appears sparingly—roughly 5–8% of the page—ensuring it commands attention without overwhelming the content hierarchy. The surface stack relies on near-white neutrals: #ffffff (base), #f7f7f7 (dim), #ebebeb (container-low), and #cccccc (container-highest) for subtle section dividers and form backgrounds. Text is rendered in #121212 (on-surface) for maximum legibility at small sizes; secondary text uses #5a5a5a (on-surface-variant) for captions and metadata. Error states employ #a90111 (breaking-news red) for critical alerts. Borders and dividers use #959595 (outline) at 1px weight, creating visual separation wi

Typography

Typography is a two-tier system: serif for editorial content (headlines, body text) and sans-serif for interface chrome (buttons, labels, navigation). Serif headlines use nyt-karnak (a custom serif family) at 44px, 900 weight, with -0.015em letter-spacing for visual tightness and authority. Body text is set in Times New Roman at 16px, 400 weight, 24px line-height (1.5x), ensuring comfortable reading at arm's length. Sans-serif labels (nyt-franklin) are used for CTAs, form fields, and metadata at 11–14px with 0.01–0.02em letter-spacing for crispness. Small labels over busy backgrounds should apply text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) to ensure contrast. Headline hierarchy is strict: display (60px) for hero sections, headline-lg (44px) for section titles, headline-md (32px) for ar

Layout

The layout uses a fixed 1200px container (max-width: 1200px) centered on the viewport, with 24px horizontal gutters (3% padding on mobile, 0 auto on desktop). The grid is 12-column, with content typically spanning 8–10 columns to preserve margin space. Section rhythm is governed by the spacing scale: 24px (md) for intra-section gaps, 40px (lg) for section separation, and 64px (xl) for major breaks (e.g., between hero and article grid). White space is intentional and generous—never cramped. Article cards are laid out in a 3-column grid on desktop, 2-column on tablet, 1-column on mobile, with 24px gaps between items. The subscription CTA ('Subscribe for $1/week') is positioned in the top-right header at 36px height, using button-primary styling. Navigation tabs (HEALTH POLICY, GLOBAL HEALTH,

Elevation & Depth

Depth is achieved through subtle layering rather than dramatic shadows. The base layer (Level 1) is the white background (#ffffff). Level 2 (cards, form fields) uses a 1px border at #ebebeb and optional box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) for minimal lift. Level 3 (modals, overlays) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating clear separation. Hover states transition smoothly (0.2s ease) to a slightly darker surface (#f7f7f7 or #dfdfdf), signaling interactivity without jarring the user. The subscription modal overlay uses box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) for pr

Shapes

The design employs 'Architectural Sharpness'—minimal, precise corner radii that respect the grid and typography. Buttons use 3px border-radius (rounded.DEFAULT), matching the grid's 8px unit and creating a subtle, professional appearance. Form inputs also use 3px radius for consistency. Cards and containers use 2px (rounded.sm) or no radius at all, maintaining the print-like aesthetic. The only exception is badges and pills, which use full border-radius (9999px) for visual distinction. This restraint in rounding reinforces the journalistic, authoritative tone—sharp corners suggest precision an

Components

Action Elements Buttons are minimal and functional. Primary buttons (button-primary) use #346eb7 background, white text, 14px nyt-franklin, 600 weight, 3px radius, 7px 12px padding, and 36px height. Hover state darkens to #2d5a99 with a 0.2s ease transition. Secondary buttons (button-secondary) are transparent with a 1px #959595 border, 11px label-sm text, and 32px height; hover fills with #f7f7f7. Ghost buttons (button-ghost) are text-only with underline decoration (1px solid #cccccc, 2px offset) and no background; hover removes underline. All buttons use cursor: pointer and transition: background-color 0.2s ease for tactile feedback.

Containers & Surfaces Cards (card) are borderless with transparent background and no shadow by default. On hover, they transition to #f7f7f7 backgr

Do's and Don'ts

**Do**

• Do use nyt-karnak serif for all headlines and nyt-franklin sans-serif for interface labels—never mix serif and sans-serif in the same component.
• Do maintain 24px gutters and 1200px max-width on desktop; never stretch content edge-to-edge.
• Do reserve the primary blue (#346eb7) for CTAs, links, and focus states only—never use it for backgrounds or decorative elements.
• Do apply 0.2s ease transitions to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do use 1px borders at #ebebeb or #959595 to separate sections and form fields; avoid thick borders or drop shadows.
• Do prioritize readability: 16px body text, 1.5x line-height, high contrast (#121212 on #ffffff).

**Don't**

• Don't use rounded corners larger than 3px on buttons or form fields—the design is architectural, not playful.
• Don't apply multiple shadows or blur effects; the system is flat and legible.
• Don't use the primary blue (#346eb7) for body text or backgrounds; reserve it exclusively for interactive elements.
• Don't mix serif and sans-serif typefaces within a single component or section.
• Don't reduce line-height below 1.5x for body text or increase font-size above 18px without explicit design review.
• Don't use color alone to convey meaning; always pair color with text labels or icons for accessibility.