№ nytimes-com--ca-section-style

Nytimes

Cool gray clarity, crisp sans-serif, expansive white space—a serious, structured editorial presence.

Long Documentminimalism editorial swiss medialight

The page prioritizes delivering news content with a clean, structured layout. Typography is clear and legible, with a focus on hierarchy and readability. The overall feel is authoritative and straightforward. · news website, editorial design, minimalist news, new york times, clean layout, typography focused, high contrast, journalism website

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#a75f3f
OKLCHoklch(56.1% 0.105 44)
RoleDominant
find sites →
Hex#6a2918
OKLCHoklch(37.2% 0.098 36)
RoleSurface
find sites →
Hex#deae95
OKLCHoklch(78.8% 0.066 49)
RoleInk
find sites →
Hex#549c84
OKLCHoklch(63.9% 0.082 170)
RoleAccent
find sites →
Hex#94ccb8
OKLCHoklch(80.1% 0.065 171)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Times	16px	400	1	0	Aa Bb Cc
h2	Times	16px	400	1	0	Aa Bb Cc
h3	nyt-franklin	11px	500	1.82	0.44px	Aa Bb Cc
body	Times	16px	400	1	0	Aa Bb Cc
button	nyt-franklin	11px	700	1	0.22px	Aa Bb Cc

Spacing scale

4px

8px

9px

10px

12px

16px

18px

35px

40px

90px

97px

142px

151px

152px

213px

225px

Radius scale

0px

3px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #a75f3f;
  --color-surface: #6a2918;
  --color-ink: #deae95;
  --color-accent: #549c84;
  --color-detail: #94ccb8;
}

/* CSS variables exposed by source */
:root {
  --color-background-quaternary: #c7c7c7;
  --color-content-quintary: #8b8b8b;
  --color-background-tertiary: #ebebeb;
  --color-signal-negative: #a90111;
  --color-signal-highlight: #fefad1;
  --color-overlay-black: #000;
  --color-content-primary: #121212;
  --color-background-secondary: #f8f8f8;
  --color-stroke-tertiary: #c7c7c7;
  --color-background-primary: #fff;
  --color-content-tertiary: #5a5a5a;
  --color-signal-editorial: #326891;
  --color-content-secondary: #363636;
  --color-background-overlay: #121212;
  --color-static-white: #fff;
  --color-static-gray100: #000;
  --color-background-elevated: #fff;
  --color-signal-positive: #267c30;
  --color-content-quaternary: #727272;
  --color-stroke-secondary: #8b8b8b;
  --color-signal-breaking: #d0021b;
  --color-signal-accent: #2671dc;
  --color-stroke-primary: #121212;
  --color-signal-developing: #e6540a;
  --color-stroke-quaternary: #dfdfdf;
  --color-content-inversePrimary: #fff;
  --color-background-inversePrimary: #121212;
  --color-stroke-inversePrimary: #fff;
  --color-background-inverseSecondary: #363636;
  --tpl-theme-toast-max-width: 400px;
  --tpl-size-font-40: 2.5rem;
  --tpl-theme-button-glow-radius: .1875rem;
  --tpl-pvt-tpl-theme-dialog-background-color-light: #fff;
  --tpl-color-background-primary-always-light: #fff;
  --tpl-typography-headline-news-36: 700 2.25rem/1.15 nyt-cheltenham, cheltenham-fallback-georgia, cheltenham-fallback-noto, georgia, "times new roman", times, serif;
  --tpl-pvt-tpl-theme-dialog-title-color-light: #121212;
  --tpl-theme-story-list-section-divider: .125rem solid #121212;
  --tpl-pvt-tpl-theme-toast-content-color-dark: #f8f8f8;
  --tpl-theme-button-background-color: #fff;
  --tpl-typography-title-16: 600 1rem/1.3 nyt-franklin, helvetica, arial, sans-serif;
  --tpl-theme-dialog-outer-padding: 2rem;
  --tpl-pvt-tpl-theme-button-border-color-light: #121212;
  --tpl-line-height-1-35: 1.35;
  --tpl-theme-system-scale: m;
  --tpl-pvt-tpl-theme-story-list-bottom-label-color-dark: #bbb;
  --tpl-theme-button-shape: 3px;
  --tpl-typography-title-48: 600 3rem/1.1 nyt-franklin, helvetica, arial, sans-serif;
  --tpl-typography-headline-news-18-ls: .01em;
  --tpl-pvt-tpl-theme-button-background-color-pressed-dark: #fff;
  --tpl-pvt-tpl-theme-toast-background-color-light: #f8f8f8;
  --tpl-color-content-secondary-dim-user-inverse: #a3a3a3;
  --tpl-theme-story-list-text-alignment: start;
  --tpl-theme-button-extra-compact-icon-size: 12px;
  --tpl-color-background-primary-always-dark: #121212;
  --tpl-typography-text-xs: 500 .875rem/1.3 nyt-franklin, helvetica, arial, sans-serif;
  --tpl-typography-body-16: 400 1rem/1.39 nyt-imperial, georgia, "times new roman", times, serif;
  --tpl-typography-utility-2: 600 1rem/1.3 nyt-franklin, helvetica, arial, sans-serif;
  --tpl-theme-dialog-corner-radius: 3px;
  --tpl-color-background-secondary-user-inverse: #2a2a2a;
  --tpl-size-border-3: .1875rem;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Nytimes.
Reference design system (extracted from the live site):
- Palette: #a75f3f, #6a2918, #deae95, #549c84, #94ccb8
- Typefaces: Times, nyt-franklin
- Macrostructure: Long Document
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/nytimes-com--ca-section-style

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Times

16px

400

Aa Bb Cc

Times

16px

400

Aa Bb Cc

nyt-franklin

11px

500

1.82

0.44px

Aa Bb Cc

body

Times

16px

400

Aa Bb Cc

button

nyt-franklin

11px

700

0.22px

Aa Bb Cc

:root { --color-dominant: #a75f3f; --color-surface: #6a2918; --color-ink: #deae95; --color-accent: #549c84; --color-detail: #94ccb8; } /* CSS variables exposed by source */ :root { --color-background-quaternary: #c7c7c7; --color-content-quintary: #8b8b8b; --color-background-tertiary: #ebebeb; --color-signal-negative: #a90111; --color-signal-highlight: #fefad1; --color-overlay-black: #000; --color-content-primary: #121212; --color-background-secondary: #f8f8f8; --color-stroke-tertiary: #c7c7c7; --color-background-primary: #fff; --color-content-tertiary: #5a5a5a; --color-signal-editorial: #326891; --color-content-secondary: #363636; --color-background-overlay: #121212; --color-static-white: #fff; --color-static-gray100: #000; --color-background-elevated: #fff; --color-signal-positive: #267c30; --color-content-quaternary: #727272; --color-stroke-secondary: #8b8b8b; --color-signal-breaking: #d0021b; --color-signal-accent: #2671dc; --color-stroke-primary: #121212; --color-signal-developing: #e6540a; --color-stroke-quaternary: #dfdfdf; --color-content-inversePrimary: #fff; --color-background-inversePrimary: #121212; --color-stroke-inversePrimary: #fff; --color-background-inverseSecondary: #363636; --tpl-theme-toast-max-width: 400px; --tpl-size-font-40: 2.5rem; --tpl-theme-button-glow-radius: .1875rem; --tpl-pvt-tpl-theme-dialog-background-color-light: #fff; --tpl-color-background-primary-always-light: #fff; --tpl-typography-headline-news-36: 700 2.25rem/1.15 nyt-cheltenham, cheltenham-fallback-georgia, cheltenham-fallback-noto, georgia, "times new roman", times, serif; --tpl-pvt-tpl-theme-dialog-title-color-light: #121212; --tpl-theme-story-list-section-divider: .125rem solid #121212; --tpl-pvt-tpl-theme-toast-content-color-dark: #f8f8f8; --tpl-theme-button-background-color: #fff; --tpl-typography-title-16: 600 1rem/1.3 nyt-franklin, helvetica, arial, sans-serif; --tpl-theme-dialog-outer-padding: 2rem; --tpl-pvt-tpl-theme-button-border-color-light: #121212; --tpl-line-height-1-35: 1.35; --tpl-theme-system-scale: m; --tpl-pvt-tpl-theme-story-list-bottom-label-color-dark: #bbb; --tpl-theme-button-shape: 3px; --tpl-typography-title-48: 600 3rem/1.1 nyt-franklin, helvetica, arial, sans-serif; --tpl-typography-headline-news-18-ls: .01em; --tpl-pvt-tpl-theme-button-background-color-pressed-dark: #fff; --tpl-pvt-tpl-theme-toast-background-color-light: #f8f8f8; --tpl-color-content-secondary-dim-user-inverse: #a3a3a3; --tpl-theme-story-list-text-alignment: start; --tpl-theme-button-extra-compact-icon-size: 12px; --tpl-color-background-primary-always-dark: #121212; --tpl-typography-text-xs: 500 .875rem/1.3 nyt-franklin, helvetica, arial, sans-serif; --tpl-typography-body-16: 400 1rem/1.39 nyt-imperial, georgia, "times new roman", times, serif; --tpl-typography-utility-2: 600 1rem/1.3 nyt-franklin, helvetica, arial, sans-serif; --tpl-theme-dialog-corner-radius: 3px; --tpl-color-background-secondary-user-inverse: #2a2a2a; --tpl-size-border-3: .1875rem; }

Build a landing page in the visual style of Nytimes. Reference design system (extracted from the live site): - Palette: #a75f3f, #6a2918, #deae95, #549c84, #94ccb8 - Typefaces: Times, nyt-franklin - Macrostructure: Long Document Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/nytimes-com--ca-section-style