WDP Part 10: Visual Presentation Guidelines

# Error (bold red)
echo -e "\x1b[1;31m❌ Error:\x1b[0m Operation failed"

# Warning (yellow)
echo -e "\x1b[33m⚠️  Warning:\x1b[0m Quota at 85%"

# Success (bold green)
echo -e "\x1b[1;32m✅ Success:\x1b[0m Build complete"

# Info (cyan)
echo -e "\x1b[36mℹ️  Info:\x1b[0m Server started on port 8080"

/* Severity text colors - Light Mode (Radix Colors step 11/9) */
.severity-error { color: #ce2c31; }      /* red-11 */
.severity-blocked { color: #dc3e42; }    /* red-10 */
.severity-critical { color: #cc4e00; }   /* orange-11 */
.severity-warning { color: #ab6400; }    /* amber-11 */
.severity-help { color: #218358; }       /* green-11 */
.severity-success { color: #30a46c; }    /* green-9 */
.severity-completed { color: #008573; }  /* teal-11 */
.severity-info { color: #0d74ce; }       /* blue-11 */
.severity-trace { color: #60646c; }      /* slate-11 */

/* Severity text colors - Dark Mode (Radix Colors dark scale step 11/10) */
@media (prefers-color-scheme: dark) {
  .severity-error { color: #ff9592; }      /* red-11 (dark) */
  .severity-blocked { color: #ec5d5e; }    /* red-10 (dark) */
  .severity-critical { color: #ffa057; }   /* orange-11 (dark) */
  .severity-warning { color: #ffca16; }    /* amber-11 (dark) */
  .severity-help { color: #3dd68c; }       /* green-11 (dark) */
  .severity-success { color: #33b074; }    /* green-10 (dark) */
  .severity-completed { color: #0bd8b6; }  /* teal-11 (dark) */
  .severity-info { color: #70b8ff; }       /* blue-11 (dark) */
  .severity-trace { color: #b0b4ba; }      /* slate-11 (dark) */
}

:root {
  /* Light mode (default) - Radix Colors step 11/9 */
  --severity-error: #ce2c31;      /* red-11 */
  --severity-blocked: #dc3e42;    /* red-10 */
  --severity-critical: #cc4e00;   /* orange-11 */
  --severity-warning: #ab6400;    /* amber-11 */
  --severity-help: #218358;       /* green-11 */
  --severity-success: #30a46c;    /* green-9 */
  --severity-completed: #008573;  /* teal-11 */
  --severity-info: #0d74ce;       /* blue-11 */
  --severity-trace: #60646c;      /* slate-11 */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode - Radix Colors dark scale step 11/10 */
    --severity-error: #ff9592;      /* red-11 (dark) */
    --severity-blocked: #ec5d5e;    /* red-10 (dark) */
    --severity-critical: #ffa057;   /* orange-11 (dark) */
    --severity-warning: #ffca16;    /* amber-11 (dark) */
    --severity-help: #3dd68c;       /* green-11 (dark) */
    --severity-success: #33b074;    /* green-10 (dark) */
    --severity-completed: #0bd8b6;  /* teal-11 (dark) */
    --severity-info: #70b8ff;       /* blue-11 (dark) */
    --severity-trace: #b0b4ba;      /* slate-11 (dark) */
  }
}

/* Usage */
.severity-error { color: var(--severity-error); }
.severity-warning { color: var(--severity-warning); }

.badge-error {
  color: #ce2c31;           /* red-11 */
  background-color: #feebec; /* red-3 */
  border: 1px solid #fdbdbe; /* red-6 */
}

.badge-success {
  color: #218358;           /* green-11 */
  background-color: #e6f6eb; /* green-3 */
  border: 1px solid #adddc0; /* green-6 */
}

.alert-warning {
  color: #ab6400;            /* amber-11 */
  background-color: #fff7c2; /* amber-3 */
  border-left: 4px solid #e9c162; /* amber-7 */
  padding: 1rem;
}

@media (prefers-color-scheme: dark) {
  .badge-error {
    color: #ff9592;           /* red-11 (dark) */
    background-color: #3b1219; /* red-3 (dark) */
    border: 1px solid #72232d; /* red-6 (dark) */
  }

  .badge-success {
    color: #3dd68c;           /* green-11 (dark) */
    background-color: #132d21; /* green-3 (dark) */
    border: 1px solid #20573e; /* green-6 (dark) */
  }

  .alert-warning {
    color: #ffca16;           /* amber-11 (dark) */
    background-color: #302008; /* amber-3 (dark) */
    border-left: 4px solid #714f19; /* amber-7 (dark) */
    padding: 1rem;
  }
}

:root {
  /* Light mode backgrounds (default) - Radix Colors step 3/4 */
  --bg-error: #feebec;      /* red-3 */
  --bg-blocked: #ffdbdc;    /* red-4 */
  --bg-critical: #ffefd6;   /* orange-3 */
  --bg-warning: #fff7c2;    /* amber-3 */
  --bg-help: #e6f6eb;       /* green-3 */
  --bg-success: #d6f1df;    /* green-4 */
  --bg-completed: #e0f8f3;  /* teal-3 */
  --bg-info: #e6f4fe;       /* blue-3 */
  --bg-trace: #f0f0f3;      /* slate-3 */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode backgrounds - Radix Colors dark scale step 3/4 */
    --bg-error: #3b1219;      /* red-3 (dark) */
    --bg-blocked: #500f1c;    /* red-4 (dark) */
    --bg-critical: #331e0b;   /* orange-3 (dark) */
    --bg-warning: #302008;    /* amber-3 (dark) */
    --bg-help: #132d21;       /* green-3 (dark) */
    --bg-success: #113b29;    /* green-4 (dark) */
    --bg-completed: #0d2d2a;  /* teal-3 (dark) */
    --bg-info: #0d2847;       /* blue-3 (dark) */
    --bg-trace: #212225;      /* slate-3 (dark) */
  }
}

pub enum Severity {
    Error, Warning, Critical, Blocked,
    Success, Completed, Help, Info, Trace,
}

impl Severity {
    pub const fn emoji(&self) -> &'static str {
        match self {
            Self::Error => "❌",
            Self::Blocked => "🚫",
            Self::Critical => "🔥",
            Self::Warning => "⚠️",
            Self::Help => "💡",
            Self::Success => "✅",
            Self::Completed => "✔️",
            Self::Info => "ℹ️",
            Self::Trace => "🔍",
        }
    }
    
    pub const fn ansi_color(&self) -> &'static str {
        match self {
            Self::Error => "\x1b[1;31m",
            Self::Blocked => "\x1b[31m",
            Self::Critical => "\x1b[1;33m",
            Self::Warning => "\x1b[33m",
            Self::Help => "\x1b[32m",
            Self::Success => "\x1b[1;32m",
            Self::Completed => "\x1b[32m",
            Self::Info => "\x1b[36m",
            Self::Trace => "\x1b[2;34m",
        }
    }
    
    pub const ANSI_RESET: &'static str = "\x1b[0m";
}

// Usage
println!("{} {}{}{} Operation failed",
    Severity::Error.emoji(),
    Severity::Error.ansi_color(),
    "Error:",
    Severity::ANSI_RESET
);

interface SeverityStyle {
  emoji: string;
  color: string;
  bgColor: string;
}

const SEVERITY_STYLES: Record<string, SeverityStyle> = {
  // Light mode Radix Colors
  E: { emoji: '❌', color: '#ce2c31', bgColor: '#feebec' },  // red-11, red-3
  W: { emoji: '⚠️', color: '#ab6400', bgColor: '#fff7c2' },  // amber-11, amber-3
  C: { emoji: '🔥', color: '#cc4e00', bgColor: '#ffefd6' },  // orange-11, orange-3
  B: { emoji: '🚫', color: '#dc3e42', bgColor: '#ffdbdc' },  // red-10, red-4
  S: { emoji: '✅', color: '#30a46c', bgColor: '#d6f1df' },  // green-9, green-4
  K: { emoji: '✔️', color: '#008573', bgColor: '#e0f8f3' },  // teal-11, teal-3
  H: { emoji: '💡', color: '#218358', bgColor: '#e6f6eb' },  // green-11, green-3
  I: { emoji: 'ℹ️', color: '#0d74ce', bgColor: '#e6f4fe' },  // blue-11, blue-3
  T: { emoji: '🔍', color: '#60646c', bgColor: '#f0f0f3' },  // slate-11, slate-3
};

// React component
function DiagnosticBadge({ severity }: { severity: string }) {
  const style = SEVERITY_STYLES[severity];
  return (
    <span style={{
      color: style.color,
      backgroundColor: style.bgColor,
      padding: '0.25rem 0.5rem',
      borderRadius: '0.25rem',
      fontSize: '0.875rem',
      fontWeight: 500,
    }}>
      {style.emoji} {severity}
    </span>
  );
}

from enum import Enum

class Severity(Enum):
    ERROR = 'E'
    WARNING = 'W'
    CRITICAL = 'C'
    BLOCKED = 'B'
    SUCCESS = 'S'
    COMPLETED = 'K'
    HELP = 'H'
    INFO = 'I'
    TRACE = 'T'
    
    def emoji(self) -> str:
        return {
            'E': '❌', 'W': '⚠️', 'C': '🔥', 'B': '🚫',
            'S': '✅', 'K': '✔️', 'H': '💡', 'I': 'ℹ️', 'T': '🔍',
        }[self.value]
    
    def ansi_color(self) -> str:
        return {
            'E': '\x1b[1;31m', 'W': '\x1b[33m', 'C': '\x1b[1;33m',
            'B': '\x1b[31m', 'S': '\x1b[1;32m', 'K': '\x1b[32m',
            'H': '\x1b[32m', 'I': '\x1b[36m', 'T': '\x1b[2;34m',
        }[self.value]
    
    @staticmethod
    def reset() -> str:
        return '\x1b[0m'
    
    def format_message(self, message: str) -> str:
        return f"{self.emoji()} {self.ansi_color()}{self.name}:{self.reset()} {message}"

# Usage
print(Severity.ERROR.format_message("Operation failed"))
print(Severity.SUCCESS.format_message("Build complete"))

<!-- Good: Semantic HTML with ARIA -->
<div role="alert" aria-live="polite">
  <span class="severity-icon" aria-label="Error">❌</span>
  <span class="severity-text">Error:</span>
  <span class="diagnostic-message">Operation failed</span>
</div>

<!-- Better: Use visually-hidden text -->
<div role="alert">
  <span class="sr-only">Error severity:</span>
  <span aria-hidden="true">❌</span>
  <strong>Error:</strong> Operation failed
</div>

@media (prefers-contrast: high) {
  .severity-error {
    border: 2px solid currentColor;
    font-weight: bold;
  }
}

1. Full experience: Emoji + Color + Formatting
2. No emoji: ASCII + Color + Formatting
3. No color: ASCII + Text labels
4. Plain text: Severity code + Message

Level 1: ❌ Error: Operation failed
Level 2: [E] Error: Operation failed (in red)
Level 3: [E] Error: Operation failed
Level 4: E.AUTH.TOKEN.001: Operation failed

// Check for color support
fn supports_color() -> bool {
    std::env::var("NO_COLOR").is_err() 
        && (atty::is(atty::Stream::Stdout) 
            || std::env::var("FORCE_COLOR").is_ok())
}

// Check for emoji support
fn supports_emoji() -> bool {
    std::env::var("NO_EMOJI").is_err()
        && !cfg!(target_os = "windows") // Or check Windows version
}

# .wdpconfig
[display]
emoji = true
color = "auto"  # auto, always, never
style = "default"  # default, minimal, verbose

[colors]
# Radix Colors (light mode defaults)
error = "#ce2c31"      # red-11
warning = "#ab6400"    # amber-11
success = "#30a46c"    # green-9