SkyArtShop/docs/DESIGN_PREVIEW.md

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: http://localhost:5000/shop.html