The Center
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ "CodexMono is The Brick - the fundamental unit that enables │
│ Monokinetics: unified Human + AI experience through predictable, │
│ trustable visual alignment." │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
ASCII Art is Dual-Purpose
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ HUMAN AI │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ │ │ │ │
│ │ Visual at │ │ Parseable as │ │
│ │ a glance │ │ text tokens │ │
│ │ │ │ │ │
│ │ Structure │ │ Structure │ │
│ │ visible │ │ preserved │ │
│ │ instantly │ │ in context │ │
│ │ │ │ │ │
│ └────────┬─────────┘ └────────┬─────────┘ │
│ │ │ │
│ └─────────────┬────────────────┘ │
│ │ │
│ v │
│ ┌────────────────────────────┐ │
│ │ │ │
│ │ SAME UNDERSTANDING │ │
│ │ │ │
│ │ Human draws ASCII │ │
│ │ AI understands │ │
│ │ │ │
│ │ AI generates ASCII │ │
│ │ Human understands │ │
│ │ │ │
│ └────────────────────────────┘ │
│ │
│ THIS IS MONOKINETICS: Same representation = same understanding │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
The 30/70 Rule
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ TEXT 30% : DIAGRAMS 70% │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ TRADITIONAL DOCUMENTATION: │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐
│ │ Text Text Text Text Text Text Text Text Text Text Text Text Text │
│ │ Text Text Text Text Text Text Text Text Text Text Text Text Text │
│ │ Text Text Text Text Text Text Text Text Text Text Text Text Text │
│ │ ┌──────────┐ │
│ │ │ Diagram │ <── Tiny diagram buried in text │
│ │ └──────────┘ │
│ │ Text Text Text Text Text Text Text Text Text Text Text Text Text │
│ └───────────────────────────────────────────────────────────────────────┘
│ │
│ 30/70 DOCUMENTATION: │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐
│ │ Brief intro text. │
│ │ │
│ │ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ │ │ │
│ │ │ LARGE VISUAL DIAGRAM │ │
│ │ │ │ │
│ │ │ ┌───────┐ ┌───────┐ ┌───────┐ │ │
│ │ │ │ A │ ────> │ B │ ────> │ C │ │ │
│ │ │ └───────┘ └───────┘ └───────┘ │ │
│ │ │ │ │
│ │ └─────────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ Brief explanation of what the diagram shows. │
│ └───────────────────────────────────────────────────────────────────────┘
│ │
└─────────────────────────────────────────────────────────────────────────────┘
The Grandmother Test
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ "Can anyone understand this?" │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ AUDIENCE PYRAMID: │
│ │
│ /\ │
│ / \ Experts │
│ /────\ │
│ / \ Developers │
│ /────────\ │
│ / \ Users │
│ /────────────\ │
│ / \ Everyone (grandmother) │
│ /────────────────\ │
│ │
│ If EVERYONE can understand, EVERYONE above also understands │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Example
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ FAILS GRANDMOTHER TEST: │
│ ┌───────────────────────────────────────────────────────────────────────┐
│ │ "CodexMono uses 600-unit advance width stored in bits 22-23..." │
│ └───────────────────────────────────────────────────────────────────────┘
│ │
│ PASSES GRANDMOTHER TEST: │
│ ┌───────────────────────────────────────────────────────────────────────┐
│ │ │
│ │ "Every letter is the same size - like a brick. │
│ │ When you stack bricks, they always line up perfectly." │
│ │ │
│ │ ┌───┬───┬───┬───┬───┐ │
│ │ │ H │ e │ l │ l │ o │ │
│ │ └───┴───┴───┴───┴───┘ │
│ │ ^ ^ ^ ^ ^ │
│ │ All the same size - Like bricks! │
│ │ │
│ └───────────────────────────────────────────────────────────────────────┘
│ │
│ GRANDMOTHER SAYS: "Oh! Like how bricks in a wall all line up. │
│ Makes sense!" │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
CodexMono Enables Perfect Diagrams
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ WITHOUT MONOSPACE (broken): │
│ │
│ ┌───┬───┐ <── Intended │
│ │ │ │ │
│ └───┴───┘ │
│ │
│ ┌──┬──┐ <── Rendered with variable font │
│ │ │ │ (boxes misaligned) │
│ └──┴─┘ │
│ │
│ WITH CODEXMONO (perfect): │
│ │
│ ┌───┬───┐ <── Intended │
│ │ │ │ │
│ └───┴───┘ │
│ │
│ ┌───┬───┐ <── Rendered with CodexMono │
│ │ │ │ (IDENTICAL) │
│ └───┴───┘ │
│ │
│ Character positions MATCH because width = 600 units (always) │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Diagram Types
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ 1. COMPARISON (Before/After): │
│ ┌────────────────────────┐ ┌────────────────────────┐ │
│ │ WITHOUT │ │ WITH │ │
│ │ ┌──────┐ │ │ ┌──────┐ │ │
│ │ │ Wait │ 50ms │ │ │ Fast │ Instant │ │
│ │ └──────┘ │ │ └──────┘ │ │
│ └────────────────────────┘ └────────────────────────┘ │
│ │
│ 2. FLOW (Process Steps): │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ INPUT │ ────> │ PROCESS │ ────> │ OUTPUT │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ 3. LAYER (Architecture): │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ USER INTERFACE │ │
│ ├───────────────────────────────────────────────────────────────┤ │
│ │ RENDERING ENGINE │ │
│ ├───────────────────────────────────────────────────────────────┤ │
│ │ PTY DAEMON │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ 4. STATE (Behavior): │
│ ┌────────┐ │
│ ┌──────>│ READY │<──────┐ │
│ │ └───┬────┘ │ │
│ │ │ data │ │
│ ACK │ v │ timeout │
│ │ ┌────────┐ │ │
│ └───────│ WAITING│───────┘ │
│ └────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Self-Explanatory Test
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ ASK: "Can someone understand this diagram without reading text?" │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ FAILS (needs explanation): │
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ A │ ──> │ B │ ──> │ C │ │
│ └─────┘ └─────┘ └─────┘ │
│ │
│ (What are A, B, C? What do arrows mean?) │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ PASSES (self-explanatory): │
│ │
│ ┌──────────┐ ┌───────────┐ ┌────────────┐ │
│ │ You type │ ──> │ AI thinks │ ──> │ You see │ │
│ │ "hello" │ │ about it │ │ response │ │
│ └──────────┘ └───────────┘ └────────────┘ │
│ │
│ (Labels explain each component, flow is clear) │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ RULE: If you need text to explain the diagram, │
│ the diagram needs more detail. │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Diagram-First Writing
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ 1. ┌───────────────────────────────────────────┐ │
│ │ Identify the ONE core concept │ <── START HERE │
│ │ "CodexMono makes letters equal width" │ │
│ └─────────────────────┬─────────────────────┘ │
│ │ │
│ v │
│ 2. ┌───────────────────────────────────────────┐ │
│ │ Draw the concept │ <── 70% effort here │
│ │ WITHOUT ANY TEXT │ │
│ └─────────────────────┬─────────────────────┘ │
│ │ │
│ v │
│ 3. ┌───────────────────────────────────────────┐ │
│ │ Test self-explanatory quality │ │
│ │ Show to someone, ask what it means │ │
│ └─────────────────────┬─────────────────────┘ │
│ │ │
│ v │
│ 4. ┌───────────────────────────────────────────┐ │
│ │ Add minimal text │ <── 30% effort here │
│ │ One-line intro, brief caption │ │
│ └─────────────────────┬─────────────────────┘ │
│ │ │
│ v │
│ 5. ┌───────────────────────────────────────────┐ │
│ │ Measure ratio │ │
│ │ Adjust if not ~30/70 │ │
│ └───────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Summary
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ DOCUMENTATION PHILOSOPHY │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. ASCII ART IS DUAL-PURPOSE │
│ - Human: visual understanding at a glance │
│ - AI: parseable as text, structure preserved │
│ - Monokinetics: same representation = same understanding │
│ │
│ 2. THE 30/70 RULE │
│ - 30% text, 70% diagrams │
│ - Diagrams should be self-explanatory │
│ - Draw first, write second │
│ │
│ 3. GRANDMOTHER TEST │
│ - Use everyday analogies ("bricks") │
│ - Focus on WHAT not HOW │
│ - If grandmother understands, everyone understands │
│ │
│ 4. CODEXMONO ENABLES IT ALL │
│ - 600 units per character = perfect alignment │
│ - Box drawing characters render correctly │
│ - Human and AI see the same diagrams │
│ │
│ RESULT: Documentation that works for Human AND AI │
│ Visual structure + semantic content │
│ Monokinetics through monospace │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
“ASCII art is not decoration - it is functional documentation. With CodexMono’s 600-unit guarantee, every diagram, table, and box aligns perfectly. Human and AI both see the same structure, understand the same relationships, and share the same visual reality.”