Area17
Split Studio
Soft, warm beige and ochre tones, clean sans-serif lines, spacious and subtly textured.




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 | Clarkson | 64px | 300 | 1.04 | -3.84px | Aa Bb Cc |
| h2 | Clarkson | 40px | 400 | 1.08 | -1.6px | Aa Bb Cc |
| h3 | Clarkson Serif | 26px | 400 | 1.08 | -0.52px | Aa Bb Cc |
| body | sans-serif | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | sans-serif | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #a46c44;
--color-surface: #583f21;
--color-ink: #d8b8a1;
--color-accent: #a08969;
--color-detail: #cdcbc6;
}
/* CSS variables exposed by source */
:root {
--color-blue: #0072f0;
--color-focus: #087bb5;
--color-gray-800: #5a5a5a;
--color-shade-t-black-100: #0000000d;
--color-shade-t-white-50: #ffffff14;
--color-gray-500: #898989;
--color-shade-t-white-100: #ffffff1f;
--color-gray-200: #ddd;
--color-pink: #ff9898;
--color-red: #db3642;
--color-gray-900: #1a1a1a;
--color-shade-t-black-50: #00000008;
--color-red-vibrant: red;
--global-nav-height: 80px;
--gradient: 100%;
--grid-gutter-width: 40px;
--promo-banner-height: 40px;
--primitive-white: #fff;
--grid-column-width: calc((100vw - 520px)/12);
--primitive-black: #000;
--gradient-two: 100%;
}Drop-in prompt
Build a landing page in the visual style of Squarespace.
Reference design system (extracted from the live site):
- Palette: #a46c44, #583f21, #d8b8a1, #a08969, #cdcbc6
- Typefaces: Clarkson, sans-serif
- 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/squarespace-com