Ember Support Error State
A brutalist-styled 500 error page designed for customer support and help desk platforms.
Features
- Giant 500 display — Oversized serif error code with ember glow
- Retry mechanism — Animated spinner on retry button with disabled state
- Support ticket CTA — Quick link to open a support ticket
- System status panel — 5-service health dashboard with operational/degraded/outage indicators
- Brutalist aesthetics — Offset box shadows, heavy borders, raw typography
- Error reference — Auto-generated error ID and timestamp
- Full dark mode — Warm dark palette with orange accents
Dependencies
@/components/vue-ui/badge — Status badge@/components/vue-ui/button — CTA buttons@/components/vue-ui/card — System status card@/components/vue-ui/separator — Visual dividerslucide-vue-next — RefreshCw, Headset, ExternalLink, CircleDot icons
Customization
- Systems: Edit the
systems array to reflect your actual service status
- Colors: Swap orange palette for another warm tone
- Typography: Replace Playfair Display with another serif display font
