┌═══════════════════════════════════════════════════════════════════════════════┐
│ │
│ THE CENTER │
│ │
│ "CodexMono is The Brick - the fundamental unit that enables │
│ Monokinetics: unified Human + AI experience through predictable, │
│ trustable visual alignment." │
│ │
│ Tree Gutter + CodexMono = Brick Extended to Documents │
│ │
└═══════════════════════════════════════════════════════════════════════════════┘
Theming System
The VariableMD theming system brings terminal-like precision to document rendering.┌────────────────────────────────────────────────────────────────────────┐
│ THEMING COMPONENTS │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ │ │ │ │
│ │ Tree Gutter │ │ CodexMono │ │
│ │ │ │ │ │
│ │ Visual document │ │ Unified monospace │ │
│ │ hierarchy │ │ typography │ │
│ │ │ │ │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ │ │ │
│ └────────────────────────────────┘ │
│ │ │
│ v │
│ ┌───────────────────┐ │
│ │ │ │
│ │ Monokinetics │ │
│ │ │ │
│ │ Terminal + Docs │ │
│ │ Same Foundation │ │
│ │ │ │
│ └───────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────┘
Tree Gutter System
The Tree Gutter shows document structure through vertical lines in the left margin.┌────────────────────────────────────────────────────────────────────────┐
│ TREE GUTTER VISUALIZATION │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ Without Tree Gutter With Tree Gutter │
│ ==================== ================ │
│ │
│ # Title │ # Title │
│ │ │
│ ## Section 1 ││ ## Section 1 │
│ ││ │
│ Content here ││ Content here │
│ ││ │
│ ### Subsection │││ ### Subsection │
│ │││ │
│ More content │││ More content │
│ ││ │
│ ## Section 2 ││ ## Section 2 │
│ ││ │
│ #### Deep level ││││ #### Deep level │
│ ││││ │
│ │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ HOW IT WORKS: │
│ │
│ 1 line = Content under H1 │
│ 2 lines = Content under H2 │
│ 3 lines = Content under H3 │
│ ... up to 6 levels │
│ │
└────────────────────────────────────────────────────────────────────────┘
Visual Document Structure
┌────────────────────────────────────────────────────────────────────────┐
│ TREE GUTTER CONCEPT │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ Think of it like a code editor's indentation guides: │
│ │
│ Code Editor: VariableMD Tree Gutter: │
│ ============ ======================= │
│ │
│ function main() { │ # Main Topic │
│ │ if (condition) { ││ │
│ │ │ doSomething(); ││ ## Subtopic │
│ │ │ │ nested(); │││ │
│ │ │ } │││ Content here gets │
│ │ } │││ three vertical lines │
│ } ││ │
│ │ Back to one line │
│ │
│ BENEFIT: See document depth at a glance │
│ │
└────────────────────────────────────────────────────────────────────────┘
Line Continuity
┌────────────────────────────────────────────────────────────────────────┐
│ MARGIN INTEGRATION │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ Without Integration: With Integration: │
│ ==================== ================== │
│ │
│ ││ ││ │
│ ││ Previous content ││ Previous content │
│ ││ ││ │
│ <-- Gap breaks flow ││ │
│ ││ <-- Lines extend through │
│ ││ ## New Heading ││ ## New Heading │
│ ││ ││ │
│ ││ Next content ││ Next content │
│ │
│ RESULT: Continuous visual flow throughout document │
│ │
└────────────────────────────────────────────────────────────────────────┘
CodexMono Font Family
CodexMono is a custom monospace font designed for terminal and document rendering.┌────────────────────────────────────────────────────────────────────────┐
│ CODEXMONO FAMILY │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────┬────────────────────────────────────────┐ │
│ │ │ │ │
│ │ CodexMono │ Base Latin characters │ │
│ │ │ Variable weight (Light to Black) │ │
│ │ │ │ │
│ ├───────────────────┼────────────────────────────────────────┤ │
│ │ │ │ │
│ │ CodexMono EA │ East Asian (CJK) characters │ │
│ │ │ Chinese, Japanese, Korean │ │
│ │ │ Exactly 2x Latin width │ │
│ │ │ │ │
│ ├───────────────────┼────────────────────────────────────────┤ │
│ │ │ │ │
│ │ CodexMono Emoji │ Monospace emoji │ │
│ │ │ Consistent 2-character width │ │
│ │ │ │ │
│ └───────────────────┴────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────┘
Variable Font Technology
┌────────────────────────────────────────────────────────────────────────┐
│ VARIABLE WEIGHT │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ Traditional Fonts: Variable Font (CodexMono): │
│ ================== ========================== │
│ │
│ Light.ttf ┌────────────────────────┐ │
│ Regular.ttf │ │ │
│ Medium.ttf vs │ Single file │ │
│ Bold.ttf │ supports ALL │ │
│ Black.ttf │ weights │ │
│ (5+ files) │ │ │
│ └────────────────────────┘ │
│ │
│ Weight Scale: │
│ ============= │
│ │
│ Light Medium Black │
│ │ │ │ │
│ 100 ─── 200 ─── 300 ─── 400 ─── 500 ─── 600 ─── 700 ─── 800 ─── 900 │
│ │_______________│_______________│_______________│_______________│ │
│ Thin Regular Bold Heavy │
│ │
│ BENEFIT: Choose any weight, not just preset values │
│ │
└────────────────────────────────────────────────────────────────────────┘
CJK Character Support
┌───────────────────────────────────────────────────────────────────────────┐
│ CJK WIDTH ALIGNMENT │
├───────────────────────────────────────────────────────────────────────────┤
│ │
│ Rendering "Hello World" vs "Hello (world in Chinese)": │
│ │
│ Latin Characters: │
│ ┌───┬───┬───┬───┬───┐ │
│ │ H │ e │ l │ l │ o │ Each = 1 character width │
│ └───┴───┴───┴───┴───┘ │
│ │
│ CJK Characters: │
│ ┌───────┬───────┐ │
│ │ (world) │ (character) │ Each = 2 character widths │
│ └───────┴───────┘ │
│ │
│ Mixed Text: │
│ ┌───┬───┬───┬───┬───┬───┬───────┬───────┐ │
│ │ H │ e │ l │ l │ o │ │ CJK │ CJK │ │
│ └───┴───┴───┴───┴───┴───┴───────┴───────┘ │
│ │ 1 │ 1 │ 1 │ 1 │ 1 │ 1 │ 2 │ 2 │ <- Character widths │
│ │
│ Total: 5 + 1 + 4 = 10 character units │
│ │
│ BENEFIT: Perfect alignment in tables and ASCII art │
│ │
└───────────────────────────────────────────────────────────────────────────┘
Font Fallback Chain
┌───────────────────────────────────────────────────────────────────────────────────────┐
│ FONT STACK │
├───────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ When rendering a character: │
│ │
│ Character: "A" Character: "World (in Chinese)" │
│ │ │ │
│ v v │
│ ┌───────────┐ ┌───────────┐ │
│ │ CodexMono │ Found! │ CodexMono │ Not found │
│ └───────────┘ └───────────┘ │
│ │ │ │
│ v v │
│ Render "A" ┌───────────────┐ │
│ │ CodexMono EA │ Found! │
│ └───────────────┘ │
│ │ │
│ v │
│ Render "(world in Chinese)" │
│ │
│ Fallback Order: │
│ =============== │
│ │
│ 1. CodexMono <- Primary (Latin) │
│ 2. CodexMono EA <- CJK characters │
│ 3. SF Mono <- macOS system │
│ 4. Cascadia Code <- Windows Terminal │
│ 5. Consolas <- Windows system │
│ 6. monospace <- Generic fallback │
│ │
└───────────────────────────────────────────────────────────────────────────────────────┘
Programming Ligatures
Ligatures combine character sequences into single visual symbols.┌────────────────────────────────────────────────────────────────────────┐
│ LIGATURE TRANSFORMATION │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ Without Ligatures: With Ligatures: │
│ ================== =============== │
│ │
│ -> -> (arrow symbol) │
│ => => (fat arrow symbol) │
│ != != (not equal symbol) │
│ == == (double equals) │
│ === === (triple equals symbol) │
│ <= <= (less or equal symbol) │
│ >= >= (greater or equal symbol) │
│ │
│ BENEFIT: Code reads more naturally │
│ │
└────────────────────────────────────────────────────────────────────────┘
Emoji Width Handling
┌───────────────────────────────────────────────────────────────────────────────────┐
│ EMOJI NORMALIZATION │
├───────────────────────────────────────────────────────────────────────────────────┤
│ │
│ THE PROBLEM: │
│ ============ │
│ │
│ Native emoji have inconsistent widths: │
│ │
│ │H│e│l│l│o│ (smile emoji) │W│o│r│l│d│ │
│ │ │ │ │ │ │ ? │ │ │ │ │ │ │
│ ^ │
│ Emoji might be 1.5x, 1.8x, or 2.1x width │
│ │
│ This BREAKS ASCII art alignment! │
│ │
│ THE SOLUTION: │
│ ============= │
│ │
│ CodexMono Emoji normalizes to exactly 2 character widths: │
│ │
│ │H│e│l│l│o│ (smile emoji) │W│o│r│l│d│ │
│ │1│1│1│1│1│ 2 │1│1│1│1│1│ │
│ ^^^ │
│ Exactly 2 character widths │
│ │
│ BENEFIT: Perfect alignment in tables, diagrams, and ASCII art │
│ │
└───────────────────────────────────────────────────────────────────────────────────┘
Light and Dark Mode
┌────────────────────────────────────────────────────────────────────────┐
│ THEME ADAPTATION │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ Light Mode Dark Mode │
│ ========== ========= │
│ │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ │ │ │ │
│ │ │ # Title │ │ │ # Title │ │
│ │ │ │ │ │ │ │
│ │ ││ ## Section │ │ ││ ## Section │ │
│ │ ││ │ │ ││ │ │
│ │ ││ Content │ │ ││ Content │ │
│ │ │ │ │ │
│ │ Light gutter lines │ │ Subtle gutter lines │ │
│ │ High contrast text │ │ Reduced eye strain │ │
│ │ │ │ │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ │
│ Tree lines automatically adjust for optimal visibility │
│ │
└────────────────────────────────────────────────────────────────────────┘
Summary
┌────────────────────────────────────────────────────────────────────────┐
│ THEMING SYSTEM OVERVIEW │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ KEY COMPONENTS: │
│ │
│ 1. Tree Gutter │
│ - Shows document depth (up to 6 levels) │
│ - Vertical lines in left margin │
│ - Continuous flow through headings │
│ │
│ 2. CodexMono Font Family │
│ - Variable weight (100-900) │
│ - Full CJK support (2x width) │
│ - Monospace emoji (normalized width) │
│ │
│ 3. Programming Ligatures │
│ - Code symbols as single glyphs │
│ - Optional feature │
│ │
│ CORE PRINCIPLE: │
│ =============== │
│ │
│ "This isn't styling. This is Monokinetics applied to documents." │
│ │
│ Terminal precision + Document readability = Unified experience │
│ │
└────────────────────────────────────────────────────────────────────────┘
Related:
- CSS System Architecture - Variable hierarchy and theming
- The Brick Extended to Documents - Core design philosophy