Serpentinegalleries
Photographic
Quiet, warm paper and stark black text, a contemplative, spacious editorial feel.




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 | GagosianHeadline | 60px | 700 | 0.8 | 0.6px | Aa Bb Cc |
| h2 | minion-pro | 19px | 400 | 1.18 | 0 | Aa Bb Cc |
| h3 | GagosianHeadline | 60px | 700 | 0.8 | 0.6px | Aa Bb Cc |
| body | minion-pro | 19px | 400 | 1.18 | 0 | Aa Bb Cc |
| button | GTAmerica | 18px | 400 | 1.25 | -0.126px | Aa Bb Cc |
Max content width 1832px
:root {
--color-dominant: #b07f4e;
--color-surface: #5b4228;
--color-ink: #eaddd0;
--color-accent: #a07866;
--color-detail: #ccafa0;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--cc-btn-primary-hover-border-color: #000;
--tw-ring-shadow: 0 0 #0000;
--cc-webkit-scrollbar-bg: #f0f4f7;
--cc-toggle-enabled-icon-color: #fff;
--cc-bg: #fff;
--cc-btn-primary-hover-color: #fff;
--cc-cookie-category-block-border: #f0f4f7;
--cc-toggle-readonly-bg: #d5dee2;
--cc-overlay-bg: rgba(0,0,0,.541);
--cc-modal-transition-duration: .25s;
--cc-btn-secondary-bg: #eaeff2;
--cc-btn-primary-border-color: #30363c;
--cc-toggle-off-knob-bg: #fff;
--cc-cookie-category-expanded-block-hover-bg: #dee4e9;
--cc-cookie-category-block-hover-bg: #e9eff4;
--cc-pm-toggle-border-radius: 4em;
--tw-border-spacing-x: 0;
--cc-modal-border-radius: .6em;
--cc-cookie-category-block-hover-border: #e9eff4;
--tw-scale-y: 1;
--cc-secondary-color: #5e6266;
--cc-footer-border-color: #e4eaed;
--tw-ring-color: rgba(59,130,246,.5);
--cc-btn-primary-bg: #30363c;
--cc-btn-gap: 5px;
--tw-translate-y: 0;
--cc-btn-secondary-hover-color: #000;
--cc-btn-secondary-border-color: #eaeff2;
--tw-rotate: 0;
--cc-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--cc-toggle-on-knob-bg: #fff;
--tw-ring-offset-color: #fff;
--cc-cookie-category-expanded-block-bg: transparent;
--cc-toggle-readonly-knob-icon-color: #d5dee2;
--cc-btn-secondary-color: #2c2f31;
--cc-section-category-border: #f0f4f7;
--cc-btn-secondary-hover-bg: #d4dae0;
--cc-btn-primary-hover-bg: #000;
--cc-footer-color: #5e6266;
--tw-skew-x: 0;
--cc-toggle-disabled-icon-color: #fff;
--cc-webkit-scrollbar-hover-bg: #000;
--cc-btn-secondary-hover-border-color: #d4dae0;
--tw-shadow: 0 0 #0000;
--cc-modal-margin: 1em;
--tw-bg-opacity: 1;
--tw-ring-offset-width: 0px;
--cc-separator-border-color: #f0f4f7;
--tw-translate-x: 0;
--cc-btn-border-radius: .5em;
--cc-toggle-on-bg: #30363c;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--cc-footer-bg: #eaeff2;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--cc-cookie-category-block-bg: #f0f4f7;
--cc-btn-primary-color: #fff;
--cc-toggle-readonly-knob-bg: #fff;
}Drop-in prompt
Build a landing page in the visual style of Gagosian.
Reference design system (extracted from the live site):
- Palette: #b07f4e, #5b4228, #eaddd0, #a07866, #ccafa0
- Typefaces: GagosianHeadline, minion-pro, GTAmerica
- 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/gagosian-com--artists-gelitin