The Muted Color Concept
Muted colors are subdued versions of vibrant Core Colors. They serve critical UI functions.Copy
+---------------------------------------------------------------------------------+
| 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).Copy
+---------------------------------------------------------------------------------+
| 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.Copy
+---------------------------------------------------------------------------------+
| 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
Copy
+---------------------------------------------------------------------------------+
| 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.Copy
+---------------------------------------------------------------------------------+
| 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.Copy
+---------------------------------------------------------------------------------+
| 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.Copy
+---------------------------------------------------------------------------------+
| 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.Copy
+---------------------------------------------------------------------------------+
| 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
Copy
+---------------------------------------------------------------------------------+
| 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
Copy
+---------------------------------------------------------------------------------+
| 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