Etienne Studio
Specimen
Loading
EY Doberman
Soft ochre and cream, clean sans-serif rhythm, spacious and quietly confident.
Click any value to copy. Roles are suggestions, not gospel.
- #fbcc4boklch(86.4% 0.151 88)Dominant
- #f9dc7eoklch(89.9% 0.118 93)Surface
- #695424oklch(45.7% 0.071 86)Ink
- #beac74oklch(74.7% 0.077 92)Accent
- #cea6c1oklch(76.9% 0.059 338)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| body | Gerstner-Programm | 20px | 400 | 1.2 | 0 | Aa Bb Cc |
| caption | Gerstner-Programm | 20px | 400 | 1 | 0 | Aa Bb Cc |
| button | Gerstner-Programm | 39px | 400 | 1 | -0.3888px | Aa Bb Cc |
:root {
--color-dominant: #fbcc4b;
--color-surface: #f9dc7e;
--color-ink: #695424;
--color-accent: #beac74;
--color-detail: #cea6c1;
}
/* CSS variables exposed by source */
:root {
--spacingLg: clamp(2.5rem, 5.555556vw, 7.5rem);
--spacingSm: clamp(.25rem, .2777778vw, .9375rem);
--bg: black;
--text: white;
--spacingXs: clamp(.625rem, .5555556vw, 1rem);
--spacingMd: clamp(.625rem, 1.111111vw, 1.875rem);
--spacingXl: clamp(5rem, 8.333333vw, 11.25rem);
--tw-ring-offset-shadow: 0 0 #0000;
--vh: 9px;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--black: black;
--white: white;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--red: #ff0000;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-translate-y: 0;
--tw-rotate: 0;
--sunsetBlaze: #E55937;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of EY Doberman.
Reference design system (extracted from the live site):
- Palette: #fbcc4b, #f9dc7e, #695424, #beac74, #cea6c1
- Typefaces: Gerstner-Programm
- 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/doberman-co
