Walnut Analytics Error State
A sophisticated, warm-toned error state designed for analytics dashboard platforms.
Features
- Large error code — Oversized 503 display in faded walnut serif type
- System diagnostics — Four-row status panel showing service health (error/warning/ok)
- Retry mechanism — Animated spinner on retry button with disabled state
- Wood-grain pattern — Subtle wavy SVG background texture
- Error reference — Auto-generated error ID with region and timestamp
- Walnut palette — Brown (#5c4033) and warm red (#c0392b) accents on cream
- Full dark mode — Deep walnut background with warm golden-brown accents
Dependencies
@/components/vue-ui/badge — Error status badge@/components/vue-ui/button — Retry and back buttons@/components/vue-ui/card — Diagnostics panel@/components/vue-ui/separator — Visual dividerslucide-vue-next — AlertTriangle, RefreshCw, ArrowLeft, HelpCircle, Server, WifiOff icons
Customization
- Error code: Change from 503 to any HTTP status code
- Diagnostics: Edit the diagnostics array to match your actual services
- Colors: Swap walnut (#5c4033) for another warm brown
- Typography: Replace Crimson Pro/Albert Sans with your brand fonts
