1# ink-notes
2 
3Professional black-ink visual notes on pure white, in the tradition of Mike Rohde's sketchnoting
4 
5## Compared to sketch-notes
6 
7`ink-notes` and `sketch-notes` are distinct styles. Pick the right one:
8 
9| | `sketch-notes` | `ink-notes` |
10|---|---|---|
11| Background | Warm Off-White #FAF8F0 with paper grain | Pure White #FFFFFF, clean, no texture |
12| Palette | Soft warm accents (orange, mustard, sage, light blue) | Black ink dominant + sparse semantic accents |
13| Feel | Soft, warm, educational, approachable | Professional, structured, whiteboard-presentation |
14| Best For | Friendly tutorials, onboarding, casual explainers | Before/After essays, tech manifestos, framework analogies |
15 
16When in doubt: warm & friendly → `sketch-notes`. Disciplined & professional → `ink-notes`.
17 
18## Design Aesthetic
19 
20Disciplined 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.
21 
22## Background
23 
24- Color: Pure White (#FFFFFF)
25- Texture: Clean, no grain, no tint
26 
27## Color Palette
28 
29| Role | Color | Hex | Usage |
30|------|-------|-----|-------|
31| Background | Pure White | #FFFFFF | Canvas |
32| Primary Ink | Near Black | #1A1A1A | All lines, text, figures, arrows |
33| Accent Warm | Coral Red | #E8655A | Risk, problem, gap, emphasis |
34| Accent Cool | Muted Teal | #5FA8A8 | Positive, solution, "after" state |
35| Accent Neutral | Dusty Lavender | #9B8AB5 | Neutral tags, category labels |
36| Soft Fill | Pale Gray | #F0F0F0 | Subtle zone backgrounds (optional) |
37 
38Color accents must remain under 10% of canvas area and only carry semantic meaning. Black ink does the structural work.
39 
40## Visual Elements
41 
42- Black ink line work with intentional slight wobble on all strokes
43- Hand-lettered titles (bold, oversized) and handwritten body annotations
44- Simple stick-figure characters with expressive poses (pointing, thinking, walking)
45- Role labels above characters (e.g., "Tech Lead", "Compliance Officer")
46- Thought bubbles and speech bubbles with hand-drawn outlines
47- Rounded-rectangle frames for content groupings
48- Dashed-border rectangles for placeholder, "coming next", or empty states
49- Curvy hand-drawn arrows with small inline labels
50- Vertical or horizontal dividers between comparison zones ("Before" | "After")
51- "Mindset shift" curved arrow bridging two zones
52- Bottom tagline: single-line hand-lettered conclusion that points the takeaway
53- Stars, asterisks, underlines for emphasis — used sparingly
54 
55## Style Rules
56 
57### Do
58 
59- Keep background pure white with no texture or tint
60- Let black ink dominate outlines, text, and figures
61- Use accent colors only for semantic highlighting
62- Keep all type hand-lettered — no computer-generated fonts
63- Maintain confident line quality (wobble, not mess)
64- Include a bottom tagline summarizing the main takeaway
65- Structure content into clear zones with visible dividers
66- Use dashed boxes for future, empty, or placeholder states
67 
68### Don't
69 
70- Use warm off-white or paper-textured backgrounds (that is sketch-notes' territory)
71- Fill large zones with color blocks
72- Use more than 3 accent colors per image
73- Use perfect geometric shapes — preserve hand-drawn wobble
74- Clutter with decorative doodles; every element must carry meaning
75- Use gradients, shadows, or computer-generated fonts
76 
77## Type Compatibility
78 
79| Type | Rating | Notes |
80|------|--------|-------|
81| comparison | ✓✓ | Best fit — Before/After, Traditional vs New, side-by-side contrasts |
82| framework | ✓✓ | OS-style command centers, layered architectures, organizational models |
83| flowchart | ✓✓ | Process explainers with labeled stages, workforce pipelines |
84| infographic | ✓ | Multi-zone technical summaries, manifesto-style posters |
85| timeline | ✓ | Hand-drawn horizontal arrow with era markers and milestones |
86| scene | ✗ | Not recommended — lacks scenic space |
87 
88## Best For
89 
90Product and engineering essays, tech manifestos, framework introductions, Before/After narratives, OS-level comparisons, workforce and organizational analogies, visual summaries of talks, thought-leadership articles
91