Gestalt Principles and Color Systems

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                │
│                                                                       │
└───────────────────────────────────────────────────────────────────────┘

// 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          │
│                                                                       │
└───────────────────────────────────────────────────────────────────────┘

// 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

Gravity Lensing Deep Dive

Frame Drag, Einstein Arc, and the physics of color transformation

​THE CENTER

​Why Color Matters in Human-AI Collaboration

​Complete Gestalt to Monolex Mapping

​1. Figure/Ground: The Foundation

​Core/Flow as Figure/Ground

​2. Similarity: Frame Drag

​Gestalt Definition

​Physics Metaphor: Frame Drag (Lense-Thirring Effect)

​Implementation

​Why Frame Drag = Similarity

​Visual Demonstration

​3. Common Fate: Einstein Arc

​Gestalt Definition

​Physics Metaphor: Einstein Arc

​Implementation

​Why Einstein Arc = Common Fate

​4. Proximity: Hue Inheritance

​Gestalt Definition

​Implementation (Frame Drag via blend_hue)

​Why Hue Inheritance = Proximity

​Visual Demonstration

​5. Continuity: Caustic Region (OkLab Gradient)

​6. Pragnanz: Lensed Colors

​Evidence Citations

​Web Sources: Gestalt Similarity

​Web Sources: Gestalt Common Fate

​Web Sources: Gestalt Proximity

​Summary: Gestalt-Physics-Implementation Mapping

Gravity Lensing Deep Dive

THE CENTER

Why Color Matters in Human-AI Collaboration

Complete Gestalt to Monolex Mapping

1. Figure/Ground: The Foundation

Core/Flow as Figure/Ground

2. Similarity: Frame Drag

Gestalt Definition

Physics Metaphor: Frame Drag (Lense-Thirring Effect)

Implementation

Why Frame Drag = Similarity

Visual Demonstration

3. Common Fate: Einstein Arc

Gestalt Definition

Physics Metaphor: Einstein Arc

Implementation

Why Einstein Arc = Common Fate

4. Proximity: Hue Inheritance

Gestalt Definition

Implementation (Frame Drag via blend_hue)

Why Hue Inheritance = Proximity

Visual Demonstration

5. Continuity: Caustic Region (OkLab Gradient)

6. Pragnanz: Lensed Colors

Evidence Citations

Web Sources: Gestalt Similarity

Web Sources: Gestalt Common Fate

Web Sources: Gestalt Proximity

Summary: Gestalt-Physics-Implementation Mapping