> ## Documentation Index > Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt > Use this file to discover all available pages before exploring further. # Gestalt Principles and Color Systems > How Gestalt perceptual psychology maps to the Core-Flow color system for information flow visualization ## THE CENTER ### Why Color Matters in Human-AI Collaboration In Human-AI collaboration, humans drown in a sea of text strings. **COLOR is the primary rescue tool.** Core-Flow is a system that expresses information flow through color. The question we must answer: > "How does this color help humans perceive the flow of information?" ``` Gestalt-Color Connection: ├── Figure/Ground → Core/Flow (identity vs transition) ├── Similarity → Frame Drag (related information grouping) ├── Common Fate → Einstein Arc (information flow direction) └── Proximity → Hue Inheritance (related information nearness) ``` *** ## Complete Gestalt to Monolex Mapping ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ GESTALT → MONOLEX MAPPING (Gravity Lensing Physics-based) │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ Gestalt Principle Paradigm Physics Operation Monolex System │ │ ───────────────── ────────── ───────────────── ─────────────── │ │ Figure/Ground Core/Flow - Coordinate base │ │ Similarity GRAVITY Frame Drag blend_hue() │ │ Common Fate GRAVITY Einstein Arc warp_hue() │ │ Proximity GRAVITY Frame Drag Hue Inheritance │ │ Continuity GRAVITY(Flow) Caustic region OkLab Gradient │ │ Pragnanz GRAVITY Lensed Colors Final result │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` *** ## 1. Figure/Ground: The Foundation **Gestalt Definition**: The fundamental principle that perception separates a scene into foreground (figure) and background (ground). ### Core/Flow as Figure/Ground ``` ┌─────────────────────────────────────────────────────────────────┐ │ Core/Flow distinguishes not colors, but "what colors do" │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ CORE = "Operations that define identity" + "Theme center" │ │ ────────────────────────────── │ │ Question: "What IS this color?" │ │ Coordinate: OkLCH (Polar) - Hue IS identity │ │ Example: "This is Blue" (H = 250 degrees) │ │ Theme center: Core = Theme Hue center point (=Anchor) │ │ │ │ FLOW = "Operations that derive state" │ │ ────────────────────────────── │ │ Question: "What STATE is this color in?" │ │ Coordinate: OkLab (Cartesian) - suitable for interpolation │ │ Example: "This is Blue's hover state" (blend) │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` **Mapping**: | Gestalt Figure/Ground | Core/Flow | | ------------------------------ | ---------------------------------------- | | Figure (foreground) | Core - defines WHAT something is | | Ground (background) | Flow - provides context/state | | Separation enables recognition | Separation enables identity + transition | *** ## 2. Similarity: Frame Drag ### Gestalt Definition **Law of Similarity**: Elements that share visual characteristics (especially color) are perceived as grouped. > "Color is a strong similarity characteristic that can unite elements of varying types." > \-- Nielsen Norman Group ### Physics Metaphor: Frame Drag (Lense-Thirring Effect) In gravitational physics, **Frame Drag** is the phenomenon where a rotating massive body "drags" surrounding spacetime: ``` ╔════════════════════════════════════════════════════════════╗ ║ FRAME DRAG (Lense-Thirring Effect) ║ ╠════════════════════════════════════════════════════════════╣ ║ ║ ║ Physics: ║ ║ ──────── ║ ║ A rotating massive body (black hole, etc.) ║ ║ drags surrounding spacetime in its rotation direction ║ ║ ║ ║ Monolex Color System: ║ ║ ───────────────────── ║ ║ Core (Theme Hue) ║ ║ drags all colors toward its Hue direction ║ ║ ║ ╚════════════════════════════════════════════════════════════╝ ``` ### Implementation ``` ┌───────────────────────────────────────────────────────────────────────┐ │ FRAME DRAG IMPLEMENTATION (Gestalt Similarity) │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ CONDITION: tint_strength > 0? │ │ │ │ │ NO ──┴──► Skip (no dragging) │ │ │ │ │ YES ─┴──► Apply Frame Drag: │ │ dragged_h = blend_hue(h, core_hue, tint_strength) │ │ h = dragged_h │ │ │ │ RESULT: All colors dragged toward Core → visual unity │ │ │ └───────────────────────────────────────────────────────────────────────┘ ``` ```rust theme={null} // theme_transform.rs - Frame Drag via blend_hue // When tint_strength > 0, all colors are dragged toward core_hue if cache.tint_strength > 0.0 { let dragged_h = blend_hue(h, cache.core_hue, cache.tint_strength); h = dragged_h; } ``` ### Why Frame Drag = Similarity | Gestalt Similarity | Frame Drag | | ---------------------------------- | ----------------------------------------------------- | | "Shared color creates grouping" | Dragged toward Core creates shared Hue - visual unity | | Color unites varying element types | TrueColor, ANSI 256, ANSI 16 all dragged | | Perception of relatedness | Theme consistency across all terminal output | ### Visual Demonstration ``` Before Frame Drag (No Similarity): ┌─────────────────────────────────────────┐ │ Red text Blue te│ ← No visual grouping │ Yellow bg Cyan bg Magenta bg │ └─────────────────────────────────────────┘ After Frame Drag (Similarity Applied): ┌─────────────────────────────────────────┐ │ Red+Blue Bl│ ← All dragged toward Blue │ drag drag │ ← Perceived as group └─────────────────────────────────────────┘ ↑ core_hue = 250 degrees (Blue) drag_strength = 0.15 ``` *** ## 3. Common Fate: Einstein Arc ### Gestalt Definition **Law of Common Fate**: Elements that move in the same direction are perceived as belonging together. > "Elements that move in the same direction and at the same rate are perceived as belonging together as a group." > \-- Interaction Design Foundation > "If all else is equal, items that undergo the same change will be perceptually grouped together." > \-- Scholarpedia ### Physics Metaphor: Einstein Arc In gravitational lensing, **Einstein Arc** is the phenomenon where light bends around a massive object: ``` ╔════════════════════════════════════════════════════════════╗ ║ EINSTEIN ARC (Gravitational Lensing) ║ ╠════════════════════════════════════════════════════════════╣ ║ ║ ║ Physics: ║ ║ ──────── ║ ║ Light passing near massive object bends its path ║ ║ All light bends same direction → Einstein Arc forms ║ ║ ║ ║ Original light source ║ ║ ★ ║ ║ \ ║ ║ \ Light path bends ║ ║ \ ║ ║ Core ●──→ Observer ║ ║ (massive object) ║ ║ ║ ║ Monolex Color System: ║ ║ ───────────────────── ║ ║ Hue passing near Core bends its path ║ ║ All Hue bends same direction → Theme integration ║ ║ ║ ╚════════════════════════════════════════════════════════════╝ ``` ### Implementation ``` ┌───────────────────────────────────────────────────────────────────────┐ │ EINSTEIN ARC IMPLEMENTATION (Gestalt Common Fate) │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ INPUT: hue, core_hue, strength, width │ │ │ │ |delta| <= width? (Inside Caustic region?) │ │ │ │ │ YES ─┴──► COMPRESS toward center: │ │ ratio = |delta| / width │ │ compressed = ratio × (1 - strength) │ │ result = core_hue + sign × compressed × width │ │ │ │ │ NO ──┴──► ARC around Core: │ │ Redistribute hue in expanded outside range │ │ │ │ RESULT: All hues bend same direction → perceived as group │ │ │ └───────────────────────────────────────────────────────────────────────┘ ``` ``` warp_hue_compress (Einstein Arc) ───────────────────────────────── Inside Caustic: compress hue toward core (ratio × (1-strength)) Outside Caustic: arc around core, redistribute remaining hue space ``` ### Why Einstein Arc = Common Fate | Gestalt Common Fate | Einstein Arc | | ----------------------------- | --------------------------------------- | | "Move together - grouped" | Arc around Core - grouped | | Same direction of movement | Same direction of hue bending | | Flock of birds | Light rays arcing around massive object | | Camouflage broken by movement | Complementary colors "arced" together | *** ## 4. Proximity: Hue Inheritance ### Gestalt Definition **Law of Proximity**: Elements close together are perceived as grouped. > "Proximity is so powerful that it overrides similarity of color, shape, and other factors." > \-- Nielsen Norman Group ### Implementation (Frame Drag via blend\_hue) ``` ┌───────────────────────────────────────────────────────────────────────┐ │ HUE INHERITANCE AS PROXIMITY (Gestalt Proximity) │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ blend_hue(h1, h2, t) → Brings h1 "closer" to h2 by ratio t │ │ │ │ INHERITANCE LEVELS (proximity to Core): │ │ ────────────────────────────────────── │ │ textHueInherit: 1.00 ──► 100% proximity (fully proximate) │ │ bgHueInherit: 0.80 ──► 80% proximity │ │ borderHueInherit: 0.18 ──► 18% proximity │ │ ansiHueInherit: 0.08 ──► 8% proximity (most distant) │ │ │ │ HIGHER t = closer to Core = stronger grouping │ │ │ └───────────────────────────────────────────────────────────────────────┘ ``` The `blend_hue` function brings one hue "closer" to another by a ratio. Each UI element has a configured proximity level to the Core hue, determining how strongly it inherits the tint color. ### Why Hue Inheritance = Proximity | Gestalt Proximity | Hue Inheritance (Frame Drag) | | ---------------------- | ---------------------------------- | | "Nearness - grouping" | Closer to Core - stronger identity | | Spatial closeness | Closeness in Hue space | | Override other factors | High \*HueInherit values dominate | | Physical distance | Hue wheel angle distance | ### Visual Demonstration ``` Hue Inheritance as Proximity to Core: Core Hue: 250 degrees (Blue) ● Text (100% inherit) / = 250 degrees (fully proximate) / ● BG (80% inherit) / = close to Core / ● Border (18% inherit) / = medium distance / ● ANSI (8% inherit) = far from Core Higher inherit = "closer" to Core = stronger grouping ``` *** ## 5. Continuity: Caustic Region (OkLab Gradient) **Law of Continuity**: Elements arranged on a line or curve are perceived as related. ``` ┌───────────────────────────────────────────────────────────────────────┐ │ OKLAB GRADIENT FILL (Gestalt Continuity) │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ LINEAR INTERPOLATION in Cartesian OkLab space: │ │ │ │ left boundary ──────────────────────────► right boundary │ │ (a₁, b₁) t=0 → t=1 (a₂, b₂) │ │ │ │ result_a = a₁ × (1-t) + a₂ × t │ │ result_b = b₁ × (1-t) + b₂ × t │ │ │ │ RESULT: Smooth continuous path through color space │ │ │ └───────────────────────────────────────────────────────────────────────┘ ``` ``` fill_with_oklab_gradient (Caustic region) ────────────────────────────────────────── OkLab linear interpolation = smooth continuous path result_a = lerp(left_a, right_a, t) result_b = lerp(left_b, right_b, t) ``` The Caustic region creates **continuous path** through color space - Gestalt Continuity. *** ## 6. Pragnanz: Lensed Colors **Law of Pragnanz** (Good Form): Perception tends toward the simplest, most stable form. ``` ┌───────────────────────────────────────────────────────────────────────┐ │ HYBRID ALGORITHM (Gestalt Pragnanz) │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ MODE 2 (compressGradient): │ │ │ │ Outside Caustic ──► Einstein Arc (CORE - hue redistribution) │ │ + │ │ Inside Caustic ──► Gradient fill (FLOW - smooth interpolation) │ │ = │ │ Lensed Colors ──► Simplest, most stable color arrangement │ │ │ └───────────────────────────────────────────────────────────────────────┘ ``` ```rust theme={null} // apply_hue_warp mode 2 (compressGradient) // Einstein Arc (outside Caustic) + Caustic region gradient (inside) // → Lensed Colors: simplest and most stable color arrangement ``` The hybrid algorithm produces the **simplest stable result** - Gestalt Pragnanz. *** ## Evidence Citations ### Web Sources: Gestalt Similarity | Source | URL | Key Quote | | --------- | ------------------------------------- | -------------------------------------------------------------------------------------- | | NN/g | Similarity Principle in Visual Design | "Color is a strong similarity characteristic that can unite elements of varying types" | | IxDF | The Law of Similarity | "Items which share a visual characteristic are perceived as more related" | | CorelDRAW | Gestalt Principle of Similarity | "When objects share a color, it often indicates that items are related" | ### Web Sources: Gestalt Common Fate | Source | URL | Key Quote | | ------------ | ------------------------------- | --------------------------------------------------------------------------------------------------- | | IxDF | Law of Common Fate | "Elements that move in the same direction and at the same rate are perceived as belonging together" | | Scholarpedia | Gestalt Principles | "If all else is equal, items that undergo the same change will be perceptually grouped together" | | PMC | A Century of Gestalt Psychology | "Common fate is one of the most powerful of the classic grouping principles" | ### Web Sources: Gestalt Proximity | Source | URL | Key Quote | | ------ | ---------------------------- | ------------------------------------------------------------------------------------------ | | NN/g | Similarity Principle | "Proximity is so powerful that it overrides similarity of color, shape, and other factors" | | Toptal | Gestalt Principles of Design | "The relative nearness of objects has an even stronger influence on grouping" | *** ## Summary: Gestalt-Physics-Implementation Mapping | Gestalt Principle | Physics Metaphor | Implementation | Effect | | ----------------- | ---------------- | ---------------------------- | ------------------------------------- | | Figure/Ground | Core/Flow | OKLCH vs OKLAB | Separation of identity and transition | | Similarity | Frame Drag | `blend_hue()` | Hue dragged toward Core direction | | Common Fate | Einstein Arc | `warp_hue_compress()` | Hue path bends around Core | | Continuity | Caustic gradient | `fill_with_oklab_gradient()` | Smooth transitions | | Proximity | Hue Inheritance | zone grouping | Nearness to Core | | Pragnanz | Lensed Colors | Final output | Orderly perception | *** Frame Drag, Einstein Arc, and the physics of color transformation