Aubergine Error Page
A cinematic, editorial-style error page with deep aubergine purple accents and a broken media theme.
Features
- Large 404 heading with dramatic aubergine typography
- Broken film reel illustration crafted with CSS shapes and Lucide icons
- Witty editorial subtitle — "This Scene Has Been Cut"
- Go Back and Browse Catalog buttons for user recovery
- Decorative film strip elements on the sides
- Scattered film frame elements for artistic depth
- Merriweather serif typography for editorial feel
- Full light/dark mode support with WCAG AA contrast compliance
- Radial gradient backgrounds for dramatic atmosphere
Dependencies
lucide-react for icons (ArrowLeft, Home, FilmIcon, RotateCcw)- Shadcn UI components: Button, Separator
Customization
- Error Type: Change from 404 to 500 or custom error messages
- Colors: Adjust aubergine palette (
#4A0E4E, #6B2FA0) to match your brand
- Typography: Swap Merriweather for another serif font
- Illustration: Modify the film reel SVG elements for different themes
- Buttons: Wire up navigation logic to your router
