arcanea-design-systemlisted

# Arcanea Design System Skill ## Purpose This skill defines the complete visual design language for Arcanea, ensuring consistent, magical, and accessible interfaces across all platform features. Every component should feel like it belongs in the Kingdom of Light. ## Design Philosophy ### Core Principles 1. **Cosmic Elegance** - Dark, starlit backgrounds with luminous accents 2. **Magical Realism** - Fantastical elements grounded in usable UI 3. **Academy Identity** - Distinct visual languages for each Academy 4. **Accessible Magic** - Beauty that doesn't sacrifice usability 5. **Responsive Fluidity** - Adapts gracefully across all devices ### The Arcanean Aesthetic **What It Is:** - Dark, cosmic backgrounds - Gradient glows and light effects - Floating, ethereal elements - Subtle particle systems - Crystalline and fluid forms - Smooth, flowing animations **What It Isn't:** - Flat, corporate design - Harsh, angular brutalism - Cluttered fantasy kitsch - Inaccessible effects-only - Static, lifeless layouts ## Color System ### Core Palette ```css /* Cosmic Foundation */ --arcanea-cosmic-950: #050510; /* Deepest void */ --arcanea-cosmic-900: #0a0a1a; /* Primary background */ --arcanea-cosmic-800: #121230; /* Elevated surfaces */ --arcanea-cosmic-700: #1a1a45; /* Cards and containers */ --arcanea-cosmic-600: #252560; /* Borders and dividers */ /* Primary - Violet Magic */ --arcanea-primary-50: #f5f3ff; --arcanea-prima