error 500 server-error minimal support minimal
Error 500
Clean 500 error page with warning icon, troubleshooting tips, retry button, and support contact.
minimal Responsive
Live Preview
Sections
warning-iconerror-messagetroubleshootingaction-buttonssupport-contact
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>500 — Something Went Wrong</title>
<meta name="description" content="An unexpected error occurred. Our team has been notified." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens — serious light/indigo identity */
:root {
--color-primary: #4f46e5;
--color-primary-hover: #4338ca;
--color-primary-soft: #eef2ff;
--color-primary-text: #ffffff;
}
</style>
</head>
<body class="min-h-screen bg-slate-50 antialiased">
<!-- Navigation -->
<nav class="ws-navbar border-b border-slate-100 bg-white" aria-label="Main navigation">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-14">
<a href="/" class="flex items-center gap-2">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect width="32" height="32" rx="8" fill="#4F46E5" />
<path d="M10 11h12M10 16h8M10 21h10" stroke="white" stroke-width="2" stroke-linecap="round" />
</svg>
<span class="text-lg font-bold text-slate-900">Acme</span>
</a>
<a href="#" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Status Page</a>
</div>
</nav>
<div class="ws-error min-h-[calc(100vh-56px)] flex items-center justify-center p-6">
<div class="w-full max-w-xl text-center">
<!-- Warning Icon -->
<div class="mx-auto w-20 h-20 rounded-2xl bg-amber-50 border border-amber-100 flex items-center justify-center mb-8">
<svg class="w-10 h-10 text-amber-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<!-- Error Code Badge -->
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-50 border border-amber-200 text-sm font-semibold text-amber-700 mb-4">
Error 500
</div>
<h1 class="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">Something went wrong</h1>
<p class="text-lg text-slate-500 leading-relaxed mb-4 max-w-md mx-auto">
We encountered an unexpected error while processing your request. Don't worry — this isn't your fault.
</p>
<!-- Team Notified Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-50 border border-emerald-100 mb-10">
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
<p class="text-sm text-emerald-700 font-medium">Our engineering team has been automatically notified</p>
</div>
<!-- What You Can Try -->
<div class="ws-steps bg-white rounded-2xl border border-slate-200 p-6 sm:p-8 mb-8 text-left">
<h2 class="text-base font-semibold text-slate-900 mb-4">What you can try</h2>
<ul class="space-y-4">
<li class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background-color: var(--color-primary-soft);">
<svg class="w-5 h-5" style="color: var(--color-primary);" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" />
</svg>
</div>
<div>
<p class="text-sm font-medium text-slate-900">Refresh the page</p>
<p class="text-sm text-slate-500 mt-0.5">Sometimes a simple reload fixes temporary issues.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background-color: var(--color-primary-soft);">
<svg class="w-5 h-5" style="color: var(--color-primary);" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<p class="text-sm font-medium text-slate-900">Wait a few minutes</p>
<p class="text-sm text-slate-500 mt-0.5">If the issue is on our end, our team is likely already working on it.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background-color: var(--color-primary-soft);">
<svg class="w-5 h-5" style="color: var(--color-primary);" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
</svg>
</div>
<div>
<p class="text-sm font-medium text-slate-900">Check our status page</p>
<p class="text-sm text-slate-500 mt-0.5">View real-time system status and any known incidents at <a href="#" class="font-medium transition-colors" style="color: var(--color-primary);" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">status.acme.com</a>.</p>
</div>
</li>
<li class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background-color: var(--color-primary-soft);">
<svg class="w-5 h-5" style="color: var(--color-primary);" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</div>
<div>
<p class="text-sm font-medium text-slate-900">Clear your cache</p>
<p class="text-sm text-slate-500 mt-0.5">Try clearing your browser cache and cookies, then reload.</p>
</div>
</li>
</ul>
</div>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-10">
<button type="button" onclick="location.reload()"
class="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl text-white font-semibold transition shadow-sm"
style="background-color: var(--color-primary);"
onmouseover="this.style.backgroundColor='var(--color-primary-hover)'" onmouseout="this.style.backgroundColor='var(--color-primary)'">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" />
</svg>
Try again
</button>
<a href="/"
class="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl border border-slate-300 text-slate-700 font-semibold hover:bg-slate-100 transition">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
Go home
</a>
</div>
<!-- Error Details (collapsible) -->
<details class="bg-white rounded-2xl border border-slate-200 text-left mb-8">
<summary class="px-6 py-4 cursor-pointer text-sm font-medium text-slate-700 hover:text-slate-900 flex items-center justify-between">
Technical details
<svg class="w-5 h-5 text-slate-400 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</summary>
<div class="px-6 pb-4 border-t border-slate-100 pt-4">
<div class="bg-slate-50 rounded-xl p-4 font-mono text-xs text-slate-500 space-y-1.5">
<p><span class="text-slate-400">Error ID:</span> 8f4a2c1e-b3d9-4e7f-a612-9c8d5e3f1b2a</p>
<p><span class="text-slate-400">Timestamp:</span> 2026-03-21T14:32:07.892Z</p>
<p><span class="text-slate-400">Status:</span> 500 Internal Server Error</p>
<p><span class="text-slate-400">Path:</span> /api/v1/resource</p>
<p><span class="text-slate-400">Region:</span> us-east-1</p>
</div>
<p class="text-xs text-slate-400 mt-3">
Include this information when contacting support for faster resolution.
</p>
</div>
</details>
<!-- Support Contact -->
<div class="ws-contact border-t border-slate-200 pt-8 mb-8">
<p class="text-sm font-medium text-slate-700 mb-4">Need immediate help?</p>
<div class="grid grid-cols-3 gap-3">
<a href="mailto:support@acme.com" class="flex flex-col items-center gap-2 p-4 rounded-xl bg-white border border-slate-200 transition group" onmouseover="this.style.borderColor='color-mix(in srgb, var(--color-primary) 40%, transparent)';this.style.backgroundColor='color-mix(in srgb, var(--color-primary-soft) 30%, white)'" onmouseout="this.style.borderColor='';this.style.backgroundColor=''">
<svg class="w-6 h-6 text-slate-400 group-hover:text-indigo-500 transition" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
<span class="text-xs font-medium text-slate-600 group-hover:text-indigo-700 transition">Email</span>
</a>
<a href="#" class="flex flex-col items-center gap-2 p-4 rounded-xl bg-white border border-slate-200 transition group" onmouseover="this.style.borderColor='color-mix(in srgb, var(--color-primary) 40%, transparent)';this.style.backgroundColor='color-mix(in srgb, var(--color-primary-soft) 30%, white)'" onmouseout="this.style.borderColor='';this.style.backgroundColor=''">
<svg class="w-6 h-6 text-slate-400 group-hover:text-indigo-500 transition" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
<span class="text-xs font-medium text-slate-600 group-hover:text-indigo-700 transition">Live Chat</span>
</a>
<a href="#" class="flex flex-col items-center gap-2 p-4 rounded-xl bg-white border border-slate-200 transition group" onmouseover="this.style.borderColor='color-mix(in srgb, var(--color-primary) 40%, transparent)';this.style.backgroundColor='color-mix(in srgb, var(--color-primary-soft) 30%, white)'" onmouseout="this.style.borderColor='';this.style.backgroundColor=''">
<svg class="w-6 h-6 text-slate-400 group-hover:text-indigo-500 transition" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
</svg>
<span class="text-xs font-medium text-slate-600 group-hover:text-indigo-700 transition">Phone</span>
</a>
</div>
</div>
<!-- Recent Updates -->
<div class="bg-white rounded-2xl border border-slate-200 p-6 text-left mb-8">
<h3 class="text-sm font-semibold text-slate-900 mb-4">Recent system updates</h3>
<ul class="space-y-3">
<li class="flex items-start gap-3">
<div class="w-2 h-2 rounded-full bg-emerald-500 mt-1.5 shrink-0"></div>
<div>
<p class="text-sm text-slate-700">All systems operational</p>
<p class="text-xs text-slate-400 mt-0.5">Today, 2:15 PM EST</p>
</div>
</li>
<li class="flex items-start gap-3">
<div class="w-2 h-2 rounded-full bg-amber-500 mt-1.5 shrink-0"></div>
<div>
<p class="text-sm text-slate-700">Investigating elevated error rates in API</p>
<p class="text-xs text-slate-400 mt-0.5">Today, 2:00 PM EST</p>
</div>
</li>
<li class="flex items-start gap-3">
<div class="w-2 h-2 rounded-full bg-emerald-500 mt-1.5 shrink-0"></div>
<div>
<p class="text-sm text-slate-700">Scheduled maintenance completed successfully</p>
<p class="text-xs text-slate-400 mt-0.5">Yesterday, 4:30 AM EST</p>
</div>
</li>
</ul>
<a href="#" class="inline-flex items-center gap-1 mt-4 text-sm font-medium transition-colors" style="color: var(--color-primary);" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
View full status history
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</a>
</div>
<!-- Footer -->
<p class="text-xs text-slate-400">
© 2026 Acme Inc. All rights reserved.
<span class="mx-1">·</span>
<a href="#" class="hover:text-slate-600 transition-colors">Privacy</a>
<span class="mx-1">·</span>
<a href="#" class="hover:text-slate-600 transition-colors">Terms</a>
</p>
</div>
</div>
</body>
</html>
Clean, minimal 500 error page with an amber warning icon, team-notified status badge, helpful troubleshooting list, Try Again / Go Home action buttons, and a support email footer.