The Center
Copy
+-----------------------------------------------------------------------------+
| |
| "CodexMono is The Brick - the fundamental unit that enables |
| Monokinetics: unified Human + AI experience through predictable, |
| trustable visual alignment." |
| |
+-----------------------------------------------------------------------------+
ASCII Art is Dual-Purpose
Copy
+-----------------------------------------------------------------------------+
| |
| 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
Copy
+-----------------------------------------------------------------------------+
| |
| 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
Copy
+-----------------------------------------------------------------------------+
| |
| "Can anyone understand this?" |
| |
+-----------------------------------------------------------------------------+
| |
| AUDIENCE PYRAMID: |
| |
| /\ |
| / \ Experts |
| /----\ |
| / \ Developers |
| /--------\ |
| / \ Users |
| /------------\ |
| / \ Everyone (grandmother) |
| /----------------\ |
| |
| If EVERYONE can understand, EVERYONE above also understands |
| |
+-----------------------------------------------------------------------------+
Example
Copy
+-----------------------------------------------------------------------------+
| |
| 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
Copy
+-----------------------------------------------------------------------------+
| |
| 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
Copy
+-----------------------------------------------------------------------------+
| |
| 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
Copy
+-----------------------------------------------------------------------------+
| |
| 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
Copy
+-----------------------------------------------------------------------------+
| |
| 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
Copy
+-----------------------------------------------------------------------------+
| |
| 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.”