# 34 Hand Drawn Desk

**Philosophy and fit.** Show thought developing through explanation, annotation, and revision. Fits tutorials, workshop materials, personal teaching sites, and approachable technical writing.

**Visual grammar.** Make numbered illustrated steps the main structure: a large diagram, a short explanation, and a practice prompt. Attach callouts to parts of the drawing rather than maintaining a prose annotation margin. Warm paper, graphite, blue ink, and a red correction accent support a readable sans body face. Handwriting appears only in short secondary notes; a compact step index supplies navigation.

**Specimen and flow.** _Explain It Slowly_ teaches an original simple mechanism. Inspect a diagram, reveal labelled forces or moving parts, and predict the next step. Supporting views include the illustrated lesson index and answer feedback that connects the prediction to the diagram. The reader can toggle annotations without losing their position.

**Responsive behaviour.** Drawing callouts become a numbered explanation below each diagram. Diagrams include captions and text accounts; animation never replaces the written explanation of how a mechanism works.

**Identity rules.** Preserve explanatory annotation and visible thinking. Avoid fake handwritten paragraphs, random scribbles with no meaning, and confusing a teaching notebook with an archival card cabinet. **Effort: medium.**

## Implemented sample

Explain It Slowly is an expansive, bounded design reference. All organisations, events, prices, statistics and research claims are fictional fixtures. The page includes a complete primary composition and two local supporting routes that show its interaction and content hierarchy.

## Defining features

- Diagram-led teaching
- Callouts attached to mechanics
- A prediction followed by explanation

## Adaptable choices

Brand, subject, accent and equivalent licensed typefaces can change. Preserve composition and navigation. Do not turn the hierarchy into a uniform collection of cards.

## Tokens and typography

Heading: Space Grotesk. Reading: DM Sans. Local WOFF2 fonts with system fallbacks. Page #f7f0de; surface #ffffff; text #37414a; accent #315b9a. Eight-pixel base spacing; reading measure 65ch; width 1240px. See tokens.css for role values and Demo.vue for composition. Palette and type match the working specimen.

## States

- Entry: /preview/34-hand-drawn-desk/start
- Predict the movement: /preview/34-hand-drawn-desk/practice
- Lesson index: /preview/34-hand-drawn-desk/index

## Neighbours and adaptation

- [05 Scholarly Folio](../05-scholarly-folio/DESIGN.md) uses book-like reading column between chapter index and annotation margin and chapters, numbered annotations, and bibliography. This reference keeps numbered illustrated steps with attached callouts and a practice question and step index, diagram labels, and answer feedback.
- [35 Paper Cabinet](../35-paper-cabinet/DESIGN.md) uses tabbed category drawers, consistent index cards, and full record sheets and drawer tabs, ingredient search, and accession links. This reference keeps numbered illustrated steps with attached callouts and a practice question and step index, diagram labels, and answer feedback.

## Assets

See [asset record](../../../docs/ASSETS.md). All vector diagrams and sample writing are original to this repository. Photos are illustrative, not evidence of the fictional brands. Font faces: Space Grotesk, DM Sans, Caveat.

## Verification

Reviewed working sample. Browser checks cover entry-page reflow at 320, 390, 768, and 1440 pixels, keyboard entry, direct routes, and automated accessibility; both supporting routes are checked at 390 pixels. Capture metadata is stored in public/previews/34/capture.json and names the source content hash. Accessibility scans are supplementary; no formal WCAG certification or field-performance claim is made.

## Distinctive composition

Handwritten labels belong to the sketchbook, making its annotations distinct from the paper archive and playful geometric references.