Quiet Luxury

---
name: quiet-luxury
description: Apply the Quiet Luxury visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Quiet Luxury, mentions old money aesthetic, stealth wealth, understated luxury, or describes near-monochrome cream and charcoal, hairline rules, light-weight garamond display — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Quiet Luxury Design System

Old-money restraint: near-monochrome cream and charcoal, hairline rules, a light-weight garamond that never shouts, letterspaced small-cap labels, and prices mentioned like an afterthought. Wealth signaled through what the page declines to do.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Quiet Luxury.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (old money aesthetic, stealth wealth, understated luxury, quiet opulence, heritage luxury), or describes its traits: near-monochrome cream and charcoal; hairline rules; light-weight garamond display; letterspaced small-cap labels; no pure black or pure white; vast unhurried margins.

## Design tokens

### Color palette

- Warm cream ground — never pure white: `#f6f3ec` (--color-bg)
- Slightly lifted panels and product tiles: `#fbf9f4` (--color-surface)
- Soft charcoal — never pure black: `#2c2a26` (--color-text)
- Secondary text, captions, prices: `#6b6660` (--color-text-muted)
- Deep umber-taupe for links and the rare emphasized element: `#57503f` (--color-accent)
- Hairline rules — the page's main structural device: `#ddd7c9` (--color-border)

### Typography

- Display / headings: Cormorant Garamond (fallback: Garamond, Georgia, serif) (ideal: Sabon, premium — use Cormorant Garamond as the free substitute)
- Body: Jost (fallback: Futura, Helvetica Neue, sans-serif) (ideal: Futura PT, premium — use Jost as the free substitute)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.2, letter-spacing 0.01em
- Body: line-height 1.7, letter-spacing 0.02em

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 40, 64, 96, 144 — Unhurried: wide margins, tall sections, short line lengths. The page never appears to be selling; it simply presents.
- Border radius: none 0px — Square everything. Curves read as friendly; this style is polite, not friendly.
- Border treatment: 1px solid #ddd7c9 — Hairline rules above and below sections, around images, under the nav — the defining structural element.

### Shadows

- none: `none` — Default — flatness is part of the restraint
- veil: `0 8px 32px rgba(44, 42, 38, 0.07)` — Only for modals and the cart drawer

### Layout

- Max content width: 1200px
- Centered single-column editorial passages alternating with 2-3 column product rows
- Hairline rules delimit every section; no background color changes
- Photography is muted, natural-light, and given full rows to itself
- Small-caps kickers with 0.15em tracking introduce every section

### Effects

- Letterspaced small-caps labels (font-variant: small-caps or uppercase at 11px/0.15em)
- Slow crossfade image galleries with no visible controls until hover

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 250ms / 500ms / 900ms
- Slow fades only; nothing slides or bounces
- Hover states are whisper-subtle: an underline appearing, an image crossfading
- Page transitions may fade through the cream ground

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f6f3ec;
  --color-surface: #fbf9f4;
  --color-text: #2c2a26;
  --color-text-muted: #6b6660;
  --color-accent: #57503f;
  --color-border: #ddd7c9;
  --radius-none: 0px;
  --shadow-veil: 0 8px 32px rgba(44, 42, 38, 0.07);
  --border-default: 1px solid #ddd7c9;
  --font-display: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-body: Jost, Futura, "Helvetica Neue", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.7;
  --tracking-heading: 0.01em;
  --tracking-body: 0.02em;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 250ms;
  --duration-base: 500ms;
  --duration-slow: 900ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Jost:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Sparse hairline-underlined bar: wordmark in Cormorant Garamond, three or four links in small letterspaced Jost, no CTA button
- **Hero:** A single Cormorant headline in charcoal on cream above one muted full-width photograph, hairline rule above and below
- **Card:** Unbordered image with hairline frame, product name in small caps, price in muted text — no button until hover
- **Button (primary):** Charcoal (#2c2a26) fill, cream text, square corners, small letterspaced label; used at most once per view
- **Button (secondary):** Text-only with a 1px underline that thickens slightly on hover
- **Form fields:** Bottom-border-only input (1px hairline), label in small caps above; focus darkens the rule to charcoal

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A light 400-weight Cormorant Garamond headline in soft charcoal on warm cream, framed by 1px hairline rules and a tiny letterspaced small-caps kicker — nothing on the page exceeds weight 500 or full saturation. Spend boldness here; keep everything else quiet.

## Do

- Cap every weight at 500 and every color at the six-role palette — restraint is the product
- Use hairline rules as the page's entire structural vocabulary
- Write copy that undersells: short declarative lines, no exclamation, prices in muted text
- Let single photographs occupy entire rows with nothing beside them

## Don't

- Don't use pure black, pure white, or any saturated hue — near-monochrome warmth is the signature
- Don't set uppercase didone headlines at giant scale; that is fashion-editorial shouting, not quiet luxury
- Don't add badges, discounts, urgency timers, or more than one button per view
- Don't round corners or add visible shadows to resting elements

## Accessibility notes

- The low-contrast aesthetic must not extend to type: charcoal on cream passes comfortably, but the muted text (#6b6660) should be kept at 14px+ and never lightened further
- Hover-revealed buttons on product cards need visible focus-state equivalents for keyboard users

## Reference sites

- The Row: https://www.therow.com
- Brunello Cucinelli: https://www.brunellocucinelli.com
- Loro Piana: https://www.loropiana.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip quiet-luxury.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/quiet-luxury.json

Settings → Capabilities → Skills → Upload skill → quiet-luxury.zip