Philosophy
Luxury design signals scarcity through restraint. It is not gold-everything; it is fewer, finer elements executed with obsessive precision. Deep calm grounds, one metallic accent, slow generous spacing, and typography set like a fashion house lookbook. The site should feel like it has all the time in the world.
Nothing shouts. Weight comes from material quality — subtle sheen, perfect kerning, imagery treated like campaign photography.
Typography
- Display: Cormorant Garamond, Marcellus, or Italiana — high-contrast serifs with elegant terminals. Set large (clamp 2.5–5rem), tight (-0.01em), often in caps with wide tracking (+0.18em) for labels.
- Body: Jost, Outfit, or a light grotesque at 300–400 weight. Line-height 1.7+, smaller sizes than usual (15–16px) read as refined rather than timid when margins are wide.
- Letterspaced uppercase micro-labels are the signature move:
LETTER-SPACING: .22EM; FONT-SIZE: .68REM.
Color
Near-black or deep botanical greens as ground; champagne, brass, or muted gold as the single accent (oklch(0.78 0.09 85)). Cream ivory for text. Absolutely no pure white backgrounds — luxury lives in the last 10% of lightness. Dark mode is native territory here.
Surfaces & backgrounds
Vast flat fields with barely-perceptible radial vignettes. Thin metallic gradient lines (1px linear-gradient stops between two adjacent golds) as rules. Photography full-bleed and unhurried, always color-graded to the palette. Marble/linen textures only if genuinely subtle.
Layout grammar
Centered ceremony or extreme asymmetry — both work, mixing them doesn't. Huge vertical padding (8–12rem between sections). Product/content presented one item per viewport, museum-style. Numbers set in oldstyle figures. Navigation reduced to a hamburger or a single line of micro-labels.
Motion
Slow reveals (700–900ms) with soft opacity and 8–12px rise. Parallax at whisper volume. Hover states: underline grows from left, image scales 1.03 over 800ms. Nothing bounces, nothing spins.
Reference theme
[data-theme="maison"] {
color-scheme: dark;
--color-base-100: oklch(0.16 0.008 260);
--color-base-200: oklch(0.2 0.01 260);
--color-base-content: oklch(0.91 0.015 90);
--color-primary: oklch(0.76 0.1 85);
--color-primary-content: oklch(0.16 0.01 260);
--color-secondary: oklch(0.62 0.06 40);
--color-neutral: oklch(0.24 0.01 260);
--color-neutral-content: oklch(0.9 0.015 90);
--radius-box: 0rem;
--radius-field: 0rem;
--radius-selector: 0rem;
--border: 1px;
--depth: 0;
}
Headings in "Cormorant Garamond" 500, body in "Jost" 350.
Pitfalls
- Don't stack multiple golds/glitters — one metal, matte unless highlighted once.
- Don't crowd. If a section feels empty, add space before adding elements.
- Don't use playful rounded corners or bright colors; they break the register instantly.