Copy
+===============================================================================+
|| ||
|| 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.Copy
+-----------------------------------------------------------------------+
| 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.Copy
+-----------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------+
| 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.Copy
+-----------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------+
| 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.Copy
+-----------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------+
| 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