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.
What are Flow Colors?
Flow Colors are derived from Core Colors to represent states, transitions, and overlays. They use OKLAB (Cartesian coordinates) for perceptually uniform mixing.┌─────────────────────────────────────────────────────────────────────────────────┐
│ CORE vs FLOW │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ CORE (OKLCH Polar) FLOW (OKLAB Cartesian) │
│ ================== ======================== │
│ │
│ "What IS this?" "How does it BEHAVE?" │
│ │
│ Identity colors: State colors: │
│ * Primary (blue) * Hover (lighter) │
│ * Success (green) * Active (darker) │
│ * Danger (red) * Disabled (grayed) │
│ * Warning (yellow) * Muted (transparent) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Why OKLAB for Mixing?
When colors blend together, the path they take through color space matters. OKLAB provides a perceptually straight path.┌─────────────────────────────────────────────────────────────────────────────────┐
│ sRGB vs OKLAB INTERPOLATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ sRGB Path (Blue to Yellow): │
│ ============================ │
│ │
│ Blue ────-> Muddy Brown ────-> Yellow │
│ (desaturated) │
│ │
│ Problem: Non-linear RGB causes desaturation in middle │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ #### .... .... .... #### │ │
│ │ BLUE gray mud gray YELLOW │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ OKLAB Path (Blue to Yellow): │
│ ============================= │
│ │
│ Blue ────-> Vibrant Purple ────-> Yellow │
│ (saturated) │
│ │
│ Solution: Perceptually uniform space maintains saturation │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ #### #### #### #### #### │ │
│ │ BLUE violet purple orange YELLOW │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ "When colors flow from Core to Core, OKLAB prevents muddy transitions" │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
OKLAB Coordinate System
OKLAB uses Cartesian coordinates (L, a, b) - like a 3D box rather than a cylinder.┌─────────────────────────────────────────────────────────────────────────────────┐
│ OKLAB CARTESIAN SPACE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ +Y (Yellow) │
│ │ │
│ │ │
│ ┌────────────┼────────────┐ │
│ /│ │ │\ │
│ / │ │ │ \ │
│ -X (Green) │ │ │ +X (Red) │
│ \ │ L (Lightness) │ / │
│ \│ 0=black, 1=white │/ │
│ └────────────┼────────────┘ │
│ │ │
│ │ │
│ -Y (Blue) │
│ │
│ Component Range Meaning │
│ ───────── ───── ─────── │
│ L 0-1 Lightness (0=black, 1=white) │
│ a -0.4 to 0.4 Green-Red axis │
│ b -0.4 to 0.4 Blue-Yellow axis │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Flow Patterns
Pattern 1: Transparency
For backgrounds and overlays - create subtle tinted areas.┌─────────────────────────────────────────────────────────────────────────────────┐
│ TRANSPARENCY FLOW │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Core Color (100%) │
│ ###################### │
│ Full vibrant blue │
│ │
│ │ mix with transparent 80% │
│ v │
│ │
│ Muted Background (20% visible) │
│ ....##................ │
│ Subtle blue tint │
│ │
│ Use: Badge backgrounds, selection highlights, status areas │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Pattern 2: Hover States
For interactive element hover - lighten while preserving identity.┌─────────────────────────────────────────────────────────────────────────────────┐
│ HOVER LIGHTENING │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ DEFAULT HOVER │
│ ################ --> ....############.... │
│ Base color +15% white added │
│ │
│ Note: Uses OKLCH (polar) to preserve hue while adjusting lightness │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Pattern 3: Active/Pressed States
For active/pressed interactions - darken to show engagement.┌─────────────────────────────────────────────────────────────────────────────────┐
│ ACTIVE DARKENING │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ DEFAULT ACTIVE │
│ ################ --> ################## │
│ Base color +20% black added │
│ │
│ Creates a "pressed in" visual feedback │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Pattern 4: Disabled States
For disabled elements - reduce color intensity.┌─────────────────────────────────────────────────────────────────────────────────┐
│ DISABLED DESATURATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ENABLED DISABLED │
│ ################ --> ................ │
│ Full saturation +60% gray mixed │
│ │
│ Retains color hint but clearly signals non-interactivity │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Complete Flow Pattern Reference
┌─────────────────────────────────────────────────────────────────────────────────┐
│ COMPLETE FLOW PATTERN REFERENCE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ STATE MODIFIER SPACE VISUAL │
│ ──────────────── ──────────────── ───── ─────────────────────── │
│ │
│ Muted Background transparent 80% OKLAB ....##................ │
│ Hover white 15% OKLCH ....############.... │
│ Active/Pressed black 20% OKLAB ################## │
│ Disabled gray 60% OKLAB ................ │
│ Focus ring transparent 50% OKLAB ..........##.......... │
│ Border transparent 70% OKLAB ......####...... │
│ │
│ RULE OF THUMB: │
│ * Transparency/Darkening -> OKLAB (cartesian) │
│ * Hue-preserving lightness -> OKLCH (polar) │
│ * Core-to-Core interpolation -> OKLAB (no muddy colors) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
When to Use Each Color Space
┌─────────────────────────────────────────────────────────────────────────────────┐
│ OKLAB vs OKLCH SELECTION GUIDE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ OKLAB OKLCH │
│ ===== ===== │
│ │
│ Best for: Blending operations Lightness adjustments │
│ Transparency Hover states │
│ Darkening Hue preservation │
│ Desaturation │
│ │
│ Think: "Mixing two things" "Adjusting one thing" │
│ │
│ Examples: Muted backgrounds Hover lightening │
│ Gradients Color scales │
│ Active states │
│ Disabled states │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
State Transitions
Learn how hover, active, and disabled states are derived