# Results Metric Deck 순백 슬라이드 중앙 상단에 거대 결과 메트릭 한 점(+34%·2.7×)이 시선을 독점하고 아래 작은 캡션이 맥락을 다는, 브랜드 레드 단색 강조·중앙 정렬 단일 축의 성과 메트릭 중심 컨설팅 덱. - taxonomy: corporate-clean · consulting-deck, results-first, giant-metric, centered-axis, monochrome-plus-red, kpi-hero, executive-report · complexity=medium - page types: presentation - best for: 성과·결과 발표 덱(전환율·마진·매출 개선 리포트), 분기·연간 성과 리뷰 및 임팩트 요약 보고, Before/After 개선 효과·ROI 입증 제안서 - avoid for: 가설·진단 중심의 초기 분석 덱(결론 메트릭이 아직 없는 단계), 브랜드 무드·포트폴리오 쇼케이스 덱, 화려한 모션·비주얼이 필요한 제품 런칭 키노트 - provenance: authored (design-diversity 팩 'ppt-bain-results-deck' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # Results Metric Deck ## Overview The generalized craft of results-first consulting decks, stripped of any firm's identity. A pure-white 16:9 canvas where every results slide is dominated by **exactly one giant result metric** — a single number (`+34%`, `2.7×`, `$1.2B`) rendered ~130pt in brand red, centered in the top third, with a small grey caption directly below giving context. Everything aligns to the vertical centerline: this is a centered single axis, and even before/after comparisons stay symmetric left and right of center. The persuasion is "show the outcome first, prove it below." The styling stays disciplined: monochrome slate everywhere, red for one thing only, and the hero number is never left alone on an empty slide. ## Colors & Roles Canonical mode is **light**: `background` is pure white on every slide. Text and data live on a neutral slate ramp traced from the source pack — ink (`foreground`, #111827) for headings, slate (`secondary-foreground`, #374151) for body, caption grey (`muted-foreground`, #9CA3AF) for captions/footnotes, light grey (`border`, #D1D5DB) for hairlines and de-emphasized data. The single chromatic voice is brand red (`primary`/`accent`, #CC0000 → oklch 0.531 0.218 29.2): the giant result number and delta triangles only — never a fill, never body text, one emphasis per chart. `secondary`/`muted` carry the "before-panel" tint (#F4F5F6). `chart-1..5` are a slate ramp with red only at `chart-1`; series separation is lightness, and the emphasized series is the only saturated one. `destructive`/`ring` also map to the one red — the palette is chromatically closed, with no second hue. The dark map is an authored "boardroom dark" adaptation (deep slate surfaces, a slightly lifted red for contrast) and is not part of the original spec. ## Typography Rules One sans family: Inter for Latin, Pretendard for Korean (Google Fonts fallback: Noto Sans KR). Deck type steps, in pt on a 13.33in × 7.5in canvas: the signature **giant-metric** ~130pt / 800 / −0.02em / tabular, brand red, centered, one per slide; secondary-metric 28pt bold for KPI and chart result values; display 32pt bold for the title of metric-free body slides (centered); body 20pt / regular / 1.45, at most 5 lines per slide; column-header 14pt / semibold / +0.04em / uppercase; caption 16pt grey; footnote 10pt grey. All figures are tabular (`font-variant-numeric: tabular-nums`), with consistent decimals and units. Currency is written `1,240억` / `KRW 1.24T` / `$1.2B` rather than a `₩` glyph (which collides with digits in some fonts). ## Slide Anatomy - **Cover**: white canvas, centered 32pt title (1–2 lines) under an uppercase catchphrase kicker; below, a preview strip of three metrics (36pt) with thin neutral dividers; centered client · date · page meta at the bottom. Red only on the catchphrase word and preview metrics. - **Agenda**: centered 32pt header; a vertical `01`–`NN` list, each row a mono number (28pt) + 20pt item name + one grey caption line + right page number, thin dividers between; the current section dot is red. - **KPI hero (workhorse)**: giant result metric centered in the top 24–40% + 16pt caption; an evidence-callout strip ("three things behind this result", ▲ red + 14pt labels) directly beneath; then a grid of 4–6 borderless KPI cards. Never a lone number — fill with cards. - **Before/After comparison**: centered 32pt header; two columns symmetric on the centerline — BEFORE (grey panel, mono values) vs AFTER (white, red result values); 14pt uppercase headers, hairline row rules, a center ▲ red delta triangle + delta value; a grey verdict box below. - **Trend chart**: centered header; one 1.5pt polyline (no area fill), start point mono, only the result point a red circle marker + 28pt red delta label, direct 14pt value labels; 2–3 annotation callouts; source + units bottom-left. - **Divider / Closing**: divider = white canvas, giant red section number + 32pt section name centered. Closing = giant summary metric (e.g. `2.7×`) + a three-metric strip + one closing line + next steps (▲ red + 14pt), contact meta at the bottom. ## Layout Principles 16:9 canvas, centered single axis. Outer margins fixed at 0.8in left/right/top and a 0.6in footer baseline — no drift across slides. All key elements sit on the vertical centerline; vertical rhythm steps of 24/32/48px. Composition is **balanced density**: the hero metric is one attention-grabbing hero, but the zone below always carries 3+ proof modules (KPI strip · trend chart · driver breakdown · source footnote), so ~88%+ of the canvas is meaningful content. No dead white pooling in a corner; no empty placeholder blocks. Footer: source footnote bottom-left (mandatory on data slides), page number bottom-right. ## Depth & Elevation Completely flat. No shadows, gradients, glass, noise, or blur — ever. Division and containment are done with 0.75–1pt light-grey hairlines and whitespace; the only fills are the one red (giant figure, delta) and the pale before-panel grey. ## Shapes Zero border-radius everywhere — cards, table cells, chart bars, panels. Almost no icons — deltas are ▲▼ triangles or thin red arrows only. Cards and nodes are borderless; the process flow relies on giant step numbers and 1.5pt thin arrows, not boxes. ## Component Stylings - **Giant metric block**: exactly one per slide — ~130pt Inter 800 brand-red tabular figure, centered in the top 24–40%, + a 16pt grey caption 0.2in below. Two metrics on one slide splits focus and is banned. - **Evidence callout strip**: a before-panel-tinted horizontal strip directly under the metric — small ▲ red delta + 14pt labels for "the three things that produced this result," linking the number to its drivers. - **KPI card**: borderless — 14pt label + 28pt bold value (mono, or giant red) + 14pt ▲▼ delta (encoded by glyph/weight, red only on result) + a thin mono mini-sparkline + one 12pt context line; 2–3 (hero: 4–6) centered evenly. - **Chart**: monochrome lightness + exactly one red emphasis (bar or result point); no legend box, no gridlines, no y-axis, only a 0.75pt x-baseline, baseline always 0. Direct 14pt tabular value labels, result value 28pt red. Render precisely (SVG) — no div-block bars. Source/units footnote bottom-left, mandatory. - **Footer / pagination**: 10pt grey source footnote bottom-left, 10pt page number bottom-right, aligned to the 0.6in footer baseline deck-wide. ## Motion None. Slide transitions are hard cuts; no build-ins, no object animation. The giant metric seizes attention instantly without any entrance effect — that immediacy is the point. ## Do's and Don'ts **Do:** one giant red result metric per slide over a small caption; align everything to the centerline; emphasize with the single red on figures/deltas only; fill beneath the hero with 3+ proof modules; label data directly and add source footnotes. **Don't:** put two giant metrics on a slide; use red on fills or body text, or rainbow charts; revert to left-alignment; round corners, add shadows/gradients/transitions; leave a lone number on an empty slide; reproduce a real firm's name, logo, or actual slides. ## Agent Prompt Guide > Build this in the 'Results Metric Deck' style: pure-white 16:9 slides, each results slide dominated by exactly one giant result metric (~130pt Inter 800, brand red, centered top third) over a small grey caption. Center everything on the vertical axis; comparisons stay symmetric. Monochrome slate ramp with one emphasis red used only on the giant number and delta triangles — never fills or body text. Fill beneath the hero with 3+ proof modules (KPI strip, trend chart, driver breakdown) so ~88%+ of the canvas carries content. Charts: one red emphasis, no legends/gridlines/y-axis, 0.75pt baseline at 0, direct tabular labels. Zero radius, zero shadows, cut transitions only, mandatory source footnotes. Fonts: Inter (Latin) + Pretendard/Noto Sans KR. ## Known Gaps / Confidence Adapted from the MIT-licensed design-diversity pack `ppt-bain-results-deck` — 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 dark color map is an authored boardroom-dark adaptation absent from the source pack. Trademark care: the style generalizes results-first consulting conventions and must not reproduce any real firm's name, logo, or actual slides; the single brand-red emphasis traces to the pack spec, not to any firm's assets. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Results Metric Deck — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'Inter', 'Pretendard', 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif; --spacing: 8px; --shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent); --ks-display-weight: 700; --ks-display-tracking: -0.01em; --background: oklch(1 0 0); --foreground: oklch(0.210 0.032 264.7); --card: oklch(1 0 0); --card-foreground: oklch(0.210 0.032 264.7); --popover: oklch(1 0 0); --popover-foreground: oklch(0.210 0.032 264.7); --primary: oklch(0.531 0.218 29.2); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.970 0.002 247.8); --secondary-foreground: oklch(0.373 0.031 259.7); --muted: oklch(0.970 0.002 247.8); --muted-foreground: oklch(0.714 0.019 261.3); --accent: oklch(0.531 0.218 29.2); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.531 0.218 29.2); --destructive-foreground: oklch(1 0 0); --border: oklch(0.872 0.009 258.3); --input: oklch(0.872 0.009 258.3); --ring: oklch(0.531 0.218 29.2); --chart-1: oklch(0.531 0.218 29.2); --chart-2: oklch(0.551 0.023 264.4); --chart-3: oklch(0.872 0.009 258.3); --chart-4: oklch(0.210 0.032 264.7); --chart-5: oklch(0.714 0.019 261.3); } .dark { --background: oklch(0.205 0.015 264); --foreground: oklch(0.93 0.006 264); --card: oklch(0.24 0.016 264); --card-foreground: oklch(0.93 0.006 264); --popover: oklch(0.24 0.016 264); --popover-foreground: oklch(0.93 0.006 264); --primary: oklch(0.62 0.198 29.2); --primary-foreground: oklch(0.985 0.003 264); --secondary: oklch(0.28 0.018 264); --secondary-foreground: oklch(0.87 0.008 264); --muted: oklch(0.28 0.018 264); --muted-foreground: oklch(0.66 0.02 262); --accent: oklch(0.62 0.198 29.2); --accent-foreground: oklch(0.985 0.003 264); --destructive: oklch(0.62 0.198 29.2); --destructive-foreground: oklch(0.985 0.003 264); --border: oklch(0.32 0.018 264); --input: oklch(0.32 0.018 264); --ring: oklch(0.62 0.198 29.2); --chart-1: oklch(0.62 0.198 29.2); --chart-2: oklch(0.66 0.02 262); --chart-3: oklch(0.45 0.02 264); --chart-4: oklch(0.93 0.006 264); --chart-5: oklch(0.80 0.01 262); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html
+34%

전환 마진 개선 — 18개월

▲ 물류 재설계 ▲ 가격 정책 ▲ 채널 믹스
누적 매출
1,240억
▲ +22%
신규 고객
8,400
▲ +31%
이탈률
4.1%
▼ −2.3pt
출처: 회사 실적 데이터, 팀 분석 (FY25) 03
02

성과를 만든 세 가지 드라이버

Results Delivered 08
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-results-metric.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 `