正文
获取原文件references/styles/sketch-notes.md
Hand-drawn educational infographic style with warm cream paper, black hand-drawn lines, and soft pastel section blocks. Optimized for single-page visual explainers.
Design Aesthetic
Hand-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.
Background
- Color: Warm Cream Paper (#F5F0E8) — preferred; fallback Warm Off-White (#FAF8F0)
- Texture: Subtle warm paper grain, matte finish, no gloss
Color Palette
Default sketch-notes palette is the macaron pastel set. Lines are always black; pastel blocks are used only as rounded card fills for information sections.
| Role | Color | Hex | Usage |
|---|---|---|---|
| Background | Warm Cream | #F5F0E8 | Paper background |
| Primary Ink | Black | #1A1A1A | ALL outlines, text, arrows, doodles |
| Block Blue | Light Blue | #A8D8EA | Info block fill (cool / tech) |
| Block Mint | Mint Green | #B5E5CF | Info block fill (growth / positive) |
| Block Lavender | Lavender | #D5C6E0 | Info block fill (concept / abstract) |
| Block Peach | Peach | #FFD5C2 | Info block fill (warm / human) |
| Accent | Coral Red | #E8655A | One or two emphasis points only |
| Muted Text | Warm Gray | #6B6B6B | Small annotations |
Use 4 pastel block colors max per image, one color per section. Black ink does all the structural line work.
Visual Elements
- Bold hand-lettered title at the top (oversized, slightly wobbly)
- Rounded-rectangle info boxes with clear sectioning (2–6 zones)
- Short keyword labels inside boxes — never long paragraphs
- Simple icons and sketchy cartoon elements (stick figures, tools, objects) to explain each idea
- Hand-drawn arrows (straight, curved, or wavy) connecting related zones
- Small doodle decorations: stars, sparkles, underlines, dots, asterisks — used sparingly for emphasis
- Single-line hand-lettered takeaway sentence at the bottom
- Color fills do not completely fill outlines (slight "hand-painted" overshoot/undershoot)
- Generous white space between sections — airy, never crowded
Layout Guidelines
Canonical single-page layout (16:9 or 4:3):
- Top (10–15%) — Bold hand-lettered title, optionally with a small decorative underline or doodle.
- 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.
- Bottom (10–15%) — One short hand-lettered takeaway sentence summarizing the core insight.
Keep margins generous. Aim for breathing room around every element.
Style Rules
Do
- Use warm cream paper background (no pure white)
- Use black hand-drawn lines for ALL structural elements
- Use soft pastel blocks (blue / mint / lavender / peach) for section fills
- Keep text to short keywords and phrases only
- Include a bold handwritten title at the top
- Include a short takeaway sentence at the bottom
- Use diagram-style visuals (icons, doodles, simple shapes)
- Allow slight wobble — hand-drawn imperfection is the point
- Maintain clear sectioning with rounded boxes
Don't
- Use pure white backgrounds (that's
ink-notes' territory) - Render realistic or photographic images — this style is diagram-only
- Fill zones with gradients, shadows, or digital effects
- Use long paragraphs of text — keywords only
- Use computer-generated / sans-serif body fonts — ALL text must be hand-lettered
- Use more than 4 pastel block colors per image
- Overcrowd the canvas — keep it airy and minimal
- Use perfect geometric shapes — preserve the hand-drawn wobble
Type Compatibility
| Type | Rating | Notes |
|---|---|---|
| infographic | ✓✓ | Best fit — single-page visual explainers, concept summaries, educational slides |
| framework | ✓✓ | Labeled zones and connectors render well |
| flowchart | ✓✓ | Rounded step boxes with wavy arrows |
| comparison | ✓✓ | Two pastel blocks side by side; prefer ink-notes for strict Before/After contrasts |
| timeline | ✓ | Hand-drawn horizontal arrow with milestone cards |
| scene | ✗ | Not recommended — too diagrammatic |
Best For
Educational content, knowledge sharing, concept explainers, tutorials, onboarding materials, product walkthroughs, single-page visual summaries, "how things work" posts, friendly technical articles