№ pudding-cool

Pudding Cool

Quiet, spacious pinks and deep blues; elegant, flowing sans-serif, airy and hopeful.

Ecosystem Indexminimalism editorial medialight

The page presents a curated collection of articles, each with a distinct visual identity. The layout prioritizes individual article previews, using a grid to showcase diverse content and a clean, spacious design. · online magazine, article grid, editorial design, minimalist blog, news website, content showcase, visual curation

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 · pastel · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#34bcdc
OKLCHoklch(73.8% 0.120 218)
RoleDominant
find sites →
Hex#040515
OKLCHoklch(12.6% 0.038 276)
RoleSurface
find sites →
Hex#84d4eb
OKLCHoklch(82.7% 0.085 218)
RoleInk
find sites →
Hex#48628c
OKLCHoklch(49.4% 0.075 260)
RoleAccent
find sites →
Hex#cdb2ba
OKLCHoklch(78.9% 0.033 358)
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
h3	Gooper SemiCondensed	32px	500	1	-0.8px	Aa Bb Cc
body	Gooper SemiCondensed	16px	400	1.4	0	Aa Bb Cc
button	Atlas Typewriter	13px	400	1	0	Aa Bb Cc

Spacing scale

16px

24px

32px

60px

Radius scale

0px

2px

3px

6px

Container

Max content width 1280px

Export

:root {
  --color-dominant: #34bcdc;
  --color-surface: #040515;
  --color-ink: #84d4eb;
  --color-accent: #48628c;
  --color-detail: #cdb2ba;
}

/* CSS variables exposed by source */
:root {
  --color-gray-800: rgb(55, 55, 55);
  --border-radius: 3px;
  --font-body: "Gooper SemiCondensed", Iowan Old Style, Times New Roman, Times, serif;
  --color-bg: #ffffff;
  --color-button-hover: rgb(78, 78, 78);
  --font-size-small: clamp(15px, 1.25vw, 1rem);
  --color-button-fg: rgb(239, 239, 239);
  --color-focus: #3AE660;
  --color-secondary-gray: rgb(109, 109, 109);
  --color-selection: rgb(202, 202, 202);
  --color-placeholder: rgb(135, 135, 135);
  --color-gray-300: rgb(202, 202, 202);
  --color-yellow: #e5e338;
  --color-gray-1000: rgb(25, 25, 25);
  --color-gray-500: rgb(135, 135, 135);
  --color-gray-50: rgb(247, 247, 247);
  --font-size-large: clamp(1.5rem, 2.5vw, 2.5rem);
  --color-gray-900: rgb(38, 38, 38);
  --color-default-story-bg: rgb(239, 239, 239);
  --font-form: "Atlas Typewriter", Menlo, Consolas, Monaco, monospace;
  --color-white: #ffffff;
  --color-gray-400: rgb(168, 168, 168);
  --color-gray-700: rgb(78, 78, 78);
  --color-gray-600: rgb(109, 109, 109);
  --color-mark: #e5e338;
  --font-size-giant: clamp(3rem, 4vw, 5rem);
  --font-weight-bold: 900;
  --color-gray-100: rgb(239, 239, 239);
  --color-button-bg: rgb(38, 38, 38);
  --color-border: rgb(202, 202, 202);
  --color-primary: #000000;
  --color-gray-200: rgb(223, 223, 223);
  --color-red: #ff533d;
  --color-black: #000000;
  --color-green: #3AE660;
  --font-weight-normal: 400;
  --font-size-medium: clamp(1rem, 1.75vw, 1.5rem);
  --color-blue: #4717f6;
  --color-input-fg: rgb(38, 38, 38);
  --font-weight-thin: 100;
  --color-fg: rgb(38, 38, 38);
  --color-purple: #a239ca;
  --color-electric-green: #3AE660;
  --font-size-xsmall: clamp(12px, 1vw, .8rem);
  --color-link-hover: rgb(109, 109, 109);
  --color-link: #000000;
  --color-input-bg: rgb(247, 247, 247);
  --32px: 2rem;
  --margin-left: 10vw;
  --80px: 5rem;
  --24px: 1.5rem;
  --18px: 1.125rem;
  --width-column-regular: 720px;
  --z-middle: 0;
  --margin-left-mobile: 5vw;
  --22px: 1.375rem;
  --serif: "Gooper SemiCondensed", Iowan Old Style, Times New Roman, Times, serif;
  --48px: 3rem;
  --mono: "Atlas Typewriter", Menlo, Consolas, Monaco, monospace;
  --128px: 8rem;
}

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 Pudding Cool.
Reference design system (extracted from the live site):
- Palette: #34bcdc, #040515, #84d4eb, #48628c, #cdb2ba
- Typefaces: Gooper SemiCondensed, Atlas Typewriter
- 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/pudding-cool

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Gooper SemiCondensed

32px

500

-0.8px

Aa Bb Cc

body

Gooper SemiCondensed

16px

400

1.4

Aa Bb Cc

button

Atlas Typewriter

13px

400

Aa Bb Cc

:root { --color-dominant: #34bcdc; --color-surface: #040515; --color-ink: #84d4eb; --color-accent: #48628c; --color-detail: #cdb2ba; } /* CSS variables exposed by source */ :root { --color-gray-800: rgb(55, 55, 55); --border-radius: 3px; --font-body: "Gooper SemiCondensed", Iowan Old Style, Times New Roman, Times, serif; --color-bg: #ffffff; --color-button-hover: rgb(78, 78, 78); --font-size-small: clamp(15px, 1.25vw, 1rem); --color-button-fg: rgb(239, 239, 239); --color-focus: #3AE660; --color-secondary-gray: rgb(109, 109, 109); --color-selection: rgb(202, 202, 202); --color-placeholder: rgb(135, 135, 135); --color-gray-300: rgb(202, 202, 202); --color-yellow: #e5e338; --color-gray-1000: rgb(25, 25, 25); --color-gray-500: rgb(135, 135, 135); --color-gray-50: rgb(247, 247, 247); --font-size-large: clamp(1.5rem, 2.5vw, 2.5rem); --color-gray-900: rgb(38, 38, 38); --color-default-story-bg: rgb(239, 239, 239); --font-form: "Atlas Typewriter", Menlo, Consolas, Monaco, monospace; --color-white: #ffffff; --color-gray-400: rgb(168, 168, 168); --color-gray-700: rgb(78, 78, 78); --color-gray-600: rgb(109, 109, 109); --color-mark: #e5e338; --font-size-giant: clamp(3rem, 4vw, 5rem); --font-weight-bold: 900; --color-gray-100: rgb(239, 239, 239); --color-button-bg: rgb(38, 38, 38); --color-border: rgb(202, 202, 202); --color-primary: #000000; --color-gray-200: rgb(223, 223, 223); --color-red: #ff533d; --color-black: #000000; --color-green: #3AE660; --font-weight-normal: 400; --font-size-medium: clamp(1rem, 1.75vw, 1.5rem); --color-blue: #4717f6; --color-input-fg: rgb(38, 38, 38); --font-weight-thin: 100; --color-fg: rgb(38, 38, 38); --color-purple: #a239ca; --color-electric-green: #3AE660; --font-size-xsmall: clamp(12px, 1vw, .8rem); --color-link-hover: rgb(109, 109, 109); --color-link: #000000; --color-input-bg: rgb(247, 247, 247); --32px: 2rem; --margin-left: 10vw; --80px: 5rem; --24px: 1.5rem; --18px: 1.125rem; --width-column-regular: 720px; --z-middle: 0; --margin-left-mobile: 5vw; --22px: 1.375rem; --serif: "Gooper SemiCondensed", Iowan Old Style, Times New Roman, Times, serif; --48px: 3rem; --mono: "Atlas Typewriter", Menlo, Consolas, Monaco, monospace; --128px: 8rem; }

Build a landing page in the visual style of Pudding Cool. Reference design system (extracted from the live site): - Palette: #34bcdc, #040515, #84d4eb, #48628c, #cdb2ba - Typefaces: Gooper SemiCondensed, Atlas Typewriter - 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/pudding-cool