> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Luxury

Fewer, finer — deep grounds, one metal, ceremonial space

- Category: Styles
- Palette: #101014 #ece7dd #c9a962 #6b7280
- Type pairing: Cormorant Garamond · Jost
- Tags: elegant serif gold dark refined

## 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

```css
[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.