DESIGN.md

🎨 Design Philosophy

Visual Identity

• Glassmorphism - Modern frosted glass aesthetic
• Vibrant Gradients - Purple (#7927ff) to Cyan (#00f3ff) transitions with Orange accents (#ff6b35)
• Smooth Animations - Micro-interactions with Framer Motion
• Dark-First Design - Eye-friendly default with light mode toggle

Color Palette (Logo Inspired)

--neon-purple: #7927ff      /* Primary brand color */
--neon-cyan: #00f3ff        /* Accent color */
--neon-orange: #ff6b35      /* Call-to-action */
--neon-green: #00e676       /* Success indicators */
--glass-surface: rgba(255, 255, 255, 0.03)
--glass-border: rgba(255, 255, 255, 0.06)

📱 Responsive Design

Comprehensive Breakpoints

• Desktop: 1024px+ - Full feature set with all columns visible
• Tablet: 768px - 1024px - Optimized spacing and font sizes
• Mobile: 481px - 768px - Horizontal scroll enabled, compact layout
• Small Mobile: 320px - 480px - Maximum space efficiency

Mobile Optimizations

✅ Navbar

• Hamburger menu with smooth slide-down animation
• Touch-optimized buttons (44px minimum)
• Compact logo and spacing

✅ Coin List Table

• Horizontal scrolling - All 5 columns visible (Rank, Asset, Price, Change, Market Cap)
• Smooth swipe gestures
• Optimized font sizes for readability

✅ Hero Section

• Floating crypto tickers visible on mobile with compact styling
• Responsive heights (50vh - 70vh)
• Full-width search bar

✅ General

• Touch-friendly interactive elements
• Optimized images
• Fast performance on 3G/4G