> ## 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. # Muted Colors and Background Variants > Contextual relationships and neutral palette implementation for subtle UI elements ## The Muted Color Concept Muted colors are subdued versions of vibrant Core Colors. They serve critical UI functions: 1. **Background fills** for semantic regions (success messages, error containers) 2. **Selection indicators** that do not overwhelm content 3. **Badge backgrounds** that complement foreground icons/text 4. **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 ```css theme={null} /* 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%); ``` All muted variants use the same formula: 80% transparent (20% visible). This creates consistent visual weight across all semantic colors. *** ## Background Color Hierarchy Background colors create visual layers in the interface. Each level represents a different elevation. ```css theme={null} /* 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 ```css theme={null} [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. ```css theme={null} /* 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 ```css theme={null} [data-theme="light"] { /* Warning text needs to be dark on bright yellow bg in light mode */ --bg-accent-warning-text: #1a1a1a; } ``` This override demonstrates: in light theme, the warning color's high luminosity requires dark text to maintain contrast. *** ## Text Color Hierarchy Text colors are organized by importance, with primary text being the most visible. ```css theme={null} --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. ```css theme={null} /* 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. ```css theme={null} /* 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. ```css theme={null} /* 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. ```css theme={null} /* 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 ```css theme={null} /* 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 colors are the "environment" in which primary information exists. When a success message appears on a muted green background, the background says "this is success context" while the foreground text delivers the actual message. This creates a layered communication system: 1. **Muted backgrounds** establish context (semantic region) 2. **Full-opacity text** delivers content 3. **Neutral borders** separate without competing 4. **Background hierarchy** organizes spatial layout This layering ensures that information flows naturally from context to content. The user first perceives "this is a success zone" (muted green), then reads the specific message. The muted color creates anticipation and framing without interfering with the primary information. *** Return to the OKLAB and color-mix() foundation