Error State Color Design Guide for Tailwind CSS

Feedback State Colors

Feedback states communicate outcomes to users. Each type needs a distinct, intuitive color: red for errors, amber for warnings, blue for informational, and green for success. Consistency across your app is essential.

Complete Alert System

<!-- Error -->
<div class="bg-red-50 border border-red-200 text-red-800 rounded-lg p-4 flex items-start gap-3">
  <svg class="w-5 h-5 text-red-500 mt-0.5 shrink-0"><!-- x-circle --></svg>
  <div>
    <p class="font-medium">Payment failed</p>
    <p class="text-sm text-red-700 mt-1">Your card was declined. Please try a different payment method.</p>
  </div>
</div>

<!-- Warning -->
<div class="bg-amber-50 border border-amber-200 text-amber-800 rounded-lg p-4 flex items-start gap-3">
  <svg class="w-5 h-5 text-amber-500 mt-0.5 shrink-0"><!-- alert-triangle --></svg>
  <div>
    <p class="font-medium">Storage almost full</p>
    <p class="text-sm text-amber-700 mt-1">You have used 90% of your storage quota.</p>
  </div>
</div>

<!-- Success -->
<div class="bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-lg p-4 flex items-start gap-3">
  <svg class="w-5 h-5 text-emerald-500 mt-0.5 shrink-0"><!-- check-circle --></svg>
  <div>
    <p class="font-medium">Changes saved</p>
    <p class="text-sm text-emerald-700 mt-1">Your profile has been updated successfully.</p>
  </div>
</div>

State Color Tokens

• Error: bg-red-50, border-red-200, text-red-800, icon text-red-500
• Warning: bg-amber-50, border-amber-200, text-amber-800, icon text-amber-500
• Info: bg-blue-50, border-blue-200, text-blue-800, icon text-blue-500
• Success: bg-emerald-50, border-emerald-200, text-emerald-800, icon text-emerald-500

Accessibility Requirements

• Always include a text message; never rely on color alone
• Use icons with aria-hidden and descriptive text alongside them
• Alert text (e.g., red-800 on red-50) must meet 4.5:1 contrast
• Use role='alert' for errors that appear dynamically
• Ensure dark mode versions maintain the same semantic meaning