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
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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
/* 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./* 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
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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
[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
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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./* 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
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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
[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.--color-text-primary: #93a1a1;
--color-text-secondary: #657b83;
--color-text-tertiary: #586e75;
Text Hierarchy Visual Model
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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./* 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
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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./* 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
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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./* 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
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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 ▼ │ │ │ │
│ │ │ │ (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./* 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
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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
/* Special Purpose */
--color-white: #fdf6e3;
--color-black: #000000;
Special Color Analysis
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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
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