AI Corruption Aesthetics
Building a Production-Ready Glassmorphic Design System
TL;DR
- Corrupted Theme is a production-ready glassmorphic design system built to enterprise standards (Meta/Google/Netflix level).
- Includes 50+ components, WCAG AA compliance, Docker showcase, and secure Celeste AI widget integration.
- Available on npm as
@whykusanagi/corrupted-themewith modular imports and full documentation.
Why Build a Design System?
After building whykusanagi.xyz, I realized the glassmorphic aesthetic I'd created could be reused across multiple projects. Instead of copying CSS files, I wanted a proper design system with:
- Systemized tokens: CSS variables for colors, typography, spacing, and motion
- Component library: 50+ reusable UI components (buttons, forms, navigation, galleries, countdowns)
- Enterprise standards: Coding guidelines matching Meta/Google/Netflix internal libraries
- Developer experience: npm distribution, Docker showcase, comprehensive documentation
Architecture & Structure
The theme follows a modular CSS architecture with clear separation of concerns:
- Variables: Design tokens (colors, spacing, z-index scale)
- Typography: Font stack and text hierarchy
- Glassmorphism: Shared glass effect utilities
- Animations: Keyframes and motion (must load before components)
- Components: UI primitives (buttons, cards, forms, navigation)
- Utilities: Spacing, layout, and helper classes
Import order matters! Components depend on animations, so the build system enforces correct loading sequence.
Key Features
Glassmorphism-First Design: Layered depth, gradients, and scanlines create a cinematic cyberpunk aesthetic. The glass backdrop system supports both static images and video backgrounds with proper z-index stacking.
Extension Components: Production-tested components from whykusanagi.xyz including galleries with filtering/lightbox, social link-in-bio layouts, countdown widgets with configurable shapes, and NSFW content blur overlays.
Celeste AI Widget Integration: Secure proxy-based integration that never exposes credentials to the browser. All API calls route through a hardened proxy server, ready for Cloudflare Workers deployment.
Nikke Game Utilities: Specialized components for Goddess of Victory: NIKKE including element pills, team position cards, and unit displays that match the game's visual language.
Development Workflow
The project uses PostCSS for building, with watch mode for development. The Docker showcase serves the complete component library at examples/showcase-complete.html for instant QA.
All code follows strict standards: flat component classes (`.btn.secondary`), tokens in variables.css, utilities never override components, and ES modules for JavaScript with side-effect-free initialization functions.
Ask Celeste
Q: Can I use this in commercial projects?
A: Yes! It's MIT licensed, so you can use it in any project—commercial or personal. Just include the license notice.
Q: How do I customize the colors?
A: Override CSS variables in your own stylesheet. The theme uses --accent, --glass, --text tokens that you can customize without modifying the source.