№ medium-com

Medium

Quiet, open space; muted green and charcoal; clean, confident sans-serif clarity.

Specimenminimalism editorial swiss media creatorlight

The page prioritizes clear typography and ample white space. The green floral illustration and hand-drawn elements add a touch of organic informality, contrasting with the structured layout. It feels like a carefully curated presentation of ideas. · minimalist editorial, clean typography, white space design, creative platform, storytelling design, modern media, flat illustration, green accents, readable layout, content focused

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 · earthy

SwatchHexOKLCHSuggested roleCopy

Hex#34ac44
OKLCHoklch(65.6% 0.178 145)
RoleDominant
find sites →
Hex#2c7036
OKLCHoklch(48.7% 0.113 146)
RoleSurface
find sites →
Hex#aad8ab
OKLCHoklch(83.8% 0.078 145)
RoleInk
find sites →
Hex#54b464
OKLCHoklch(69.2% 0.147 147)
RoleAccent
find sites →
Hex#8cca91
OKLCHoklch(78.2% 0.102 146)
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
h2	gt-super	120px	400	0.83	-6.6px	Aa Bb Cc
h3	sohne	22px	400	1.27	0	Aa Bb Cc
body	Times	16px	400	1.4	0	Aa Bb Cc
button	sohne	14px	400	1.43	0	Aa Bb Cc

Export

:root {
  --color-dominant: #34ac44;
  --color-surface: #2c7036;
  --color-ink: #aad8ab;
  --color-accent: #54b464;
  --color-detail: #8cca91;
}

/* CSS variables exposed by source */
:root {
  --color-border-neutral-secondary-hover: #000000;
  --color-fg-neutral-tertiary: #ffffff;
  --color-bg-accent-secondary: #bbdbba;
  --color-bg-neutral-primary: #ffffff;
  --color-border-neutral-tertiary-hover: #d2d2d2;
  --color-bg-utility-yellow-primary: #fffae1;
  --color-bg-accent-secondary-hover: #9fcc9e;
  --color-bg-error-primary: #c94a4a;
  --color-fg-accent-primary: #1a8917;
  --color-bg-neutral-quaternary: #242424;
  --color-fg-neutral-secondary-hover: #3f3f3f;
  --color-bg-neutral-tertiary: #f9f9f9;
  --color-fg-neutral-primary-hover: #000000;
  --color-fg-accent-primary-hover: #156d12;
  --color-bg-utility-blue-primary: #e5f2ff;
  --color-fg-error-primary: #c94a4a;
  --color-bg-accent-tertiary: #d2e7d1;
  --color-border-neutral-secondary: #242424;
  --color-bg-error-primary-hover: #b63636;
  --color-fg-neutral-primary: #242424;
  --color-fg-neutral-secondary: #6b6b6b;
  --color-bg-accent-quaternary: #e8f3e8;
  --color-border-neutral-primary-hover: #e5e5e5;
  --color-border-neutral-tertiary: #e5e5e5;
  --color-fg-error-primary-hover: #b63636;
  --color-border-error-primary: #c94a4a;
  --color-bg-neutral-secondary: #f2f2f2;
  --color-border-neutral-primary: #f2f2f2;
  --color-border-error-primary-hover: #b63636;
  --reach-tabs: 1;
  --reach-menu-button: 1;
}

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 Medium.
Reference design system (extracted from the live site):
- Palette: #34ac44, #2c7036, #aad8ab, #54b464, #8cca91
- Typefaces: gt-super, Times, sohne
- 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/medium-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

gt-super

120px

400

0.83

-6.6px

Aa Bb Cc

sohne

22px

400

1.27

Aa Bb Cc

body

Times

16px

400

1.4

Aa Bb Cc

button

sohne

14px

400

1.43

Aa Bb Cc

:root { --color-dominant: #34ac44; --color-surface: #2c7036; --color-ink: #aad8ab; --color-accent: #54b464; --color-detail: #8cca91; } /* CSS variables exposed by source */ :root { --color-border-neutral-secondary-hover: #000000; --color-fg-neutral-tertiary: #ffffff; --color-bg-accent-secondary: #bbdbba; --color-bg-neutral-primary: #ffffff; --color-border-neutral-tertiary-hover: #d2d2d2; --color-bg-utility-yellow-primary: #fffae1; --color-bg-accent-secondary-hover: #9fcc9e; --color-bg-error-primary: #c94a4a; --color-fg-accent-primary: #1a8917; --color-bg-neutral-quaternary: #242424; --color-fg-neutral-secondary-hover: #3f3f3f; --color-bg-neutral-tertiary: #f9f9f9; --color-fg-neutral-primary-hover: #000000; --color-fg-accent-primary-hover: #156d12; --color-bg-utility-blue-primary: #e5f2ff; --color-fg-error-primary: #c94a4a; --color-bg-accent-tertiary: #d2e7d1; --color-border-neutral-secondary: #242424; --color-bg-error-primary-hover: #b63636; --color-fg-neutral-primary: #242424; --color-fg-neutral-secondary: #6b6b6b; --color-bg-accent-quaternary: #e8f3e8; --color-border-neutral-primary-hover: #e5e5e5; --color-border-neutral-tertiary: #e5e5e5; --color-fg-error-primary-hover: #b63636; --color-border-error-primary: #c94a4a; --color-bg-neutral-secondary: #f2f2f2; --color-border-neutral-primary: #f2f2f2; --color-border-error-primary-hover: #b63636; --reach-tabs: 1; --reach-menu-button: 1; }

Build a landing page in the visual style of Medium. Reference design system (extracted from the live site): - Palette: #34ac44, #2c7036, #aad8ab, #54b464, #8cca91 - Typefaces: gt-super, Times, sohne - 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/medium-com