EVADE Design System

EVADE Design System

Overview

80s Synthwave/​Neon aesthetic with Dynamic Hybrid approach: crystal-clear UI layered over rich atmospheric backgrounds. Apple Award-worthy polish.

Color Palette

const COLORS = {
  // Backgrounds
  backgroundDeep: '#0a0a12',      // Deep space black (primary)
  backgroundPanel: '#1a1a2e',     // Dark purple-black (panels/​modals)

  // Neon Accents
  neonCyan: '#00f5ff',            // Player, highlights, primary actions
  neonMagenta: '#ff2a6d',         // Enemies, danger, warnings
  neonPurple: '#9d4edd',          // UI accents, secondary actions
  chromeGold: '#ffd700',          // Titles, achievements, rewards
  hotPink: '#ff00aa',             // Secondary accents

  // Supporting
  gridLines: '#4a1a6b',           // Subtle purple grid
  textPrimary: '#ffffff',
  textMuted: '#888888',

  // Gradients
  sunBands: ['#ff2a6d', '#ffd700', '#ff6b35'], // Horizon sun
}

Visual Motifs (Layered)

Per-Screen Sun Position:

• Main Menu: 60% up (welcoming)
• High Scores: Higher (triumphant)
• Shop: Lower (sunset/​relaxed)
• Play: Hidden (no distraction)
• Game Over: Below horizon (defeat)

Typography

Button Styles

Primary (Play, main actions):

{
  background: 'transparent',
  borderWidth: 1,
  borderColor: COLORS.neonCyan,
  shadowColor: COLORS.neonCyan,
  shadowRadius: 8,
}

Secondary (Settings, back):

{
  background: 'transparent',
  borderWidth: 1,
  borderColor: COLORS.neonPurple,
}

Glass-morphic panels:

{
  backgroundColor: 'rgba(26, 26, 46, 0.8)',
  backdropFilter: 'blur(10px)', // Web only, use opacity on native
  borderRadius: 12,
  borderWidth: 1,
  borderColor: 'rgba(157, 78, 221, 0.3)',
}

Micro-interactions

Screen Transitions

Game Entities

Player:

• 3-layer glow: inner white, mid color, outer soft
• Shape/​color from cosmetics
• Shield: pulsing cyan hexagonal barrier

Enemies:

• Neon edge glow (not solid fill)
• Shape = speed tier (circle/​square/​triangle)
• Color fades red → yellow near despawn

Boosters:

• Green octagon with inner glow pulse
• Clear icon inside (plus/​shield/​x3)
• Sparkle particles around edges

Modal Structure

┌─────────────────────────────────────┐
│ [Hexagonal frame border with glow] │
│                                     │
│         TITLE (chrome)              │
│                                     │
│         Content area                │
│                                     │
│   ┌─────────────────────────────┐   │
│   │     PRIMARY ACTION          │   │  ← Cyan border
│   └─────────────────────────────┘   │
│                                     │
│   ┌─────────────────────────────┐   │
│   │     SECONDARY ACTION        │   │  ← Purple border
│   └─────────────────────────────┘   │
│                                     │
└─────────────────────────────────────┘

• Game Over modal: Magenta border (danger)
• Continue modal: Cyan border (opportunity)
• Shop/​Settings: Purple border (neutral)

Quick Reference

Common Mistakes