Etienne Studio
Specimen
Loading
Brand Appart – Design studio for bold startups
Crisp, pale geometry; stark sans-serifs float on expansive, quiet white space.
Click any value to copy. Roles are suggestions, not gospel.
- #fb924doklch(75.9% 0.152 52)Dominant
- #fbc59doklch(86.2% 0.081 58)Surface
- #813502oklch(42.8% 0.118 46)Ink
- #7c7c74oklch(58.4% 0.012 107)Accent
- #c6b2a6oklch(77.7% 0.029 53)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Youth | 112px | 700 | 0.8 | -5.6px | Aa Bb Cc |
| h2 | Youth | 118px | 700 | 0.8 | -5.92px | Aa Bb Cc |
| h3 | Youth | 26px | 900 | 0.9 | -2.048px | Aa Bb Cc |
| body | PP Neue Montreal | 16px | 500 | 1.25 | 0 | Aa Bb Cc |
| button | PP Neue Montreal | 13px | 700 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fb924d;
--color-surface: #fbc59d;
--color-ink: #813502;
--color-accent: #7c7c74;
--color-detail: #c6b2a6;
}
/* CSS variables exposed by source */
:root {
--size-container: clamp(768px, 100vw, 1920px);
--size-container-min: 768px;
--bg-d: #f2f0e7;
--size-container-ideal: 1440;
--border-radius: .75em;
--size-unit: 16;
--bg-darker: #ebe9df;
--size-container-max: 1920px;
--size-font: calc(clamp(768px, 100vw, 1920px) / (1440 / 16));
--border-radius-min: .37em;
--bg: #fbf9ef;
--base: #171412;
--yellow: #ffc765;
--24: 1.25em;
--grey: #8e827c;
--padding: 2em;
--purple: #3d2fa9;
--gradient-base: #eee1d7;
--white: white;
--grid-cols: 24;
--red: #ff3c34;
--easeOut: cubic-bezier(.22,.61,.36,1);
--ease: cubic-bezier(.36, .33, 0, 1);
--orange: #f72;
}Drop-in prompt
Build a landing page in the visual style of Brand Appart – Design studio for bold startups.
Reference design system (extracted from the live site):
- Palette: #fb924d, #fbc59d, #813502, #7c7c74, #c6b2a6
- Typefaces: Youth, PP Neue Montreal
- 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/brandappart-com
