Image Gallery
Design a mobile-first Tinder-style image preview screen for a photography gallery app called “CherryPick”. Visual Style: Use a soft editorial aesthetic. Background color: #fcfbfb (off-white). Primary accent: #ef4d3c (warm coral red). Text color: #37342d (deep charcoal). Muted surfaces: #f3f4f6. Borders: #e5e7eb. Rounded corners: 8px. Soft low-alpha shadows. Subtle glass blur effects where appropriate. Typography: Headings use Playfair Display (serif, elegant, editorial). UI text uses Inter (clean sans-serif). Use tight tracking for headings. Use clean minimal spacing with a 4px spacing rhythm. Layout Requirements: Full-screen vertical mobile layout. Centered swipeable image card (Tinder-style). Swipe right = Like. Swipe left = Skip. Subtle animated feedback while swiping (heart or reject indicator overlay). Card stack effect (next image slightly visible behind). Top Section: Minimal header bar. Left: Back button (icon only). Center: Album title (serif). No heavy navigation elements. Main Section: Large vertical image card with soft shadow and rounded corners. Smooth swipe animation. Gesture-based interaction. Bottom Section: Floating action row: Like button (heart icon, primary color when active). Comment button (speech bubble icon). Optional small Prev / Next arrow buttons for manual traversal. Subtle comment input drawer that slides up when comment is tapped. Comment input should feel light and minimal (muted background, no heavy borders). Interaction Notes: Immediate visual feedback on like (heart pulse animation). Smooth swipe transitions. Clean micro-interactions (button scale on tap). No dashboard-style panels. Keep it premium, calm, and photography-first. Mood: Elegant, modern editorial gallery. Feels like browsing curated photography, not using a management tool.