Immersive Garden
Split Studio
Loading
Pentagram
Warm, textured brick and cool, precise typography create a grounded, intellectual space.
Click any value to copy. Roles are suggestions, not gospel.
- #c6945coklch(70.2% 0.095 68)Dominant
- #84542coklch(49.1% 0.084 59)Surface
- #c7a17foklch(73.5% 0.065 63)Ink
- #a37b59oklch(61.4% 0.069 61)Accent
- #ded4ccoklch(87.6% 0.016 61)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Plain | 19px | 500 | 1.32 | 0 | Aa Bb Cc |
| h2 | Plain | 16px | 500 | 1.25 | 0 | Aa Bb Cc |
| h3 | Plain | 16px | 500 | 1.25 | 0 | Aa Bb Cc |
| body | Plain | 19px | 400 | 1.32 | 0 | Aa Bb Cc |
| button | Plain | 16px | 400 | 1.25 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #c6945c;
--color-surface: #84542c;
--color-ink: #c7a17f;
--color-accent: #a37b59;
--color-detail: #ded4cc;
}
/* CSS variables exposed by source */
:root {
--spacing-spacing-6: 2rem;
--spacing-spacing-4: 1.125rem;
--spacing-spacing-5: 1.5rem;
--spacing-spacing-10: 8rem;
--spacing-spacing-7: 3rem;
--spacing-spacing-3: .75rem;
--spacing-spacing-1: .25rem;
--spacing-spacing-2: .5rem;
--spacing-spacing-8: 4rem;
--spacing-spacing-11: 10rem;
--spacing-spacing-9: 6rem;
--spacing-header: 3.75rem;
--spacing-spacing-12: 12.25rem;
--f-heading-2--moz-osx-font-smoothing: grayscale;
--tw-ring-shadow: 0 0 #0000;
--f-heading-2-letter-spacing: -.02em;
--f-caption-font-feature-settings: "case" on;
--f-display-1-font-size: 8.1875rem;
--gray-150: #D9D9D9;
--f-heading-1-font-family: Plain, Arial, Sans-Serif;
--f-heading-4--webkit-font-smoothing: antialiased;
--f-caption-font-weight: 400;
--f-display-1-font-family: Plain, Arial, Sans-Serif;
--f-shop-cart-font-family: Plain, Arial, Sans-Serif;
--gray-450: #8C8C8C;
--gray-950: #0D0D0D;
--f-heading-5-line-height: 1.2;
--f-body-2-letter-spacing: 0;
--tw-border-spacing-x: 0;
--f-heading-2--webkit-font-smoothing: antialiased;
--f-heading-3-font-family: Plain, Arial, Sans-Serif;
--f-heading-2-font-size: 4.0625rem;
--f-heading-3--webkit-font-smoothing: antialiased;
--f-heading-5-font-size: 1.5rem;
--grid-column-bg: rgba(127, 255, 255, .25);
--f-heading-3-font-feature-settings: "case" on;
--f-display-1-font-weight: 350;
--tw-ring-color: rgb(59 130 246 / .5);
--f-number-font-size: .8125rem;
--f-heading-2-font-family: Plain, Arial, Sans-Serif;
--gray-600: #666666;
--gray-650: #595959;
--swiper-theme-color: #007aff;
--f-number-font-family: Plain, Arial, Sans-Serif;
--f-heading-4--moz-osx-font-smoothing: grayscale;
--gray-700: #4D4D4D;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--f-body-1-font-size: 1rem;
--f-number-font-weight: 400;
--f-number-letter-spacing: 0;
--f-body-1-line-height: 1.25;
--black: #000000;
--f-display-1-font-feature-settings: "case" on;
--tw-ring-offset-width: 0px;
--f-heading-4-font-weight: 400;
--gray-100: #E3E4E5;
--f-heading-3-letter-spacing: -.02em;
--grid-columns: 12;
--f-shop-cart--webkit-font-smoothing: antialiased;
}Drop-in prompt
Build a landing page in the visual style of Pentagram.
Reference design system (extracted from the live site):
- Palette: #c6945c, #84542c, #c7a17f, #a37b59, #ded4cc
- Typefaces: Plain
- 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/pentagram-com
