🎨 Color System
Primary Palette:
- Neon Pink (#ff1493) - Primary accents, danger, high energy
- Neon Cyan (#00ffff) - UI borders, secondary accents, tech elements
- Neon Purple (#9d00ff) - Mystical, depth, stack indicators
- Neon Green (#39ff14) - Player identity, success states
- Neon Yellow (#ffff00) - Power, attention, warnings
Usage Rules: Always pair neon colors with corresponding glow effects (box-shadow with 50-80% opacity). Dark backgrounds (#050510) ensure maximum neon contrast.
✍️ Typography & Labeling
- Font Stack: 'Courier New', 'Consolas', monospace for authentic retro-futuristic feel
- Hierarchy: Uppercase for headers/labels, letter-spacing 0.05-0.15em for readability
- Weight: 900 (black) for emphasis, regular for body text
- Effects: Text-shadow glow matching text color for depth and neon realism
⚡ Motion Principles
- Easing: Prefer ease-out for UI, cubic for physics simulation
- Duration: 0.2-0.3s for UI transitions, 0.5-1s for dramatic effects
- Rotation: Slammers rotate 1080deg during flight for dramatic spin
- Scale: Hover states scale 1.05x; avoid jarring jumps
- Persistence: Scanlines, grid, and ring pulses create constant ambient motion
💥 FX Hierarchy
Layered Effects (bottom to top):
- Background: Grid, gradient, scanlines (z:1-10)
- Arena: Rings, center marker, pogs (z:20-50)
- UI: HUD panels, logs, controls (z:50-100)
- Slammer: Active slammer disc (z:100-125)
- Feedback: Shockwaves, floating text (z:150-200)
- Overlay: Banners, modals (z:200-500)
🖥️ UI Do/Don't
DO:
- Use consistent 2-4px borders with glow effects
- Apply backdrop-filter: blur(4-8px) for depth on panels
- Maintain touch-friendly 44px minimum tap targets
- Provide clear visual feedback for all interactions
DON'T:
- Overcrowd mobile screens—hide non-critical info
- Use pure white (#fff)—prefer neon accents
- Animate excessively—respect motion sensitivity
- Ignore contrast—ensure readability on all backgrounds
🎯 Slammer & Pog Visual Language
Slammers:
- Crusher: Pink gradient, heavy/angular aesthetic, max weight
- Spinner: Cyan gradient, smooth/circular, max spin/control
- Precision: Yellow gradient, balanced/geometric, hybrid stats
Pogs:
- Conic gradient (purple-pink) for dynamic spin appearance
- Player pogs: green border/glow | CPU pogs: cyan border/glow
- Flipped state: grayscale radial gradient, rotateY(180deg)
Visual Tells: Border color = ownership, glow intensity = state energy, rotation = physics activity