№ markclennon-com

Mark Clennon: Home

Cool, muted greys and warm ochres float in expansive, airy negative space.

Specimenminimalism editorial portfoliolight

Mark Clennon: Home - mobile — Mobile · 375

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.

SwatchHexOKLCHSuggested roleCopy

Hex#cd8229
OKLCHoklch(67.1% 0.135 65)
RoleDominant
find sites →
Hex#c5755a
OKLCHoklch(64.4% 0.108 39)
RoleSurface
find sites →
Hex#743b16
OKLCHoklch(41.8% 0.094 50)
RoleInk
find sites →
Hex#a07764
OKLCHoklch(60.5% 0.059 46)
RoleAccent
find sites →
Hex#c6a18f
OKLCHoklch(73.8% 0.051 47)
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
body	Boogy Brut Poster Web White	16px	400	1.2	0	Aa Bb Cc

Container

Max content width 1440px

Export

:root {
  --color-dominant: #cd8229;
  --color-surface: #c5755a;
  --color-ink: #743b16;
  --color-accent: #a07764;
  --color-detail: #c6a18f;
}

/* CSS variables exposed by source */
:root {
  --visual-hidden: 0;
  --main-dark: #000000;
  --white: white;
  --main-space: 10vw;
  --grey: #d9d9d9;
  --plyr-color-main: #000;
  --main-light: #D18221;
  --black: black;
}

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 Mark Clennon: Home.
Reference design system (extracted from the live site):
- Palette: #cd8229, #c5755a, #743b16, #a07764, #c6a18f
- Typefaces: Boogy Brut Poster Web White
- Macrostructure: Specimen
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/markclennon-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

body

Boogy Brut Poster Web White

16px

400

1.2

Aa Bb Cc

:root { --color-dominant: #cd8229; --color-surface: #c5755a; --color-ink: #743b16; --color-accent: #a07764; --color-detail: #c6a18f; } /* CSS variables exposed by source */ :root { --visual-hidden: 0; --main-dark: #000000; --white: white; --main-space: 10vw; --grey: #d9d9d9; --plyr-color-main: #000; --main-light: #D18221; --black: black; }

Build a landing page in the visual style of Mark Clennon: Home. Reference design system (extracted from the live site): - Palette: #cd8229, #c5755a, #743b16, #a07764, #c6a18f - Typefaces: Boogy Brut Poster Web White - Macrostructure: Specimen 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/markclennon-com