From fe50b3279d01b15df6ed712f634c87c678ca1ba7 Mon Sep 17 00:00:00 2001 From: Anders Lehmann Pier Date: Fri, 13 Jun 2025 10:30:33 +0200 Subject: [PATCH] Add comprehensive visual design guide with complete styling system --- .../game-design/visual-design-guide.md | 510 ++++++++++++++++++ 1 file changed, 510 insertions(+) create mode 100644 knowledge-base/game-design/visual-design-guide.md diff --git a/knowledge-base/game-design/visual-design-guide.md b/knowledge-base/game-design/visual-design-guide.md new file mode 100644 index 0000000..1e1be14 --- /dev/null +++ b/knowledge-base/game-design/visual-design-guide.md @@ -0,0 +1,510 @@ +# Visual Design Guide - Neural Nexus + +## Design Philosophy + +Neural Nexus employs a contemporary glassmorphism aesthetic combined with high-tech neural network themes to create a premium, engaging visual experience that feels both modern and accessible. + +## Color System + +### Primary Palette +```css +:root { + /* Brand Colors */ + --neural-cyan: #00d4ff; /* Primary brand, active connections */ + --neural-magenta: #ff00ff; /* Secondary brand, UI accents */ + --neural-white: #ffffff; /* Text, highlights */ + + /* Game Element Colors */ + --source-green: #00ff64; /* Source nodes, success states */ + --target-orange: #ff6400; /* Target nodes, warnings */ + --normal-blue: #333366; /* Inactive normal nodes */ + --connection-active: #00d4ff; /* Active connections */ + + /* UI Colors */ + --background-dark: #0a0a0a; /* Deep background */ + --background-mid: #1a1a2e; /* Mid-tone background */ + --background-light: #16213e; /* Light background panels */ + --surface-glass: rgba(255, 255, 255, 0.1); /* Glassmorphism surfaces */ + --text-primary: #ffffff; /* Primary text */ + --text-secondary: rgba(255, 255, 255, 0.7); /* Secondary text */ + + /* Feedback Colors */ + --success-glow: rgba(0, 255, 100, 0.6); /* Success particle effects */ + --warning-pulse: rgba(255, 100, 0, 0.6); /* Warning animations */ + --error-highlight: rgba(255, 0, 100, 0.6); /* Error feedback */ +} +``` + +### Color Usage Guidelines + +#### Brand Colors +- **Neural Cyan (#00d4ff)**: Primary brand color used for active game elements, connections, and key UI components +- **Neural Magenta (#ff00ff)**: Secondary brand color for gradients, particle effects, and special states + +#### Game Element Colors +- **Source Green (#00ff64)**: Source nodes that typically begin connection patterns +- **Target Orange (#ff6400)**: Target nodes that typically end connection patterns +- **Normal Blue (#333366/#00d4ff)**: Standard nodes, inactive/active states +- **Connection Active (#00d4ff)**: Successfully created connections between nodes + +#### Accessibility Considerations +- Minimum contrast ratio of 4.5:1 for all text +- Color combinations tested for colorblind accessibility +- Important information never conveyed by color alone +- High contrast mode considerations for visual impairments + +## Typography + +### Font Stack +```css +font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +``` + +**Rationale:** +- Segoe UI: Modern, clean appearance on Windows +- Tahoma: Reliable fallback with good readability +- Geneva: Mac-specific clean sans-serif +- Verdana: Universal fallback with excellent screen readability +- sans-serif: System fallback + +### Typography Scale +```css +/* Heading Hierarchy */ +.game-title { + font-size: 2rem; /* 32px - Main game title */ + font-weight: bold; + line-height: 1.2; +} + +.section-heading { + font-size: 1.5rem; /* 24px - Section headers */ + font-weight: 600; + line-height: 1.3; +} + +.ui-heading { + font-size: 1.25rem; /* 20px - UI component headers */ + font-weight: 600; + line-height: 1.4; +} + +/* Body Text */ +.body-large { + font-size: 1.1rem; /* 18px - Important body text */ + line-height: 1.5; +} + +.body-normal { + font-size: 1rem; /* 16px - Standard body text */ + line-height: 1.6; +} + +.body-small { + font-size: 0.875rem; /* 14px - Secondary information */ + line-height: 1.4; +} + +/* UI Elements */ +.stat-label { + font-size: 0.8rem; /* 13px - Stat labels */ + opacity: 0.7; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.stat-value { + font-size: 1.1rem; /* 18px - Stat values */ + font-weight: bold; + color: var(--neural-cyan); +} +``` + +### Text Effects +```css +/* Gradient Text Effect */ +.gradient-text { + background: linear-gradient(45deg, var(--neural-cyan), var(--neural-magenta)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Glow Text Effect */ +.glow-text { + text-shadow: 0 0 20px rgba(0, 212, 255, 0.5); +} +``` + +## Layout System + +### Grid Structure +```css +/* Game Container Layout */ +.game-container { + display: flex; + flex-direction: column; + height: 100vh; + position: relative; +} + +.game-header { + flex-shrink: 0; /* Fixed height header */ + padding: 20px; +} + +.game-canvas { + flex: 1; /* Expandable game area */ + position: relative; + overflow: hidden; +} +``` + +### Responsive Breakpoints +```css +/* Mobile First Approach */ +/* Base styles: Mobile (320px+) */ + +@media (min-width: 480px) { + /* Large mobile/small tablet */ + .game-header { + padding: 24px; + } +} + +@media (min-width: 768px) { + /* Tablet */ + .game-title { + font-size: 2.5rem; + } + + .game-stats { + gap: 40px; + } +} + +@media (min-width: 1024px) { + /* Desktop */ + .game-header { + padding: 30px; + } + + .game-title { + font-size: 3rem; + } +} + +@media (min-width: 1440px) { + /* Large desktop */ + .game-container { + max-width: 1400px; + margin: 0 auto; + } +} +``` + +## Component Design Patterns + +### Glassmorphism Cards +```css +.glass-card { + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 15px; + padding: 30px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +.glass-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); +} +``` + +### Interactive Buttons +```css +.neural-button { + background: linear-gradient(45deg, var(--neural-cyan), var(--neural-magenta)); + border: none; + padding: 12px 30px; + border-radius: 25px; + color: white; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.neural-button:hover { + transform: scale(1.05); + box-shadow: 0 5px 20px rgba(0, 212, 255, 0.4); +} + +.neural-button:active { + transform: scale(0.98); +} + +/* Hover shimmer effect */ +.neural-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, + transparent, + rgba(255, 255, 255, 0.3), + transparent + ); + transition: left 0.5s ease; +} + +.neural-button:hover::before { + left: 100%; +} +``` + +### Game Node Styling +```css +/* Base node appearance */ +.game-node { + position: absolute; + border-radius: 50%; + cursor: pointer; + transition: all 0.2s ease; +} + +/* Node type variations */ +.node-source { + background: radial-gradient(circle, var(--source-green), transparent); + box-shadow: 0 0 20px rgba(0, 255, 100, 0.5); +} + +.node-target { + background: radial-gradient(circle, var(--target-orange), transparent); + box-shadow: 0 0 20px rgba(255, 100, 0, 0.5); +} + +.node-normal { + background: radial-gradient(circle, var(--normal-blue), transparent); + box-shadow: 0 0 15px rgba(51, 51, 102, 0.5); +} + +.node-normal.active { + background: radial-gradient(circle, var(--neural-cyan), transparent); + box-shadow: 0 0 25px rgba(0, 212, 255, 0.6); +} + +/* Node pulse animation */ +@keyframes node-pulse { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.05); + opacity: 0.8; + } +} + +.game-node { + animation: node-pulse 2s ease-in-out infinite; +} +``` + +## Animation Guidelines + +### Micro-Interactions +```css +/* Hover state transitions */ +.interactive-element { + transition: all 0.2s ease; +} + +.interactive-element:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +/* Button press feedback */ +.button:active { + transform: translateY(1px); + transition-duration: 0.1s; +} +``` + +### Level Complete Animation +```css +@keyframes level-complete { + 0% { + opacity: 0; + transform: translate(-50%, -50%) scale(0.8); + } + 50% { + opacity: 1; + transform: translate(-50%, -50%) scale(1.05); + } + 100% { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } +} + +.level-complete { + animation: level-complete 0.5s ease-out; +} +``` + +### Particle Effects +```css +.particle { + position: absolute; + width: 2px; + height: 2px; + background: var(--neural-cyan); + border-radius: 50%; + pointer-events: none; + animation: particle-fade 1s ease-out forwards; +} + +@keyframes particle-fade { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(0.5); + } +} +``` + +## Mobile Design Considerations + +### Touch Target Sizing +```css +/* Minimum touch target size: 44px */ +.touch-target { + min-width: 44px; + min-height: 44px; + padding: 12px; +} + +/* Game nodes on mobile */ +@media (max-width: 768px) { + .game-node { + min-width: 44px; + min-height: 44px; + } +} +``` + +### Mobile-Specific Adaptations +```css +@media (max-width: 768px) { + /* Larger text for readability */ + .game-title { + font-size: 1.8rem; + } + + /* Increased spacing for touch */ + .game-stats { + gap: 20px; + } + + /* Simplified visual effects for performance */ + .glass-card { + backdrop-filter: blur(5px); + } +} +``` + +## Dark Mode Support + +### CSS Custom Properties Approach +```css +/* Default dark theme (primary) */ +:root { + --bg-primary: #0a0a0a; + --bg-secondary: #1a1a2e; + --text-primary: #ffffff; + --text-secondary: rgba(255, 255, 255, 0.7); +} + +/* Light theme override (future) */ +@media (prefers-color-scheme: light) { + :root { + --bg-primary: #f5f5f5; + --bg-secondary: #ffffff; + --text-primary: #1a1a2e; + --text-secondary: rgba(26, 26, 46, 0.7); + } +} +``` + +## Performance Optimizations + +### GPU Acceleration +```css +/* Force GPU acceleration for smooth animations */ +.gpu-accelerated { + transform: translateZ(0); + will-change: transform; +} + +/* Optimize for 60fps animations */ +@keyframes optimized-fade { + from { opacity: 0; transform: translateZ(0); } + to { opacity: 1; transform: translateZ(0); } +} +``` + +### Reduced Motion Support +```css +/* Respect user's motion preferences */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +## Design System Maintenance + +### Regular Review Process +- **Monthly**: Review color usage and consistency +- **Quarterly**: Assess animation performance impact +- **Bi-annually**: Update for new design trends +- **Annually**: Comprehensive accessibility audit + +### Design Token Updates +When updating design tokens: +1. Test all visual states and components +2. Verify accessibility requirements still met +3. Check performance impact of changes +4. Update documentation and examples +5. Validate across all target devices + +### Version Control +- Tag visual design changes in git commits +- Maintain design decision documentation +- Screenshot key UI states for regression testing +- Document breaking changes that affect gameplay + +Last Updated: June 2025 +Next Review: July 2025 (Monthly visual design review) \ No newline at end of file