№ thebroad-org

The Broad

Crisp, pale gallery space: clean sans-serifs float on a muted, sophisticated color field.

Marquee Herominimalism editorial swiss culturelight

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#d4041c
OKLCHoklch(54.8% 0.222 26)
RoleDominant
find sites →
Hex#cbaa92
OKLCHoklch(76.1% 0.051 58)
RoleSurface
find sites →
Hex#11b781
OKLCHoklch(69.1% 0.147 163)
RoleInk
find sites →
Hex#be7d8d
OKLCHoklch(66.1% 0.083 4)
RoleAccent
find sites →
Hex#d4c1b5
OKLCHoklch(82.3% 0.027 54)
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	JeanLuc	36px	700	0.83	0	Aa Bb Cc
h3	Roboto	14px	700	1.07	1.6px	Aa Bb Cc
body	Roboto	14px	400	1.43	0	Aa Bb Cc
button	Roboto	14px	400	1.43	0	Aa Bb Cc

Spacing scale

15px

20px

40px

65px

80px

100px

Radius scale

0px

5px

50px

Container

Max content width 1170px

Export

:root {
  --color-dominant: #d4041c;
  --color-surface: #cbaa92;
  --color-ink: #11b781;
  --color-accent: #be7d8d;
  --color-detail: #d4c1b5;
}

/* CSS variables exposed by source */
:root {
  --spacing-lg: 64px;
  --spacing-sm: 36px;
  --spacing-md: 50px;
  --fa-style-family-classic: "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
  --fa-style-family-brands: "Font Awesome 6 Brands";
}

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 The Broad.
Reference design system (extracted from the live site):
- Palette: #d4041c, #cbaa92, #11b781, #be7d8d, #d4c1b5
- Typefaces: JeanLuc, Roboto
- Macrostructure: Marquee Hero
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/thebroad-org

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

JeanLuc

36px

700

0.83

Aa Bb Cc

Roboto

14px

700

1.07

1.6px

Aa Bb Cc

body

Roboto

14px

400

1.43

Aa Bb Cc

button

Roboto

14px

400

1.43

Aa Bb Cc

:root { --color-dominant: #d4041c; --color-surface: #cbaa92; --color-ink: #11b781; --color-accent: #be7d8d; --color-detail: #d4c1b5; } /* CSS variables exposed by source */ :root { --spacing-lg: 64px; --spacing-sm: 36px; --spacing-md: 50px; --fa-style-family-classic: "Font Awesome 6 Free"; --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"; --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"; --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"; --fa-style-family-brands: "Font Awesome 6 Brands"; }

Build a landing page in the visual style of The Broad. Reference design system (extracted from the live site): - Palette: #d4041c, #cbaa92, #11b781, #be7d8d, #d4c1b5 - Typefaces: JeanLuc, Roboto - Macrostructure: Marquee Hero 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/thebroad-org