Cooperhewitt
Ecosystem Index
Pale, spacious gallery — clean sans-serif floats on soft, muted earth tones.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | MoMA Sans | 60px | 900 | 1 | -1.2px | Aa Bb Cc |
| h2 | MoMA Sans | 40px | 900 | 1 | -0.8px | Aa Bb Cc |
| h3 | MoMA Sans | 40px | 900 | 1 | -0.8px | Aa Bb Cc |
| body | MoMA Sans | 10px | 400 | 1 | 0 | Aa Bb Cc |
| button | MoMA Sans | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #04b3f3;
--color-surface: #0488b4;
--color-ink: #dcbca4;
--color-accent: #8f8378;
--color-detail: #acc0cc;
}
/* CSS variables exposed by source */
:root {
--color--gray--444: #444;
--color--brand--5--rgb: 255,143,28;
--color--brand--12: #ab79e6;
--color--membership--3--rgb: 246,246,247;
--color--membership--10--rgb: 94,94,0;
--color--gray--222: #222;
--color--gray--ccc: #ccc;
--color--membership--17--rgb: 189,60,0;
--color--collection--rgb: 0,0,0;
--color--membership--18: #ffe6e2;
--color--active--alpha: 0.04;
--color--membership--6: #d5faea;
--color--gray--333: #333;
--color--membership--13: #8a015f;
--color--collection--background: #fac300;
--color--membership--3: #f6f6f7;
--color--brand--7: #8fc421;
--color--brand--9--rgb: 107,220,197;
--color--brand--4--rgb: 255,160,150;
--color--focus--rgb: 0,0,0;
--color--black: #000;
--color--membership--1--rgb: 14,14,14;
--color--membership--18--rgb: 255,230,226;
--color--membership--11: #ad9200;
--color--gray--bbb--rgb: 187,187,187;
--color: rgba(0,0,0,1);
--color--gray--555--rgb: 85,85,85;
--color--collection--secondary: #00b7f2;
--color--brand--10--rgb: 0,183,242;
--color--gray--999: #999;
--color--background--rgb: 255,255,255;
--color--red: #e42d00;
--color--gray--aaa: #aaa;
--color--membership--16: #943800;
--color--gray--aaa--rgb: 170,170,170;
--color--brand--10: #00b7f2;
--color--red--rgb: 228,45,0;
--color--gray--ccc--rgb: 204,204,204;
--color--ps1--background--rgb: 0,0,0;
--color--brand--4: #ffa096;
--color--gray--333--rgb: 51,51,51;
--color--membership--10: #5e5e00;
--color--membership--2: #565e53;
--color--brand--2: #e82046;
--color--rgb: 0,0,0;
--color--brand--1--rgb: 247,82,189;
--color--gray--666: #666;
--color--gray--111: #111;
--color--gray--555: #555;
--color--brand--7--rgb: 143,196,33;
--color--membership--4--rgb: 0,46,97;
--color--membership--5: #09509f;
--color--gray--ddd--rgb: 221,221,221;
--color--membership--12--rgb: 254,255,185;
--color--gray--eee: #eee;
--color--brand--11: #5e96ff;
--color--membership--14--rgb: 179,51,112;
--color--brand--12--rgb: 171,121,230;
--color--gray--444--rgb: 68,68,68;
--color--membership--6--rgb: 213,250,234;
}Drop-in prompt
Build a landing page in the visual style of Moma.
Reference design system (extracted from the live site):
- Palette: #04b3f3, #0488b4, #dcbca4, #8f8378, #acc0cc
- Typefaces: MoMA Sans
- 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/moma-org