# Dark Luxury 먹빛 차콜 위에 샴페인 골드 단 한 톤, 가는 하이콘트라스트 세리프 디스플레이 — 모든 것이 느리게 흐르는 다크 럭셔리. - taxonomy: luxury-editorial · dark-luxury, champagne-gold, thin-serif, full-bleed, hairline-gold, slow-motion · complexity=medium - page types: landing, editorial, portfolio, marketing, ecommerce - best for: 하이엔드 브랜드·부티크 랜딩(패션·주얼리·호텔·부동산), 포트폴리오·에디토리얼 등 이미지가 주인공인 사이트, 절제된 단일 CTA 중심의 브랜드 매니페스토 - avoid for: 데이터 밀도가 높은 대시보드·관리 도구, 밝고 장난스러운 소비자 앱, 네온·사이버 테크 무드가 필요한 제품(그건 terminal-core 계열) - provenance: authored (design-diversity 팩 'web-dark-luxury' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Dark Luxury — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-display: 'Cormorant Garamond', Georgia, serif; --spacing: 8px; --shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent); --ks-display-weight: 300; --ks-display-tracking: 0.01em; --background: oklch(0.975 0.010 85); --foreground: oklch(0.22 0.005 68); --card: oklch(0.99 0.006 85); --card-foreground: oklch(0.22 0.005 68); --popover: oklch(0.99 0.006 85); --popover-foreground: oklch(0.22 0.005 68); --primary: oklch(0.58 0.101 83.6); --primary-foreground: oklch(0.975 0.010 85); --secondary: oklch(0.93 0.012 85); --secondary-foreground: oklch(0.28 0.006 68); --muted: oklch(0.94 0.010 85); --muted-foreground: oklch(0.48 0.016 77); --accent: oklch(0.58 0.101 83.6); --accent-foreground: oklch(0.975 0.010 85); --destructive: oklch(0.52 0.16 25); --destructive-foreground: oklch(0.975 0.010 85); --border: oklch(0.87 0.014 85); --input: oklch(0.87 0.014 85); --ring: oklch(0.58 0.101 83.6); --chart-1: oklch(0.58 0.101 83.6); --chart-2: oklch(0.22 0.005 68); --chart-3: oklch(0.48 0.016 77); --chart-4: oklch(0.78 0.070 83.6); --chart-5: oklch(0.62 0.012 78); } .dark { --background: oklch(0.178 0.003 67.7); --foreground: oklch(0.929 0.014 84.6); --card: oklch(0.215 0.005 67.6); --card-foreground: oklch(0.929 0.014 84.6); --popover: oklch(0.246 0.003 17.4); --popover-foreground: oklch(0.929 0.014 84.6); --primary: oklch(0.739 0.101 83.6); --primary-foreground: oklch(0.178 0.003 67.7); --secondary: oklch(0.215 0.005 67.6); --secondary-foreground: oklch(0.929 0.014 84.6); --muted: oklch(0.215 0.005 67.6); --muted-foreground: oklch(0.670 0.017 77.0); --accent: oklch(0.739 0.101 83.6); --accent-foreground: oklch(0.178 0.003 67.7); --destructive: oklch(0.55 0.16 25); --destructive-foreground: oklch(0.929 0.014 84.6); --border: oklch(0.27 0.006 80); --input: oklch(0.27 0.006 80); --ring: oklch(0.739 0.101 83.6); --chart-1: oklch(0.739 0.101 83.6); --chart-2: oklch(0.929 0.014 84.6); --chart-3: oklch(0.670 0.017 77.0); --chart-4: oklch(0.55 0.080 83.6); --chart-5: oklch(0.45 0.012 78); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Maison — Est. 1897

Elegance is
restraint, unhurried.

One charcoal ground. One champagne accent, drawn only in lines and letters. Everything else is space, and everything moves slowly.

Discover The Archive

No. 01

The Gold Hairline

Dividers, borders, kickers — the accent is a line, never a surface.

No. 02

Thin Serif Display

Weight 300, high contrast. Luxury is elegance, not boldness.

No. 03

Tonal Depth

No shadows — surfaces step lighter than the ground, nothing more.

“Everything flows slowly, as it should.”

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/dark-luxury.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `