# Hand-drawn Sketch Deck
손그림 흔들림 테두리 + 거친 펜 화살표·말풍선·사선 해칭이 크림색 종이 위에 놓인 워크숍 보드 스타일의 16:9 덱.
- taxonomy: hand-drawn · hand-drawn, sketch, whiteboard, workshop, marker, cream-paper, hatching, informal · complexity=medium
- page types: presentation
- best for: 워크숍·브레인스토밍·디자인씽킹 세션 자료, 비격식·친근한 팀 발표·아이데이션 공유, 교육·강의용 설명 덱(개념을 손그림으로 풀어내는)
- avoid for: 경영진 보고·전략 컨설팅 등 격식·권위형 덱, 재무·규제 등 정밀·엄격이 요구되는 데이터 보고서, 미니멀·럭셔리 브랜드 키노트(매끈함이 정체성인)
- provenance: authored (design-diversity 팩 'ppt-hand-drawn-sketch' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# Hand-drawn Sketch Deck
## Overview
A workshop whiteboard translated into a 16:9 deck. Every border is a wobbling hand-drawn pen path rather than a ruler-straight line; arrows, underlines, and circles are rough tapering pen strokes; boxes sit slightly askew like stuck-on sticky notes on cream paper. Emphasis is never a solid fill or gradient — it is 30° diagonal hatching and exactly two marker colors. The identity is "someone sketched this live on a board," so smoothness, alignment, and digital polish are the failure modes.
## Colors & Roles
Canonical mode is **light**: `background` is cream paper (#F4ECDC → oklch 0.945 0.023 84.6) on every slide. Ink is pen-black (`foreground`, #2B2724 — a warm near-black, not pure black), with a warm gray (`muted-foreground`, #7A7268) for captions. The two marker colors are the only chroma: coral (`primary`/`destructive`, #E8654A) and mustard (`accent`, #E0A92E) — used strictly for hatch fills, rough circles, and highlights, never as flat fills. `card`/`popover` are a near-white paper tint (#FBF6EC) for box fills; `secondary`/`muted` are cream tints holding the paper hue (~84.6); `border`/`input` are the #CFC4AC hairline. `chart-1..5` run coral, mustard, ink, gray, hairline — one coral emphasis bar per chart, the rest ink hatch. `destructive` maps to coral because the palette has no pure red. The dark map is an authored **chalkboard** adaptation (dark green-gray board, hue 140–153, chalk off-white text, markers lifted to chalk tones) and is not part of the source spec.
## Typography Rules
Two families. Handwritten **Caveat** (Comic Sans MS fallback) carries display: headline 40pt / bold / often tilted −1.5°, subhead 24pt, labels and speech bubbles 16pt, chart value labels 16pt, KPI hero numbers 36pt. Body text alone stays upright in a humanist sans (**Pretendard**, Google-Fonts fallback Noto Sans KR) at 17pt / 1.45 line-height for legibility; captions 12pt in warm gray. Values and category names are written directly on bars and vertices in Caveat — never read off an axis.
## Slide Anatomy
- **Title slide**: cream paper, a centered box rotated −2° holding the 40pt handwritten title, a coral hand-drawn underline (4px overshoot) beneath it, small hand-drawn star doodles in the corners.
- **Content slide** (workhorse): a tilted handwritten headline with coral underline, then 2–3 wobble boxes placed off-kilter (each rotated −2°…+2°), connected by tapering pen arrows or dotted lines; key words get a mustard hatch highlight.
- **Chart slide**: SVG hand-drawn bar chart — a wobbling 2.5px x-baseline only (no y-axis, gridlines, legend, or chart box), bars with hand-drawn borders and diagonal hatch fill (one coral emphasis bar), Caveat value labels on top, baseline at 0; the key bar wrapped in a rough coral circle + speech-bubble note.
- **Process slide**: 4 horizontal wobble rect nodes (−2°…+2°) with hand-drawn circled step numbers, tapering pen arrows (4px overshoot) between; the current step gets coral hatch fill.
- **Matrix / divider**: wobble 2×2 pen cross with Caveat axis labels and a coral-circled top-right item; dividers center a −2° tilted box with a giant Caveat chapter number and coral underline.
## Depth & Elevation
No soft diffuse shadows, ever. Depth is faked by a slightly offset hand-drawn double line (0.8px offset) or rough pencil shading. A subtle paper grain (`grain: true`, low noise) sits under everything; no gradients, glass, or blur.
## Shapes
Corners are ~6px but deliberately irregular. All borders are 2.5px wobble paths with ±1.5px amplitude. Emphasis boxes are drawn twice (0.8px offset double line). Arrows/underlines taper 3px→1.5px with a 4px overshoot; fills are 30° diagonal hatching (2px lines, 6px gap), not solid.
## Component Stylings
- **Sketch box**: 2.5px wobble border, irregular 6px corners, −2.5°…+2.5° rotation, white paper fill; emphasis = 0.8px offset double line. Render as SVG precise paths, not smooth div blocks.
- **Marker arrow**: tapering pen stroke (3px→1.5px), lightly wobbling path, 4px overshoot, ink; the same stroke language covers underlines and rough circles.
- **Speech bubble**: hand-drawn ellipse/rect with a drawn tail, Caveat 16pt label — for key datapoints and "지금!" timeline markers.
- **Hatch fill**: diagonal hatching replaces every solid emphasis fill — one coral hatch element, rest ink hatch; a dominant item gets mustard hatch + a rough circle.
- **Chart**: data-ink minimalism, hand-drawn — wobbling x-baseline only, hatch-filled bars, direct Caveat value labels, baseline 0; comparison=bars, trend=tapering hand-drawn line with overshoot, share=hand-drawn pie (≤3 slices, hatch fill).
- **Diagram**: one language — wobble nodes + circled Caveat step numbers + tapering pen arrows; process, timeline, comparison, 2×2 matrix, hierarchy, and funnel all derive from it, emphasized with coral/mustard only.
- **KPI card**: wobble box (rotation, double-line emphasis), Caveat 36pt value + 14pt label + hand-drawn delta arrow, key figure with a rough coral underline.
## Motion
Playful and light. Slide transitions are a 0.3s fade or a light hand-flip wipe; element entrances may wobble or slightly overshoot (spring easing), but restrained — never a bouncy circus.
## Do's and Don'ts
**Do:** wobble every stroke (±1.5px); tilt each box −2.5°…+2.5° and place them off-kilter; emphasize with 30° hatching and the two markers only; taper arrows with a 4px overshoot; label charts directly in Caveat with baseline at 0.
**Don't:** draw perfect straight lines, true circles, smooth digital shapes, clean drop shadows, or gradients; use a third marker color, rainbow charts, gridlines, or a truncated y-axis; use a cold neutral background (always cream paper); use stock icons, clipart, or emoji; align every box tidily with no rotation.
## Agent Prompt Guide
> Build this in the 'Hand-drawn Sketch Deck' style: 16:9 cream-paper slides that look sketched live on a whiteboard. Every box, node, and axis is a 2.5px wobbling pen path (±1.5px jitter, irregular 6px corners), each rotated −2.5°…+2.5° and placed off-kilter like sticky notes. Ink is warm pen-black; body text is upright Pretendard/Noto Sans KR, but headlines, labels, KPI numbers, and speech bubbles are handwritten Caveat, often tilted. Emphasis is never a solid fill or gradient — only 30° diagonal hatching plus two marker colors (coral, mustard). Connectors and underlines taper 3px→1.5px with a 4px overshoot; annotate with hand-drawn speech bubbles. Charts wear the same language: a wobbling x-baseline only (no y-axis, gridlines, legend, or box), hatch-filled bars with one coral emphasis, Caveat value labels drawn on the bars, baseline at 0. No smooth digital shapes, drop shadows, gradients, clipart, or emoji.
## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `ppt-hand-drawn-sketch` — an authored spec, not an extraction from a live deck, so all confidence fields are `manual`. This is 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 chalkboard adaptation absent from the source pack. The hand-drawn effects (wobble, hatch, taper, rotation) are procedural rules meant to avoid dependence on any bundled illustration assets; the pack's own sources are secondary articles (low source confidence), so the value is in the procedural spec, not a single primary reference.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Hand-drawn Sketch Deck — theme.css (generated, do not edit) */
:root {
--radius: 6px;
--radius-selector: 6px;
--radius-field: 6px;
--font-sans: 'Pretendard', 'Noto Sans KR', 'Segoe UI', sans-serif;
--font-display: 'Caveat', 'Comic Sans MS', 'Pretendard', cursive;
--spacing: 8px;
--shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent);
--background: oklch(0.945 0.023 84.6);
--foreground: oklch(0.276 0.008 59.3);
--card: oklch(0.974 0.014 84.6);
--card-foreground: oklch(0.276 0.008 59.3);
--popover: oklch(0.974 0.014 84.6);
--popover-foreground: oklch(0.276 0.008 59.3);
--primary: oklch(0.665 0.169 33.3);
--primary-foreground: oklch(0.974 0.014 84.6);
--secondary: oklch(0.921 0.026 84.6);
--secondary-foreground: oklch(0.276 0.008 59.3);
--muted: oklch(0.912 0.029 84.6);
--muted-foreground: oklch(0.556 0.018 73.5);
--accent: oklch(0.766 0.145 82.5);
--accent-foreground: oklch(0.276 0.008 59.3);
--destructive: oklch(0.665 0.169 33.3);
--destructive-foreground: oklch(0.974 0.014 84.6);
--border: oklch(0.823 0.035 86.3);
--input: oklch(0.823 0.035 86.3);
--ring: oklch(0.665 0.169 33.3);
--chart-1: oklch(0.665 0.169 33.3);
--chart-2: oklch(0.766 0.145 82.5);
--chart-3: oklch(0.276 0.008 59.3);
--chart-4: oklch(0.556 0.018 73.5);
--chart-5: oklch(0.823 0.035 86.3);
}
.dark {
--background: oklch(0.296 0.008 153.4);
--foreground: oklch(0.928 0.024 90.8);
--card: oklch(0.334 0.011 145.3);
--card-foreground: oklch(0.928 0.024 90.8);
--popover: oklch(0.334 0.011 145.3);
--popover-foreground: oklch(0.928 0.024 90.8);
--primary: oklch(0.738 0.130 34.2);
--primary-foreground: oklch(0.296 0.008 153.4);
--secondary: oklch(0.369 0.012 140.5);
--secondary-foreground: oklch(0.928 0.024 90.8);
--muted: oklch(0.369 0.012 140.5);
--muted-foreground: oklch(0.712 0.023 92.6);
--accent: oklch(0.830 0.130 86.0);
--accent-foreground: oklch(0.296 0.008 153.4);
--destructive: oklch(0.738 0.130 34.2);
--destructive-foreground: oklch(0.296 0.008 153.4);
--border: oklch(0.421 0.012 140.5);
--input: oklch(0.421 0.012 140.5);
--ring: oklch(0.738 0.130 34.2);
--chart-1: oklch(0.738 0.130 34.2);
--chart-2: oklch(0.830 0.130 86.0);
--chart-3: oklch(0.928 0.024 90.8);
--chart-4: oklch(0.712 0.023 92.6);
--chart-5: oklch(0.421 0.012 140.5);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
아이디어를 손으로 펼쳐보자
워크숍 보드 · 손그림 스케치
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-hand-drawn-sketch.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 `