文章配图规划

references/styles/ink-notes.md

Professional black-ink visual notes on pure white, in the tradition of Mike Rohde's sketchnoting

Compared to sketch-notes

ink-notes and sketch-notes are distinct styles. Pick the right one:

	sketch-notes	ink-notes
Background	Warm Off-White #FAF8F0 with paper grain	Pure White #FFFFFF, clean, no texture
Palette	Soft warm accents (orange, mustard, sage, light blue)	Black ink dominant + sparse semantic accents
Feel	Soft, warm, educational, approachable	Professional, structured, whiteboard-presentation
Best For	Friendly tutorials, onboarding, casual explainers	Before/After essays, tech manifestos, framework analogies

When in doubt: warm & friendly → sketch-notes. Disciplined & professional → ink-notes.

Design Aesthetic

Disciplined hand-drawn visual note. Confident black ink line work with slight wobble, hand-lettered typography, and sparse color accents used only for semantic emphasis. Feels like a skilled visual notetaker's whiteboard presentation — clean, structured, intentionally hand-drawn rather than decorative.

Background

• Color: Pure White (#FFFFFF)
• Texture: Clean, no grain, no tint

Color Palette

Role	Color	Hex	Usage
Background	Pure White	#FFFFFF	Canvas
Primary Ink	Near Black	#1A1A1A	All lines, text, figures, arrows
Accent Warm	Coral Red	#E8655A	Risk, problem, gap, emphasis
Accent Cool	Muted Teal	#5FA8A8	Positive, solution, "after" state
Accent Neutral	Dusty Lavender	#9B8AB5	Neutral tags, category labels
Soft Fill	Pale Gray	#F0F0F0	Subtle zone backgrounds (optional)

Color accents must remain under 10% of canvas area and only carry semantic meaning. Black ink does the structural work.

Visual Elements

• Black ink line work with intentional slight wobble on all strokes
• Hand-lettered titles (bold, oversized) and handwritten body annotations
• Simple stick-figure characters with expressive poses (pointing, thinking, walking)
• Role labels above characters (e.g., "Tech Lead", "Compliance Officer")
• Thought bubbles and speech bubbles with hand-drawn outlines
• Rounded-rectangle frames for content groupings
• Dashed-border rectangles for placeholder, "coming next", or empty states
• Curvy hand-drawn arrows with small inline labels
• Vertical or horizontal dividers between comparison zones ("Before" | "After")
• "Mindset shift" curved arrow bridging two zones
• Bottom tagline: single-line hand-lettered conclusion that points the takeaway
• Stars, asterisks, underlines for emphasis — used sparingly

Style Rules

Do

• Keep background pure white with no texture or tint
• Let black ink dominate outlines, text, and figures
• Use accent colors only for semantic highlighting
• Keep all type hand-lettered — no computer-generated fonts
• Maintain confident line quality (wobble, not mess)
• Include a bottom tagline summarizing the main takeaway
• Structure content into clear zones with visible dividers
• Use dashed boxes for future, empty, or placeholder states

Don't

• Use warm off-white or paper-textured backgrounds (that is sketch-notes' territory)
• Fill large zones with color blocks
• Use more than 3 accent colors per image
• Use perfect geometric shapes — preserve hand-drawn wobble
• Clutter with decorative doodles; every element must carry meaning
• Use gradients, shadows, or computer-generated fonts

Type Compatibility

Type	Rating	Notes
comparison	✓✓	Best fit — Before/After, Traditional vs New, side-by-side contrasts
framework	✓✓	OS-style command centers, layered architectures, organizational models
flowchart	✓✓	Process explainers with labeled stages, workforce pipelines
infographic	✓	Multi-zone technical summaries, manifesto-style posters
timeline	✓	Hand-drawn horizontal arrow with era markers and milestones
scene	✗	Not recommended — lacks scenic space

Best For

Product and engineering essays, tech manifestos, framework introductions, Before/After narratives, OS-level comparisons, workforce and organizational analogies, visual summaries of talks, thought-leadership articles