91 lines
4.2 KiB
Markdown
91 lines
4.2 KiB
Markdown
# ink-notes
|
|
|
|
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
|