The Center
Copy
+-------------------------------------------------------------------------------+
| |
| CORE & FLOW COLOR SYSTEM |
| |
| "Core Colors define identity. Flow Colors handle everything in between." |
| |
+-------------------------------------------------------------------------------+
How It Works
Copy
+-------------------------------------------------------------------------------+
| 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
Copy
+-------------------------------------------------------------------------------+
| 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
Copy
+-------------------------------------------------------------------------------+
| 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
Copy
+-------------------------------------------------------------------------------+
| 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
Copy
+-------------------------------------------------------------------------------+
| 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
Copy
+-------------------------------------------------------------------------------+
| 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
Copy
+-------------------------------------------------------------------------------+
| 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. |
| |
| |
+-------------------------------------------------------------------------------+