skills/uiuxmax/references/gallery-detailed.csv

id,order,name,category,imageUrl,url,style,mode,primary_color,secondary_color,cta_color,background_color,implemented,prompt,prompt_detailed
1,1,SaaS Analytics Dashboard,SaaS,/thumbnails/saas-analytics-dashboard.png,/demo/saas-analytics-dashboard,Glassmorphism + Flat Design,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a modern SaaS analytics dashboard landing page with glassmorphism cards, hero section showcasing real-time data visualization, feature highlights with icons, pricing table, and trust badges. Focus on clarity and professional feel.","Create a modern SaaS analytics dashboard landing page with glassmorphism cards, hero section showcasing real-time data visualization, feature highlights with icons, pricing table, and trust badges. Focus on clarity and professional feel. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with product value prop, KPI teaser, and dashboard screenshot; analytics sections with charts, KPIs, and filter chips; integrations and security/compliance badges; pricing tiers with feature comparison; customer logos, testimonials, and final CTA. Visual style: Glassmorphism + Flat Design. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
7,1,Educational Platform,Education,/thumbnails/educational-platform.png,/demo/educational-platform,Claymorphism + Vibrant & Block-based,light,#FDBCB4,#ADD8E6,#22C55E,#FFFFFF,true,"Create a playful educational platform landing page with claymorphism cards, course catalog preview, progress tracking demo, student testimonials, and enrollment CTA. Use vibrant, engaging colors.","Create a playful educational platform landing page with claymorphism cards, course catalog preview, progress tracking demo, student testimonials, and enrollment CTA. Use vibrant, engaging colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with course discovery; course cards and categories; instructor profiles; learning paths and progress; enroll CTA. Visual style: Claymorphism + Vibrant & Block-based. Color palette: primary #FDBCB4, secondary #ADD8E6, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
21,1,Pet Grooming & Spa,Pet Services,/thumbnails/pet-grooming.png,/demo/pet-grooming,Claymorphism + Vibrant & Block-based,light,#FF9F43,#87CEEB,#FF9F43,#FFF8F0,true,"Create a friendly pet grooming service landing page with claymorphism cards, service packages, pet gallery, booking system, and testimonials from pet owners. Use playful warm colors.","Create a friendly pet grooming service landing page with claymorphism cards, service packages, pet gallery, booking system, and testimonials from pet owners. Use playful warm colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: service packages with pricing; before/after gallery; appointment booking widget; groomer profiles; reviews and CTA. Visual style: Claymorphism + Vibrant & Block-based. Color palette: primary #FF9F43, secondary #87CEEB, CTA #FF9F43, background #FFF8F0. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
2,2,AI Chatbot Platform,AI/Chatbot,/thumbnails/ai-chatbot-platform.png,/demo/ai-chatbot-platform,AI-Native UI + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Design a minimal AI chatbot platform landing page with conversational UI preview, streaming text animation demo, feature cards with AI capabilities, integration logos, and a prominent 'Try Now' CTA. Use neutral tones with AI purple accent.","Design a minimal AI chatbot platform landing page with conversational UI preview, streaming text animation demo, feature cards with AI capabilities, integration logos, and a prominent 'Try Now' CTA. Use neutral tones with AI purple accent. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: chat UI preview with example conversations; capabilities grid (context memory, tools, analytics); use cases by industry; integration logos and API access; trust, safety, and privacy section. Visual style: AI-Native UI + Minimalism. Color palette: primary #6366F1, secondary #10B981, CTA #6366F1, background #F5F5F5. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
3,3,Luxury E-commerce,E-commerce,/thumbnails/luxury-ecommerce.png,/demo/luxury-ecommerce,Liquid Glass + Glassmorphism,light,#000000,#FFD700,#FFD700,#FFFFFF,true,"Build an elegant luxury e-commerce landing page with liquid glass effects, high-end product showcase, storytelling sections, premium brand values, and exclusive membership CTA. Emphasize sophistication and exclusivity.","Build an elegant luxury e-commerce landing page with liquid glass effects, high-end product showcase, storytelling sections, premium brand values, and exclusive membership CTA. Emphasize sophistication and exclusivity. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with editorial product imagery and headline; featured collections and product grid; product detail highlights (materials, craftsmanship); reviews and brand story; shipping, returns, and loyalty CTA. Visual style: Liquid Glass + Glassmorphism. Color palette: primary #000000, secondary #FFD700, CTA #FFD700, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
4,4,Fintech Crypto Dashboard,Fintech/Crypto,/thumbnails/fintech-crypto.png,/demo/fintech-crypto,Glassmorphism + Dark Mode (OLED),dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a dark mode fintech/crypto landing page with glassmorphism cards, real-time price charts preview, security features highlight, wallet integration showcase, and trust indicators. Focus on security and modern tech feel.","Create a dark mode fintech/crypto landing page with glassmorphism cards, real-time price charts preview, security features highlight, wallet integration showcase, and trust indicators. Focus on security and modern tech feel. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: portfolio overview with balance and performance; market charts and watchlist; security and compliance badges; mobile app preview and onboarding steps; pricing or fee transparency. Visual style: Glassmorphism + Dark Mode (OLED). Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
5,5,Health & Wellness App,Healthcare,/thumbnails/health-wellness.png,/demo/health-wellness,Neumorphism + Soft UI Evolution,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Design a calming health and wellness app landing page with soft UI elements, neumorphic cards, feature showcase for meditation/fitness tracking, testimonials, and app download CTAs. Use calm, soothing colors.","Design a calming health and wellness app landing page with soft UI elements, neumorphic cards, feature showcase for meditation/fitness tracking, testimonials, and app download CTAs. Use calm, soothing colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with calming imagery and wellness value prop; programs or plans grid; progress tracking preview; coach or expert profiles; testimonials and CTA. Visual style: Neumorphism + Soft UI Evolution. Color palette: primary #87CEEB, secondary #90EE90, CTA #22C55E, background #F5F5F5. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
6,6,Creative Agency Portfolio,Creative,/thumbnails/creative-agency.png,/demo/creative-agency,Brutalism + Motion-Driven,light,#FF0000,#0000FF,#FFFF00,#FFFFFF,true,"Build a bold creative agency portfolio landing page with brutalist elements, motion-driven animations, case study previews, team showcase, and contact form. Emphasize creativity and uniqueness.","Build a bold creative agency portfolio landing page with brutalist elements, motion-driven animations, case study previews, team showcase, and contact form. Emphasize creativity and uniqueness. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with bold typography and project highlight; case study grid with hover previews; services and process timeline; client logos and testimonials; contact CTA. Visual style: Brutalism + Motion-Driven. Color palette: primary #FF0000, secondary #0000FF, CTA #FFFF00, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
8,8,Real Estate Luxury,Real Estate,/thumbnails/real-estate.png,/demo/real-estate,Glassmorphism + Minimalism,light,#0077B6,#FFD700,#0077B6,#FFFFFF,true,"Design an elegant real estate landing page with glassmorphism property cards, virtual tour preview, featured listings, agent profiles, and contact form. Focus on trust and premium feel.","Design an elegant real estate landing page with glassmorphism property cards, virtual tour preview, featured listings, agent profiles, and contact form. Focus on trust and premium feel. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with premium listing and location; featured listings grid; agent profiles and concierge services; map or neighborhood highlights; book a tour CTA. Visual style: Glassmorphism + Minimalism. Color palette: primary #0077B6, secondary #FFD700, CTA #0077B6, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
9,9,Gaming Platform,Gaming,/thumbnails/gaming-platform.png,/demo/gaming-platform,3D & Hyperrealism + Retro-Futurism,dark,#FF006E,#00FFFF,#39FF14,#1A1A2E,true,"Build an immersive gaming platform landing page with 3D elements, retro-futuristic style, game showcase carousel, community features, and download CTA. Use vibrant neon colors on dark background.","Build an immersive gaming platform landing page with 3D elements, retro-futuristic style, game showcase carousel, community features, and download CTA. Use vibrant neon colors on dark background. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with featured game trailer; game catalog with genres and filters; community stats and tournaments; download/app store CTA; social proof and testimonials. Visual style: 3D & Hyperrealism + Retro-Futurism. Color palette: primary #FF006E, secondary #00FFFF, CTA #39FF14, background #1A1A2E. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
10,10,Restaurant & Food,Food & Restaurant,/thumbnails/restaurant-food.png,/demo/restaurant-food,Vibrant & Block-based + Motion-Driven,light,#FF6B35,#8B4513,#FF6B35,#FFFAF0,true,"Create a warm restaurant landing page with vibrant food photography, menu preview, reservation system, chef story section, and location map. Use appetizing warm colors.","Create a warm restaurant landing page with vibrant food photography, menu preview, reservation system, chef story section, and location map. Use appetizing warm colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with signature dish and reservation CTA; menu highlights and categories; chef story and ambiance gallery; hours, location, and delivery partners; booking and events CTA. Visual style: Vibrant & Block-based + Motion-Driven. Color palette: primary #FF6B35, secondary #8B4513, CTA #FF6B35, background #FFFAF0. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
11,11,Fitness & Gym App,Fitness,/thumbnails/fitness-gym.png,/demo/fitness-gym,Vibrant & Block-based + Dark Mode (OLED),dark,#FF6B35,#0080FF,#FF6B35,#121212,true,"Design an energetic fitness app landing page with dark mode, workout preview cards, progress tracking demo, trainer profiles, and subscription CTAs. Use bold, motivating colors.","Design an energetic fitness app landing page with dark mode, workout preview cards, progress tracking demo, trainer profiles, and subscription CTAs. Use bold, motivating colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with class schedule preview; membership tiers and pricing; trainer profiles and facilities; progress tracking or app preview; testimonials and CTA. Visual style: Vibrant & Block-based + Dark Mode (OLED). Color palette: primary #FF6B35, secondary #0080FF, CTA #FF6B35, background #121212. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
12,12,Travel & Tourism,Travel,/thumbnails/travel-tourism.png,/demo/travel-tourism,Aurora UI + Motion-Driven,light,#0080FF,#FF7F00,#FF7F00,#FFFFFF,true,"Build an inspiring travel agency landing page with aurora UI gradients, destination showcase, booking preview, traveler testimonials, and trip planner CTA. Use vibrant destination colors.","Build an inspiring travel agency landing page with aurora UI gradients, destination showcase, booking preview, traveler testimonials, and trip planner CTA. Use vibrant destination colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with destination imagery and search; featured destinations cards; sample itineraries and experiences; reviews and trust badges; booking CTA. Visual style: Aurora UI + Motion-Driven. Color palette: primary #0080FF, secondary #FF7F00, CTA #FF7F00, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
13,13,NFT & Web3 Platform,NFT/Web3,/thumbnails/nft-web3.png,/demo/nft-web3,Cyberpunk UI + Glassmorphism,dark,#FF00FF,#00FFFF,#FFD700,#0D0D0D,true,"Create a cyberpunk-style NFT platform landing page with glassmorphism cards, featured NFT gallery, wallet connection demo, creator spotlight, and marketplace preview. Use neon colors on dark background.","Create a cyberpunk-style NFT platform landing page with glassmorphism cards, featured NFT gallery, wallet connection demo, creator spotlight, and marketplace preview. Use neon colors on dark background. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with featured collection and mint CTA; collection gallery and rarity highlights; creator profiles and roadmap; wallet connect and security notes; community CTA. Visual style: Cyberpunk UI + Glassmorphism. Color palette: primary #FF00FF, secondary #00FFFF, CTA #FFD700, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
14,14,Beauty & Spa Service,Beauty/Spa,/thumbnails/beauty-spa.png,/demo/beauty-spa,Soft UI Evolution + Neumorphism,light,#FFB6C1,#90EE90,#FFD700,#FFF5F5,true,"Design a serene beauty spa landing page with soft UI elements, service menu, before/after gallery, booking system preview, and testimonials. Use soft pastels and calming aesthetics.","Design a serene beauty spa landing page with soft UI elements, service menu, before/after gallery, booking system preview, and testimonials. Use soft pastels and calming aesthetics. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with calming imagery and booking CTA; service menu with pricing; therapist profiles or certifications; before/after or testimonial section; membership or package CTA. Visual style: Soft UI Evolution + Neumorphism. Color palette: primary #FFB6C1, secondary #90EE90, CTA #FFD700, background #FFF5F5. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
15,15,Developer Tools,Developer Tools,/thumbnails/developer-tools.png,/demo/developer-tools,Dark Mode (OLED) + Minimalism,dark,#39FF14,#0080FF,#39FF14,#0D0D0D,true,"Build a minimal developer tools landing page with dark mode, code snippet previews, feature comparison table, integration logos, and documentation link. Use syntax highlighting colors.","Build a minimal developer tools landing page with dark mode, code snippet previews, feature comparison table, integration logos, and documentation link. Use syntax highlighting colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with product screenshot and code snippet; feature list with performance/security claims; API/SDK section with quick start; integration logos; pricing and docs CTA. Visual style: Dark Mode (OLED) + Minimalism. Color palette: primary #39FF14, secondary #0080FF, CTA #39FF14, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
16,16,Music Streaming,Entertainment,/thumbnails/music-streaming.png,/demo/music-streaming,Dark Mode (OLED) + Vibrant & Block-based,dark,#1DB954,#FF1493,#1DB954,#121212,true,"Create a dark mode music streaming landing page with vibrant accents, playlist showcase, audio player preview, artist spotlight, and premium subscription CTA. Use album art-inspired colors.","Create a dark mode music streaming landing page with vibrant accents, playlist showcase, audio player preview, artist spotlight, and premium subscription CTA. Use album art-inspired colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with player UI preview; featured playlists and albums; artist spotlight and discovery; subscription tiers; download/app store CTA. Visual style: Dark Mode (OLED) + Vibrant & Block-based. Color palette: primary #1DB954, secondary #FF1493, CTA #1DB954, background #121212. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
17,17,Legal Services,Legal,/thumbnails/legal-services.png,/demo/legal-services,Trust & Authority + Minimalism,light,#1E3A5F,#FFD700,#1E3A5F,#FFFFFF,true,"Design a trustworthy legal services landing page with minimal design, practice areas showcase, attorney profiles, case results, and consultation booking. Use professional navy and gold.","Design a trustworthy legal services landing page with minimal design, practice areas showcase, attorney profiles, case results, and consultation booking. Use professional navy and gold. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with practice focus and consultation CTA; practice areas grid; attorney profiles and credentials; case results or testimonials; contact and booking CTA. Visual style: Trust & Authority + Minimalism. Color palette: primary #1E3A5F, secondary #FFD700, CTA #1E3A5F, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
18,18,Wedding & Events,Events,/thumbnails/wedding-events.png,/demo/wedding-events,Soft UI Evolution + Aurora UI,light,#FFD6E0,#FFD700,#FFD700,#FFFAF5,true,"Build a romantic wedding planning landing page with soft UI, portfolio gallery, vendor directory preview, planning tools showcase, and contact form. Use soft pink and gold accents.","Build a romantic wedding planning landing page with soft UI, portfolio gallery, vendor directory preview, planning tools showcase, and contact form. Use soft pink and gold accents. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with romantic imagery and inquiry CTA; package tiers and services; gallery of past events; planning timeline and testimonials; contact form CTA. Visual style: Soft UI Evolution + Aurora UI. Color palette: primary #FFD6E0, secondary #FFD700, CTA #FFD700, background #FFFAF5. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
19,19,Coworking Space,Beauty/Spa,/thumbnails/coworking-space.png,/demo/coworking-space,Vibrant & Block-based + Glassmorphism,light,#FFB6C1,#90EE90,#FFD700,#FFF5F5,true,"Create a vibrant coworking space landing page with glassmorphism cards, space tour preview, membership plans, amenities showcase, and booking CTA. Use energetic modern colors.","Create a vibrant coworking space landing page with glassmorphism cards, space tour preview, membership plans, amenities showcase, and booking CTA. Use energetic modern colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with space imagery and tour CTA; membership tiers and amenities; floor plan or workspace types; community events and testimonials; location map and contact CTA. Visual style: Vibrant & Block-based + Glassmorphism. Color palette: primary #FFB6C1, secondary #90EE90, CTA #FFD700, background #FFF5F5. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
20,20,Sustainability Platform,AI/Chatbot,/thumbnails/sustainability-platform.png,/demo/sustainability-platform,Organic Biophilic + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Design an eco-friendly sustainability platform landing page with organic biophilic elements, carbon footprint calculator preview, impact metrics, and certification badges. Use earth tones and greens.","Design an eco-friendly sustainability platform landing page with organic biophilic elements, carbon footprint calculator preview, impact metrics, and certification badges. Use earth tones and greens. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: impact dashboard with key metrics; initiatives or projects grid; partners and certifications; progress timeline; join or donate CTA. Visual style: Organic Biophilic + Minimalism. Color palette: primary #6366F1, secondary #10B981, CTA #6366F1, background #F5F5F5. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
22,22,Veterinary Clinic,Other,/thumbnails/veterinary-clinic.png,/demo/veterinary-clinic,Soft UI Evolution + Accessible & Ethical,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Design a caring veterinary clinic landing page with soft UI elements, services overview, vet team profiles, emergency contact section, and appointment booking. Use calming pet-friendly colors.","Design a caring veterinary clinic landing page with soft UI elements, services overview, vet team profiles, emergency contact section, and appointment booking. Use calming pet-friendly colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with pet-friendly imagery and booking CTA; services list with icons; vet team profiles and credentials; clinic hours, location map, and emergency info; testimonials and contact CTA. Visual style: Soft UI Evolution + Accessible & Ethical. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
23,23,Pet Adoption Platform,Pet Services,/thumbnails/pet-adoption.png,/demo/pet-adoption,Motion-Driven + Claymorphism,light,#FF9F43,#87CEEB,#FF9F43,#FFF8F0,true,"Build a heartwarming pet adoption platform landing page with motion-driven pet cards, search filters preview, success stories, shelter partnerships, and adoption CTA. Use warm inviting colors.","Build a heartwarming pet adoption platform landing page with motion-driven pet cards, search filters preview, success stories, shelter partnerships, and adoption CTA. Use warm inviting colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: featured pets grid with filters and tags; adoption steps timeline; success stories and testimonials; partner shelters and volunteer info; donate or adopt CTA. Visual style: Motion-Driven + Claymorphism. Color palette: primary #FF9F43, secondary #87CEEB, CTA #FF9F43, background #FFF8F0. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
24,24,Medical Clinic Portal,Other,/thumbnails/medical-clinic.png,/demo/medical-clinic,Accessible & Ethical + Minimalism,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a trustworthy medical clinic landing page with accessible design, services directory, doctor profiles, patient portal preview, and appointment booking. Focus on trust and accessibility.","Create a trustworthy medical clinic landing page with accessible design, services directory, doctor profiles, patient portal preview, and appointment booking. Focus on trust and accessibility. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: services directory with icons; doctor profiles and specialties; patient portal preview and appointment booking; insurance logos and trust badges; accessibility and FAQ section. Visual style: Accessible & Ethical + Minimalism. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
25,25,Telemedicine Platform,Healthcare,/thumbnails/telemedicine.png,/demo/telemedicine,Soft UI Evolution + AI-Native UI,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Design a modern telemedicine platform landing page with soft UI, video consultation preview, specialist directory, health tracking features, and app download CTAs. Use calming healthcare colors.","Design a modern telemedicine platform landing page with soft UI, video consultation preview, specialist directory, health tracking features, and app download CTAs. Use calming healthcare colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with video call preview and booking CTA; care journey steps; doctor profiles and availability; security/privacy assurances; app download CTA. Visual style: Soft UI Evolution + AI-Native UI. Color palette: primary #87CEEB, secondary #90EE90, CTA #22C55E, background #F5F5F5. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
26,26,Mental Health App,Healthcare,/thumbnails/mental-health.png,/demo/mental-health,Neumorphism + Accessible & Ethical,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Build a calming mental health app landing page with neumorphic elements, mood tracking preview, therapy session booking, resource library, and crisis support section. Use soothing pastels.","Build a calming mental health app landing page with neumorphic elements, mood tracking preview, therapy session booking, resource library, and crisis support section. Use soothing pastels. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with calming tone and get-started CTA; therapy plans or programs; session scheduling or chat preview; privacy and safety section; testimonials and resources. Visual style: Neumorphism + Accessible & Ethical. Color palette: primary #87CEEB, secondary #90EE90, CTA #22C55E, background #F5F5F5. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
27,27,Digital Banking App,Other,/thumbnails/digital-banking.png,/demo/digital-banking,Glassmorphism + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a sleek digital banking landing page with glassmorphism cards, account overview preview, transaction features, security highlights, and mobile app download. Use trust-building colors.","Create a sleek digital banking landing page with glassmorphism cards, account overview preview, transaction features, security highlights, and mobile app download. Use trust-building colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with mobile app preview; account overview and card controls; transfer and bill-pay features; budgeting insights and savings goals; security badges and CTA. Visual style: Glassmorphism + Trust & Authority. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
28,28,Investment Platform,Fintech/Crypto,/thumbnails/investment-platform.png,/demo/investment-platform,Dark Mode (OLED) + Data-Dense Dashboard,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Design a professional investment platform landing page with dark mode, portfolio analytics preview, market data widgets, educational resources, and account signup. Focus on trust and data.","Design a professional investment platform landing page with dark mode, portfolio analytics preview, market data widgets, educational resources, and account signup. Focus on trust and data. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: portfolio allocation and performance chart; risk profiles and recommendations; research insights and news; fees/pricing transparency; get-started CTA. Visual style: Dark Mode (OLED) + Data-Dense Dashboard. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
29,29,Payment Gateway,Fintech/Crypto,/thumbnails/payment-gateway.png,/demo/payment-gateway,Minimalism + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build a conversion-focused payment gateway landing page with minimal design, integration code preview, pricing tiers, security certifications, and developer documentation link. Use professional colors.","Build a conversion-focused payment gateway landing page with minimal design, integration code preview, pricing tiers, security certifications, and developer documentation link. Use professional colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with payment flow illustration; supported payment methods; integration steps with API/SDK preview; pricing and compliance badges; contact sales CTA. Visual style: Minimalism + Trust & Authority. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
30,30,Crypto Wallet,Fintech/Crypto,/thumbnails/crypto-wallet.png,/demo/crypto-wallet,Glassmorphism + Dark Mode (OLED),dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a secure crypto wallet landing page with dark glassmorphism, multi-chain support showcase, security features, transaction preview, and download CTAs. Use crypto-native dark theme.","Create a secure crypto wallet landing page with dark glassmorphism, multi-chain support showcase, security features, transaction preview, and download CTAs. Use crypto-native dark theme. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: wallet dashboard with asset list; send/receive and swap preview; staking or rewards; security features (biometrics, backup); download CTA. Visual style: Glassmorphism + Dark Mode (OLED). Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
31,31,DeFi Yield Platform,Fintech/Crypto,/thumbnails/defi-yield.png,/demo/defi-yield,Cyberpunk UI + Glassmorphism,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Design a DeFi yield farming platform landing page with cyberpunk aesthetics, APY calculators, liquidity pools preview, tokenomics section, and wallet connect. Use neon on dark.","Design a DeFi yield farming platform landing page with cyberpunk aesthetics, APY calculators, liquidity pools preview, tokenomics section, and wallet connect. Use neon on dark. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: vaults with APY cards; risk disclosure and strategy info; performance charts; wallet connect CTA; security audits. Visual style: Cyberpunk UI + Glassmorphism. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
32,32,CEX Trading Platform,Fintech/Crypto,/thumbnails/cex-trading.png,/demo/cex-trading,Dark Mode (OLED) + Data-Dense Dashboard,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Build a professional centralized exchange landing page with dark mode, trading interface preview, market pairs, security features, and registration flow. Focus on trust and performance.","Build a professional centralized exchange landing page with dark mode, trading interface preview, market pairs, security features, and registration flow. Focus on trust and performance. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: market overview with charts; order book and trade panel; market pairs list and filters; KYC/security badges; download or sign-up CTA. Visual style: Dark Mode (OLED) + Data-Dense Dashboard. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
33,33,DEX Swap Interface,Fintech/Crypto,/thumbnails/dex-swap.png,/demo/dex-swap,Glassmorphism + Cyberpunk UI,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a decentralized exchange landing page with glassmorphism swap interface preview, supported tokens, liquidity provider benefits, governance features, and wallet integration. Use Web3 aesthetics.","Create a decentralized exchange landing page with glassmorphism swap interface preview, supported tokens, liquidity provider benefits, governance features, and wallet integration. Use Web3 aesthetics. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: swap widget with token selectors; slippage and gas controls; liquidity pools overview; token analytics; connect wallet CTA. Visual style: Glassmorphism + Cyberpunk UI. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
35,35,NFT Art Gallery,NFT/Web3,/thumbnails/nft-art-gallery.png,/demo/nft-art-gallery,Minimalism + Motion-Driven,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build an elegant NFT art gallery landing page with minimal design, curated collections, artist profiles, exhibition previews, and minting interface. Focus on art presentation.","Build an elegant NFT art gallery landing page with minimal design, curated collections, artist profiles, exhibition previews, and minting interface. Focus on art presentation. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with featured artwork; gallery grid with filters; artist profiles; collection detail previews; buy/mint CTA. Visual style: Minimalism + Motion-Driven. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
36,36,Generative Art Platform,AI/Chatbot,/thumbnails/generative-art-platform.png,/demo/generative-art-platform,Minimalism + Gen Z Chaos,dark,#0080FF,#8B00FF,#22C55E,#0D0D0D,true,"Create a generative art platform landing page with dark mode, AI art generation preview, style gallery, creator tools showcase, and minting flow. Use canvas-neutral with vibrant accents.","Create a generative art platform landing page with dark mode, AI art generation preview, style gallery, creator tools showcase, and minting flow. Use canvas-neutral with vibrant accents. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with dynamic art preview; creation tools and parameter controls; gallery of generated works; export or mint options; community showcase CTA. Visual style: Minimalism + Gen Z Chaos. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
37,37,Sales CRM Platform,SaaS,/thumbnails/sales-crm-platform.png,/demo/sales-crm-platform,Feature-Rich Showcase + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Design a professional sales CRM landing page with feature-rich showcase, pipeline visualization preview, integration logos, customer success stories, and free trial CTA. Use trust colors.","Design a professional sales CRM landing page with feature-rich showcase, pipeline visualization preview, integration logos, customer success stories, and free trial CTA. Use trust colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: pipeline board with stages; deal cards and revenue forecast; activity timeline and tasks; integrations and automation; pricing and CTA. Visual style: Feature-Rich Showcase + Trust & Authority. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
38,38,Customer Support CRM,SaaS,/thumbnails/customer-support-crm.png,/demo/customer-support-crm,Soft UI Evolution + Feature-Rich Showcase,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build a friendly customer support CRM landing page with soft UI, ticket management preview, omnichannel features, AI chatbot integration, and pricing comparison. Use approachable colors.","Build a friendly customer support CRM landing page with soft UI, ticket management preview, omnichannel features, AI chatbot integration, and pricing comparison. Use approachable colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: ticket inbox with SLA indicators; agent workload and performance; knowledge base preview; automation rules and integrations; book a demo CTA. Visual style: Soft UI Evolution + Feature-Rich Showcase. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
39,39,AI Writing Assistant,AI/Chatbot,/thumbnails/ai-writing-assistant.png,/demo/ai-writing-assistant,AI-Native UI + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Create an AI writing assistant landing page with minimal chrome, live writing demo, use case showcases, integration options, and subscription tiers. Use neutral with AI purple accent.","Create an AI writing assistant landing page with minimal chrome, live writing demo, use case showcases, integration options, and subscription tiers. Use neutral with AI purple accent. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: editor UI with suggestions; templates and workflows; tone and style controls; collaboration/sharing; upgrade CTA. Visual style: AI-Native UI + Minimalism. Color palette: primary #6366F1, secondary #10B981, CTA #6366F1, background #F5F5F5. Use a light mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."
40,40,AI Image Generator,AI/Chatbot,/thumbnails/ai-image-generator.png,/demo/ai-image-generator,Dark Mode (OLED) + Bento Box Grid,dark,#0080FF,#8B00FF,#22C55E,#0D0D0D,true,"Design an AI image generation platform landing page with dark mode, generation preview gallery, style options, prompt examples, and credit-based pricing. Use creative vibrant accents.","Design an AI image generation platform landing page with dark mode, generation preview gallery, style options, prompt examples, and credit-based pricing. Use creative vibrant accents. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: prompt input with style presets; generation gallery with variants; credit usage and plans; export/share options; get-started CTA. Visual style: Dark Mode (OLED) + Bento Box Grid. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Layout: 12-column grid, max width 1200-1280px, 24px gutters, and an 8pt spacing scale. Section padding: 96px desktop, 64px tablet, 40px mobile. Typography: two-font system, headings 32-48px with tight tracking, subheads 20-24px, body 16-18px with 1.5 line-height, captions 12-13px. Components: buttons 44-48px height with 10-12px radius; secondary buttons outlined; cards 12-16px radius with soft shadow; inputs 44px height; chips 28-32px height. Motion: subtle micro-interactions; hover 150-200ms, press 80-120ms, section reveals 250-400ms ease-out; avoid heavy motion that harms readability. Ensure clear hierarchy, generous spacing, consistent icon style, and accessible contrast for key text and CTAs."