№ eater-com--dining-out-944352-stissing-house-tavern-hudson-valley

Eater

Crisp, warm ochre and deep umber, clean sans-serif, spacious, thoughtfully curated.

Ecosystem Indexeditorial minimalism swiss dark mode media food beveragedark

The layout prioritizes a clean, grid-based presentation of articles. Typography is clean and legible, with ample white space creating a sense of calm and allowing the content to breathe. The overall feel is straightforward and functional. · food news, restaurant reviews, dining blog, local eats, food media, eater website, news grid

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

SwatchHexOKLCHSuggested roleCopy

Hex#e50909
OKLCHoklch(58.1% 0.235 29)
RoleDominant
find sites →
Hex#7c1b04
OKLCHoklch(38.6% 0.135 34)
RoleSurface
find sites →
Hex#f4c46c
OKLCHoklch(84.5% 0.120 81)
RoleInk
find sites →
Hex#956868
OKLCHoklch(56.4% 0.058 19)
RoleAccent
find sites →
Hex#c0cdd4
OKLCHoklch(84.0% 0.017 231)
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	Sample
h2	__degular_471322	24px	700	1.1	Aa Bb Cc
body	ui-sans-serif	16px	400	1.5	Aa Bb Cc
button	ui-sans-serif	16px	400	1.5	Aa Bb Cc

Spacing scale

7px

12px

16px

20px

25px

30px

35px

40px

70px

80px

Radius scale

0px

2px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #e50909;
  --color-surface: #7c1b04;
  --color-ink: #f4c46c;
  --color-accent: #956868;
  --color-detail: #c0cdd4;
}

/* CSS variables exposed by source */
:root {
  --font-degular: '__degular_471322', '__degular_Fallback_471322', Arial, sans-serif;
  --font-eater: '__eater_cd823f', '__eater_Fallback_cd823f', Arial, sans-serif;
  --font-literata: '__Literata_4bdf59', '__Literata_Fallback_4bdf59';
}

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 Eater.
Reference design system (extracted from the live site):
- Palette: #e50909, #7c1b04, #f4c46c, #956868, #c0cdd4
- Typefaces: __degular_471322, ui-sans-serif
- Macrostructure: Ecosystem Index
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/eater-com--dining-out-944352-stissing-house-tavern-hudson-valley

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

__degular_471322

24px

700

1.1

Aa Bb Cc

body

ui-sans-serif

16px

400

1.5

Aa Bb Cc

button

ui-sans-serif

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #e50909; --color-surface: #7c1b04; --color-ink: #f4c46c; --color-accent: #956868; --color-detail: #c0cdd4; } /* CSS variables exposed by source */ :root { --font-degular: '__degular_471322', '__degular_Fallback_471322', Arial, sans-serif; --font-eater: '__eater_cd823f', '__eater_Fallback_cd823f', Arial, sans-serif; --font-literata: '__Literata_4bdf59', '__Literata_Fallback_4bdf59'; }

Build a landing page in the visual style of Eater. Reference design system (extracted from the live site): - Palette: #e50909, #7c1b04, #f4c46c, #956868, #c0cdd4 - Typefaces: __degular_471322, ui-sans-serif - Macrostructure: Ecosystem Index 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/eater-com--dining-out-944352-stissing-house-tavern-hudson-valley