1# sketch-notes
2 
3Hand-drawn educational infographic style with warm cream paper, black hand-drawn lines, and soft pastel section blocks. Optimized for single-page visual explainers.
4 
5## Design Aesthetic
6 
7Hand-drawn educational infographic in a clean presentation style. Feels like a visual explainer slide: simple, friendly, and easy to understand at a glance. Bold handwritten-style title at the top, clearly sectioned content in the middle with rounded boxes and small doodles, and one short takeaway sentence at the bottom. Neat, airy, and visually similar to a hand-drawn concept diagram — never realistic or photographic.
8 
9## Background
10 
11- Color: Warm Cream Paper (#F5F0E8) — preferred; fallback Warm Off-White (#FAF8F0)
12- Texture: Subtle warm paper grain, matte finish, no gloss
13 
14## Color Palette
15 
16Default sketch-notes palette is the **macaron** pastel set. Lines are always black; pastel blocks are used only as rounded card fills for information sections.
17 
18| Role | Color | Hex | Usage |
19|------|-------|-----|-------|
20| Background | Warm Cream | #F5F0E8 | Paper background |
21| Primary Ink | Black | #1A1A1A | ALL outlines, text, arrows, doodles |
22| Block Blue | Light Blue | #A8D8EA | Info block fill (cool / tech) |
23| Block Mint | Mint Green | #B5E5CF | Info block fill (growth / positive) |
24| Block Lavender | Lavender | #D5C6E0 | Info block fill (concept / abstract) |
25| Block Peach | Peach | #FFD5C2 | Info block fill (warm / human) |
26| Accent | Coral Red | #E8655A | One or two emphasis points only |
27| Muted Text | Warm Gray | #6B6B6B | Small annotations |
28 
29Use **4 pastel block colors max** per image, one color per section. Black ink does all the structural line work.
30 
31## Visual Elements
32 
33- Bold hand-lettered title at the top (oversized, slightly wobbly)
34- Rounded-rectangle info boxes with clear sectioning (2–6 zones)
35- Short keyword labels inside boxes — never long paragraphs
36- Simple icons and sketchy cartoon elements (stick figures, tools, objects) to explain each idea
37- Hand-drawn arrows (straight, curved, or wavy) connecting related zones
38- Small doodle decorations: stars, sparkles, underlines, dots, asterisks — used sparingly for emphasis
39- Single-line hand-lettered takeaway sentence at the bottom
40- Color fills do not completely fill outlines (slight "hand-painted" overshoot/undershoot)
41- Generous white space between sections — airy, never crowded
42 
43## Layout Guidelines
44 
45Canonical single-page layout (16:9 or 4:3):
46 
471. **Top (10–15%)** — Bold hand-lettered title, optionally with a small decorative underline or doodle.
482. **Middle (70–80%)** — 2–6 rounded pastel info boxes arranged in a clear grid, row, or radial pattern. Each box = one section, one color, one icon, one keyword/phrase.
493. **Bottom (10–15%)** — One short hand-lettered takeaway sentence summarizing the core insight.
50 
51Keep margins generous. Aim for breathing room around every element.
52 
53## Style Rules
54 
55### Do
56 
57- Use warm cream paper background (no pure white)
58- Use black hand-drawn lines for ALL structural elements
59- Use soft pastel blocks (blue / mint / lavender / peach) for section fills
60- Keep text to short keywords and phrases only
61- Include a bold handwritten title at the top
62- Include a short takeaway sentence at the bottom
63- Use diagram-style visuals (icons, doodles, simple shapes)
64- Allow slight wobble — hand-drawn imperfection is the point
65- Maintain clear sectioning with rounded boxes
66 
67### Don't
68 
69- Use pure white backgrounds (that's `ink-notes`' territory)
70- Render realistic or photographic images — this style is diagram-only
71- Fill zones with gradients, shadows, or digital effects
72- Use long paragraphs of text — keywords only
73- Use computer-generated / sans-serif body fonts — ALL text must be hand-lettered
74- Use more than 4 pastel block colors per image
75- Overcrowd the canvas — keep it airy and minimal
76- Use perfect geometric shapes — preserve the hand-drawn wobble
77 
78## Type Compatibility
79 
80| Type | Rating | Notes |
81|------|--------|-------|
82| infographic | ✓✓ | **Best fit** — single-page visual explainers, concept summaries, educational slides |
83| framework | ✓✓ | Labeled zones and connectors render well |
84| flowchart | ✓✓ | Rounded step boxes with wavy arrows |
85| comparison | ✓✓ | Two pastel blocks side by side; prefer `ink-notes` for strict Before/After contrasts |
86| timeline | ✓ | Hand-drawn horizontal arrow with milestone cards |
87| scene | ✗ | Not recommended — too diagrammatic |
88 
89## Best For
90 
91Educational content, knowledge sharing, concept explainers, tutorials, onboarding materials, product walkthroughs, single-page visual summaries, "how things work" posts, friendly technical articles
92