Area17
Split Studio
Loading
L'Étude — Modular Creative Studio
Cool, stark geometry; crisp sans serif, muted crimson and deep indigo.
Click any value to copy. Roles are suggestions, not gospel.
- #ec3c2coklch(62.2% 0.214 30)Dominant
- #f48e85oklch(75.3% 0.125 26)Surface
- #062694oklch(34.3% 0.181 264)Ink
- #488490oklch(57.8% 0.065 212)Accent
- #a3a6a7oklch(72.3% 0.004 220)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Indivisible | 32px | 700 | 1.05 | -0.32px | Aa Bb Cc |
| h2 | Indivisible | 13px | 550 | 1 | 0 | Aa Bb Cc |
| body | Indivisible | 16px | 500 | 1.2 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ec3c2c;
--color-surface: #f48e85;
--color-ink: #062694;
--color-accent: #488490;
--color-detail: #a3a6a7;
}
/* CSS variables exposed by source */
:root {
--color-gray: #9597a7;
--color-white: #fff;
--color-graydark: #151515;
--color-secondary: #ee382b;
--font-sans: "Indivisible",helvetica,arial,sans-serif;
--color-text: #151515;
--color-error: #ee382b;
--color-bg: #9597a7;
--color-graydark-rgb: 21,21,21;
--color-primary: #012094;
--space-xl: clamp(144px,10vw,160px);
--space-lg: clamp(96px,7vw,120px);
--space-md: clamp(48px,3.5vw,72px);
--color-beige: #f6e9d9;
--margin-side: 16px;
--columns: 26;
--inset-sticky: min(10vw,120px);
--inset-top: min(9vw,96px);
--inset: 24px;
--ease-quart-inout: cubic-bezier(.76,0,.24,1);
--ease-cubic-inout: cubic-bezier(.785,.135,.15,.86);
--column: calc(min(1800px, 100vw)/26);
--ease-quart: cubic-bezier(.165,.84,.44,1);
--cols: 26;
--screen: 100dvh;
--container-width: 1800px;
--ease-cubic: cubic-bezier(.33,1,.68,1);
}Drop-in prompt
Build a landing page in the visual style of L'Étude — Modular Creative Studio.
Reference design system (extracted from the live site):
- Palette: #ec3c2c, #f48e85, #062694, #488490, #a3a6a7
- Typefaces: Indivisible
- 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/letude-group
