# 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.