initial commit

2026-07-12 10:17:17 -04:00
commit dab5a4ebc6
1424 changed files with 330463 additions and 0 deletions
@@ -0,0 +1,90 @@
+# 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