SMPC Variable Architecture
The Gestalt Color System uses a strict 4-level hierarchy called SMPC (Single Source of Truth for Managed Part Chaos):┌─────────────────────────────────────────────────────────────────────────────┐
│ SMPC COLOR VARIABLE HIERARCHY │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ LEVEL 4: Contextual Relationships (bg-fg pairs) │ │
│ │ ────────────────────────────────────────────────────────── │ │
│ │ --bg-accent-primary-text: #ffffff; │ │
│ │ --status-success-text: var(--oklch-success); │ │
│ │ │ │
│ │ Purpose: Text color for specific background contexts │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ V │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ LEVEL 3: Component Colors (references Level 1-2) │ │
│ │ ────────────────────────────────────────────────────────── │ │
│ │ --color-context-menu-bg: #2d2d2d; │ │
│ │ --color-file-explorer-error: var(--color-danger); │ │
│ │ --status-success-bg: color-mix(in oklab, var(--oklch-success), ...)│ │
│ │ │ │
│ │ Purpose: Specific UI component styling │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ V │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ LEVEL 2: Semantic Colors (OKLCH Core + HEX Legacy) │ │
│ │ ────────────────────────────────────────────────────────── │ │
│ │ --oklch-primary: oklch(55% 0.15 230); * ANCHOR POINT │ │
│ │ --oklch-success: oklch(55% 0.15 130); * ANCHOR POINT │ │
│ │ --oklch-danger: oklch(55% 0.18 25); * ANCHOR POINT │ │
│ │ --color-primary: #2380c7; (legacy fallback) │ │
│ │ │ │
│ │ Purpose: Identity colors with meaning (primary, success, danger) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ V │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ LEVEL 1: Primitive Colors (raw values) │ │
│ │ ────────────────────────────────────────────────────────── │ │
│ │ --color-bg-primary: #000000; │ │
│ │ --color-text-primary: #93a1a1; │ │
│ │ --color-ansi-red: #c42e2b; │ │
│ │ │ │
│ │ Purpose: Raw color values, foundational palette │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Frame Drag Anchor Points
Core Colors create “gravity wells” that pull neighboring colors toward their hue:┌──────────────────────────────────────────────────────────────────────────────┐
│ FRAME DRAG ANCHOR POINTS IN CSS VARIABLES │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ In general relativity, a rotating massive object "drags" spacetime │
│ around it - this is called Frame Drag. Similarly, CORE COLORS act as │
│ gravity centers that "pull" neighboring colors toward their hue. │
│ │
│ CSS VARIABLE AS ANCHOR POINT: │
│ ──────────────────────────── │
│ │
│ --oklch-primary: oklch(55% 0.15 230); <── ANCHOR POINT (Blue, H=230) │
│ │ │
│ │ FRAME DRAG FIELD │
│ V │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ * │ │
│ │ /│\ Gravity Well at H=230 │ │
│ │ / │ \ │ │
│ │ / │ \ Frame Drag pulls nearby hues │ │
│ │ ───/───*───\─── toward the anchor │ │
│ │ H=220 H=240 │ │
│ │ │ │
│ │ Any color in range [210, 250] gets "pulled" toward 230 │ │
│ │ This is the SIMILARITY principle in Gestalt theory │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ FIVE ANCHOR POINTS IN THE SYSTEM: │
│ ───────────────────────────────── │
│ │
│ ANCHOR HUE FRAME DRAG RANGE GESTALT MEANING │
│ ───────────────────────────────────────────────────────────────── │
│ --oklch-danger 25 [0, 50] Error, Urgency │
│ --oklch-warning 85 [60, 110] Caution, Pending │
│ --oklch-success 130 [110, 155] Positive, Active │
│ --oklch-primary 230 [200, 260] Main Action, Brand │
│ --oklch-info 230 [200, 260] Informational │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Level 1: Primitive Colors
Background Colors
/* Level 1: Background Colors (Dark Theme Default) */
--color-bg-primary: #000000; /* Pure black */
--color-bg-secondary: #090e13; /* L=5.5% */
--color-bg-tertiary: #0b1117; /* L=7% */
--color-bg-hover: rgba(147, 161, 161, 0.08);
Text Colors
/* Level 1: Text Colors */
--color-text-primary: #93a1a1;
--color-text-secondary: #657b83;
--color-text-tertiary: #586e75;
Terminal Colors
/* Level 1: Terminal Colors - CRITICAL for xterm.js theme */
--color-terminal-bg: var(--color-bg-primary);
--color-terminal-fg: var(--color-text-primary);
--color-terminal-cursor: #b3c0c4;
--color-terminal-selection: rgba(22, 32, 42, 0.6);
Border Colors
/* Border Colors (Legacy HEX) */
--color-border-primary: #151d26;
--color-border-secondary: #1f2a35;
--color-border-light: #2a3540;
--color-border-subtle: rgba(255, 255, 255, 0.1);
/* Border Colors (OKLCH + color-mix, ACSS pattern) */
--oklch-border-dark: color-mix(in oklch, black 20%, transparent);
--oklch-border-light: color-mix(in oklch, white 20%, transparent);
--oklch-divider: color-mix(in oklch, var(--color-text-primary) 15%, transparent);
ANSI Terminal Colors
/* Standard Colors (0-7) */
--color-ansi-black: #586e75;
--color-ansi-red: #c42e2b;
--color-ansi-green: #7a8c00;
--color-ansi-yellow: #a37a00;
--color-ansi-blue: #2380c7;
--color-ansi-magenta: #c13179;
--color-ansi-cyan: #26958c;
--color-ansi-white: #d7d2c3;
/* Bright Colors (8-15) */
--color-ansi-bright-black: #657b83;
--color-ansi-bright-red: #b34114;
--color-ansi-bright-green: #586e75;
--color-ansi-bright-yellow: #657b83;
--color-ansi-bright-blue: #839496;
--color-ansi-bright-magenta: #6169b8;
--color-ansi-bright-cyan: #93a1a1;
--color-ansi-bright-white: #fdf6e3;
┌─────────────────────────────────────────────────────────────────────────────┐
│ LEVEL 1 PRIMITIVE COLORS MAP │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ BACKGROUND SPECTRUM (Dark Theme): │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ L=0% L=5.5% L=7% L varies │ │
│ │ ######## ──────── ──────── ........ │ │
│ │ bg-primary bg-secondary bg-tertiary bg-hover │ │
│ │ #000000 #090e13 #0b1117 rgba(...) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ TEXT SPECTRUM (Dark Theme): │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ L=60% L=42% L=35% │ │
│ │ ════════ ════════ ════════ │ │
│ │ text-prim text-sec text-tert │ │
│ │ #93a1a1 #657b83 #586e75 │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ ANSI COLORS (16-color palette): │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Standard (0-7): │ │
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │blk │ │red │ │grn │ │yel │ │blu │ │mag │ │cyn │ │wht │ │ │
│ │ │586 │ │c42 │ │7a8 │ │a37 │ │238 │ │c13 │ │269 │ │d7d │ │ │
│ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ │
│ │ │ │
│ │ Bright (8-15): │ │
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │657 │ │b34 │ │586 │ │657 │ │839 │ │616 │ │93a │ │fdf │ │ │
│ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Level 2: Semantic Colors (Core Color Anchors)
Primary OKLCH Colors
/* Primary Colors in OKLCH - ANCHOR POINTS */
--oklch-primary: oklch(55% 0.15 230); /* Blue - ANCHOR H=230 */
--oklch-success: oklch(55% 0.15 130); /* Green - ANCHOR H=130 */
--oklch-danger: oklch(55% 0.18 25); /* Red - ANCHOR H=25 */
--oklch-warning: oklch(65% 0.15 85); /* Yellow/Orange - ANCHOR H=85 */
--oklch-info: oklch(55% 0.12 230); /* Blue (softer) - shares ANCHOR H=230 */
┌─────────────────────────────────────────────────────────────────────────────┐
│ OKLCH CORE COLORS AS FRAME DRAG ANCHORS │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 0/360 (Red Zone) │
│ │ │
│ ┌─────────*─────────┐ DANGER ANCHOR (H=25) │
│ │ 25 Danger │ Frame Drag Range: [0, 50] │
│ └───────────────────┘ │
│ │ │
│ ┌─────────────────*─────────────────┐ WARNING ANCHOR (H=85) │
│ │ 85 Warning │ Frame Drag Range: [60, 110]│
│ └───────────────────────────────────┘ │
│ │ │
│ ┌─────────────────────*─────────────────────┐ SUCCESS ANCHOR (H=130)│
│ │ 130 Success │ Frame Drag: [110, 155] │
│ └───────────────────────────────────────────┘ │
│ │ │
│ 180 │
│ │ │
│ ┌─────────────────────────*─────────────────────────┐ PRIMARY/INFO │
│ │ 230 Primary & Info │ (H=230) │
│ │ (Two anchors share same gravity well) │ Frame Drag: │
│ └───────────────────────────────────────────────────┘ [200, 260] │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Core Colors Analysis
┌─────────────────────────────────────────────────────────────────────────────┐
│ OKLCH CORE COLORS - DETAILED ANALYSIS │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Variable L% C H Color Frame Drag Role │
│ ─────────────────────────────────────────────────────────────────────── │
│ --oklch-primary 55% 0.15 230 Blue ANCHOR - Main action │
│ --oklch-success 55% 0.15 130 Green ANCHOR - Positive │
│ --oklch-danger 55% 0.18 25 Red ANCHOR - Error/urgent│
│ --oklch-warning 65% 0.15 85 Yellow ANCHOR - Caution │
│ --oklch-info 55% 0.12 230 Blue SHARED with Primary │
│ │
│ PATTERN ANALYSIS: │
│ ───────────────── │
│ │
│ 1. LIGHTNESS CONSISTENCY (Gravity Field Strength): │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ Primary, Success, Danger, Info: L = 55% (consistent) │ │
│ │ Warning: L = 65% (elevated for visibility) │ │
│ │ │ │
│ │ Physics metaphor: L=55% creates "equal mass" gravity centers. │ │
│ │ All anchors have similar "pull strength" for balanced design. │ │
│ │ Warning at L=65% is a "brighter star" - more visible. │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ 2. CHROMA CONSISTENCY (Gravity Well Depth): │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ Primary, Success, Warning: C = 0.15 (MAX_SAFE_CHROMA) │ │
│ │ Danger: C = 0.18 (deeper well for urgency) │ │
│ │ Info: C = 0.12 (shallower well, softer pull) │ │
│ │ │ │
│ │ Higher chroma = deeper gravity well = stronger Frame Drag. │ │
│ │ Danger uses 0.18 to create maximum visual pull (urgency). │ │
│ │ Info uses 0.12 for gentle pull (informational, not urgent). │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Derived Flow Colors
/* Derived colors using color-mix() */
/* These are FLOW COLORS - pulled by the anchor's Frame Drag */
--oklch-primary-hover: color-mix(in oklch, var(--oklch-primary), white 15%);
--oklch-primary-muted: color-mix(in oklab, var(--oklch-primary), transparent 80%);
--oklch-success-hover: color-mix(in oklch, var(--oklch-success), white 15%);
--oklch-success-muted: color-mix(in oklab, var(--oklch-success), transparent 80%);
--oklch-danger-hover: color-mix(in oklch, var(--oklch-danger), white 15%);
--oklch-danger-muted: color-mix(in oklab, var(--oklch-danger), transparent 80%);
--oklch-warning-hover: color-mix(in oklch, var(--oklch-warning), white 10%);
--oklch-warning-muted: color-mix(in oklab, var(--oklch-warning), transparent 80%);
┌────────────────────────────────────────────────────────────────────────────────────┐
│ CORE vs FLOW COLOR PATTERN │
├────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ CORE COLORS (Identity, ANCHOR POINTS - Frame Drag centers): │
│ ─────────────────────────────────────────────────────────── │
│ │
│ --oklch-primary: oklch(55% 0.15 230); <── ANCHOR at H=230 │
│ --oklch-success: oklch(55% 0.15 130); <── ANCHOR at H=130 │
│ --oklch-danger: oklch(55% 0.18 25); <── ANCHOR at H=25 │
│ --oklch-warning: oklch(65% 0.15 85); <── ANCHOR at H=85 │
│ --oklch-info: oklch(55% 0.12 230); <── Shares ANCHOR with primary │
│ │
│ FLOW COLORS (Derived, pulled by anchor's Frame Drag): │
│ ────────────────────────────────────────────────────── │
│ │
│ HOVER STATES (lighter, using oklch for hue preservation): │
│ --oklch-primary-hover: color-mix(in oklch, var(--oklch-primary), white 15%) │
│ --oklch-success-hover: color-mix(in oklch, var(--oklch-success), white 15%) │
│ │ │
│ └── Mixing in OKLCH preserves the anchor's hue │
│ Frame Drag keeps H=230 stable during lightening │
│ │
│ MUTED STATES (transparent, using oklab for smooth transparency): │
│ --oklch-primary-muted: color-mix(in oklab, var(--oklch-primary), transparent 80%)│
│ --oklch-danger-muted: color-mix(in oklab, var(--oklch-danger), transparent 80%) │
│ │ │
│ └── OKLAB (Cartesian) for FLOW transitions │
│ Linear interpolation without gravity influence │
│ This is "free space between gravity wells" │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ KEY INSIGHT: FRAME DRAG vs FREE SPACE │ │
│ │ │ │
│ │ Hover states use color-mix(in oklch, ...) │ │
│ │ -> FRAME DRAG ACTIVE: Hue is "pulled" by anchor, stays fixed │ │
│ │ -> Result: Lighter but same hue identity │ │
│ │ │ │
│ │ Muted states use color-mix(in oklab, ...) │ │
│ │ -> FREE SPACE TRANSITION: No gravity influence │ │
│ │ -> Result: Smooth linear transparency (Flow Color behavior) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────────────┘
Level 3: Component Colors
Context Menu and File Explorer
/* Context Menu */
--color-context-menu-bg: #2d2d2d;
--color-context-menu-border: #444;
--color-context-menu-hover: #3a3a3a;
--color-context-menu-text: #cccccc;
/* File Explorer */
--color-file-explorer-separator: #555;
--color-file-explorer-empty-state: #666;
--color-file-explorer-error: var(--color-danger);
Dialog/Modal System
/* Dialog Sizes */
--dialog-width-sm: 400px;
--dialog-width-md: 520px;
--dialog-width-lg: 640px;
--dialog-max-height: 70vh;
--dialog-fixed-height: 600px;
/* Dialog Shadows & Overlay */
--dialog-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
--dialog-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
--overlay-backdrop: rgba(0, 0, 0, 0.7);
Level 4: Contextual Relationships
Background-Foreground Pairs
/* Primary Background Context */
--bg-primary-text: var(--color-text-primary);
--bg-primary-text-secondary: var(--color-text-secondary);
--bg-primary-heading: var(--color-text-primary);
--bg-primary-link: var(--color-primary);
/* Accent Background Contexts (buttons, badges, etc.) */
--bg-accent-primary-text: #ffffff; /* Text on --color-primary bg */
--bg-accent-success-text: #ffffff; /* Text on --color-success bg */
--bg-accent-danger-text: #ffffff; /* Text on --color-danger bg */
--bg-accent-warning-text: #ffffff; /* Text on --color-warning bg (dark theme) */
--bg-accent-info-text: #ffffff; /* Text on --color-info bg */
Status Badge Colors
/* Success Status (Running, Active, Connected) */
--status-success: var(--oklch-success);
--status-success-bg: color-mix(in oklab, var(--oklch-success), transparent 80%);
--status-success-text: var(--oklch-success);
/* Warning Status (Pending, Not Started, Orphan) */
--status-warning: var(--oklch-warning);
--status-warning-bg: color-mix(in oklab, var(--oklch-warning), transparent 80%);
--status-warning-text: var(--oklch-warning);
/* Danger Status (Error, Failed, Disconnected) */
--status-danger: var(--oklch-danger);
--status-danger-bg: color-mix(in oklab, var(--oklch-danger), transparent 80%);
--status-danger-text: var(--oklch-danger);
┌─────────────────────────────────────────────────────────────────────────────┐
│ STATUS BADGE COLOR SYSTEM │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ CORE COLOR FLOW BG FLOW TEXT │
│ (ANCHOR) (20% opacity) (Reference) │
│ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ SUCCESS: │ │
│ │ --oklch-success: oklch(55% 0.15 130) <── ANCHOR at H=130 │ │
│ │ │ │ │ │
│ │ --status-success-bg --status-success-text │ │
│ │ color-mix(in oklab, var(--oklch-success) │ │
│ │ var(--oklch-success), │ │
│ │ transparent 80%) Frame Drag: text references the anchor │ │
│ │ │ │
│ │ Rendered: [__________ Running __________] │ │
│ │ green 20% green text (pulled to H=130) │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
THE CENTER
How CSS Variables Help Humans Parse Information Flow
Connection to Core-Flow:
┌── 4-level hierarchy provides instant visual parsing
│ - Level 1: "Where am I?" (background context)
│ - Level 2: "What does this mean?" (semantic identity)
│ - Level 3: "Which component?" (UI element type)
│ - Level 4: "What can I do here?" (interaction context)
├── Before reading ANY text, color tells the human:
│ - Primary action available (blue anchor)
│ - Success state confirmed (green anchor)
│ - Error requires attention (red anchor)
└── Human-AI collaboration benefit:
- AI output can be color-coded by semantic meaning
- Human instantly knows: error, success, info, warning
- No need to read text to understand urgency level
Agent Colors
Learn how Golden Angle distribution creates unique colors for multiple agents