The 4-Level Hierarchy
Colors in the Gestalt system organize into four levels, from raw definitions to component usage.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| |
| 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