The Muted Color Concept
Muted colors are subdued versions of vibrant Core Colors. They serve critical UI functions.┌─────────────────────────────────────────────────────────────────────────────────┐
│ MUTED COLOR CONCEPT │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ CORE COLOR (Full Saturation) │
│ ============================ │
│ │
│ ########################################################################## │
│ 100% opacity, 100% chroma - DOMINANT │
│ Used for: Buttons, icons, active elements │
│ │
│ ─────────────────────────────────────────────────────────────────────── │
│ │
│ MUTED COLOR (Reduced Opacity) │
│ ============================= │
│ │
│ ................########.............................................. │
│ 20% opacity - SUBTLE, BACKGROUND-APPROPRIATE │
│ Used for: Badge backgrounds, selection highlights, status areas │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Standard Muted Pattern: 80% Transparent
All muted colors use the same formula: 80% transparent (20% visible).┌─────────────────────────────────────────────────────────────────────────────────┐
│ MUTED COLOR DERIVATION ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ CORE COLORS (100%) MUTED VARIANTS (20%) │
│ ================== ==================== │
│ │
│ Primary (Blue) Primary Muted │
│ #################### ---> ................#### │
│ 100% opacity 20% opacity │
│ │
│ Success (Green) Success Muted │
│ #################### ---> ................#### │
│ 100% opacity 20% opacity │
│ │
│ Danger (Red) Danger Muted │
│ #################### ---> ................#### │
│ 100% opacity 20% opacity │
│ │
│ Warning (Yellow) Warning Muted │
│ #################### ---> ................#### │
│ 100% opacity 20% opacity │
│ │
│ PATTERN: All muted variants use 80% transparent = 20% opacity │
│ This creates consistent visual weight across semantic colors │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Background Elevation Model
Background colors form an elevation hierarchy with increasing lightness.┌─────────────────────────────────────────────────────────────────────────────────┐
│ DARK THEME BACKGROUND HIERARCHY │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ PRIMARY - Terminal, main content │ │
│ │ ##################################################################### │ │
│ │ Lightness: 0% (pure black) │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────────────────┐ │ │
│ │ │ SECONDARY - Sidebars, panels │ │ │
│ │ │ ########################################################### │ │ │
│ │ │ Lightness: 5.5% │ │ │
│ │ │ │ │ │
│ │ │ ┌───────────────────────────────────────────────────┐ │ │ │
│ │ │ │ TERTIARY - Elevated elements │ │ │ │
│ │ │ │ ################################################# │ │ │ │
│ │ │ │ Lightness: 7% │ │ │ │
│ │ │ │ (dropdowns, tooltips) │ │ │ │
│ │ │ └───────────────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ └───────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ LIGHTNESS PROGRESSION: 0% -> 5.5% -> 7% │
│ Each layer is slightly brighter, creating depth perception │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Light vs Dark Theme Backgrounds
┌─────────────────────────────────────────────────────────────────────────────────┐
│ BACKGROUND HIERARCHY COMPARISON │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ DARK THEME LIGHT THEME │
│ ========== =========== │
│ │
│ Primary: 0% L (black) Primary: 100% L (white) │
│ ######################## ........................ │
│ │
│ Secondary: 5.5% L Secondary: 96% L │
│ ####################.... ....#################### │
│ │
│ Tertiary: 7% L Tertiary: 92% L │
│ ##################...... ......################## │
│ │
│ Direction: Gets LIGHTER Direction: Gets DARKER │
│ (away from black) (away from white) │
│ │
│ Both follow the same principle: higher elevation = further from base │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Status Badge Backgrounds
Status badges use muted backgrounds for their semantic colors.┌─────────────────────────────────────────────────────────────────────────────────┐
│ STATUS BADGE COMPONENT MODEL │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ BADGE STRUCTURE: │
│ │
│ ┌────────────────────┐ │
│ │ [*] Running │ <- Status Badge │
│ └────────────────────┘ │
│ │ │ │
│ │ └── Text: 100% Core (full green) │
│ │ │
│ └── Icon: 100% Core (full green) │
│ │
│ Background: 20% Core (muted green) │
│ │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ALL STATUS TYPES: │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ SUCCESS WARNING DANGER │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ [*] Running │ │ [!] Pending │ │ [X] Failed │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │
│ │ Green 20% Yellow 20% Red 20% │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ CONSISTENCY: All status backgrounds use exactly 80% transparent │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Text Color Hierarchy
Text colors form their own hierarchy for visual importance.┌─────────────────────────────────────────────────────────────────────────────────┐
│ TEXT COLOR HIERARCHY │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ PRIMARY TEXT (64% Lightness) │
│ ................................................................ │
│ Brightest - clearly readable │
│ Use for: Main body text, headings │
│ │
│ SECONDARY TEXT (50% Lightness) │
│ ################################################ │
│ Medium - supporting role │
│ Use for: Descriptions, metadata │
│ │
│ TERTIARY TEXT (45% Lightness) │
│ ################################ │
│ Dim - hints and placeholders │
│ Use for: Placeholder text, timestamps │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Element Background System
Element backgrounds create depth for UI controls.┌─────────────────────────────────────────────────────────────────────────────────┐
│ ELEMENT BACKGROUND SYSTEM │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ PAGE BACKGROUND (Primary) │
│ ###################################################################### │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ PANEL (Secondary) │ │
│ │ ########################################################### │ │
│ │ │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ │ │
│ │ │ Button │ │ Dropdown v │ │ │
│ │ │ (element-bg-2) │ │ (element-bg-2) │ │ │
│ │ └─────────────────┘ └─────────────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────────┐ │ │
│ │ │ Input field (element-bg-1) │ │ │
│ │ │ ..................................................│ │ │
│ │ └───────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ Elements slightly brighter than their container │
│ Creates subtle but perceivable depth │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Neutral Borders and Dividers
Borders have very low chroma - they should not compete with content.┌─────────────────────────────────────────────────────────────────────────────────┐
│ BORDER AND DIVIDER SYSTEM │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ CONTENT COLORS (High Chroma: 0.15) │
│ ################################## │
│ Semantic colors command attention │
│ │
│ BORDER COLORS (Low Chroma: 0.02) │
│ .................................. │
│ Nearly achromatic - minimal visual pull │
│ │
│ WHY LOW CHROMA FOR BORDERS? │
│ =========================== │
│ │
│ * Borders should NOT compete with content colors │
│ * They exist in the "void" between colored regions │
│ * Just enough visibility to separate, never dominate │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Design Principles Summary
┌─────────────────────────────────────────────────────────────────────────────────┐
│ MUTED COLORS AND BACKGROUND DESIGN PRINCIPLES │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. CONSISTENT MUTED LEVEL │
│ All muted colors use 80% transparent (20% visible) │
│ Creates uniform visual weight across semantic categories │
│ │
│ 2. BACKGROUND ELEVATION PROGRESSION │
│ Each level adds ~2-4% lightness in dark theme │
│ Higher elevation = brighter (further from black) │
│ │
│ 3. TEXT ON BACKGROUND CONTEXT │
│ Define text-on-background combinations explicitly │
│ Ensures sufficient contrast in all contexts │
│ │
│ 4. NEUTRAL BORDERS │
│ Border colors have very low chroma (nearly gray) │
│ Minimal visual competition with content │
│ │
│ 5. ADAPTIVE DIVIDERS │
│ Dividers adapt to theme automatically │
│ Dark theme: light divider │ Light theme: dark divider │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Summary: Muted Color Pattern Reference
┌─────────────────────────────────────────────────────────────────────────────────┐
│ MUTED PATTERN REFERENCE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ COLOR CORE MUTED (20%) VISUAL │
│ ───── ──── ─────────── ────── │
│ Primary Blue Blue tint ....####................ │
│ Success Green Green tint ....####................ │
│ Danger Red Red tint ....####................ │
│ Warning Yellow Yellow tint ....####................ │
│ │
│ BACKGROUND DARK THEME LIGHT THEME PURPOSE │
│ ────────── ────────── ─────────── ─────── │
│ Primary 0% L 100% L Main content │
│ Secondary 5.5% L 96% L Sidebars │
│ Tertiary 7% L 92% L Elevated elements │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Transparency Patterns
Learn about overlay systems and transparency levels