№ designmuseum-org--about-us

Part of Designmuseum - 2 pages captured →

Designmuseum

Cool, quiet geometry: muted teal and charcoal, crisp sans-serif, expansive, airy depth.

Ecosystem Indexminimalism editorial swiss culturelight

The design is clean and spacious, prioritizing visual hierarchy and clear communication. A large hero image establishes the subject matter, while concise text and subtle navigation guide the user through the site's offerings. · design museum, architecture, contemporary design, museum website, cultural institution, london, design education

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

SwatchHexOKLCHSuggested roleCopy

Hex#c8c728
OKLCHoklch(80.5% 0.165 109)
RoleDominant
find sites →
Hex#909020
OKLCHoklch(63.4% 0.127 110)
RoleSurface
find sites →
Hex#8aafe4
OKLCHoklch(74.7% 0.087 257)
RoleInk
find sites →
Hex#697d93
OKLCHoklch(58.2% 0.041 251)
RoleAccent
find sites →
Hex#8897c3
OKLCHoklch(68.1% 0.067 270)
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	din-pro-alternate	30px	400	1.4	0	Aa Bb Cc
h2	din-pro	24px	500	1.04	-1px	Aa Bb Cc
body	din-pro	15px	400	1.4	0	Aa Bb Cc
button	din-pro	30px	400	1.4	0	Aa Bb Cc

Spacing scale

10px

40px

Radius scale

0px

Container

Max content width 884px

Export

:root {
  --color-dominant: #c8c728;
  --color-surface: #909020;
  --color-ink: #8aafe4;
  --color-accent: #697d93;
  --color-detail: #8897c3;
}

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 Designmuseum.
Reference design system (extracted from the live site):
- Palette: #c8c728, #909020, #8aafe4, #697d93, #8897c3
- Typefaces: din-pro-alternate, din-pro
- 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/designmuseum-org--about-us

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

din-pro-alternate

30px

400

1.4

Aa Bb Cc

din-pro

24px

500

1.04

-1px

Aa Bb Cc

body

din-pro

15px

400

1.4

Aa Bb Cc

button

din-pro

30px

400

1.4

Aa Bb Cc

Build a landing page in the visual style of Designmuseum. Reference design system (extracted from the live site): - Palette: #c8c728, #909020, #8aafe4, #697d93, #8897c3 - Typefaces: din-pro-alternate, din-pro - 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/designmuseum-org--about-us