№ knowablemagazine-org

Knowablemagazine

Deep indigo expanse, clean sans-serif clarity, subtle textured paper feel.

Photographiceditorial minimalism medialight

The page uses a striking photographic hero image overlaid with text, creating a sense of intellectual depth. The muted color palette and ample negative space contribute to a sophisticated, scholarly feel. · science magazine, brain research, cognitive science, knowable magazine, editorial design, dark website, minimalist layout, scientific illustration

Knowablemagazine - 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.

Reads as: muted · earthy · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#cc4c34
OKLCHoklch(58.6% 0.167 33)
RoleDominant
find sites →
Hex#1c0ca0
OKLCHoklch(33.6% 0.210 270)
RoleSurface
find sites →
Hex#e1917b
OKLCHoklch(73.3% 0.103 36)
RoleInk
find sites →
Hex#59779e
OKLCHoklch(56.2% 0.070 255)
RoleAccent
find sites →
Hex#bcaf7a
OKLCHoklch(75.2% 0.072 96)
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
h1	capitolium-2	50px	700	1.1	Aa Bb Cc
h2	capitolium-2	30px	400	1.1	Aa Bb Cc
h3	capitolium-2	20px	400	1.1	Aa Bb Cc
body	proxima-nova	16px	400	1.15	Aa Bb Cc

Spacing scale

10px

25px

30px

40px

Radius scale

0px

3px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #cc4c34;
  --color-surface: #1c0ca0;
  --color-ink: #e1917b;
  --color-accent: #59779e;
  --color-detail: #bcaf7a;
}

/* CSS variables exposed by source */
:root {
  --cookie-bar-height: 29px;
}

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 Knowablemagazine.
Reference design system (extracted from the live site):
- Palette: #cc4c34, #1c0ca0, #e1917b, #59779e, #bcaf7a
- Typefaces: capitolium-2, proxima-nova, sans-serif
- Macrostructure: Photographic
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/knowablemagazine-org

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

capitolium-2

50px

700

1.1

Aa Bb Cc

capitolium-2

30px

400

1.1

Aa Bb Cc

capitolium-2

20px

400

1.1

Aa Bb Cc

body

proxima-nova

16px

400

1.15

Aa Bb Cc

:root { --color-dominant: #cc4c34; --color-surface: #1c0ca0; --color-ink: #e1917b; --color-accent: #59779e; --color-detail: #bcaf7a; } /* CSS variables exposed by source */ :root { --cookie-bar-height: 29px; }

Build a landing page in the visual style of Knowablemagazine. Reference design system (extracted from the live site): - Palette: #cc4c34, #1c0ca0, #e1917b, #59779e, #bcaf7a - Typefaces: capitolium-2, proxima-nova, sans-serif - Macrostructure: Photographic 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/knowablemagazine-org