# Cinematic Keynote
순흑 무대 위 거대한 키 비주얼 한 점과 최소화된 라이트 산세리프 — 한 슬라이드 한 메시지의 시네마틱 키노트 덱 스타일.
- taxonomy: cinematic-dark · keynote, pure-black-stage, one-message-per-slide, full-bleed-visual, minimal-text, amber-accent, summary-slide · complexity=medium
- page types: presentation
- best for: 제품 공개·런치 키노트, 비전·전략 선언 덱, 핵심 수치 몇 개로 끝나는 임팩트형 피치
- avoid for: 데이터 밀도 높은 실무 보고 덱, 불릿 리스트 중심의 교육·매뉴얼 자료, 인쇄·밝은 회의실 프로젝터 환경(순흑 무대가 죽는다)
- provenance: authored (design-diversity 팩 'ppt-cinematic-keynote-deck' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# Cinematic Keynote
## Overview
A presentation-deck style built on the Apple-event stagecraft principle: a pure-black stage, one giant key visual, and almost no text. Every slide carries exactly one message. Display type is light-weight, tracking-tight sans set large at the center axis; a single warm-amber accent is reserved for the key number or the glowing data series. The deck closes with a summary slide of giant KPI figures. **Dark mode is canonical** — the light map is a restrained gallery-white adaptation for handout/print contexts.
## Colors & Roles
`background` is pure black `#000000` — fixed, never gray, navy, or gradient. `foreground` is off-white `#F5F5F7` (deliberately not pure white, to soften glare on a dark stage). `card` is the near-black surface `#0E0E0E` used for summary-KPI cells and diagram nodes, separated only by the 1px hairline `border`/`input` `#262626`. `muted-foreground` `#8A8A8E` carries kickers, captions, and category labels. The single chromatic role is `accent` — warm gold/amber `#E8B341` — allowed on the key figure, the highlighted chart series, or one word of a caption, and nothing else. `ring` and `chart-1` share the amber; `chart-2` is the pack's dark-neutral comparison series `#4A4A4E`. `destructive` and the remaining chart slots are derived to satisfy the shadcn contract and are effectively unused in a deck.
## Typography Rules
One sans family: Inter (fallbacks Manrope, Helvetica Neue; add Pretendard for Korean). Two working weights — 300 for monumental display, 400 for everything else (600 only for chart value labels). The scale is deck-native, in points:
- **statement** 64pt / 300 / 1.05 / −0.02em — cover and statement slides, max 2 lines, centered
- **headline** 40pt / 400 / 1.1 / −0.015em — slide headlines, max 2 lines
- **kpi** 88pt / 300 — giant summary figures and chart overlays
- **body** 22pt / 400 / 1.4 — rare; max 3 lines per slide
- **kicker** 20pt / 400, `muted-foreground` — sub-caption / eyebrow line
- **label** 14pt — KPI cell labels; **caption** 11pt — chart source notes
## Layout Principles
Canvas is a 16:9 slide (13.33 × 7.5 in). Stage-centered axis grid: safe margins 1.0in left/right, 0.85in top/bottom. Exactly one key visual per slide, covering 50–70% of the canvas (full-bleed allowed), placed center, left, or right — vary the position deliberately from slide to slide. The text block sits 0.5in from the visual and reads as one group; the group's visual center of gravity stays within ±0.6in of the canvas centerline. No slide numbers, no running headers.
## Depth & Elevation
Shadows are banned. Depth comes from the pure-black stage and the tonal contrast of the visual itself. At most, an 8% edge vignette around a visual. No artificial glow, lens flares, or neon outlines. Surfaces separate by the `card` tonal step plus a 1px hairline border.
## Shapes
6px border-radius on summary cards, diagram nodes, and images. Chart bars 0–2px. Line icons only (1.5pt stroke, monochrome `foreground`), used sparingly.
## Component Stylings
- **Headline block**: statement type centered on black; a kicker may sit 0.5in below (or above as an eyebrow). At most one word of the kicker may take the amber accent.
- **Kicker / eyebrow**: 20pt `muted-foreground`, single line, no forced uppercase — restraint, not decoration.
- **Caption policy**: 11pt `muted-foreground`, bottom-right, **only** on chart slides that need a source note. All other slides omit captions entirely.
- **Summary / KPI cells**: `card` fill + 1px `border`, 6px radius, 0.4in gaps, 2×2 or 3×1 grid. 88pt light figure (only the one key figure in amber) over a 14pt muted label. Deltas: 13pt with thin ▲ (amber, up) / ▼ (muted, down).
- **Charts**: precise SVG, plot ≈ 8.0 × 3.2in, center-lower. Zero gridlines, no legend box, no border box, no background fill; only a 0.75pt x-baseline hairline; y-axis omitted, baselines start at data zero. Direct labels: 13pt muted category names below, 18pt semibold values above (amber for the highlighted value only). One amber series (2pt line, ≤12% area fill, 7px endpoint markers with black separation stroke) vs dark-neutral `chart-2` comparisons. The single most important value is overlaid as an 88pt giant number.
- **Diagrams**: same language — hairline skeleton, `card` nodes with 1px borders, one active element glowing amber. Process flows ≤4 steps, timelines ≤5 markers, comparisons 2 panels. All SVG; no div-block construction.
- **Pagination**: none. Keynotes are minimal — no page numbers or footers.
## Motion
Cinematic breathing: 0.4–0.6s cross-dissolve between slides. Key visuals may scale in subtly (102% → 100% over 0.5s). No fly-ins, spins, or bounces.
## Do's and Don'ts
**Do:** one message per slide with ≤3 lines of text; let one key visual dominate; keep the amber to a single role per deck; vary visual placement per slide; end with the KPI summary slide; minimize data ink (direct labels, no gridlines).
**Don't:** gray/navy/gradient backgrounds; bullet-list slides; a second accent color or colored body text; glow/flare/shadow effects; 3D or rainbow charts, truncated y-axes, div-block bars; clip-art, emoji, or stock icons filling the stage.
## Slide Anatomy
- **Cover**: pure black, 64pt light statement (max 2 lines) centered, 20pt kicker 0.5in below (one amber word allowed). Optionally a full-bleed dark key visual with the text overlaid.
- **Statement slide**: a single sentence, centered on black — nothing else. The pause of the deck.
- **Visual slide**: full-bleed or 50–70% key visual with a one-line caption or 40pt headline grouped 0.5in away; text may sit in the remaining half when the visual takes one side.
- **Chart slide**: 40pt headline top, SVG chart center-lower, 88pt key-value overlay, unit note + 11pt source caption bottom-right.
- **Summary / closing**: 2×2 KPI grid of near-black cells — the only dense slide in the deck, and it still reads as four giant numbers.
## Agent Prompt Guide
> Build this deck in the 'Cinematic Keynote' style: 16:9 slides on a pure-black stage, one message per slide, ≤3 lines of text. Giant Inter Light display (64pt statements, −0.02em), one key visual covering 50–70% of the canvas, a single warm-amber accent reserved for the key number or highlighted series, near-black cards with 1px hairline borders and 6px radius, no shadows or gradients, SVG charts with zero gridlines and direct labels, and a closing 2×2 KPI summary grid. Cross-dissolve transitions only.
## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `ppt-cinematic-keynote-deck` (an authored spec inspired by Apple keynote stagecraft, not an extraction from a live property) — all confidence fields are `manual`. This is a **ppt-track entry**: sizes are in points on a 13.33×7.5in canvas, and web-idiom concerns (responsive behavior, nav, forms) do not apply. The light color map, `destructive`, and chart slots 3–5 are derived adaptations not present in the source pack.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Cinematic Keynote — theme.css (generated, do not edit) */
:root {
--radius: 6px;
--radius-selector: 6px;
--radius-field: 6px;
--font-sans: 'Inter', 'Manrope', 'Helvetica Neue', 'Pretendard', sans-serif;
--font-display: 'Inter', 'Manrope', 'Helvetica Neue', 'Pretendard', sans-serif;
--spacing: 8px;
--shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent);
--background: oklch(0.985 0.002 286);
--foreground: oklch(0.164 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.164 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.164 0 0);
--primary: oklch(0.164 0 0);
--primary-foreground: oklch(0.985 0.002 286);
--secondary: oklch(0.945 0.002 286);
--secondary-foreground: oklch(0.269 0 0);
--muted: oklch(0.960 0.002 286);
--muted-foreground: oklch(0.500 0.006 286);
--accent: oklch(0.666 0.140 82.9);
--accent-foreground: oklch(0.985 0.002 286);
--destructive: oklch(0.577 0.215 27);
--destructive-foreground: oklch(0.985 0.002 286);
--border: oklch(0.900 0.002 286);
--input: oklch(0.900 0.002 286);
--ring: oklch(0.666 0.140 82.9);
--chart-1: oklch(0.666 0.140 82.9);
--chart-2: oklch(0.700 0.005 286);
--chart-3: oklch(0.500 0.006 286);
--chart-4: oklch(0.850 0.003 286);
--chart-5: oklch(0.300 0.004 286);
}
.dark {
--background: oklch(0 0 0);
--foreground: oklch(0.971 0.003 286.4);
--card: oklch(0.164 0 0);
--card-foreground: oklch(0.971 0.003 286.4);
--popover: oklch(0.164 0 0);
--popover-foreground: oklch(0.971 0.003 286.4);
--primary: oklch(0.971 0.003 286.4);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.971 0.003 286.4);
--muted: oklch(0.164 0 0);
--muted-foreground: oklch(0.635 0.006 286.2);
--accent: oklch(0.796 0.140 82.9);
--accent-foreground: oklch(0 0 0);
--destructive: oklch(0.620 0.205 25);
--destructive-foreground: oklch(0.971 0.003 286.4);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.796 0.140 82.9);
--chart-1: oklch(0.796 0.140 82.9);
--chart-2: oklch(0.411 0.007 286.1);
--chart-3: oklch(0.635 0.006 286.2);
--chart-4: oklch(0.971 0.003 286.4);
--chart-5: oklch(0.269 0 0);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
Keynote 2026 — One stage
Say one thing. Say it enormous.
key visual
One visual owns the stage — the caption stays a whisper.
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-cinematic-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 `