№ gehry-getty-edu

Frank Gehry and the Walt Disney Concert Hall | Sculpting Harmony

Bold, brutalist black forms float against a warm, textured ochre expanse.

Specimenminimalism editorial monochrome brutalism culture architecturelight

How Frank Gehry and his team designed a monument to music— the story of the Walt Disney Concert Hall. A new online exhibition from Getty. · minimalism, editorial, monochrome, brutalism, portfolio, agency, media, hero-fullbleed

Frank Gehry and the Walt Disney Concert Hall | Sculpting Harmony - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Frank Gehry and the Walt Disney Concert Hall | Sculpting Harmony - full page scroll

Frank Gehry and the Walt Disney Concert Hall | Sculpting Harmony - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

SwatchHexOKLCHSuggested roleCopy

Hex#fca443
OKLCHoklch(79.0% 0.150 65)
RoleDominant
find sites →
Hex#f49c3c
OKLCHoklch(76.6% 0.149 64)
RoleSurface
find sites →
Hex#6c4c1c
OKLCHoklch(44.2% 0.077 74)
RoleInk
find sites →
Hex#965002
OKLCHoklch(50.5% 0.120 58)
RoleAccent
find sites →
Hex#904f08
OKLCHoklch(49.5% 0.114 59)
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	sans-serif	40px	700	1.4	0	Aa Bb Cc
h2	Reckless	55px	200	1	-3.036px	Aa Bb Cc
h3	Roboto Mono	12px	500	1.4	0	Aa Bb Cc
body	sans-serif	12px	400	1.4	0	Aa Bb Cc
button	Roboto Mono	14px	500	1.4	0	Aa Bb Cc

Spacing scale

8px

12px

16px

26px

32px

80px

96px

Radius scale

0px

32px

64px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #fca443;
  --color-surface: #f49c3c;
  --color-ink: #6c4c1c;
  --color-accent: #965002;
  --color-detail: #904f08;
}

/* CSS variables exposed by source */
:root {
  --topMargin: calc(5rem + 6rem);
  --getty-blue: #4596ff;
  --getty-green: #16a147;
  --columns: 6;
  --menuHeight: 5rem;
  --getty-red: #ff6359;
  --sideMargin: 2rem;
  --getty-yellow: #ffa441;
}

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 Frank Gehry and the Walt Disney Concert Hall | Sculpting Harmony.
Reference design system (extracted from the live site):
- Palette: #fca443, #f49c3c, #6c4c1c, #965002, #904f08
- Typefaces: sans-serif, Reckless, Roboto Mono
- 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/gehry-getty-edu

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

sans-serif

40px

700

1.4

Aa Bb Cc

Reckless

55px

200

-3.036px

Aa Bb Cc

Roboto Mono

12px

500

1.4

Aa Bb Cc

body

sans-serif

12px

400

1.4

Aa Bb Cc

button

Roboto Mono

14px

500

1.4

Aa Bb Cc

:root { --color-dominant: #fca443; --color-surface: #f49c3c; --color-ink: #6c4c1c; --color-accent: #965002; --color-detail: #904f08; } /* CSS variables exposed by source */ :root { --topMargin: calc(5rem + 6rem); --getty-blue: #4596ff; --getty-green: #16a147; --columns: 6; --menuHeight: 5rem; --getty-red: #ff6359; --sideMargin: 2rem; --getty-yellow: #ffa441; }

Build a landing page in the visual style of Frank Gehry and the Walt Disney Concert Hall | Sculpting Harmony. Reference design system (extracted from the live site): - Palette: #fca443, #f49c3c, #6c4c1c, #965002, #904f08 - Typefaces: sans-serif, Reckless, Roboto Mono - 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/gehry-getty-edu