# Dark Luxury

## Overview
Deep ink-charcoal, one champagne-gold accent, and a thin high-contrast serif floating in vast space. You know this style on sight: a near-black background, a feather-weight Didone-style headline, a single gold tone as the only color, and motion so slow it feels like fabric settling. Full-bleed premium imagery dominates; text columns sit narrow above and between it. Luxury here is elegance, not weight — nothing is bold, nothing bounces, nothing glows.

## Colors & Roles
**Dark is canonical.** `background` is ink charcoal (#121110, oklch 0.178 warm-neutral); `card` is a slightly lighter charcoal (#1b1917, 0.215) that steps to the `popover` tone (#222020, 0.246) on hover. `foreground` is warm off-white (#ece7dd, 0.929 — ~13:1 on the background, WCAG AAA); `muted-foreground` is warm taupe (#9b948a) for meta and subheads. The single chromatic accent is champagne gold (#c9a55c, oklch 0.739 0.101 83.6) filling `primary`, `accent`, and `ring`: it belongs only to links, kickers, hairlines, and CTA borders, and must stay under ~5% of the page area. Never paint gold as a surface fill — lines and text only. `border` is a faint ivory-tint neutral (the pack's `rgba(236,231,221,0.12)` card edge, flattened to opaque) for card edges; the gold hairline is reserved for dividers, CTAs, and the footer rule. The light theme is an authored ivory/champagne counterpart: warm ivory ground, charcoal ink, and the same gold hue/chroma deepened to oklch 0.58 for contrast.

## Typography Rules
Two families. Display is **Cormorant Garamond** (Google Fonts; Georgia fallback), weight 300–500 only — headlines at `clamp(2.6rem, 5.5vw, 5rem)`, weight 300, letter-spacing 0.01em, line-height 1.12. Thin is the rule: weight ≥ 600 on display type is banned. Pull quotes are Cormorant Garamond italic at 1.8rem/400. Everything else is **Jost**: kicker/labels at 0.72rem/400, uppercase, letter-spacing 0.3em, colored gold; body at 1rem/300, line-height 1.85, letter-spacing 0.02em, measure 60–70 characters.

## Layout Principles
Body text maxes at 760px; heroes and imagery run full-bleed. Side padding 24px mobile / 72px desktop (breakpoints 768px, 1200px). Vertical rhythm is vast: `clamp(120px, 14vw, 200px)` between sections. The 12-column grid (80px gutter) exists only for image+text splits — image 7 columns, text 5. Emptiness is the point; if a section feels sparse, it is correct.

## Depth & Elevation
No box-shadows, ever. On dark ground, depth comes from surface lightness steps (background 0.178 → card 0.215 → hover 0.246). Text over full-bleed images sits on a dark linear-gradient vignette — the only gradient permitted. No multi-color gradients, no glass, no noise.

## Shapes
Border-radius 0 everywhere — buttons, cards, inputs, images. Right angles read as refinement. Hairlines: `1px solid` gold for dividers and CTAs, `1px` faint ivory-tint for card edges.

## Component Stylings
- **Button**: ghost by default — transparent fill, 1px gold border, gold uppercase text tracked 0.26em, padding 18px 44px, radius 0. Hover fills gold with charcoal text over 600ms. Focus = 2px offset gold ring.
- **Card**: `card` surface, faint 1px border edge; inside, a gold kicker + thin serif title + Jost body. Hover lightens the surface to the popover tone and draws a gold hairline along the bottom edge.
- **Hero**: full-bleed dark premium image with a bottom vignette; left-aligned gold kicker, oversized thin serif headline, and one gold-bordered ghost CTA on top.
- **Image**: desaturate −15%, brightness 0.92; no border or radius. Hover scale 1.0 → 1.04 over 1100ms.
- **Footer**: deeper charcoal (#0d0c0b tone) with a gold 1px hairline on top; thin serif site name, uppercase wide-tracked menu, gold link text, generous padding.

## Motion
Everything flows slowly: base 700ms with `cubic-bezier(0.22, 1, 0.36, 1)`. Scroll entrances fade up (opacity 0→1, translateY 20px→0) over 900ms. Link underlines sweep gold left-to-right (width 0→100%) in 500ms; buttons fill gold in 600ms; images scale over 1100ms. Nothing under 400ms, no bounce, no spring, no parallax gimmicks.

## Do's and Don'ts
**Do:** keep gold as the sole accent (lines and text only, <5% area); set display type thin (300–500 serif); build depth with tonal steps, not shadows; open sections with a wide-tracked uppercase gold kicker; let motion breathe at 500ms+.
**Don't:** use purple or multi-color gradients (solid charcoal + vignette only); add any accent beyond gold or fill areas with gold; use radius > 0 or box-shadows; set headlines at weight ≥ 600; add neon or glow effects (dark ≠ cyber-tech); use emoji, illustrations, or blobs; animate under 400ms or with bounce.

## Responsive Behavior
The 7/5 image-text split collapses to a stacked single column under 768px; display type scales via `clamp()`. Side padding drops from 72px to 24px. Full-bleed imagery stays full-bleed at every width; section gaps compress naturally through the `14vw` clamp midpoint.

## Agent Prompt Guide
> Build this in the 'Dark Luxury' style: near-black warm charcoal background with warm off-white text, exactly one accent — champagne gold — used only for hairlines, kickers, links, and ghost-button borders (never as a fill, under 5% of the page); thin high-contrast serif display type (Cormorant Garamond 300) over uppercase gold kickers tracked at 0.3em in Jost; zero border-radius and zero box-shadows — depth from surface tonal steps and dark vignettes over full-bleed imagery; airy clamp()-based section gaps with 760px body measure; and slow elegant motion only (700ms cubic-bezier(0.22,1,0.36,1), nothing under 400ms, no bounce).

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-dark-luxury` — an authored specification, not measured from a live site, so all confidence fields are `manual`. The dark palette traces 1:1 to the pack's tokens; the light theme, the destructive role, and the opaque border equivalent are authored derivations (stated in `tokens.colors.notes`). Cormorant Garamond and Jost are Google Fonts, so no commercial-font substitution is needed.