The 4-Level Hierarchy
Colors in the Gestalt system organize into four levels, from raw definitions to component usage.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ CSS VARIABLE HIERARCHY │
│ │
│ ╔═══════════════════════════════════════════════════════════════════════╗ │
│ ║ LEVEL 1: Core Definitions ║ │
│ ╠═══════════════════════════════════════════════════════════════════════╣ │
│ ║ ║ │
│ ║ The fundamental identity colors. ║ │
│ ║ These are the "seeds" from which everything grows. ║ │
│ ║ ║ │
│ ║ Primary Success Danger Warning ║ │
│ ║ [*] [*] [*] [*] ║ │
│ ║ Blue Green Red Yellow ║ │
│ ║ ║ │
│ ╚═══════════════════════════════════════════════════════════════════════╝ │
│ │ │
│ v │
│ ╔═══════════════════════════════════════════════════════════════════════╗ │
│ ║ LEVEL 2: Semantic Aliases ║ │
│ ╠═══════════════════════════════════════════════════════════════════════╣ │
│ ║ ║ │
│ ║ Named references to Core colors. ║ │
│ ║ "This action is primary" -> points to Core Primary ║ │
│ ║ ║ │
│ ╚═══════════════════════════════════════════════════════════════════════╝ │
│ │ │
│ v │
│ ╔═══════════════════════════════════════════════════════════════════════╗ │
│ ║ LEVEL 3: Component Tokens ║ │
│ ╠═══════════════════════════════════════════════════════════════════════╣ │
│ ║ ║ │
│ ║ Specific element references. ║ │
│ ║ "Button background" -> points to Semantic Primary ║ │
│ ║ "Badge text" -> points to Semantic Success ║ │
│ ║ ║ │
│ ╚═══════════════════════════════════════════════════════════════════════╝ │
│ │ │
│ v │
│ ╔═══════════════════════════════════════════════════════════════════════╗ │
│ ║ LEVEL 4: Flow Derivations ║ │
│ ╠═══════════════════════════════════════════════════════════════════════╣ │
│ ║ ║ │
│ ║ State variations derived from Cores. ║ │
│ ║ ║ │
│ ║ Hover Active Background Disabled ║ │
│ ║ (+) (-) (o) (~) ║ │
│ ║ Lighter Darker Transparent Desaturated ║ │
│ ║ ║ │
│ ╚═══════════════════════════════════════════════════════════════════════╝ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Core Color Palette
The four semantic Core colors, each tuned for its purpose.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ CORE COLORS - The Identity Palette │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐│
│ │ ││
│ │ PRIMARY (Blue) ││
│ │ =============== ││
│ │ Standard reference color ││
│ │ Used for: Actions, links, selections ││
│ │ Lightness: 55% (standard) ││
│ │ ││
│ ├─────────────────────────────────────────────────────────────────────────┤│
│ │ ││
│ │ SUCCESS (Green) ││
│ │ ================ ││
│ │ Same lightness as Primary ││
│ │ Used for: Positive states, confirmations ││
│ │ Lightness: 55% (matches Primary) ││
│ │ ││
│ ├─────────────────────────────────────────────────────────────────────────┤│
│ │ ││
│ │ DANGER (Red) ││
│ │ ============= ││
│ │ Higher vibrancy for urgency ││
│ │ Used for: Errors, destructive actions ││
│ │ Lightness: 55%, Chroma: Higher ││
│ │ ││
│ ├─────────────────────────────────────────────────────────────────────────┤│
│ │ ││
│ │ WARNING (Yellow) ││
│ │ ================= ││
│ │ Brighter for visibility ││
│ │ Used for: Cautions, alerts ││
│ │ Lightness: 65% (needs more to be visible) ││
│ │ ││
│ └─────────────────────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Flow Derivation Patterns
How states derive from Core colors.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ FLOW DERIVATIONS │
│ │
│ CORE COLOR │
│ ┌─────────────┐ │
│ │ │ │
│ │ Primary │ │
│ │ Blue │ │
│ │ │ │
│ └──────┬──────┘ │
│ │ │
│ ┌──────────┬──────────┼──────────┬──────────┐ │
│ │ │ │ │ │ │
│ v v v v v │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ HOVER │ │ ACTIVE │ │BACKGROUND│ │ FOCUS │ │DISABLED│ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ Lighter │ │ Darker │ │Transparent│ │ Ring │ │ Muted │ │
│ │ (+15%) │ │ (-20%) │ │ (80%) │ │ (40%) ││ (gray) │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ Each Flow color traces back to a Core color. │
│ Change the Core, and all Flows update automatically. │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Core vs Flow Decision
When to use which type of color.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ WHEN TO USE CORE vs FLOW │
│ │
│ ╔═════════════════════════════════════════════════════════════════════════╗│
│ ║ ║│
│ ║ "Is this defining WHAT something IS?" ║│
│ ║ ────────────────────────────────────── ║│
│ ║ │ ║│
│ ║ ┌─────────┴─────────┐ ║│
│ ║ │ │ ║│
│ ║ v v ║│
│ ║ YES NO ║│
│ ║ │ │ ║│
│ ║ v v ║│
│ ║ ┌───────────┐ "Is this defining HOW ║│
│ ║ │ Use CORE │ something BEHAVES?" ║│
│ ║ │ (OKLCH) │ │ ║│
│ ║ └───────────┘ ┌───────┴───────┐ ║│
│ ║ │ │ ║│
│ ║ v v ║│
│ ║ YES NO ║│
│ ║ │ │ ║│
│ ║ v v ║│
│ ║ ┌───────────┐ ┌───────────┐ ║│
│ ║ │ Use FLOW │ │ Check │ ║│
│ ║ │(color-mix)│ │ Parent │ ║│
│ ║ └───────────┘ └───────────┘ ║│
│ ║ ║│
│ ╚═════════════════════════════════════════════════════════════════════════╝│
│ │
│ EXAMPLES: │
│ ───────── │
│ "This button is a primary action" -> CORE (identity) │
│ "This button is being hovered" -> FLOW (state) │
│ "This is the background of success" -> FLOW (derived) │
│ "This badge represents a warning" -> CORE (identity) │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Dark and Light Theme Support
The cascade handles theme switching automatically.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ THEME SWITCHING │
│ │
│ ╔══════════════════════════════════╗ ╔══════════════════════════════════╗ │
│ ║ LIGHT THEME ║ ║ DARK THEME ║ │
│ ║ ║ ║ ║ │
│ ║ Background: Very Light ║ ║ Background: Very Dark ║ │
│ ║ Text: Very Dark ║ ║ Text: Very Light ║ │
│ ║ ║ ║ ║ │
│ ║ ┌────────────────────────────┐ ║ ║ ┌────────────────────────────┐ ║ │
│ ║ │ │ ║ ║ │ │ ║ │
│ ║ │ CORE COLORS │ ║ ║ │ CORE COLORS │ ║ │
│ ║ │ (Same in both!) │ ║ ║ │ (Same in both!) │ ║ │
│ ║ │ │ ║ ║ │ │ ║ │
│ ║ │ Primary = Blue │ ║ ║ │ Primary = Blue │ ║ │
│ ║ │ Success = Green │ ║ ║ │ Success = Green │ ║ │
│ ║ │ Danger = Red │ ║ ║ │ Danger = Red │ ║ │
│ ║ │ Warning = Yellow │ ║ ║ │ Warning = Yellow │ ║ │
│ ║ │ │ ║ ║ │ │ ║ │
│ ║ └────────────────────────────┘ ║ ║ └────────────────────────────┘ ║ │
│ ║ ║ ║ ║ │
│ ║ Flow colors auto-adapt to ║ ║ Flow colors auto-adapt to ║ │
│ ║ the new background/text. ║ ║ the new background/text. ║ │
│ ║ ║ ║ ║ │
│ ╚══════════════════════════════════╝ ╚══════════════════════════════════╝ │
│ │
│ KEY INSIGHT: Only primitives (background, text) change. │
│ Core Colors stay constant. │
│ Flow Colors recalculate automatically. │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Performance Advantage
Why CSS-native beats JavaScript libraries.┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ PERFORMANCE: Core & Flow vs JavaScript │
│ │
│ ╔═════════════════════════════════════════════════════════════════════════╗│
│ ║ ║│
│ ║ Core & Flow (CSS Native) ║│
│ ║ ======================== ║│
│ ║ ║│
│ ║ Bundle size: 0 KB ║│
│ ║ Theme switch: < 0.1ms ║│
│ ║ Browser support: 92%+ ║│
│ ║ Runtime: None (pure CSS) ║│
│ ║ ║│
│ ├─────────────────────────────────────────────────────────────────────────┤│
│ ║ ║│
│ ║ Material Design HCT ║│
│ ║ =================== ║│
│ ║ ║│
│ ║ Bundle size: 45 KB ║│
│ ║ Theme switch: 5-10ms ║│
│ ║ Browser support: Requires JavaScript ║│
│ ║ Runtime: JavaScript execution ║│
│ ║ ║│
│ ╚═════════════════════════════════════════════════════════════════════════╝│
│ │
│ │
│ RESULT: 100x faster theme switching │
│ │
│ Theme Switch Time: │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Core & Flow │=│ < 0.1ms │ │
│ │ Material HCT │================================│ 10ms │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
“Core Colors define identity. Flow Colors handle everything in between.”
Next: Tint System
Learn about runtime TrueColor transformation