# Dark Luxury Keynote

거의 순흑 무대에 풀블리드 제품 사진이 떠 있고, 샴페인 골드 0.5pt 헤어라인 프레임과 넓은 자간의 가는 디스플레이 세리프가 럭셔리를 만드는 다크 키노트 덱.

- taxonomy: cinematic-dark · luxury-keynote, champagne-gold, hairline-frame, full-bleed-photo, display-serif, near-black-stage · complexity=high
- page types: presentation
- best for: 프리미엄 브랜드 키노트·하우스 프레젠테이션, 럭셔리 제품 공개·룩북·컬렉션 발표, 고급 하드웨어·자동차·주얼리 제품 쇼케이스 덱
- avoid for: 데이터 밀도가 높은 전략 컨설팅·재무 보고 덱, 밝은 배경의 대중 교육·강의 자료, 장난스럽거나 컬러풀한 스타트업 피치덱
- provenance: authored (design-diversity 팩 'ppt-dark-luxury-keynote' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual

## Design rules

# Dark Luxury Keynote

## Overview
The generalized craft of a premium brand house's keynote, stripped of any label's identity. Near-black 16:9 slides where dark, moody full-bleed product and lifestyle photography fills one side or the whole canvas, and a single champagne gold appears only as 0.5pt hairline frames, labels, and one key chart series — never as a fill. A thin high-contrast display serif set on wide letter-spacing does the talking, like a luxury catalogue. Emphasis is a gold hairline or gold text, never a colored fill. "A near-black stage, a gold hairline, and generous air" is the whole identity.

## Colors & Roles
Canonical mode is **dark**: `background` is near-black (#0B0B0C → oklch 0.150 0.002 286) on every slide, panels are #1A1A1C. Text lives on a warm neutral ramp traced from the pack — parchment (`foreground`, #EDEAE3) for serif type, warm gray (`muted-foreground`, #8E8A82) for captions and de-emphasized data. The single chromatic voice is champagne gold (`primary`/`accent`/`ring`, #C9A36A → oklch 0.737 0.087 77): one hairline frame, one label, one emphasized chart series — never a filled surface. `chart-1` is gold; `chart-2..5` are a disciplined monochrome lightness ramp, so series separation is value and only the emphasized series is chromatic. `border`/`input` represent the 0.5pt gold hairline, dimmed so it reads quietly over black. `destructive` also maps to gold — the palette is chromatically closed, with no red. The light map is an authored "warm ivory" adaptation (ivory stage, deep champagne hairline, warm charcoal ink) for bright-environment rendering and is not part of the original spec.

## Typography Rules
The identity font is a thin high-contrast display serif — Cormorant Garamond — for titles, section names, body, and KPI numbers (fallback 'Times New Roman'); only captions and labels use Inter 300. Korean uses Pretendard Light (Google Fonts fallback Noto Serif KR). Deck type steps, in pt on a 13.33in × 7.5in canvas: display title 54pt / 500 / +0.12em / 1.1; section name 48pt; slide heading 34pt / 500 / +0.08em; body 20pt / 400 / 1.5, at most 5 lines per slide; KPI hero 52pt / 500 with tabular figures; caption/label 11pt Inter 300 / +0.2em / uppercase, gold or muted. Wide letter-spacing is the luxury signal — labels are never set tight, headlines never bloat a mid-sentence word.

## Slide Anatomy
- **Cover**: near-black full canvas. Either full-bleed dark photography with a gold-hairline text cluster over the left third, or a left text cluster beside a warm tonal-gradient field carrying a giant tone-on-tone serif monogram — never a small panel next to flat empty black. 11pt gold uppercase label + 54pt serif title (≤2 lines) + 20pt serif subtitle + a gold-hairline meta mini-row (HOUSE · SEASON · DATE).
- **Full-bleed image slide (divider/gallery)**: photography fills the canvas edge-to-edge; a centered 0.5pt gold hairline frame holds an 11pt gold section number + 48pt serif section name + a hairline-divided mini index. Any under-filled area becomes a warm tonal field, never flat black.
- **Statement / content slide**: full-bleed photo on the left half (gold-hairline framed, full height); the right half is a vertical stack of 3+ gold-hairline modules — 34pt heading + 20pt serif body (key phrase in gold) + a KPI hairline-card row + one gold-hairline callout — all snapped to the 12-column grid, gutter 0.25in, so no dead black space remains. Source caption bottom-left, page number bottom-right.
- **Closing**: full-bleed dark photo with a centered gold-hairline frame — 34pt serif closing statement + a hairline-divided 3-item next-steps mini list + 11pt gold uppercase contact label. Generous air.

## Layout Principles
16:9 canvas, 12-column grid. Content safe inset 72px left/right/top; footline baseline fixed at 56px. Full-bleed photos ignore the margin edge-to-edge, but text and hairline modules align inside the safe inset. Photo/text boundaries snap to grid divisions (two-thirds = 8:4, half = 6:6). Slide-heading baseline and footline sit at the same y across the whole deck — no drift. Vertical rhythm 24/32/48px. No canvas region is left more than ~20% empty: fill with warm tonal fields, a giant serif monogram, or gold hairline detail.

## Depth & Elevation
Completely flat. No shadows, glow, glass, noise, or blur — ever. The only permitted gradient is a subtle warm tonal field (near-black → #1A1A1C) to fill otherwise-empty black; color gradients are banned. Depth comes from moody full-bleed photography and the gold hairline alone.

## Shapes
Zero border-radius everywhere — frames, cards, chart bars, nodes. Borders are exclusively 0.5pt champagne gold hairline frames (no fill). Photos are dark and low-exposure, optionally vignetted. Icons are largely absent; if used, 0.75pt thin gold line monochrome.

## Component Stylings
- **KPI card**: 0.5pt gold hairline frame (no fill or #1A1A1C panel) — 11pt uppercase gold label + 52pt Cormorant Garamond 500 tabular figure + 13pt delta; 3–4 cards, wide gaps.
- **Gold hairline callout**: 0.5pt gold hairline frame (no fill) + 20pt serif insight (1–2 lines) + 11pt gold caption; box height = content + 0.2in padding so the lower half never sits empty.
- **Charts**: pure black + gold hairline. Bars/lines default monochrome (#3A3A3C light / #8E8A82 dark); exactly one gold emphasis (solid or hairline outline), no rainbow. Bar:gap 1:1, radius 0, baseline 0. No gridlines, no legend box, no chart border — 0.5pt axis or omitted. Direct 13pt Inter 300 value labels; bottom-left 10pt source/unit footnote. Render as precise SVG — no div-block bars. Comparison = wide-gap vertical bars, trend = 0.75pt gold hairline polyline with gold outline circle markers, share = single donut (≤3 slices, hairline dividers).
- **Diagram kit**: one language — angular (radius 0) 0.5pt gold hairline nodes, 0.5pt thin gold connectors, wide-tracked serif step numbers, gold hairline/text emphasis. Process flow, timeline, 2×2 matrix, comparison columns, and funnel all derive from it; current/winning element steps up to 1pt gold.
- **Footer / pagination**: source caption bottom-left + page number bottom-right, aligned to the 56px footline on every content slide.

## Motion
Subtle only. Gold hairline frames draw-in and fade at 220ms ease-out; full-bleed photos fade at 250ms. No slide, bounce, or glow — elegance is restraint.

## Do's and Don'ts
**Do:** let dark full-bleed photography carry the slide; use gold only as 0.5pt hairline, label, or one chart series; set the display serif on wide tracking; fill content slides with 3+ gold-hairline modules; keep margins, footline, and title baseline fixed; use tabular figures for KPI numbers.
**Don't:** fill gold as a surface/button/panel; use sans-serif headings; add glow, color gradients, shadows, rounded corners, or emoji; leave text-only slides or flat empty black corners; regress charts to 3D/rainbow/gridlines/legend boxes/truncated y-axes/missing sources; leave empty gold-hairline placeholder frames.

## Agent Prompt Guide
> Build this presentation in the 'Dark Luxury Keynote' style: near-black 16:9 slides where dark, moody full-bleed photography fills one side or the whole canvas. The only color is champagne gold, used exclusively as 0.5pt hairline frames, labels, and one key chart series — never as a fill. Typography is a thin high-contrast display serif (Cormorant Garamond) on wide letter-spacing for titles, body, and KPI numbers; only captions use Inter 300 uppercase. Zero radius, no shadows, no glow, no color gradients (only a subtle warm tonal field to fill empty space). Editorial slides place a restrained gold-hairline text cluster over full-bleed photography; content slides must never leave dead black space — fill with 3+ gold-hairline modules. Charts on pure black: monochrome bars with one gold emphasis, baseline 0, no gridlines/legend, direct value labels, mandatory source footnote. Transitions are subtle hairline draw-in and photo fades. Keep margins, footline, and title baseline fixed across every slide.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `ppt-dark-luxury-keynote` — an authored spec, not an extraction from a live deck, so all confidence fields are `manual`. A ppt-track entry: the shadcn token mapping is a web-rendering convenience (pt-based type steps, 16:9 frames), and the light color map is an authored warm-ivory adaptation absent from the source pack. Provenance care — the pack ships design spec and tokens, not proprietary assets: the commercial display serif is replaced by the open Cormorant Garamond, and no real brand's logo, name, or actual slides may be reproduced.


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Dark Luxury Keynote — theme.css (generated, do not edit) */
:root {
  --radius: 0px;
  --radius-selector: 0px;
  --radius-field: 0px;
  --font-sans: 'Inter', 'Pretendard', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', 'Pretendard', serif;
  --font-display: 'Cormorant Garamond', 'Times New Roman', 'Pretendard', serif;
  --spacing: 8px;
  --shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent);
  --ks-display-weight: 500;
  --ks-display-tracking: 0.12em;
  --background: oklch(0.962 0.009 84.6);
  --foreground: oklch(0.261 0.010 88.8);
  --card: oklch(0.985 0.004 91.4);
  --card-foreground: oklch(0.261 0.010 88.8);
  --popover: oklch(0.985 0.004 91.4);
  --popover-foreground: oklch(0.261 0.010 88.8);
  --primary: oklch(0.645 0.082 79.6);
  --primary-foreground: oklch(0.985 0.004 91.4);
  --secondary: oklch(0.946 0.010 87.5);
  --secondary-foreground: oklch(0.261 0.010 88.8);
  --muted: oklch(0.946 0.010 87.5);
  --muted-foreground: oklch(0.525 0.013 84.6);
  --accent: oklch(0.645 0.082 79.6);
  --accent-foreground: oklch(0.985 0.004 91.4);
  --destructive: oklch(0.645 0.082 79.6);
  --border: oklch(0.556 0.068 76.7);
  --input: oklch(0.556 0.068 76.7);
  --ring: oklch(0.645 0.082 79.6);
  --chart-1: oklch(0.645 0.082 79.6);
  --chart-2: oklch(0.525 0.013 84.6);
  --chart-3: oklch(0.634 0.013 84.6);
  --chart-4: oklch(0.809 0.012 84.6);
  --chart-5: oklch(0.377 0.029 79.3);
}

.dark {
  --background: oklch(0.150 0.002 286.1);
  --foreground: oklch(0.937 0.010 87.5);
  --card: oklch(0.219 0.004 286.1);
  --card-foreground: oklch(0.937 0.010 87.5);
  --popover: oklch(0.219 0.004 286.1);
  --popover-foreground: oklch(0.937 0.010 87.5);
  --primary: oklch(0.737 0.087 76.9);
  --primary-foreground: oklch(0.150 0.002 286.1);
  --secondary: oklch(0.257 0.006 286.0);
  --secondary-foreground: oklch(0.937 0.010 87.5);
  --muted: oklch(0.257 0.006 286.0);
  --muted-foreground: oklch(0.634 0.013 84.6);
  --accent: oklch(0.737 0.087 76.9);
  --accent-foreground: oklch(0.150 0.002 286.1);
  --destructive: oklch(0.737 0.087 76.9);
  --border: oklch(0.432 0.039 78.7);
  --input: oklch(0.432 0.039 78.7);
  --ring: oklch(0.737 0.087 76.9);
  --chart-1: oklch(0.737 0.087 76.9);
  --chart-2: oklch(0.634 0.013 84.6);
  --chart-3: oklch(0.349 0.003 286.2);
  --chart-4: oklch(0.302 0.005 286.1);
  --chart-5: oklch(0.813 0.070 81.7);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<!-- Golden snippet for "Dark Luxury Keynote". Fragment — assumes the style's CSS variables
     (--background, --foreground, --primary, --muted-foreground, --border, --card, --font-serif, --font-sans, ...)
     are in scope. Tokens only; no literal colors or images. Photography is suggested with a token-tinted radial
     gradient / bordered placeholder. Two stacked 16:9 frames: a full-bleed statement slide and a cover. -->
<div style="display:flex; flex-direction:column; gap:2rem; font-family:var(--font-sans); max-width:960px; margin:0 auto;">

  <!-- Slide 1: full-bleed statement slide — thin serif statement inside a gold hairline frame -->
  <section style="position:relative; aspect-ratio:16/9; background:
      radial-gradient(120% 90% at 78% 30%, color-mix(in oklch, var(--card) 85%, var(--foreground)) 0%, var(--card) 42%, var(--background) 100%);
      color:var(--foreground); overflow:hidden; box-sizing:border-box;">
    <!-- gold hairline frame holding the statement, inset within the safe margin -->
    <div style="position:absolute; inset:8% 9%; border:1px solid var(--primary); display:flex; flex-direction:column; justify-content:flex-end; padding:5% 6%; box-sizing:border-box;">
      <p style="margin:0 0 1.1em; font-family:var(--font-sans); font-size:.62rem; font-weight:300; letter-spacing:.22em; text-transform:uppercase; color:var(--primary);">The House &mdash; Autumn Collection</p>
      <h2 style="margin:0; font-family:var(--font-serif); font-size:2.6rem; font-weight:500; line-height:1.1; letter-spacing:.1em;">Light, held<br>in the smallest detail.</h2>
    </div>
    <!-- footline: source caption / page number on the fixed baseline -->
    <div style="position:absolute; left:9%; right:9%; bottom:3.4%; display:flex; justify-content:space-between; font-family:var(--font-sans); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-foreground);">
      <span>Maison &middot; Season IX</span><span>02</span>
    </div>
  </section>

  <!-- Slide 2: cover — product placeholder field + minimal serif title cluster -->
  <section style="aspect-ratio:16/9; background:var(--background); color:var(--foreground); display:grid; grid-template-columns:5fr 7fr; box-sizing:border-box;">
    <!-- left: text cluster within the safe inset -->
    <div style="display:flex; flex-direction:column; justify-content:center; padding:9% 0 9% 9%;">
      <p style="margin:0 0 1.4em; font-family:var(--font-sans); font-size:.62rem; font-weight:300; letter-spacing:.2em; text-transform:uppercase; color:var(--primary);">Keynote</p>
      <h1 style="margin:0 0 .5em; font-family:var(--font-serif); font-size:3.1rem; font-weight:500; line-height:1.06; letter-spacing:.12em;">AURUM</h1>
      <p style="margin:0 0 1.8em; font-family:var(--font-serif); font-size:1.05rem; font-weight:400; line-height:1.4; color:var(--muted-foreground);">The season of quiet luxury.</p>
      <!-- gold hairline meta mini-row -->
      <div style="display:flex; gap:0; font-family:var(--font-sans); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-foreground);">
        <span style="padding-right:1.1em;">House</span>
        <span style="padding:0 1.1em; border-left:1px solid var(--border);">Season IX</span>
        <span style="padding-left:1.1em; border-left:1px solid var(--border);">2026</span>
      </div>
    </div>
    <!-- right: product placeholder — token-tinted radial field inside a gold hairline frame (never flat black) -->
    <div style="position:relative; margin:6% 9% 6% 3%;">
      <div style="position:absolute; inset:0; border:1px solid var(--primary); background:
          radial-gradient(70% 60% at 50% 42%, color-mix(in oklch, var(--primary) 22%, var(--card)) 0%, var(--card) 45%, var(--background) 100%);"></div>
      <span style="position:absolute; left:8%; bottom:6%; font-family:var(--font-sans); font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-foreground);">Fig. 01 &middot; The Object</span>
    </div>
  </section>

</div>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-dark-luxury-keynote.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 `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.