№ cooking-nytimes-com--about-us

Part of Cooking Nytimes - 8 pages captured →

Cooking Nytimes

Warm, earthy tones and clean, open grids evoke quiet culinary exploration.

Bento Gridminimalism editorial swiss media food beveragelight

The layout prioritizes visual hierarchy through a grid of food photography and article previews. Clean typography and ample white space create a sense of refined presentation, emphasizing the quality of the content. · food blog, recipe website, cooking magazine, food media, editorial cooking, minimalist food, clean design, food photography, recipe index, culinary 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: muted · earthy · warm

SwatchHexOKLCHSuggested roleCopy

Hex#dd3921
OKLCHoklch(59.3% 0.204 31)
RoleDominant
find sites →
Hex#794120
OKLCHoklch(43.8% 0.090 49)
RoleSurface
find sites →
Hex#edc393
OKLCHoklch(84.3% 0.079 70)
RoleInk
find sites →
Hex#b18c66
OKLCHoklch(66.6% 0.069 67)
RoleAccent
find sites →
Hex#d1c5b5
OKLCHoklch(82.9% 0.026 75)
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	nyt-franklin	16px	500	1.45	0.32px	Aa Bb Cc
h2	nyt-karnak	14px	700	1.45	1.12px	Aa Bb Cc
h3	nyt-karnak	14px	700	1.45	1.12px	Aa Bb Cc
body	nyt-franklin	16px	400	1	0	Aa Bb Cc
button	nyt-franklin	16px	600	1	0.32px	Aa Bb Cc

Spacing scale

4px

8px

16px

20px

24px

26px

30px

32px

40px

54px

60px

64px

Radius scale

0px

3px

4px

20px

30px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #dd3921;
  --color-surface: #794120;
  --color-ink: #edc393;
  --color-accent: #b18c66;
  --color-detail: #d1c5b5;
}

/* CSS variables exposed by source */
:root {
  --color-text-radiobutton-hover: #717171;
  --color-bg-btn-important: #df321b;
  --color-bg-tab-selected: #f8e19a;
  --color-stroke-checkbox-selected-click: #df321b;
  --color-bg-checkbox-selected-disabled: #ccc;
  --color-stroke-checkbox-selected-hover: #717171;
  --text-content-width: 560px;
  --color-stroke-input-hover: #767676;
  --color-bg-checkbox-click: #fff;
  --color-stroke-checkbox-disabled: #ccc;
  --color-text-secondary-checkbox-disabled: #ccc;
  --color-bg-checkbox-disabled: #fff;
  --color-bg-sideNav: #fff;
  --color-stroke-checkbox-selected-disabled: #ccc;
  --color-bg-popover: #fff;
  --color-bg-sideNav-selected: #f8f8f5;
  --color-link-subdued: #717171;
  --color-bg-indicator-hover: #ccc;
  --color-text-secondary-radiobutton-click: #df321b;
  --color-text-secondary-checkbox-hover: #717171;
  --color-text-secondary-radiobutton: #717171;
  --color-stroke: #ccc;
  --color-stroke-checkbox-click: #df321b;
  --color-text-checkbox-click: #df321b;
  --color-bg-btn-important-disabled: #ec6c55;
  --color-bg-btn-overlay: rgba(34,34,34,0.9);
  --color-logo-default: #000;
  --color-text-checkbox-hover: #717171;
  --color-bg-sideNav-click: #f6f6f4;
  --color-bg-btn-important-click: #cf0000;
  --color-bg-indicator: #eaeaea;
  --color-text-secondary-checkbox-click: #df321b;
  --color-text-sideNav-selected: #222;
  --color-text-error: #cf0000;
  --color-bg-input: #fff;
  --color-bg-tab: #fff;
  --color-stroke-checkbox: #767676;
  --color-text-secondary-radiobutton-disabled: #ccc;
  --color-bg-sideNav-hover: #f6f6f4;
  --color-bg-toast: rgba(34,34,34,0.8);
  --color-text-sideNav: #222;
  --color-bg-card-loading: linear-gradient(90deg,rgba(204,204,204,0.4) 0%,rgba(204,204,204,0.25) 50%,rgba(204,204,204,0.4)) #fff;
  --color-bg-btn-important-hover: #d03a26;
  --color-stroke-thick: #222;
  --color-bg-section-marketing: #f6f6f4;
  --color-bg-page-overlay: rgba(0,0,0,0.6);
  --color-bg-tooltip: #fff;
  --color-stroke-focus: #346eb7;
  --color-text-checkbox: #222;
  --color-bg-btn-disabled: #fff;
  --color-text-sideNav-click: #717171;
  --color-bg-btn: #fff;
  --color-stroke-transparent: transparent;
  --color-link-click: #cf0000;
  --color-bg-checkbox: #fff;
  --color-text-disabled: #ccc;
  --color-bg-page: #f8f8f5;
  --color-text-sideNav-hover: #222;
  --color-text-radiobutton: #222;
  --color-text: #222;
}

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 Cooking Nytimes.
Reference design system (extracted from the live site):
- Palette: #dd3921, #794120, #edc393, #b18c66, #d1c5b5
- Typefaces: nyt-franklin, nyt-karnak
- Macrostructure: Bento Grid
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/cooking-nytimes-com--about-us

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

nyt-franklin

16px

500

1.45

0.32px

Aa Bb Cc

nyt-karnak

14px

700

1.45

1.12px

Aa Bb Cc

nyt-karnak

14px

700

1.45

1.12px

Aa Bb Cc

body

nyt-franklin

16px

400

Aa Bb Cc

button

nyt-franklin

16px

600

0.32px

Aa Bb Cc

:root { --color-dominant: #dd3921; --color-surface: #794120; --color-ink: #edc393; --color-accent: #b18c66; --color-detail: #d1c5b5; } /* CSS variables exposed by source */ :root { --color-text-radiobutton-hover: #717171; --color-bg-btn-important: #df321b; --color-bg-tab-selected: #f8e19a; --color-stroke-checkbox-selected-click: #df321b; --color-bg-checkbox-selected-disabled: #ccc; --color-stroke-checkbox-selected-hover: #717171; --text-content-width: 560px; --color-stroke-input-hover: #767676; --color-bg-checkbox-click: #fff; --color-stroke-checkbox-disabled: #ccc; --color-text-secondary-checkbox-disabled: #ccc; --color-bg-checkbox-disabled: #fff; --color-bg-sideNav: #fff; --color-stroke-checkbox-selected-disabled: #ccc; --color-bg-popover: #fff; --color-bg-sideNav-selected: #f8f8f5; --color-link-subdued: #717171; --color-bg-indicator-hover: #ccc; --color-text-secondary-radiobutton-click: #df321b; --color-text-secondary-checkbox-hover: #717171; --color-text-secondary-radiobutton: #717171; --color-stroke: #ccc; --color-stroke-checkbox-click: #df321b; --color-text-checkbox-click: #df321b; --color-bg-btn-important-disabled: #ec6c55; --color-bg-btn-overlay: rgba(34,34,34,0.9); --color-logo-default: #000; --color-text-checkbox-hover: #717171; --color-bg-sideNav-click: #f6f6f4; --color-bg-btn-important-click: #cf0000; --color-bg-indicator: #eaeaea; --color-text-secondary-checkbox-click: #df321b; --color-text-sideNav-selected: #222; --color-text-error: #cf0000; --color-bg-input: #fff; --color-bg-tab: #fff; --color-stroke-checkbox: #767676; --color-text-secondary-radiobutton-disabled: #ccc; --color-bg-sideNav-hover: #f6f6f4; --color-bg-toast: rgba(34,34,34,0.8); --color-text-sideNav: #222; --color-bg-card-loading: linear-gradient(90deg,rgba(204,204,204,0.4) 0%,rgba(204,204,204,0.25) 50%,rgba(204,204,204,0.4)) #fff; --color-bg-btn-important-hover: #d03a26; --color-stroke-thick: #222; --color-bg-section-marketing: #f6f6f4; --color-bg-page-overlay: rgba(0,0,0,0.6); --color-bg-tooltip: #fff; --color-stroke-focus: #346eb7; --color-text-checkbox: #222; --color-bg-btn-disabled: #fff; --color-text-sideNav-click: #717171; --color-bg-btn: #fff; --color-stroke-transparent: transparent; --color-link-click: #cf0000; --color-bg-checkbox: #fff; --color-text-disabled: #ccc; --color-bg-page: #f8f8f5; --color-text-sideNav-hover: #222; --color-text-radiobutton: #222; --color-text: #222; }

Build a landing page in the visual style of Cooking Nytimes. Reference design system (extracted from the live site): - Palette: #dd3921, #794120, #edc393, #b18c66, #d1c5b5 - Typefaces: nyt-franklin, nyt-karnak - Macrostructure: Bento Grid 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/cooking-nytimes-com--about-us