# Visual Design Preview - Modern Ecommerce Redesign ## Color Palette ### Primary Colors ``` Primary Red: #FF6B6B ████████ (Coral red - energy, urgency) Primary Light: #FF8E8E ████████ (Hover states) Primary Dark: #FF4949 ████████ (Active states) Secondary: #4ECDC4 ████████ (Turquoise - trust) Secondary Light: #71D7D0 ████████ Secondary Dark: #2BB3A9 ████████ Accent: #FFE66D ████████ (Yellow - attention) ``` ### Neutral Grays ``` Gray 50: #F9FAFB ▓▓▓▓▓▓▓▓ (Lightest background) Gray 100: #F3F4F6 ▓▓▓▓▓▓▓▓ Gray 200: #E5E7EB ▓▓▓▓▓▓▓▓ (Borders) Gray 300: #D1D5DB ▓▓▓▓▓▓▓▓ Gray 400: #9CA3AF ▓▓▓▓▓▓▓▓ (Muted text) Gray 500: #6B7280 ▓▓▓▓▓▓▓▓ (Secondary text) Gray 600: #4B5563 ▓▓▓▓▓▓▓▓ Gray 700: #374151 ▓▓▓▓▓▓▓▓ (Primary text) Gray 800: #1F2937 ▓▓▓▓▓▓▓▓ Gray 900: #111827 ▓▓▓▓▓▓▓▓ (Darkest) ``` ### Status Colors ``` Success: #10B981 ████████ (Green) Warning: #F59E0B ████████ (Orange) Error: #EF4444 ████████ (Red) Info: #3B82F6 ████████ (Blue) ``` ## Typography ### Font Families - **Headings:** Poppins (600, 700, 800 weights) - **Body:** Inter (400, 500, 600, 700 weights) ### Font Scale ``` 4xl - 40px - Page Titles (h1) 3xl - 32px - Section Headings (h2) 2xl - 24px - Subsections (h3) xl - 20px - Card Titles (h4) lg - 18px - Emphasized Text base- 16px - Body Text sm - 14px - Secondary Text xs - 12px - Labels, Captions ``` ## Spacing System (8px Base) ``` xs - 8px - Tight spacing (button padding, small gaps) sm - 16px - Standard spacing (between elements) md - 24px - Medium spacing (section padding) lg - 32px - Large spacing (container padding) xl - 48px - Extra large (between sections) 2xl - 64px - Section dividers 3xl - 96px - Major sections ``` ## Component Preview ### Buttons ``` ┌─────────────────────────┐ │ PRIMARY BUTTON │ ← Red background, white text └─────────────────────────┘ ┌─────────────────────────┐ │ SECONDARY BUTTON │ ← Turquoise background └─────────────────────────┘ ┌─────────────────────────┐ │ OUTLINE BUTTON │ ← Transparent, red border └─────────────────────────┘ Ghost Button ← Transparent, subtle hover ``` ### Product Card ``` ┌──────────────────────────────────────┐ │ ╔════════════════════════════════╗ │ │ ║ ║ │ │ ║ [Product Image] ║ │ ← Zoom on hover │ ║ ║ │ │ ║ ♡ 👁 ║ │ ← Floating actions │ ╚════════════════════════════════╝ │ │ │ │ Product Name │ │ Short description text here... │ │ │ │ ★★★★☆ (4.5) │ ← Ratings │ │ │ $29.99 [Add to Cart] │ └──────────────────────────────────────┘ ``` ### Navigation Bar ``` ════════════════════════════════════════════════════════════════ ⚡ Free Shipping on Orders Over $50 | Shop Now ════════════════════════════════════════════════════════════════ 🎨 Sky Art Shop [Search products...] ♡ 🛒 👤 ☰ Home Shop Portfolio About Blog Contact ──────────────────────────────────────────────────────────────── ``` ### Product Grid Layout ``` Desktop (4 columns): ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ │Product│ │Product│ │Product│ │Product│ └───────┘ └───────┘ └───────┘ └───────┘ Tablet (3 columns): ┌───────┐ ┌───────┐ ┌───────┐ │Product│ │Product│ │Product│ └───────┘ └───────┘ └───────┘ Mobile (1 column): ┌─────────────────┐ │ Product │ └─────────────────┘ ``` ## Shop Page Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVIGATION BAR (Sticky) │ ├─────────────────────────────────────────────────────────────┤ │ │ │ SHOP HERO │ │ Shop All Products │ │ Discover unique art pieces and supplies │ │ │ ├─────────────────────────────────────────────────────────────┤ │ [All] [Paintings] [Prints] [Sculptures] [Digital] [Supplies]│ ← Scrolling chips ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────┬──────────────────────────────────────────┐ │ │ │ FILTERS │ PRODUCT GRID │ │ │ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │ │ Price │ │ │ │ │ │ │ │ │ │ │ │ │ Range │ └────┘ └────┘ └────┘ └────┘ │ │ │ │ │ │ │ │ │ Avail. │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │ │ [x] In │ │ │ │ │ │ │ │ │ │ │ │ │ [ ] Out │ └────┘ └────┘ └────┘ └────┘ │ │ │ │ │ │ │ │ │ Sort By │ [1] [2] [3] [4] [Next] │ │ │ │ ▼ │ │ │ │ └──────────┴──────────────────────────────────────────┘ │ │ │ ├─────────────────────────────────────────────────────────────┤ │ FOOTER │ │ Sky Art Shop Shop About Customer Service │ │ Description Links Links Links │ │ │ │ © 2025 Sky Art Shop. All rights reserved. │ └─────────────────────────────────────────────────────────────┘ ``` ## Hover Effects & Animations ### Product Card Hover ``` Normal: Hover: ┌──────────┐ ┌──────────┐ │ Image │ → │ Image+5% │ ← Zoom │ │ │ ♡ 👁 │ ← Buttons appear └──────────┘ └──────────┘ + Shadow increases ``` ### Button Hover ``` Normal → Hover: - Background darkens 10% - Transform: translateY(-1px) - Shadow increases - Transition: 150ms ``` ### Category Chip Active ``` Inactive: Active: ┌─────────┐ ┌─────────┐ │ Paintings│ → │Paintings│ └─────────┘ └─────────┘ Gray bg Red bg Gray text White text ``` ## Shadow Levels ``` sm: ▁ - Subtle card border md: ▂ - Default card elevation lg: ▃ - Hover state xl: ▄ - Dropdown/modal 2xl: █ - Dramatic emphasis ``` ## Border Radius ``` sm: ┌─┐ 6px - Buttons, inputs md: ┌──┐ 8px - Cards lg: ┌───┐12px - Large cards xl: ┌────┐16px- Modal 2xl: ┌─────┐24px- Hero sections full: ● 9999px- Circular (badges, icons) ``` ## Responsive Breakpoints ``` Mobile: 320px ═══════════════ Mobile L: 640px ═══════════════════════════ Tablet: 768px ════════════════════════════════════ Desktop: 1024px ══════════════════════════════════════════════ Desktop L: 1280px ═══════════════════════════════════════════════════ Wide: 1536px+ ════════════════════════════════════════════════════════ ``` ## Badge Variations ``` NEW [Bold yellow background, dark text] SALE [Red background, white text, -20%] BESTSELLER [Green background, white text] LOW STOCK [Orange background, white text] ``` ## Form Elements ``` Input Field: ┌──────────────────────────────────┐ │ [Icon] Enter text here... │ └──────────────────────────────────┘ Focused: ┌══════════════════════════════════┐ ← Blue border │ [Icon] Enter text here... │ ← 3px shadow └══════════════════════════════════┘ Select Dropdown: ┌──────────────────────────────┬─┐ │ Featured │▼│ └──────────────────────────────┴─┘ Checkbox: ☐ Out of Stock → ☑ In Stock ``` ## Z-Index Layers ``` Base: 0 - Regular content Dropdown: 1000 - Category/filter dropdowns Sticky: 1020 - Sticky navigation Fixed: 1030 - Fixed elements Backdrop: 1040 - Modal overlay Modal: 1050 - Modal dialogs Popover: 1060 - Tooltips/popovers Tooltip: 1070 - Highest priority tooltips ``` ## Comparison: Old vs New ### Navigation ``` OLD: Simple purple gradient navbar Basic links, minimal styling NEW: Multi-tier professional navigation Top banner + main nav + links Search bar, action icons, dropdowns Sticky positioning, mobile menu ``` ### Product Cards ``` OLD: Basic image + text + price Simple hover effect No interactions NEW: Advanced ecommerce card Hover zoom, floating actions Badges, ratings, animations Quick add-to-cart button ``` ### Colors ``` OLD: Purple #6A3A9C theme Pink accents Dark backgrounds NEW: Coral Red #FF6B6B primary Turquoise secondary Clean white backgrounds Professional gray scale ``` ### Spacing ``` OLD: Random pixel values Inconsistent gaps Mixed units NEW: 8px grid system CSS variables Consistent throughout Harmonious rhythm ``` ## Mobile Experience ``` Phone View (375px): ┌──────────────────┐ │ 🎨 Sky 🛒 ☰ │ ← Compact nav ├──────────────────┤ │ │ │ Hero Banner │ │ │ ├──────────────────┤ │ [Chip][Chip]→ │ ← Scrollable ├──────────────────┤ │ [🔍 Filters] │ ← Drawer button ├──────────────────┤ │ ┌────────────┐ │ │ │ Product │ │ ← 1 column │ └────────────┘ │ │ ┌────────────┐ │ │ │ Product │ │ │ └────────────┘ │ └──────────────────┘ ``` ## Performance Metrics ### CSS Size - design-system.css: ~10 KB - modern-nav.css: ~8 KB - modern-shop.css: ~8 KB - **Total:** 26 KB (minified will be ~15 KB) ### Load Times (Target) - First Paint: < 1s - Interactive: < 2s - Full Load: < 3s ## Accessibility Features - ✅ Keyboard navigation - ✅ Focus visible states - ✅ ARIA labels - ✅ Semantic HTML - ✅ Color contrast WCAG AA - ✅ Screen reader friendly - ✅ Touch targets 44x44px+ --- **Ready to view:**