# 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