--- name: Arcanea Design System description: Complete visual design language for Arcanea - cosmic theme tokens, component patterns, animation standards, and Academy-specific aesthetics version: 1.0.0 --- # 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-primary-100: #ede9fe; --arcanea-primary-200: #ddd6fe; --arcanea-primary-300: #c4b5fd; --arcanea-primary-400: #a78bfa; --arcanea-primary-500: #8b5cf6; \/* Primary action *\/ --arcanea-primary-600: #7c3aed; --arcanea-primary-700: #6d28d9; --arcanea-primary-800: #5b21b6; --arcanea-primary-900: #4c1d95; \/* Accent - Cyan Glow *\/ --arcanea-accent-50: #ecfeff; --arcanea-accent-100: #cffafe; --arcanea-accent-200: #a5f3fc; --arcanea-accent-300: #67e8f9; --arcanea-accent-400: #22d3ee; --arcanea-accent-500: #06b6d4; \/* Secondary action *\/ --arcanea-accent-600: #0891b2; --arcanea-accent-700: #0e7490; --arcanea-accent-800: #155e75; --arcanea-accent-900: #164e63; \/* Gold - Achievement *\/ --arcanea-gold-50: #fffbeb; --arcanea-gold-100: #fef3c7; --arcanea-gold-200: #fde68a; --arcanea-gold-300: #fcd34d; --arcanea-gold-400: #fbbf24; --arcanea-gold-500: #f59e0b; \/* Achievement, premium *\/ --arcanea-gold-600: #d97706; --arcanea-gold-700: #b45309; --arcanea-gold-800: #92400e; --arcanea-gold-900: #78350f; \/* Text *\/ --arcanea-text-primary: #ffffff; --arcanea-text-secondary: rgba(255, 255, 255, 0.7); --arcanea-text-tertiary: rgba(255, 255, 255, 0.5); --arcanea-text-muted: rgba(255, 255, 255, 0.3); \/* Semantic *\/ --arcanea-success: #10b981; --arcanea-warning: #f59e0b; --arcanea-error: #ef4444; --arcanea-info: #3b82f6; ``` ### Academy Color Palettes ```css \/* Atlantean Academy - Water & Wisdom *\/ --atlantean-deep: #0a2540; \/* Deep ocean *\/ --atlantean-primary: #0ea5e9; \/* Bright water *\/ --atlantean-secondary: #06b6d4; \/* Teal current *\/ --atlantean-accent: #5eead4; \/* Bioluminescence *\/ --atlantean-glow: rgba(14, 165, 233, 0.3); \/* Draconic Academy - Fire & Sky *\/ --draconic-shadow: #1c0a0a; \/* Ember darkness *\/ --draconic-primary: #ef4444; \/* Dragon fire *\/ --draconic-secondary: #f97316; \/* Flame orange *\/ --draconic-accent: #fbbf24; \/* Gold scale *\/ --draconic-sky: #38bdf8; \/* Sky blue *\/ --draconic-glow: rgba(239, 68, 68, 0.3); \/* Creation & Light Academy - Sound & Light *\/ --creation-void: #0a0a1a; \/* Musical silence *\/ --creation-primary: #f5f5f5; \/* Pure light *\/ --creation-secondary: #8b5cf6; \/* Violet frequency *\/ --creation-accent: #f59e0b; \/* Golden note *\/ --creation-prismatic: linear-gradient(90deg, #ef4444, #f97316, #fbbf24, #22c55e, #3b82f6, #8b5cf6, #ec4899); --creation-glow: rgba(245, 245, 245, 0.2); ``` ## Typography ### Font Stack ```css \/* Display - For heroes and major headings *\/ --font-display: 'Cal Sans', 'Inter', system-ui, sans-serif; \/* Body - For all content *\/ --font-body: 'Inter', system-ui, -apple-system, sans-serif; \/* Mono - For code and technical content *\/ --font-mono: 'JetBrains Mono', 'Fira Code', monospace; ``` ### Type Scale ```css \/* Base: 16px *\/ --text-xs: 0.75rem; \/* 12px *\/ --text-sm: 0.875rem; \/* 14px *\/ --text-base: 1rem; \/* 16px *\/ --text-lg: 1.125rem; \/* 18px *\/ --text-xl: 1.25rem; \/* 20px *\/ --text-2xl: 1.5rem; \/* 24px *\/ --text-3xl: 1.875rem; \/* 30px *\/ --text-4xl: 2.25rem; \/* 36px *\/ --text-5xl: 3rem; \/* 48px *\/ --text-6xl: 3.75rem; \/* 60px *\/ --text-7xl: 4.5rem; \/* 72px *\/ ``` ### Line Heights ```css --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; ``` ## Spacing System ### Base Scale ```css \/* 4px base *\/ --space-0: 0; --space-1: 0.25rem; \/* 4px *\/ --space-2: 0.5rem; \/* 8px *\/ --space-3: 0.75rem; \/* 12px *\/ --space-4: 1rem; \/* 16px *\/ --space-5: 1.25rem; \/* 20px *\/ --space-6: 1.5rem; \/* 24px *\/ --space-8: 2rem; \/* 32px *\/ --space-10: 2.5rem; \/* 40px *\/ --space-12: 3rem; \/* 48px *\/ --space-16: 4rem; \/* 64px *\/ --space-20: 5rem; \/* 80px *\/ --space-24: 6rem; \/* 96px *\/ ``` ## Border Radius ```css --radius-none: 0; --radius-sm: 0.25rem; \/* 4px *\/ --radius-md: 0.375rem; \/* 6px *\/ --radius-lg: 0.5rem; \/* 8px *\/ --radius-xl: 0.75rem; \/* 12px *\/ --radius-2xl: 1rem; \/* 16px *\/ --radius-3xl: 1.5rem; \/* 24px *\/ --radius-full: 9999px; ``` ## Shadows & Effects ### Glow Effects ```css \/* Standard Glows *\/ --glow-primary: 0 0 20px rgba(139, 92, 246, 0.4); --glow-accent: 0 0 20px rgba(6, 182, 212, 0.4); --glow-gold: 0 0 20px rgba(245, 158, 11, 0.4); \/* Academy Glows *\/ --glow-atlantean: 0 0 30px rgba(14, 165, 233, 0.3); --glow-draconic: 0 0 30px rgba(239, 68, 68, 0.3); --glow-creation: 0 0 30px rgba(255, 255, 255, 0.2); \/* Interactive States *\/ --glow-hover: 0 0 40px rgba(139, 92, 246, 0.5); --glow-focus: 0 0 0 3px rgba(139, 92, 246, 0.3); --glow-active: 0 0 60px rgba(139, 92, 246, 0.6); ``` ### Box Shadows ```css --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.6); \/* Cosmic Shadows (with glow) *\/ --shadow-cosmic: 0 10px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 92, 246, 0.1); --shadow-cosmic-lg: 0 20px 25px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.15); ``` ### Gradients ```css \/* Background Gradients *\/ --gradient-cosmic: linear-gradient(180deg, var(--arcanea-cosmic-900) 0%, var(--arcanea-cosmic-950) 100%); --gradient-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); \/* Accent Gradients *\/ --gradient-primary: linear-gradient(135deg, var(--arcanea-primary-500) 0%, var(--arcanea-primary-600) 100%); --gradient-glow: linear-gradient(135deg, var(--arcanea-primary-500) 0%, var(--arcanea-accent-500) 100%); \/* Academy Gradients *\/ --gradient-atlantean: linear-gradient(180deg, rgba(14, 165, 233, 0.2) 0%, transparent 100%); --gradient-draconic: linear-gradient(180deg, rgba(239, 68, 68, 0.2) 0%, transparent 100%); --gradient-creation: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%); ``` ## Animation Standards ### Timing Functions ```css --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); ``` ### Duration Scale ```css --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-slowest: 1000ms; ``` ### Common Animations ```css \/* Fade In *\/ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } \/* Slide Up *\/ @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } \/* Scale In *\/ @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } \/* Glow Pulse *\/ @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); } 50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.6); } } \/* Float *\/ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } \/* Shimmer (for loading) *\/ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } \/* Star Twinkle *\/ @keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } ``` ### Framer Motion Variants ```typescript \/\/ Standard Transitions export const transitions = { spring: { type: "spring", stiffness: 300, damping: 30 }, smooth: { type: "tween", ease: [0.4, 0, 0.2, 1], duration: 0.25 }, bounce: { type: "spring", stiffness: 400, damping: 10 }, }; \/\/ Fade In export const fadeIn = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: transitions.smooth, }; \/\/ Slide Up export const slideUp = { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 20 }, transition: transitions.spring, }; \/\/ Scale export const scale = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, transition: transitions.spring, }; \/\/ Stagger Container export const stagger = { animate: { transition: { staggerChildren: 0.1, }, }, }; ``` ## Component Patterns ### Cards ```tsx \/\/ Base Card

\/\/ Academy Card (Atlantean example)

``` ### Buttons ```tsx \/\/ Primary Button