Guggenheim
Split Studio
Cool, spacious, architectural—crisp sans-serif against a muted, refined grey-green.




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 | haas-grotesk-sign | 65px | 400 | 0.85 | 0 | Aa Bb Cc |
| h2 | haas-grotesk-sign | 35px | 400 | 0.85 | 0 | Aa Bb Cc |
| h3 | haas-grotesk-sign | 35px | 400 | 0.85 | 0 | Aa Bb Cc |
| body | haas-grotesk-text | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | haas-grotesk-text | 15px | 500 | 1 | 0 | Aa Bb Cc |
Max content width 1696px
:root {
--color-dominant: #7b2d27;
--color-surface: #8e883e;
--color-ink: #a1cdea;
--color-accent: #647581;
--color-detail: #b0c6d0;
}
/* CSS variables exposed by source */
:root {
--spacing-large: 48px;
--color-background-lightbox: #000;
--color-background-code: #f2f2f2;
--spacing-xlarge: 96px;
--color-orange: #f90;
--color-text--gray: #666;
--color-gray-20: #333;
--color-background: #fff;
--color-red: #eb0000;
--color-green: #393;
--color-blue: #39c;
--spacing-xxlarge: 128px;
--color-purple: #939;
--spacing-small: 16px;
--color-headline--gray: #949494;
--spacing-medium: 32px;
--color-yellow: #fc0;
--primary-nav-height: 64px;
--color-gray-40: #666;
--color-text-disabled: #ccc;
--spacing-tiny: 8px;
--color-text: #000;
--color-border: #000;
--border-width: 1px;
--fa-style-family-classic: "Font Awesome 7 Free";
--admin-color-danger: #ce2a4b;
--readable-max-width-small: 480px;
--arrow-tall-width: 12px;
--body-font-size-tiny: .75rem;
--w-spacing: 24px;
--headline-font-size-xlarge: 5.625rem;
--admin-toolbar-color--dark: #313131;
--headline-font-family: haas-grotesk-sign, helvetica, arial, sans-serif;
--transition-all--slow: all .2s ease-out;
--focus-outline: #39c auto 5px;
--admin-color-warning: #ffb639;
--slider-items: 1;
--b26-green: #d7ff2d;
--body-font-size-large: 1.25rem;
--readable-max-width-header: 1200px;
--body-font-family: haas-grotesk-text, helvetica, arial, sans-serif;
--duration--slow: .2s;
--admin-border-radius: 6px;
--b26-blue: #00a7f5;
--admin-color-maroon: #926;
--body-font-size-xlarge: 1.875rem;
--admin-color-gray-light: #f8f8f8;
--card-width: 250px;
--admin-color-gray-light--dark: #eee;
--admin-uninitialized-editor-height: 126.8px;
--admin-color-orange: #e46947;
--admin-color-nav-text--dark: #9d9d9d;
--small-icon-width: 24px;
--max-width: 1600px;
--w-height: 280px;
--input-height-large: 64px;
--input-max-width-large: 640px;
--admin-color-nav-text: #cecece;
--headline-font-size-large: 4.0625rem;
--select-width: 256px;
}Drop-in prompt
Build a landing page in the visual style of Whitney.
Reference design system (extracted from the live site):
- Palette: #7b2d27, #8e883e, #a1cdea, #647581, #b0c6d0
- Typefaces: haas-grotesk-sign, haas-grotesk-text
- Macrostructure: Split Studio
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/whitney-org