# Data Infographic Deck 옅은 회색 캔버스 위 흰 카드가 4~8개 모듈로 빽빽이 뜬 대시보드형 슬라이드 — 색이 데이터 인코딩에 종속되는 고밀도 인포그래픽 덱 스타일. - taxonomy: corporate-clean · data-infographic, dashboard-deck, kpi-cards, chart-heavy, categorical-color, data-ink, f-pattern-density · complexity=high - page types: presentation - best for: KPI 대시보드·성과 리뷰 덱, 데이터 브리핑·지표 분석 보고, 운영 현황판·메트릭 요약 프레젠테이션 - avoid for: 감성 임팩트형 투자 유치 피치덱, 브랜드 무드·포트폴리오 쇼케이스 덱, 텍스트 위주의 서사형 키노트(데이터 모듈이 없는 슬라이드) - provenance: authored (design-diversity 팩 'ppt-data-infographic-heavy' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # Data Infographic Deck ## Overview A dashboard-density presentation style: every content slide is a grid of 4–8 white cards floating on a pale gray canvas, packed with charts, KPI cards, and icon stats. The eye reads F-pattern from the top-left; the hero metric of each card is 2–3x body size. Its defining discipline is that **color is data encoding, not decoration** — a fixed categorical palette maps series in order, and everything else is a neutral slate ramp. "The slide is a dashboard" is the whole identity: high information density, direct labeling, mandatory sources. ## Colors & Roles Canonical mode is **light**: `background` is a pale gray (#F7F8FA, oklch 0.979 0.003 264) so white `card` surfaces read as floating. Text lives on a neutral ramp — ink (`foreground`, #1E2229) for values and titles, mid-gray (`muted-foreground`, #6E7480) for card headers/captions, light gray (`border`, #E2E5EA) for hairlines. The chromatic voice is a **four-color categorical data palette** traced from the pack: blue #2563EB → `chart-1`, teal #0EA5A4 → `chart-2`, amber #F59E0B → `chart-3`, coral #EF4444 → `chart-4`; `chart-5` promotes the pack's positive-delta green #16A34A as a legible fifth category. `primary`/`accent`/`ring` are the data blue; `destructive` is the down-delta red #DC2626. Series are mapped in order; a single-series chart uses `chart-1` with exactly one emphasized bar and the rest sunk to a pale blue-gray (#C7D2E8, outside the token ramp). The dark map is an authored "dashboard dark" adaptation (deep surfaces, chart hues lifted for legibility) and is not in the source 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: slide title 24pt / bold / −0.01em; card header 13pt / semibold / +0.03em / uppercase / mid-gray; KPI hero number 40pt / bold / data-color; delta label 14pt / semibold; chart value labels 12pt / semibold; body 13pt / regular / 1.35; caption and axis labels 10pt / regular / mid-gray; divider number 96pt. Value labels, KPI numbers, and deltas require tabular figures (font-variant-numeric: tabular-nums) with consistent units and digits. ## Layout Principles 16:9 canvas, 12-column dashboard block grid, margins 0.5in left/right and 0.45in top/bottom. Content splits into 4–8 modules per slide; the most important is a 2x2 cell, secondaries 1x1. Card gap 0.15in, internal padding 0.18in. A slide-title band sits at the top (0.45–1.1in) with a period/filter label on the right. Density is the point — never 1–2 lonely modules. The reading path is F-pattern: hero chart top-left, KPI stack right, sparkline row bottom. ## Slide Anatomy - **Cover slide**: pale gray canvas, 24pt title top, three mini KPI cards in a row (40pt data-color number + delta + sparkline), one large trend line chart below (2pt line, 2–3 gridlines, direct 12pt value labels). - **Dashboard content slide**: the workhorse — a 2x2 main bar chart top-left (one emphasized bar, rest sunk), three vertical mini KPI cards right, a row of sparklines bottom; F-pattern flow. - **Exhibit/chart slide**: a large SVG bar chart left (categorical 4-color encoding, 2–3 gridlines, x baseline, 0 baseline, direct labels) + a donut (≤3 slices, 28pt center metric) and 2 mini KPI cards right; per-chart source caption + unit. - **Process slide**: 4–6 horizontal card-nodes with 0.32in circle number badges, 1.5pt right-angle connectors, active node marked by a 3px left data-color bar, a mini KPI under each. - **Divider slide**: pale gray with a giant 96pt pale section number, 24pt section name, and 1–2 preview mini KPI cards. ## Depth & Elevation Nearly flat. The only elevation is the faint card lift — `0 1px 3px` black 6% — so cards separate from the gray canvas. Charts and diagrams themselves carry no shadow, bevel, or 3D. Division is done by 1px light-gray hairlines and the 0.15in card gap. ## Shapes Card and node radius is 6px; chart bar radius is a tighter 2px (precision over softness). Corners never exceed 8px. Number badges are 0.32in circles, data-color-filled with white semibold digits. Connectors are 1.5pt right-angle lines with small triangular arrowheads. ## Component Stylings - **KPI card**: white surface (1px border, 6px radius, faint shadow, 0.18in padding) — top-left 2px line icon (data-color) + 13pt uppercase mid-gray header, a 40pt bold data-color hero number, a 14pt semibold delta (▲ green up / ▼ red down), a 1.2in sparkline bottom-right. 3–6 per slide. - **Chart**: data-ink minimal — no border box, no plot fill; 2–3 horizontal gridlines (0/mid/max) at 0.5pt; 0.75pt x baseline; baseline always 0. Series map to chart-1..5 in order; single-series = chart-1 with one emphasis bar, rest pale blue-gray. No legend box — inline color dots (0.08in) + direct 12pt semibold tabular value labels; category names 10pt mid-gray under bars. Bar:gap 3:2. - **Stat tile**: mini metric on the shared white surface — header + large number + sparkline or inline mini-bar (1in wide). - **Footer / source**: each data card carries a bottom-left 10pt mid-gray source caption + unit — mandatory wherever data appears. ## Motion Restrained: a 0.3s fade between slides and an optional 0.2s sequential chart build. No decorative object animation — density and legibility carry the deck. ## Do's and Don'ts **Do:** pack 4–8 modules per slide; make hero numbers 40pt data-color (2–3x body); encode categories with chart-1..5 in order and sink non-emphasis to pale blue-gray; keep charts to 2–3 gridlines, x baseline, 0 baseline, direct tabular labels, no legend box; add a source caption to every data card. **Don't:** leave 1–2 lonely modules or shrink KPI numbers to body size; exceed 5 data colors or add decorative/rainbow color; use 3D bars/donuts, bar shadows/bevels, gradient fills, or truncated y-axes; over-draw gridlines or add legend boxes/chart border boxes/plot fills; use ≥4 donut slices or multiple donuts; use emoji/clipart (line icons only), corners over 8px, or gradient backgrounds; omit sources. ## Agent Prompt Guide > Build this in the 'Data Infographic Deck' style: dense dashboard 16:9 slides on a pale gray canvas where 4–8 white cards float with a 1px hairline border, 6px radius, and a faint shadow. Color is data encoding only — series map in order to chart-1 blue, chart-2 teal, chart-3 amber, chart-4 coral, chart-5 green; single-series charts use chart-1 with one emphasized bar, the rest pale blue-gray. KPI cards carry a line icon, 13pt uppercase header, a 40pt bold data-color hero number, a ▲/▼ delta, and a 1.2in sparkline. Charts are data-ink minimal: 2–3 gridlines, x baseline, baseline at 0, no legend box, direct 12pt semibold tabular labels. Every data card carries a 10pt source caption. Inter + Pretendard/Noto Sans KR; no 3D, gradients, emoji, or clipart. ## Known Gaps / Confidence Adapted from the MIT-licensed design-diversity pack `ppt-data-infographic-heavy` — 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), the pale-blue-gray de-emphasis bar (#C7D2E8) lives outside the token ramp, `chart-5` promotes the pack's delta green to fill a fifth categorical slot, and the dark color map is an authored dashboard-dark adaptation absent from the source pack. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Data Infographic Deck — theme.css (generated, do not edit) */ :root { --radius: 6px; --radius-selector: 6px; --radius-field: 6px; --font-sans: 'Inter', 'Pretendard', 'Noto Sans KR', Arial, sans-serif; --spacing: 8px; --shadow: 0px 1px 3px 0px color-mix(in oklab, oklch(0.251 0.015 261.7) 6%, transparent); --background: oklch(0.979 0.003 264.5); --foreground: oklch(0.251 0.015 261.7); --card: oklch(1 0 0); --card-foreground: oklch(0.251 0.015 261.7); --popover: oklch(1 0 0); --popover-foreground: oklch(0.251 0.015 261.7); --primary: oklch(0.546 0.215 262.9); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.921 0.008 260.7); --secondary-foreground: oklch(0.251 0.015 261.7); --muted: oklch(0.965 0.004 264.5); --muted-foreground: oklch(0.558 0.020 264.4); --accent: oklch(0.546 0.215 262.9); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.215 27.3); --destructive-foreground: oklch(1 0 0); --border: oklch(0.921 0.008 260.7); --input: oklch(0.921 0.008 260.7); --ring: oklch(0.546 0.215 262.9); --chart-1: oklch(0.546 0.215 262.9); --chart-2: oklch(0.654 0.110 194.0); --chart-3: oklch(0.769 0.165 70.1); --chart-4: oklch(0.637 0.208 25.3); --chart-5: oklch(0.627 0.170 149.2); } .dark { --background: oklch(0.205 0.012 264); --foreground: oklch(0.93 0.006 260); --card: oklch(0.245 0.014 264); --card-foreground: oklch(0.93 0.006 260); --popover: oklch(0.245 0.014 264); --popover-foreground: oklch(0.93 0.006 260); --primary: oklch(0.62 0.19 262.9); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.28 0.014 264); --secondary-foreground: oklch(0.87 0.008 260); --muted: oklch(0.28 0.014 264); --muted-foreground: oklch(0.68 0.018 264); --accent: oklch(0.62 0.19 262.9); --accent-foreground: oklch(0.99 0 0); --destructive: oklch(0.62 0.20 25.3); --destructive-foreground: oklch(0.99 0 0); --border: oklch(0.32 0.014 264); --input: oklch(0.32 0.014 264); --ring: oklch(0.62 0.19 262.9); --chart-1: oklch(0.62 0.19 262.9); --chart-2: oklch(0.70 0.11 194.0); --chart-3: oklch(0.79 0.16 70.1); --chart-4: oklch(0.66 0.20 25.3); --chart-5: oklch(0.68 0.16 149.2); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Q3 Growth Dashboard

FY25 · All Regions

Revenue by Channel

62
41
33
18
11
DirectPartnerWebRetailOther
Source: internal billing (USD M)

Active Users

128K
▲ 12.4%

Churn

2.1%
▼ 0.4pt
MRR$4.2M
NPS57
Uptime99.9%
02

Section 02 — Retention

Where the cohorts hold and where they leak.

D30
44%
D90
31%
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-data-infographic.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 `