Photo Puzzle UI/UX Multi-Chroma

8pt Grid • Dark Mode Base (#0F172A) • Palette: Cyber Synthwave

Select Rich Multi-Color Palette

Harmonious multi-accent color systems (primary, secondary & stat highlights)

9:41
5G

PHOTO - PUZZLE

Snap a picture or select an image to start solving

Live Camera ViewfinderGrid Overlay: 3x3

Multi-Color Palette Design Specification

Harmonious color distribution applied across all 5 screens

Multi-Chroma System
Active Palette: Cyber Synthwave
  • Base Dark Canvas: #0F172A
  • Primary CTA Gradient: #00D2D3
  • Secondary Accent: #FF7675 (Badges/Pills)
  • Stat / Metric Accents: #FF9F43 & #55E6C1
Typography & Touch Targets
  • Primary Font: Plus Jakarta Sans / Outfit
  • Header Styling: Bold sentence case (replaced casual font)
  • Touch Target Min: 44px x 44px on all actions
  • Glow Effects: Multi-tone drop-shadow glow highlights

Key Multi-Color Enhancements Applied

Distinct metric card colors (Cyan, Flame, Violet, Mint)
Multi-tone bottom floating nav with glowing primary shutter
Vibrant category pill highlights in Photo Gallery
Custom color-coded settings toggles for intuitive feedback

AI Image Generation Prompts (Cyber Synthwave Palette)

Multi-color prompt definitions formatted for Midjourney v6 & DALL-E 3

1. Photo Puzzle & Camera Screen

Mobile UI mockup of a Photo Puzzle camera screen, dark slate background (#0F172A), 9:16 aspect ratio, high-end app interface with vibrant multi-color synthwave palette featuring electric cyan (#00D2D3) primary CTAs, neon magenta (#E84393) secondary badges, golden amber (#FF9F43) stat highlights, and mint green accents on #0F172A dark slate. Displays a central camera viewfinder with colorful reticle corner markers, vibrant grid size pills (2x2, 3x3, 4x4, 5x5), primary gradient action button "Snip Photo", secondary accent button "Flip Camera", floating navigation bar with glowing central camera icon, modern typography, 8pt grid structure, Figma presentation design --ar 9:16 --v 6.0

2. Multiplayer Lobby (1 vs 1)

Mobile UI screen design for 1 vs 1 Multiplayer Game Lobby, dark mode base (#0F172A), futuristic esports gaming interface with vibrant multi-color synthwave palette featuring electric cyan (#00D2D3) primary CTAs, neon magenta (#E84393) secondary badges, golden amber (#FF9F43) stat highlights, and mint green accents on #0F172A dark slate. Header "multiplayer lobby" in bold sans-serif typography. Pill-shaped match code input field with neon outline, center features full-width gradient primary CTA "1 Vs 1 Online" with soft drop-glow, live online queue status card with glowing pulse indicator dot, clean high-contrast touch targets --ar 9:16 --v 6.0

3. Performance Metrics / Stats

Sleek dark mode mobile dashboard UI for Performance Metrics screen, #0F172A dark slate canvas with vibrant multi-color synthwave palette featuring electric cyan (#00D2D3) primary CTAs, neon magenta (#E84393) secondary badges, golden amber (#FF9F43) stat highlights, and mint green accents on #0F172A dark slate. Header "performance metrics", 2x3 grid of rounded card containers (#1E293B surface). Multi-colored stat cards displaying metric labels in small uppercase grey font and big bold numbers in distinct vibrant colors: TIME SPENT in cyan, WIN STREAK in glowing amber flame, TOTAL PLAYED in purple, SOLVED in emerald green, BEST TIME in magenta pink, FEWEST MOVES in yellow. Clean layout, 8pt grid --ar 9:16 --v 6.0

4. Photo Gallery & Catalog

Modern mobile photo gallery UI design, dark theme (#0F172A) with vibrant multi-color synthwave palette featuring electric cyan (#00D2D3) primary CTAs, neon magenta (#E84393) secondary badges, golden amber (#FF9F43) stat highlights, and mint green accents on #0F172A dark slate. Top header with gradient "Import Photo File" button and view toggle icons. Search bar reading "Search file name or format...", multi-colored category filter pills ("All", Preset, Imported, Camera). 2x2 grid of photography cards (Northern Lights, Grand Canyon, Metropolis Lights, Cosmic Nebula) with thumbnails, resolution tags, file sizes, and action play buttons --ar 9:16 --v 6.0

5. Preferences & Settings

Mobile UI screen for App Preferences & Settings, dark mode (#0F172A) with vibrant multi-color synthwave palette featuring electric cyan (#00D2D3) primary CTAs, neon magenta (#E84393) secondary badges, golden amber (#FF9F43) stat highlights, and mint green accents on #0F172A dark slate. Header "preferences", 4 horizontal setting cards with 16px rounded corners (#1E293B surface). Items include: Dark Mode (toggle), Haptic Feedback (gradient toggle ON), Calm Sounds (emerald toggle ON), Tile Numbers (toggle). Modern Inter typography, bottom floating navigation bar with active settings icon --ar 9:16 --v 6.0