The Muted Color Concept
Muted colors are subdued versions of vibrant Core Colors. They serve critical UI functions:- Background fills for semantic regions (success messages, error containers)
- Selection indicators that do not overwhelm content
- Badge backgrounds that complement foreground icons/text
- Subtle accents that add color without dominance
Copy
MUTED COLOR CONCEPT
--------------------------------------------------------------------
CORE COLOR (Full Saturation)
=============================
--oklch-primary: oklch(55% 0.15 230);
####################################################################
100% opacity, 100% chroma - DOMINANT
----------------------------------------------------------------------
MUTED COLOR (Reduced Opacity)
==============================
--oklch-primary-muted: color-mix(in oklab, ..., transparent 80%);
................############................
20% opacity - SUBTLE, BACKGROUND-APPROPRIATE
----------------------------------------------------------------------
RELATIONSHIP:
+------------------------------------------------------------------+
| |
| CORE (100%) MUTED (20%) RELATIONSHIP |
| ----------- ------------ ------------ |
| Dense mass Diffuse cloud Same color |
| Strong presence Gentle presence identity, |
| Dominates space Fills space different |
| intensity |
+------------------------------------------------------------------+
Muted Color Definitions
Copy
/* Muted color derivations */
--oklch-primary-muted: color-mix(in oklab, var(--oklch-primary), transparent 80%);
--oklch-success-muted: color-mix(in oklab, var(--oklch-success), transparent 80%);
--oklch-danger-muted: color-mix(in oklab, var(--oklch-danger), transparent 80%);
--oklch-warning-muted: color-mix(in oklab, var(--oklch-warning), transparent 80%);
Background Color Hierarchy
Background colors create visual layers in the interface. Each level represents a different elevation.Copy
/* Dark Theme (Default) */
--color-bg-primary: #000000; /* Pure black - deepest layer */
--color-bg-secondary: #090e13; /* L=5.5% - first elevation */
--color-bg-tertiary: #0b1117; /* L=7% - second elevation */
--color-bg-hover: rgba(147, 161, 161, 0.08);
Background Elevation Model
Copy
BACKGROUND ELEVATION MODEL
--------------------------------------------------------------------
DARK THEME BACKGROUND HIERARCHY:
=================================
Level Variable Value Lightness
-----------------------------------------------------------------------
Primary --color-bg-primary #000000 L=0%
Secondary --color-bg-secondary #090e13 L=5.5%
Tertiary --color-bg-tertiary #0b1117 L=7%
+------------------------------------------------------------------+
| |
| VISUAL REPRESENTATION (Nested Layers): |
| |
| +-----------------------------------------------------------+ |
| | PRIMARY (#000000) - Terminal, main content | |
| | #########################################################| |
| | | |
| | +---------------------------------------------------+ | |
| | | SECONDARY (#090e13) - Sidebars, panels | | |
| | | =================================================| | |
| | | | | |
| | | +---------------------------------------+ | | |
| | | | TERTIARY (#0b1117) - Elevated elements| | | |
| | | | .....................................| | | |
| | | | (dropdowns, tooltips) | | | |
| | | +---------------------------------------+ | | |
| | | | | |
| | +---------------------------------------------------+ | |
| | | |
| +-----------------------------------------------------------+ |
| |
+------------------------------------------------------------------+
LIGHTNESS PROGRESSION: 0% -> 5.5% -> 7%
Each layer is slightly brighter, creating depth perception
Light Theme Background System
Copy
[data-theme="light"] {
--color-bg-primary: #ffffff;
--color-bg-secondary: #f5f5f5;
--color-bg-tertiary: #ebebeb;
--color-bg-hover: rgba(0, 0, 0, 0.05);
}
Dark vs Light Background Comparison
Copy
BACKGROUND COLOR THEME COMPARISON
--------------------------------------------------------------------
DARK THEME LIGHT THEME
=========== ===========
--color-bg-primary: #000000 --color-bg-primary: #ffffff
L=0% L=100%
--color-bg-secondary: #090e13 --color-bg-secondary: #f5f5f5
L=5.5% L=96%
--color-bg-tertiary: #0b1117 --color-bg-tertiary: #ebebeb
L=7% L=92%
----------------------------------------------------------------------
PROGRESSION PATTERN:
Dark: 0% -> 5.5% -> 7% (each level brighter)
Light: 100% -> 96% -> 92% (each level darker)
Both follow the same principle: higher elevation = further from base
Level 4: Contextual Relationship Variables
Level 4 variables define text colors appropriate for specific background contexts. Text must adapt to its background to maintain readability.Copy
/* LEVEL 4: Contextual Relationship Variables */
/* Background-foreground relationships */
/* Primary Background Context */
--bg-primary-text: var(--color-text-primary);
--bg-primary-text-secondary: var(--color-text-secondary);
--bg-primary-heading: var(--color-text-primary);
--bg-primary-link: var(--color-primary);
/* Secondary Background Context */
--bg-secondary-text: var(--color-text-primary);
--bg-secondary-text-secondary: var(--color-text-secondary);
--bg-secondary-heading: var(--color-text-primary);
--bg-secondary-link: var(--color-primary);
/* Tertiary Background Context */
--bg-tertiary-text: var(--color-text-primary);
--bg-tertiary-text-secondary: var(--color-text-secondary);
--bg-tertiary-heading: var(--color-text-primary);
--bg-tertiary-link: var(--color-primary);
/* Accent Background Contexts (buttons, badges, etc.) */
--bg-accent-primary-text: #ffffff; /* Text on --color-primary bg */
--bg-accent-success-text: #ffffff; /* Text on --color-success bg */
--bg-accent-danger-text: #ffffff; /* Text on --color-danger bg */
--bg-accent-warning-text: #ffffff; /* Text on --color-warning bg (dark theme) */
--bg-accent-info-text: #ffffff; /* Text on --color-info bg */
Contextual Relationship Architecture
Copy
CONTEXTUAL RELATIONSHIP ARCHITECTURE
--------------------------------------------------------------------
LEVEL 4 VARIABLE NAMING CONVENTION:
====================================
--bg-{context}-{element}
| |
| +-- text, text-secondary, heading, link
+-- primary, secondary, tertiary, accent-primary, accent-success...
----------------------------------------------------------------------
RELATIONSHIP DIAGRAM:
+------------------------------------------------------------------+
| |
| BACKGROUND LAYER TEXT LAYER |
| ================ ========== |
| |
| --color-bg-primary -----------> --bg-primary-text |
| (Deep #000000) (#93a1a1) |
| |
| --color-bg-secondary ---------> --bg-secondary-text |
| (Shallower #090e13) (Same text color) |
| |
| --color-primary --------------> --bg-accent-primary-text |
| (Semantic blue) (White for contrast) |
| |
+------------------------------------------------------------------+
WHY LEVEL 4 EXISTS:
===================
1. Themes can override just the relationship
2. Semantic backgrounds need different text
3. Light/dark theme can have different accent text colors
4. Accessibility: ensures sufficient contrast
Light Theme Contextual Override
Copy
[data-theme="light"] {
/* Warning text needs to be dark on bright yellow bg in light mode */
--bg-accent-warning-text: #1a1a1a;
}
Text Color Hierarchy
Text colors are organized by importance, with primary text being the most visible.Copy
--color-text-primary: #93a1a1;
--color-text-secondary: #657b83;
--color-text-tertiary: #586e75;
Text Hierarchy Visual Model
Copy
TEXT COLOR HIERARCHY
--------------------------------------------------------------------
DARK THEME TEXT COLORS:
=======================
--color-text-primary: #93a1a1 (L=64%) Main body
--color-text-secondary: #657b83 (L=50%) Supporting
--color-text-tertiary: #586e75 (L=45%) Hints
+------------------------------------------------------------------+
| |
| VISUAL HIERARCHY: |
| |
| PRIMARY TEXT (#93a1a1) |
| ============================================================ |
| Brightest - clearly readable, main content |
| |
| SECONDARY TEXT (#657b83) |
| ========================================.................... |
| Medium - supporting role, descriptions |
| |
| TERTIARY TEXT (#586e75) |
| ============================.............................. |
| Dim - hints and placeholders |
| |
+------------------------------------------------------------------+
CONTRAST RATIOS:
----------------
Dark theme: Primary on black = ~7:1 (exceeds WCAG AA)
Light theme: Primary on white = ~14:1 (exceeds WCAG AAA)
Status Badge Background Muted Colors
Status badge backgrounds use the muted pattern: each semantic Core Color is diluted to 20% for backgrounds.Copy
/* Status Badge Colors */
/* Success Status (Running, Active, Connected) */
--status-success: var(--oklch-success);
--status-success-bg: color-mix(in oklab, var(--oklch-success), transparent 80%);
--status-success-text: var(--oklch-success);
/* Warning Status (Pending, Not Started, Orphan) */
--status-warning: var(--oklch-warning);
--status-warning-bg: color-mix(in oklab, var(--oklch-warning), transparent 80%);
--status-warning-text: var(--oklch-warning);
/* Danger Status (Error, Failed, Disconnected) */
--status-danger: var(--oklch-danger);
--status-danger-bg: color-mix(in oklab, var(--oklch-danger), transparent 80%);
--status-danger-text: var(--oklch-danger);
/* Info Status (Informational, Neutral) */
--status-info: var(--oklch-info);
--status-info-bg: color-mix(in oklab, var(--oklch-info), transparent 80%);
--status-info-text: var(--oklch-info);
Status Badge Component Model
Copy
STATUS BADGE COMPONENT MODEL
--------------------------------------------------------------------
STATUS BADGE STRUCTURE:
=======================
+------------------------------------------------------------------+
| |
| +--------------------+ |
| | [*] Running | <-- Status Badge |
| +--------------------+ |
| | | |
| | +-- Text: --status-success-text (100%) |
| | |
| +-- Icon: --status-success (100%) |
| |
| Background: --status-success-bg (20%) |
| |
+------------------------------------------------------------------+
ALL STATUS TYPES:
+------------------------------------------------------------------+
| |
| SUCCESS WARNING DANGER |
| +--------------+ +--------------+ +--------------+ |
| | [*] Running | | [!] Pending | | [X] Failed | |
| +--------------+ +--------------+ +--------------+ |
| Green 20% BG Yellow 20% BG Red 20% BG |
| |
+------------------------------------------------------------------+
Neutral Palette (Low Chroma)
Neutral colors have minimal saturation. They serve as visual separators without competing with content colors.Copy
/* Border Colors (Legacy HEX) */
--color-border-primary: #151d26;
--color-border-secondary: #1f2a35;
--color-border-light: #2a3540;
--color-border-subtle: rgba(255, 255, 255, 0.1);
Neutral Palette Analysis
Copy
NEUTRAL PALETTE ANALYSIS
--------------------------------------------------------------------
DARK THEME BORDERS:
====================
Color HEX OKLCH Approx Character
-----------------------------------------------------------------------
border-primary #151d26 oklch(10% 0.02 230) Near-zero saturation
border-secondary #1f2a35 oklch(15% 0.02 230) Minimal influence
border-light #2a3540 oklch(20% 0.02 230) Faint color
border-subtle rgba(...) oklch(100% 0 0)@10% Ghost particles
CHROMA ANALYSIS:
----------------
All borders have very LOW chroma (C = 0.02)
Compare to semantic colors (C = 0.15)
This is intentional:
- Low chroma = minimal visual "mass"
- Borders should NOT compete with content colors
- They exist in the "void" between colored regions
- Subtle blue tint = theme's background radiation
----------------------------------------------------------------------
LIGHT THEME BORDERS:
====================
--color-border-primary: #e0e0e0 (L=88%) Pure neutral
--color-border-secondary: #d0d0d0 (L=82%) True neutral
--color-border-light: #c0c0c0 (L=75%) Achromatic
--color-border-subtle: rgba(0, 0, 0, 0.1)
Light theme uses TRUE neutral gray (Chroma = 0)
No color "charge" at all - pure empty space
Element Background Variants
Element backgrounds create subtle elevation differences between UI components.Copy
/* Element Background (UI elements like buttons, badges, dropdowns) */
/* Falls back to border colors if not defined in theme */
--color-element-bg-1: var(--color-border-primary);
--color-element-bg-2: var(--color-border-secondary);
--color-element-bg-3: var(--color-border-light);
Element Background Purpose
Copy
ELEMENT BACKGROUND SYSTEM
--------------------------------------------------------------------
PURPOSE:
========
Element backgrounds are for UI controls that sit ON TOP of main backgrounds
They need to be visually distinct but not overwhelming
+------------------------------------------------------------------+
| |
| PAGE BACKGROUND (--color-bg-primary) |
| ############################################################ |
| |
| +-------------------------------------------------------+ |
| | PANEL (--color-bg-secondary) | |
| | =====================================================| |
| | | |
| | +-----------------+ +-----------------+ | |
| | | Button | | Dropdown v | | |
| | | (element-bg-2) | | (element-bg-2) | | |
| | +-----------------+ +-----------------+ | |
| | | |
| | +-------------------------------------------------+ | |
| | | Input field (element-bg-1) | | |
| | | ................................................| | |
| | +-------------------------------------------------+ | |
| | | |
| +-------------------------------------------------------+ |
| |
+------------------------------------------------------------------+
FALLBACK STRATEGY:
==================
Element backgrounds reference border colors as fallback:
- --color-element-bg-1 = var(--color-border-primary)
- This ensures consistency even if theme doesn't define element-bg
- Border colors are safe neutral values
Divider and Subtle Separation
Dividers create visual separation without drawing attention.Copy
/* Legacy divider */
--color-divider: rgba(255, 255, 255, 0.1);
/* Modern OKLCH-based divider */
--oklch-divider: color-mix(in oklch, var(--color-text-primary) 15%, transparent);
Divider System Comparison
Copy
DIVIDER SYSTEM COMPARISON
--------------------------------------------------------------------
TWO DIVIDER APPROACHES:
=======================
1. LEGACY (rgba) - Fixed:
--color-divider: rgba(255, 255, 255, 0.1);
- 10% white overlay
- Fixed value, doesn't adapt to theme
- Works only on dark backgrounds
2. MODERN (color-mix) - Adaptive:
--oklch-divider: color-mix(in oklch, var(--color-text-primary) 15%,
transparent);
- 15% of theme text color
- Automatically adapts to dark/light theme
- Perceptually consistent across environments
----------------------------------------------------------------------
RECOMMENDATION:
===============
Use --oklch-divider for new code (adapts to theme)
Keep --color-divider for backward compatibility
Special Purpose Colors
Copy
/* Special Purpose */
--color-white: #fdf6e3;
--color-black: #000000;
Special Color Analysis
Copy
SPECIAL PURPOSE COLORS
--------------------------------------------------------------------
--color-white: #fdf6e3
======================
This is NOT pure white (#ffffff)!
It's the Solarized "base3" warm off-white.
RGB: 253, 246, 227
Character: Warm cream/ivory with yellow undertone
WHY NOT PURE WHITE?
- Matches Solarized theme aesthetic
- Reduces eye strain
- Creates cohesive warm color palette
- Pure white (#fff) is available if needed
----------------------------------------------------------------------
--color-black: #000000
======================
This IS pure black.
Used for:
- Terminal background
- Maximum contrast elements
- Shadow bases
THE CENTER
How Muted Colors Enable Information Flow
Copy
Connection to Core-Flow:
+-- Muted colors = contextual information
+-- Full colors = primary information
+-- Backgrounds establish visual "environment"
+-- Text hierarchy guides reading order
- Muted backgrounds establish context (semantic region)
- Full-opacity text delivers content
- Neutral borders separate without competing
- Background hierarchy organizes spatial layout
Back to Flow Overview
Return to the OKLAB and color-mix() foundation