Etienne Studio
Specimen
Loading
Goodside · Henri Helene
High-contrast editorial rigor, bold black serifs floating over stark gallery white
Click any value to copy. Roles are suggestions, not gospel.
- #db8e23oklch(70.9% 0.145 69)Dominant
- #ecc88doklch(85.0% 0.086 80)Surface
- #049c04oklch(60.1% 0.203 143)Ink
- #9e9163oklch(65.7% 0.065 94)Accent
- #c4c0b3oklch(80.7% 0.018 93)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Epicene Text | 59px | 300 | 1.2 | -2.35008px | Aa Bb Cc |
| h3 | Epicene Text | 59px | 300 | 1.2 | -2.35008px | Aa Bb Cc |
| body | Epicene Text | 16px | 300 | 1.4 | 0 | Aa Bb Cc |
| button | Arial | 13px | 300 | 1.4 | 0 | Aa Bb Cc |
:root {
--color-dominant: #db8e23;
--color-surface: #ecc88d;
--color-ink: #049c04;
--color-accent: #9e9163;
--color-detail: #c4c0b3;
}
/* CSS variables exposed by source */
:root {
--text-h3: clamp(17px,1.73vw,24.9px);
--text-h4: 18px;
--text-h1: clamp(26px,4.08vw,58.8px);
--text-caption: clamp(10px,0.84vw,12.1px);
--text-body: clamp(16px,1.39vw,20px);
--text-h2: clamp(21px,2.71vw,39px);
--ink: #000;
--bg: #fff;
--serif: 'Epicene Text','Test Epicene Text','Instrument Serif',Georgia,serif;
--line: #696969;
--ease: cubic-bezier(0.22,1,0.36,1);
--pad: clamp(12px,1.32vw,19px);
}Drop-in prompt
Build a landing page in the visual style of Goodside · Henri Helene.
Reference design system (extracted from the live site):
- Palette: #db8e23, #ecc88d, #049c04, #9e9163, #c4c0b3
- Typefaces: Epicene Text, Arial
- Macrostructure: Specimen
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/goodside-studio--work-henri-helene
