№ provider-studio--journal

Provider · Blog

Warm oatmeal minimalism, bold black grotesques floating over airy linen space

Catalogueeditorial minimalism dark mode agencydark

High-contrast typographic hierarchy paired with a muted cream background. The layout uses an asymmetric grid of architectural photography and refined serif italics for a curated, gallery-like feel. · editorial agency, minimalist journal, luxury hospitality layout, cream background design, typographic hierarchy, curated 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: muted · warm

SwatchHexOKLCHSuggested roleCopy

Hex#7fb24c
OKLCHoklch(70.5% 0.144 131)
RoleDominant
find sites →
Hex#bcd7a2
OKLCHoklch(84.6% 0.077 130)
RoleSurface
find sites →
Hex#3c5424
OKLCHoklch(41.4% 0.078 131)
RoleInk
find sites →
Hex#ac8e69
OKLCHoklch(66.5% 0.063 72)
RoleAccent
find sites →
Hex#c4b4a4
OKLCHoklch(77.9% 0.029 67)
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	Italian Garamond	32px	400	1.1	-0.64px	Aa Bb Cc
h2	Italian Garamond	18px	400	1.1	-0.36px	Aa Bb Cc
body	Isola	14px	700	1.2	0	Aa Bb Cc
button	Isola	14px	700	1.2	0	Aa Bb Cc

Spacing scale

16px

120px

200px

240px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #7fb24c;
  --color-surface: #bcd7a2;
  --color-ink: #3c5424;
  --color-accent: #ac8e69;
  --color-detail: #c4b4a4;
}

/* CSS variables exposed by source */
:root {
  --color-white: #fff;
  --text-sans-sm-weight: 700;
  --color-black-12: #1f1f1f1f;
  --space-xs: 1rem;
  --color-cream: #ece8e1;
  --text-serif-sm-tracking: 0;
  --text-serif-md-size: 1.125rem;
  --text-serif-md-tracking: -.0225rem;
  --font-sans: "Isola", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-serif-xl-size: 2rem;
  --text-serif-sm-size: 1rem;
  --text-serif-lg-tracking: -.03rem;
  --text-serif-lg-leading: 1.1;
  --text-sans-sm-size: .875rem;
  --space-xl: 5rem;
  --space-md: 2rem;
  --color-black: #1f1f1f;
  --text-serif-lg-size: 1.5rem;
  --text-serif-sm-leading: 1.2;
  --space-2xs: .5rem;
  --text-serif-md-leading: 1.1;
  --font-serif: "Italian Garamond", Garamond, "Times New Roman", serif;
  --space-3xl: 12.5rem;
  --space-3xs: .25rem;
  --space-4xl: 15rem;
  --text-serif-xl-leading: 1.1;
  --text-serif-xl-tracking: -.04rem;
  --text-sans-sm-leading: 1.2;
  --space-sm: 1.5rem;
  --space-lg: 2.5rem;
  --space-2xl: 7.5rem;
  --grid-margin: 1rem;
  --grid-columns: 12;
  --grid-gutter: 1rem;
}

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 Provider · Blog.
Reference design system (extracted from the live site):
- Palette: #7fb24c, #bcd7a2, #3c5424, #ac8e69, #c4b4a4
- Typefaces: Italian Garamond, Isola
- Macrostructure: Catalogue
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/provider-studio--journal

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Italian Garamond

32px

400

1.1

-0.64px

Aa Bb Cc

Italian Garamond

18px

400

1.1

-0.36px

Aa Bb Cc

body

Isola

14px

700

1.2

Aa Bb Cc

button

Isola

14px

700

1.2

Aa Bb Cc

:root { --color-dominant: #7fb24c; --color-surface: #bcd7a2; --color-ink: #3c5424; --color-accent: #ac8e69; --color-detail: #c4b4a4; } /* CSS variables exposed by source */ :root { --color-white: #fff; --text-sans-sm-weight: 700; --color-black-12: #1f1f1f1f; --space-xs: 1rem; --color-cream: #ece8e1; --text-serif-sm-tracking: 0; --text-serif-md-size: 1.125rem; --text-serif-md-tracking: -.0225rem; --font-sans: "Isola", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --text-serif-xl-size: 2rem; --text-serif-sm-size: 1rem; --text-serif-lg-tracking: -.03rem; --text-serif-lg-leading: 1.1; --text-sans-sm-size: .875rem; --space-xl: 5rem; --space-md: 2rem; --color-black: #1f1f1f; --text-serif-lg-size: 1.5rem; --text-serif-sm-leading: 1.2; --space-2xs: .5rem; --text-serif-md-leading: 1.1; --font-serif: "Italian Garamond", Garamond, "Times New Roman", serif; --space-3xl: 12.5rem; --space-3xs: .25rem; --space-4xl: 15rem; --text-serif-xl-leading: 1.1; --text-serif-xl-tracking: -.04rem; --text-sans-sm-leading: 1.2; --space-sm: 1.5rem; --space-lg: 2.5rem; --space-2xl: 7.5rem; --grid-margin: 1rem; --grid-columns: 12; --grid-gutter: 1rem; }

Build a landing page in the visual style of Provider · Blog. Reference design system (extracted from the live site): - Palette: #7fb24c, #bcd7a2, #3c5424, #ac8e69, #c4b4a4 - Typefaces: Italian Garamond, Isola - Macrostructure: Catalogue 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/provider-studio--journal