The Center
┌───────────────────────────────────────────────────────────────────────────────┐
│ │
│ CORE & FLOW COLOR SYSTEM │
│ │
│ "Core Colors define identity. Flow Colors handle everything in between." │
│ │
└───────────────────────────────────────────────────────────────────────────────┘
How It Works
┌───────────────────────────────────────────────────────────────────────────────┐
│ CORE & FLOW ARCHITECTURE │
├───────────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ ┌───────────────────────────┐ │
│ │ CORE COLORS │ │
│ │ (OKLCH Space) │ │
│ │ │ │
│ │ "What IS this thing?" │ │
│ └─────────────┬─────────────┘ │
│ │ │
│ │ derives from │
│ v │
│ ┌───────────────────────────┐ │
│ │ FLOW COLORS │ │
│ │ (OKLAB Space) │ │
│ │ │ │
│ │ "How does it BEHAVE?" │ │
│ └───────────────────────────┘ │
│ │
│ │
│ KEY INSIGHT: │
│ OKLAB linear interpolation prevents muddy colors between transitions │
│ │
└───────────────────────────────────────────────────────────────────────────────┘
The Two Color Spaces
┌───────────────────────────────────────────────────────────────────────────────┐
│ TWO SPACES, ONE SYSTEM │
├───────────────────────────────────────────────────────────────────────────────┤
│ │
│ OKLCH (Core Colors) OKLAB (Flow Colors) │
│ ════════════════════ ══════════════════ │
│ │
│ Polar Coordinates Cartesian Coordinates │
│ │
│ * Hue y │
│ / │ │
│ / Chroma │ │
│ ┼────────────> ────┼──── x │
│ │ │ │
│ │ │ │
│ v z │
│ Lightness │
│ │
│ ┌───────────────────┐ ┌───────────────────┐ │
│ │ L = Brightness │ │ Smooth blending │ │
│ │ C = Saturation │ │ Linear paths │ │
│ │ H = Color angle │ │ No muddy middles │ │
│ └───────────────────┘ └───────────────────┘ │
│ │
│ USE FOR: USE FOR: │
│ - Primary colors - Hover states │
│ - Brand identity - Transitions │
│ - Semantic colors - Transparency │
│ │
└───────────────────────────────────────────────────────────────────────────────┘
The Five Rules
┌───────────────────────────────────────────────────────────────────────────────┐
│ THE FIVE RULES OF CORE & FLOW │
├───────────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ RULE 1: IDENTITY = CORE │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ If the color DEFINES what something IS, use Core. │ │
│ │ │ │
│ │ "This button is primary" --> Core Color │ │
│ │ "This status is success" --> Core Color │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ │
│ RULE 2: STATE = FLOW │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ If the color MODIFIES how something appears, use Flow. │ │
│ │ │ │
│ │ "Button is hovered" --> Flow Color │ │
│ │ "Button is disabled" --> Flow Color │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ │
│ RULE 3: FLOW DERIVES FROM CORE │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Every Flow Color must trace back to a Core Color. │ │
│ │ │ │
│ │ Core: Blue --> Flow: Blue-Hover, Blue-Active, Blue-Disabled │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ │
│ RULE 4: USE OKLAB FOR MIXING │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ When colors transition, OKLAB prevents muddy midpoints. │ │
│ │ │ │
│ │ Blue --> Yellow in OKLAB = vibrant purple midpoint │ │
│ │ Blue --> Yellow in sRGB = muddy brown midpoint │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ │
│ RULE 5: CORE USES OKLCH, FLOW USES color-mix() │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Core = defined in OKLCH │ │
│ │ Flow = derived via CSS color-mix() │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ │
└───────────────────────────────────────────────────────────────────────────────┘
Why OKLAB Prevents Muddy Colors
┌───────────────────────────────────────────────────────────────────────────────┐
│ sRGB vs OKLAB INTERPOLATION │
├───────────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ sRGB PATH (Blue to Yellow): │
│ ════════════════════════════ │
│ │
│ Blue ─────────> Muddy Brown ─────────> Yellow │
│ │ │
│ v │
│ [desaturated] │
│ [unappealing] │
│ │
│ Problem: Non-linear RGB space causes desaturation in the middle │
│ │
│ │
│ OKLAB PATH (Blue to Yellow): │
│ ═════════════════════════════ │
│ │
│ Blue ─────────> Vibrant Purple ─────────> Yellow │
│ │ │
│ v │
│ [saturated] │
│ [beautiful] │
│ │
│ Solution: Perceptually uniform space maintains saturation │
│ │
│ │
└───────────────────────────────────────────────────────────────────────────────┘
Gestalt-Physics Correspondence
┌───────────────────────────────────────────────────────────────────────────────┐
│ GESTALT PRINCIPLES MAPPED TO PHYSICS │
├───────────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ GESTALT PHYSICS RESULT │
│ ══════ ═══════ ══════ │
│ │
│ Figure/Ground --> Core/Flow --> Identity vs Transition │
│ │ │ │ │
│ v v v │
│ "What stands out" "What defines" Clear separation │
│ │
│ Similarity --> Frame Drag --> Hue pulled toward Core │
│ │ │ │ │
│ v v v │
│ "Like attracts" "Gravity effect" Color harmony │
│ │
│ Common Fate --> Einstein Arc --> Hue bends around Core │
│ │ │ │ │
│ v v v │
│ "Move together" "Light curves" Natural grouping │
│ │
│ Continuity --> Caustic --> Smooth transitions │
│ │ │ │ │
│ v v v │
│ "Smooth paths" "Light focus" Gradient flow │
│ │
│ Proximity --> Hue Inheritance --> Zone grouping │
│ │ │ │ │
│ v v v │
│ "Near = related" "Color family" Visual hierarchy │
│ │
│ │
└───────────────────────────────────────────────────────────────────────────────┘
Competitive Advantage
┌───────────────────────────────────────────────────────────────────────────────┐
│ CORE & FLOW vs MATERIAL DESIGN HCT │
├───────────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ Core & Flow Material Design HCT │
│ ════════════ ════════════════════ │
│ │
│ Bundle Size 0 KB (CSS native) 45 KB (JavaScript) │
│ │ │ │
│ v v │
│ [Zero overhead] [Library required] │
│ │
│ │
│ Theme Switch < 0.1 ms 5-10 ms │
│ │ │ │
│ v v │
│ [Instant] [Noticeable delay] │
│ │
│ │
│ Standard W3C CSS Color 4/5 Proprietary (Google) │
│ │ │ │
│ v v │
│ [Open standard] [Vendor lock-in] │
│ │
│ │
│ Runtime None JavaScript execution │
│ │ │ │
│ v v │
│ [Pure CSS] [CPU cycles] │
│ │
│ │
│ ┌───────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ "Zero JavaScript. Pure CSS. 100x faster than Material." │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────┘ │
│ │
│ │
└───────────────────────────────────────────────────────────────────────────────┘
The Human + AI Advantage
┌───────────────────────────────────────────────────────────────────────────────┐
│ HOW COLOR SERVES HUMAN + AI COLLABORATION │
├───────────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ WITHOUT Gestalt Color: │
│ ══════════════════════ │
│ │
│ See text --> Read --> Parse --> Understand --> React │
│ │ │ │ │ │ │
│ v v v v v │
│ [Step 1] [Step 2] [Step 3] [Step 4] [Step 5] │
│ │
│ High cognitive load │
│ Slow processing │
│ Mental fatigue │
│ │
│ │
│ WITH Gestalt Color: │
│ ═══════════════════ │
│ │
│ See color ───────────────────────────> Understand │
│ │ │ │
│ v v │
│ [Step 1] [Immediate] │
│ │
│ Intuitive │
│ Instant recognition │
│ Low cognitive load │
│ │
│ │
│ ┌───────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Red = Stop! Error! │ │
│ │ Yellow = Caution! Warning! │ │
│ │ Green = OK! Success! │ │
│ │ Blue = Info, reference! │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────┘ │
│ │
│ Color is the "primary lifeline" because │
│ understanding begins before reading. │
│ │
│ │
└───────────────────────────────────────────────────────────────────────────────┘
Documentation Structure
Core Colors
OKLCH polar coordinates and identity colors
Flow Colors
OKLAB cartesian mixing and state derivation
Integration
CSS variable architecture and decision flow
Tint System
Runtime TrueColor transformation