"""
RUBRA v8 — Ultimate Agentic Intelligence
NEW: Multi-model Vision (Groq Vision + Qwen2.5-VL + OCR.space)
NCTB 2026 Full Curriculum Knowledge
UI/UX Pro Max Coding Engine (67 styles, 161 rules)
Advanced Free Models upgraded
"""
import os,sys,re,json,time,uuid,math,sqlite3,hashlib,asyncio,logging
import base64,mimetypes,io,threading
import xml.etree.ElementTree as ET
from pathlib import Path
from typing import Optional,AsyncIterator
from datetime import datetime,timezone
import aiohttp,requests as _req
from fastapi import FastAPI,UploadFile,File,Form,WebSocket,WebSocketDisconnect
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import StreamingResponse,JSONResponse
from pydantic import BaseModel
from urllib.parse import urljoin, urlparse, quote_plus
from html.parser import HTMLParser
import urllib.robotparser
HERE = Path(__file__).resolve().parent
os.chdir(str(HERE))
# ═══════════════════════════════════════════════════════
# API KEYS
# ═══════════════════════════════════════════════════════
ZAI_KEY = os.getenv("ZAI_API_KEY", "b4a30453455d4c5fa63d63ce32b71506.k1s8vXrPLKnr3m5l")
GROQ_KEY = os.getenv("GROQ_API_KEY", "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")
OR_KEY = os.getenv("OPENROUTER_KEY", "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")
OCR_KEY = os.getenv("OCR_SPACE_KEY", "helloworld")
GEMINI_KEY = os.getenv("GEMINI_API_KEY", "AIzaSyAu4k8XvVMVse2oV47u2QFLOJcqOxUui-c")
CEREBRAS_KEY = os.getenv("CEREBRAS_API_KEY", "csk-hrrmp8cp4j94kdhdxcdjp8v3ctmvc2tc3et2pyyywdr9xjjw")
ZAI_CHAT = "https://api.z.ai/api/paas/v4/chat/completions"
ZAI_CODE = "https://api.z.ai/api/coding/paas/v4/chat/completions"
GROQ_URL = "https://api.groq.com/openai/v1/chat/completions"
OR_URL = "https://openrouter.ai/api/v1/chat/completions"
GEMINI_URL = "https://generativelanguage.googleapis.com/v1beta/openai/chat/completions"
CEREBRAS_URL = "https://api.cerebras.ai/v1/chat/completions"
DB_PATH = HERE / "rubra.db"
UPLOAD_DIR = HERE / "uploads"
UPLOAD_DIR.mkdir(exist_ok=True)
import shutil
# ── Agentic Skill Directory ──────────────────────────────
SKILLS_DIR = HERE / "skills"
SKILLS_DIR.mkdir(exist_ok=True)
# ── JSON Session Memory (persistent) ────────────────────
SESSION_DIR = HERE / "sessions"
SESSION_DIR.mkdir(exist_ok=True)
def session_path(sid: str) -> Path:
return SESSION_DIR / f"{sid}.json"
def session_load(sid: str) -> dict:
p = session_path(sid)
if p.exists():
try: return json.loads(p.read_text())
except: pass
return {"session_id":sid,"created_at":time.time(),"user_intent_history":[],
"preferred_lang":"en","coding_style":"clean","topic_memory":{},
"skill_calls":[],"thought_chain":[]}
def session_save(sid: str, data: dict):
try: session_path(sid).write_text(json.dumps(data,ensure_ascii=False,indent=2))
except Exception as e: log.warning(f"Session save: {e}")
def session_update(sid: str, key: str, value):
data = session_load(sid)
if key in ("user_intent_history","skill_calls","thought_chain"):
lst = data.get(key,[]); lst.append(value); data[key] = lst[-50:]
else: data[key] = value
session_save(sid, data)
logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")
log = logging.getLogger("rubra")
# ═══════════════════════════════════════════════════════
# UI/UX PRO MAX v2.5 — FULL SKILL MODULE FOR app.py
# Source: nextlevelbuilder/ui-ux-pro-max-skill (v2.5.0)
# ═══════════════════════════════════════════════════════
import csv, io, math, re
from typing import Optional
# ── DATA TABLES ─────────────────────────────────────────
# Converted from CSV databases in src/ui-ux-pro-max/data/
# 67 UI STYLES
_STYLES_CSV = """id,name,keywords,best_for,performance,accessibility,effects,avoid
1,Minimalism & Swiss Style,"minimal,clean,simple,whitespace,grid,typography",Enterprise apps / dashboards / documentation,Excellent,WCAG AA,"Strict grid, typography-first, monochrome","Excessive decoration, gradients"
2,Neumorphism,"soft,shadow,emboss,depth,subtle,tactile",Health/wellness / meditation / premium tools,Good,Moderate,"Soft box-shadows, monochromatic surfaces","Dark backgrounds, low contrast"
3,Glassmorphism,"glass,frosted,blur,transparent,modern,saas",Modern SaaS / fintech dashboards / AI products,Good,WCAG AA,"backdrop-filter:blur, rgba backgrounds, subtle borders","Pure white bg (needs dark/image bg)"
4,Brutalism,"raw,bold,borders,clash,chaotic,contrast",Design portfolios / artistic projects / anti-brand,Excellent,Moderate,"Thick borders, unexpected layouts, monospace","Subtlety, drop shadows"
5,3D & Hyperrealism,"3d,realistic,immersive,product,depth",Gaming / product showcase / immersive experiences,Heavy,Moderate,"Three.js / CSS 3D transforms, ambient lighting","Flat icons, 2D-only approach"
6,Vibrant & Block-based,"vibrant,block,bold,color,punch,energy",Startups / creative agencies / gaming,Good,WCAG AA,"Bold color blocks, high contrast, geometric","Muted palettes, soft shadows"
7,Dark Mode OLED,"dark,black,oled,night,low-light,code",Night apps / coding platforms / media,Excellent,WCAG AA,"#000000 bg, minimal battery (OLED), subtle glows","Pure white text (use #e2e8f0)"
8,Accessible & Ethical,"accessible,wcag,inclusive,government,high-contrast",Government / healthcare / education,Excellent,WCAG AAA,"4.5:1+ contrast, skip links, focus rings","Decorative-only elements"
9,Claymorphism,"clay,3d-soft,puffy,inflated,cartoon,playful",Educational / children's / SaaS onboarding,Good,Moderate,"Inflated 3D shapes, pastel fills, thick outlines","Photorealism, dark themes"
10,Aurora UI,"aurora,gradient,mesh,glow,animated,modern",Modern SaaS / creative agencies / AI,Good,WCAG AA,"Gradient mesh bg, animated aurora effects","Static solid backgrounds"
11,Retro-Futurism,"retro,80s,synthwave,neon,nostalgia,sci-fi",Gaming / entertainment / music platforms,Good,Moderate,"Scanlines, neon glows, grid lines, CRT effects","Flat modern icons"
12,Flat Design,"flat,simple,2d,clean,icon,material-lite",Web apps / mobile apps / startup MVPs,Excellent,WCAG AA,"No shadows, bold icons, solid fills","Gradients, textures, 3D"
13,Skeuomorphism,"realistic,texture,leather,wood,physical,tangible",Legacy apps / premium audio / gaming,Heavy,Moderate,"Texture fills, realistic shadows, material surfaces","Overuse (looks dated)"
14,Liquid Glass,"liquid,fluid,premium,shine,depth,apple",Premium SaaS / high-end e-commerce,Good,WCAG AA,"Multi-layer blur, prismatic effects, specular highlights","Low-end devices (perf)"
15,Motion-Driven,"motion,animation,scroll,reveal,gsap,storytelling",Portfolio sites / storytelling / brand launches,Heavy,Moderate,"GSAP/Framer scroll triggers, parallax, SVG morphing","prefers-reduced-motion neglect"
16,Micro-interactions,"micro,feedback,haptic,touch,response,mobile",Mobile apps / touchscreen UIs / forms,Good,WCAG AA,"Bounce, spring physics, press states, ripple","Desktop-only hover states"
17,Inclusive Design,"inclusive,a11y,screen-reader,wcag-aaa,empathy",Public services / education / healthcare,Excellent,WCAG AAA,"High contrast modes, large targets 44px+, aria labels","Icon-only buttons"
18,Zero Interface,"voice,ai,ambient,invisible,conversational,minimal",Voice assistants / AI platforms / smart home,Excellent,High,"Minimal chrome, audio feedback, ambient display","Visual overload"
19,Soft UI Evolution,"soft,modern,rounded,neutral,enterprise,saas",Modern enterprise / SaaS / productivity,Excellent,WCAG AA,"Subtle elevation, rounded-2xl, neutral palette","Sharp edges, harsh shadows"
20,Neubrutalism,"neubrutalism,thick-border,offset-shadow,flat,genz,figma",Gen Z brands / startups / Figma-style,Excellent,WCAG AA,"2-4px solid borders, offset box-shadow, flat fills","Subtle or rounded styles"
21,Bento Box Grid,"bento,grid,card,dashboard,asymmetric,modular",Dashboards / product pages / portfolios,Excellent,WCAG AA,"Asymmetric grids, varying card sizes, hover reveals","Single-column layouts"
22,Y2K Aesthetic,"y2k,chrome,bubble,millennium,iridescent,2000s",Fashion / music / Gen Z,Good,Moderate,"Chrome text, iridescent fills, bubble UI, star shapes","Minimalism"
23,Cyberpunk UI,"cyber,neon,dark,grid,glitch,hacker,matrix",Gaming / tech products / crypto apps,Good,Moderate,"Neon #00fff5/#ff00ff, grid overlays, glitch animations","Pastel colors"
24,Organic Biophilic,"organic,nature,leaf,earth,green,wellness",Wellness apps / sustainability brands,Good,WCAG AA,"Leaf shapes, earth tones, organic curves, textures","Geometric rigidity"
25,AI-Native UI,"ai,chat,copilot,streaming,dark,assistant",AI products / chatbots / copilots,Excellent,WCAG AA,"Dark base #0a0a0a, typing indicators, token streaming","Busy backgrounds"
26,Memphis Design,"memphis,geometric,pattern,80s,playful,retro",Creative agencies / music / youth brands,Good,Moderate,"Bold geometric shapes, primary colors, pattern fills","Subtlety"
27,Vaporwave,"vaporwave,pink,purple,retrowave,aesthetic,sunset",Music platforms / gaming / portfolios,Good,Moderate,"#ff6ec7/#b967ff palette, grid floors, retro 3D","Corporate contexts"
28,Dimensional Layering,"layers,depth,z-index,card,floating,elevation",Dashboards / card layouts / modals,Good,WCAG AA,"Multiple elevation levels, floating panels, blur depth","Flat single-layer"
29,Exaggerated Minimalism,"extreme,whitespace,large-type,fashion,editorial",Fashion / architecture / luxury,Excellent,Moderate,"Massive whitespace, oversized typography, restraint","Crowded layouts"
30,Kinetic Typography,"kinetic,text-animation,headline,gsap,scroll",Hero sections / marketing sites / brand,Heavy,Moderate,"Text reveals, character-by-character, scroll-linked","Body text animations"
31,Parallax Storytelling,"parallax,scroll,depth,story,reveal,brand",Brand storytelling / product launches,Heavy,Moderate,"Multi-layer parallax, scroll-triggered reveals","prefers-reduced-motion neglect"
32,Swiss Modernism 2.0,"swiss,grid,helvetica,corporate,architecture,editorial",Corporate / architecture / editorial,Excellent,WCAG AA,"Strict typographic grid, Helvetica/Neue, asymmetry","Decorative elements"
33,HUD Sci-Fi FUI,"hud,fui,hologram,scan,radar,space,tech",Sci-fi games / space tech / cybersecurity,Good,Moderate,"Radar animations, scan lines, holographic circles","Consumer apps"
34,Pixel Art,"pixel,8bit,retro,game,sprite,indie",Indie games / retro tools / creative,Good,Moderate,"Pixel fonts, sprite animations, grid-snapped","High-res photography"
35,Spatial UI VisionOS,"spatial,visionos,ar,vr,depth,frosted,apple",Spatial computing / VR/AR apps,Good,Moderate,"Multi-plane layers, frosted glass panels, depth","2D flat interfaces"
36,E-Ink Paper,"e-ink,paper,reading,monochrome,newspaper,minimal",Reading apps / digital newspapers,Excellent,WCAG AA,"High contrast B&W, minimal animation, serif type","Color fills, animations"
37,Gen Z Chaos Maximalism,"maximal,chaotic,clutter,intense,doomscroll,loud",Gen Z lifestyle / music artists,Good,Low,"Overlapping elements, mixed fonts, noise textures","Order and alignment"
38,Biomimetic Organic,"biomimetic,biotech,science,organic-2,cell,nature-tech",Sustainability tech / biotech / health,Good,Moderate,"Cell-like shapes, bioluminescent glows, fluid motion","Rigid geometric"
39,Anti-Polish Raw,"raw,unfinished,authentic,sketch,handmade,lo-fi",Creative portfolios / artist sites,Excellent,Moderate,"Sketch lines, imperfect shapes, handwritten type","Polished corporate"
40,Tactile Deformable,"tactile,press,deform,elastic,spring,physical",Modern mobile / playful brands,Good,WCAG AA,"Spring physics on press, elastic deformation","Desktop-only designs"
41,Nature Distilled,"nature,botanical,minimal-organic,calm,earth,leaf",Wellness brands / sustainable products,Excellent,WCAG AA,"Botanical illustrations, earth tones, organic type","Neon or synthetic colors"
42,Interactive Cursor,"cursor,custom,trail,magnetic,hover-effect,creative",Creative portfolios / interactive agencies,Good,Moderate,"Magnetic hover, cursor trails, custom SVG cursors","Mobile (no cursor)"
43,Voice-First Multimodal,"voice,multimodal,speech,waveform,accessibility-first",Voice assistants / accessibility apps,Excellent,WCAG AAA,"Waveform animations, voice indicators, minimal text","Dense UI"
44,3D Product Preview,"3d-product,ecommerce-3d,rotate,webgl,try-on,ar",E-commerce / furniture / fashion,Heavy,Moderate,"Three.js product viewer, AR try-on, zoom controls","Non-product pages"
45,Gradient Mesh Aurora,"mesh,aurora-evolved,gradient-mesh,background,hero",Hero sections / backgrounds / creative,Good,WCAG AA,"CSS mesh gradients, animated color stops","Overuse on content areas"
46,Editorial Grid Magazine,"editorial,magazine,grid-break,journalism,article",News sites / blogs / magazines,Excellent,WCAG AA,"Pull quotes, column grids, drop caps, image bleeds","Dashboard layouts"
47,Chromatic Aberration,"chromatic,rgb-split,glitch-color,psychedelic,lens",Music platforms / gaming / experimental,Good,Moderate,"RGB channel offset, lens distortion, color split","Professional contexts"
48,Vintage Analog Retro Film,"vintage,film,grain,analog,vinyl,photography-retro",Photography / music / vinyl brands,Good,Moderate,"Film grain overlay, sepia/fade, retro color grading","Modern tech products"
49,Hero-Centric Design,"hero,landing,fullscreen,above-fold,cta,conversion",Products with strong visual identity,Excellent,WCAG AA,"Full-viewport hero, single CTA, visual hierarchy","Feature-heavy first screen"
50,Conversion-Optimized,"conversion,cro,sales,lead-gen,funnel,cta-heavy",Lead generation / sales pages,Excellent,WCAG AA,"CTA repetition, urgency signals, social proof inline","Distracting animations"
51,Feature-Rich Showcase,"features,saas-landing,comparison,benefits,icons",SaaS / complex products,Good,WCAG AA,"Feature grid, icon + text, comparison tables","Wall of text"
52,Minimal & Direct,"minimal-landing,simple,fast,single-cta,startup",Simple products / apps / MVPs,Excellent,WCAG AA,"One message, one CTA, fast load","Feature overload"
53,Social Proof Focused,"testimonial,review,trust,rating,social-proof,b2c",Services / B2C products,Excellent,WCAG AA,"Star ratings, photo testimonials, logos bar","Generic stock photos"
54,Interactive Product Demo,"demo,interactive,saas-demo,try,product-tour",Software / tools,Good,WCAG AA,"Inline demos, hotspot tours, video embeds","Autoplay audio"
55,Trust & Authority,"b2b,enterprise,authority,case-study,white-paper",B2B / enterprise / consulting,Excellent,WCAG AA,"Case studies, client logos, certifications","Casual or playful tone"
56,Storytelling-Driven Landing,"story,narrative,scroll-story,brand-story,emotional",Brands / agencies / nonprofits,Good,WCAG AA,"Chapter-based scroll, emotional photography","Hard selling"
57,Data-Dense Dashboard,"data-dense,bi,analytics,tables,metrics,kpi",Complex data analysis,Good,WCAG AA,"Compact rows, sparklines, progressive disclosure","Large empty space"
58,Heat Map Style,"heatmap,geographic,behavioral,density,choropleth",Geographic / behavior data,Good,Moderate,"Color gradient maps, zoom controls, legends","Non-data contexts"
59,Executive Dashboard,"executive,c-suite,summary,kpi-only,high-level",C-suite summaries,Excellent,WCAG AA,"Large KPI numbers, trend arrows, minimal detail","Detailed raw data"
60,Real-Time Monitoring,"realtime,ops,devops,alert,live-feed,websocket",Operations / DevOps / trading,Good,WCAG AA,"Live updates, alert badges, status indicators","Static screenshots"
61,Drill-Down Analytics,"drilldown,explore,filter,pivot,tableau-style",Detailed data exploration,Good,WCAG AA,"Expandable rows, filter panels, breadcrumb nav","Flat single-level"
62,Comparative Analysis,"compare,side-by-side,benchmark,before-after,vs",Side-by-side comparisons,Good,WCAG AA,"Split layouts, synchronized scroll, diff views","Single-view only"
63,Predictive Analytics,"predictive,forecast,ml,trend,projection,ai-chart",Forecasting / ML insights,Good,WCAG AA,"Confidence bands, scenario toggles, trend lines","Historical-only views"
64,User Behavior Analytics,"uba,session,funnel,cohort,product-analytics",UX research / product analytics,Good,WCAG AA,"Funnel charts, session replays, cohort grids","Generic BI styles"
65,Financial Dashboard,"finance,accounting,p&l,revenue,cashflow,trading",Finance / accounting,Good,WCAG AA,"Candlestick charts, P&L tables, green/red coding","Casual color palette"
66,Sales Intelligence,"sales,crm,pipeline,deals,revenue-forecast,salesforce",Sales teams / CRM,Good,WCAG AA,"Pipeline stages, win/loss, quota progress bars","Non-sales contexts"
67,Ambient Calm UI,"calm,ambient,peaceful,breathe,zen,wellness-app",Meditation / sleep / mental health,Excellent,WCAG AA,"Slow animations, muted palette, breathing space","High-energy interactions"
"""
# 161 REASONING RULES (product type → design system)
_RULES_CSV = """id,product_type,keywords,pattern,style_priority,color_mood,typography_mood,key_effects,anti_patterns
1,SaaS Platform,"saas,software,subscription,b2b,platform",Feature-Rich Showcase,Glassmorphism|Soft UI Evolution|Bento Box Grid,Blue-indigo neutral,"Inter/DM Sans, clean","Subtle hover elevations, smooth transitions","AI purple gradients on white"
2,Micro SaaS,"micro-saas,indie,solo,niche,small-saas",Minimal & Direct,Minimalism|Flat Design|Neubrutalism,Focused monochrome,"Geist, modern mono","Single CTA, fast load","Feature overload"
3,B2B Service,"b2b,enterprise,consulting,professional,corporate",Trust & Authority,Swiss Modernism 2.0|Soft UI Evolution,Navy-gray professional,"Neue Haas, IBM Plex","Case study cards, logo bars","Playful colors, emoji icons"
4,Developer Tool IDE,"developer,devtool,ide,coding,terminal,cli",Dark Mode OLED|Minimal & Direct,Dark Mode OLED|Neubrutalism,Dark #0d1117 green accent,"JetBrains Mono, Geist Mono","Syntax highlighting, terminal feel","Colorful gradients"
5,AI Chatbot Platform,"ai,chatbot,llm,assistant,copilot,gpt",AI-Native UI,AI-Native UI|Glassmorphism,Dark #0a0a0a rose/cyan accent,"Space Grotesk, JetBrains Mono","Token streaming, typing dots, glow","Busy backgrounds"
6,Cybersecurity Platform,"security,cyber,soc,threat,firewall,pentest",HUD Sci-Fi FUI|Dark Mode OLED,HUD Sci-Fi FUI|Dark Mode OLED,Dark green matrix or dark blue,"Roboto Mono, IBM Plex Mono","Scan animations, alert pulses","Pastel friendly colors"
7,No-Code Builder,"nocode,builder,drag-drop,visual,lowcode,website-builder",Bento Box Grid|Claymorphism,Bento Box Grid|Claymorphism|Flat Design,Vibrant primary,"Nunito, Poppins","Drag handles, live preview","Complex dark themes"
8,Project Management,"project,task,kanban,todo,agile,trello,jira",Bento Box Grid|Soft UI Evolution,Bento Box Grid|Dimensional Layering,Neutral productive,"Inter, DM Sans","Drag kanban, progress bars","Information overload"
9,Analytics Dashboard,"analytics,dashboard,metrics,kpi,reporting,bi",Data-Dense Dashboard,Bento Box Grid|Data-Dense Dashboard,Dark navy or white clean,"DM Mono, IBM Plex","Recharts/Chart.js, sparklines","Decorative-only charts"
10,Fintech Crypto,"fintech,crypto,bitcoin,defi,wallet,blockchain,trading",Glassmorphism|Cyberpunk UI,Glassmorphism|Dark Mode OLED,Dark + green #00ff88 or cyan,"Roboto Mono, Space Grotesk","Live tickers, candlestick charts","Cute/playful elements"
11,Banking App,"banking,bank,account,transfer,finance,money",Trust & Authority,Soft UI Evolution|Minimalism,Trustworthy navy/white,"Neue Haas Grotesk, Source Sans","Secure icons, progress steps","Gradients, neon"
12,Insurance Platform,"insurance,policy,coverage,claim,premium",Trust & Authority,Minimalism|Swiss Modernism 2.0,Corporate blue-white,"IBM Plex, Source Serif","Step forms, coverage tables","Playful animations"
13,Personal Finance Tracker,"budget,expense,saving,money-tracker,personal-finance",Soft UI Evolution|Bento Box Grid,Bento Box Grid|Soft UI Evolution,Calm green-white,"Nunito, Lato","Donut charts, goal bars","Complexity, dark themes"
14,Invoice Billing Tool,"invoice,billing,payment,receipt,accounting",Minimalism|Flat Design,Minimalism|Flat Design,Clean white professional,"Inter, DM Sans","Clean tables, PDF export feel","Colorful decoration"
15,Medical Clinic,"medical,clinic,doctor,health,patient,appointment",Accessible & Ethical,Accessible & Ethical|Inclusive Design,Trustworthy blue-white,"Source Sans, Open Sans","Step forms, time slots","Decorative elements"
16,Pharmacy,"pharmacy,medicine,drug,prescription,rx",Accessible & Ethical,Minimalism|Accessible & Ethical,Clean green-white,"Source Sans, Helvetica","Search-first, dosage clarity","Dark themes"
17,Mental Health App,"mental,therapy,anxiety,depression,mindfulness,calm",Ambient Calm UI|Organic Biophilic,Organic Biophilic|Neumorphism,Soft lavender-sage-white,"Nunito, Lato","Breathing animations, soft transitions","Harsh contrast, red alerts"
18,Fitness Workout App,"fitness,workout,exercise,gym,training,sport",Vibrant & Block-based,Vibrant & Block-based|Dark Mode OLED,Dark + electric blue/orange,"Exo 2, Rajdhani","Progress rings, intensity meters","Soft pastels"
19,Telemedicine,"telemedicine,telehealth,video-consult,remote-doctor",Accessible & Ethical,Accessible & Ethical|Minimalism,Medical blue-white,"Open Sans, Source Sans","Video UI, appointment flow","Complex animations"
20,Dental Practice,"dental,dentist,teeth,orthodontic",Minimalism,Soft UI Evolution|Minimalism,Clean white-teal,"Source Sans, Lato","Before/after image slider","Dark heavy themes"
21,General E-commerce,"ecommerce,shop,store,buy,cart,checkout",Social Proof-Focused,Social Proof-Focused|Hero-Centric Design,Brand-specific warm,"Poppins, Libre Baskerville","Product zoom, quick-add, reviews","Complex nav, buried CTA"
22,Luxury E-commerce,"luxury,premium,high-end,fashion-store,couture",Exaggerated Minimalism,Exaggerated Minimalism|Editorial Grid,Monochrome + gold accent,"Cormorant Garamond, Montserrat","Large imagery, slow reveal","Cluttered discount badges"
23,Marketplace P2P,"marketplace,p2p,listing,seller,peer-to-peer,airbnb-like",Flat Design|Bento Box Grid,Flat Design|Bento Box Grid,Neutral trust,"Inter, DM Sans","Filter sidebar, map view, ratings","Visual complexity"
24,Subscription Box,"subscription,box,monthly,curated,unboxing",Hero-Centric Design|Social Proof,Social Proof-Focused,Warm unboxing palette,"Playfair Display, Lato","Unboxing animation, countdown","Cluttered product grid"
25,Food Delivery,"food,delivery,restaurant-app,takeout,order,uber-eats",Motion-Driven|Hero-Centric,Vibrant & Block-based,Appetite-stimulating warm red/orange,"Nunito, Poppins","Food photos full-bleed, quick order","Muted colors"
26,Beauty Spa,"beauty,spa,wellness,skincare,salon,massage",Soft UI Evolution|Organic Biophilic,Soft UI Evolution|Nature Distilled,Soft pink-sage-ivory,"Cormorant Garamond, Montserrat","Scroll reveals, before/after","Dark themes, neon"
27,Restaurant,"restaurant,dining,cafe,food,menu,reservation",Hero-Centric Design,Hero-Centric Design|Editorial Grid,Warm appetite palette,"Playfair Display, Lato","Full-bleed food imagery, reservation CTA","Plain product grid"
28,Hotel Resort,"hotel,resort,hospitality,accommodation,booking",Storytelling-Driven Landing,Storytelling-Driven|Exaggerated Minimalism,Luxury warm neutrals,"Cormorant Garamond, Raleway","Room galleries, availability calendar","Cluttered UI"
29,Legal Services,"legal,law,attorney,lawyer,compliance",Trust & Authority,Trust & Authority|Swiss Modernism 2.0,Corporate navy-gold,"Georgia, Source Serif","Document download, consultation CTA","Playful colors"
30,Home Services,"home,plumber,electrician,handyman,cleaning,hvac",Social Proof-Focused,Social Proof-Focused|Flat Design,Trust blue-white-orange,"Open Sans, Nunito","Service cards, zip-code entry","Overly corporate"
31,Booking Appointment,"booking,appointment,schedule,calendar,reserve",Flat Design|Bento Box Grid,Flat Design|Soft UI Evolution,Clean actionable,"Inter, DM Sans","Calendar picker, time slots, confirm flow","Complex multi-step"
32,Travel Agency,"travel,trip,vacation,flights,tourism,destination",Parallax Storytelling,Parallax Storytelling|Hero-Centric,Vivid destination-inspired,"Raleway, Open Sans","Destination cards, map, booking CTA","Text-heavy"
33,Real Estate,"realestate,property,homes,listings,mortgage",Social Proof-Focused|Interactive Demo,Social Proof-Focused|Bento Box Grid,Trustworthy neutral,"Libre Baskerville, DM Sans","Map view, photo galleries, mortgage calc","Cluttered listings"
34,Education Platform,"education,elearning,course,lms,online-learning",Claymorphism|Flat Design,Claymorphism|Flat Design,Bright primary friendly,"Nunito, Open Sans","Progress bars, quiz cards, certificate","Dark themes for study"
35,K12 School,"school,k12,elementary,high-school,student",Claymorphism,Claymorphism|Flat Design,Bright primary,"Nunito, Quicksand","Fun animations, achievement badges","Adult-corporate"
36,University College,"university,college,campus,academic",Swiss Modernism 2.0|Trust,Trust & Authority|Minimalism,Institutional navy/crimson,"Merriweather, Source Sans","Event calendar, department nav","Overly playful"
37,Online Tutoring,"tutor,tutoring,private-lesson,homework-help",Claymorphism|Soft UI Evolution,Claymorphism|Soft UI Evolution,Warm encouraging,"Nunito, Poppins","Session booking, whiteboard feel","Intimidating academic"
38,Language Learning,"language,translation,vocab,flashcard,duolingo-like",Gamification style,Claymorphism|Vibrant,Bright gamified,"Nunito, Fredoka","Streak counters, XP bars, celebration","Dull monochrome"
39,Creative Portfolio,"portfolio,designer,artist,creative,showcase",Brutalism|Exaggerated Minimalism,Brutalism|Motion-Driven,Personal brand-specific,"Variable fonts, Clash Display","Strong grid, project hover reveals","Generic templates"
40,Photography Portfolio,"photography,photographer,photo-portfolio",Exaggerated Minimalism|Editorial Grid,Exaggerated Minimalism,Monochrome or muted,"Cormorant Garamond, Futura","Masonry grid, lightbox, lazy-load","Text-heavy, colored UI"
41,Creative Agency,"agency,studio,creative-studio,production",Motion-Driven|Brutalism,Motion-Driven|Neubrutalism,High contrast black/white + 1 accent,"Clash Display, Satoshi","GSAP text reveals, cursor effects","Generic Bootstrap"
42,Graphic Design Tool,"design,figma-like,vector,illustration,canvas",Flat Design|Dark Mode,Dark Mode OLED|Flat Design,Dark productive,"Inter, IBM Plex Sans","Canvas UI, tool sidebar, color pickers","Decorative animations"
43,Photography App Mobile,"photo-app,camera,filter,instagram-like",Dark Mode OLED,Dark Mode OLED|Flat Design,Near-black + accent,"SF Pro, Inter","Filter previews, camera UI","Heavy gradients"
44,Music Streaming,"music,streaming,spotify-like,playlist,artist",Dark Mode OLED|Vaporwave,Dark Mode OLED|Vaporwave,Dark + vibrant accent,"Circular, Nunito","Album art dominant, waveform viz","Light themes"
45,Podcast Platform,"podcast,audio,episode,rss,listener",Minimal & Direct|Dark Mode,Minimalism|Dark Mode OLED,Dark or clean white,"Libre Franklin, DM Sans","Episode list, waveform, subscribe","Visual clutter"
46,Video Streaming,"video,streaming,netflix-like,watch,vod",Dark Mode OLED,Dark Mode OLED,Pure black #000,"Helvetica Neue, DM Sans","Thumbnail hover play, progress bar","Light or colorful bg"
47,Gaming Platform,"gaming,game,esports,steam-like,multiplayer",Cyberpunk UI|Dark Mode,Cyberpunk UI|3D & Hyperrealism,Dark + neon green/orange,"Exo 2, Rajdhani","Game card hovers, neon glows, particle FX","Soft pastels"
48,Indie Game Landing,"indie-game,game-landing,itch-io",Retro-Futurism|Brutalism,Retro-Futurism|Pixel Art,Game-specific thematic,"Pixel fonts or Clash Display","Game screenshots, trailer embed","Corporate clean"
49,Web3 NFT,"web3,nft,blockchain,crypto-art,dao,ethereum",Glassmorphism|Cyberpunk,Glassmorphism|Cyberpunk UI,Dark + gradient accent,"Space Grotesk, Monument Extended","Wallet connect, grid galleries","Traditional trust signals"
50,Social Network,"social,network,feed,post,community,twitter-like",Flat Design|Minimal,Flat Design|Soft UI Evolution,Clean white/dark,"Inter, SF Pro","Feed cards, notifications, follow","Heavy gradients"
51,Community Forum,"forum,community,discussion,reddit-like,discord-like",Flat Design|Dark Mode,Flat Design|Dark Mode OLED,Clean dark or white,"Inter, Source Sans","Thread nesting, upvotes, user cards","Complex decoration"
52,Dating App,"dating,match,swipe,tinder-like,romance",Hero-Centric|Vibrant,Vibrant & Block-based|Glassmorphism,Warm red-pink or sunset,"Nunito, Poppins","Swipe cards, match animation, chat","Clinical or corporate"
53,Job Board,"job,hiring,recruitment,career,linkedin-like",Minimalism|Flat Design,Minimalism|Flat Design,Professional neutral,"Source Sans, DM Sans","Filter sidebar, job cards, apply flow","Heavy animation"
54,Freelance Marketplace,"freelance,gig,fiverr-like,upwork-like,contractor",Social Proof-Focused,Social Proof-Focused|Flat Design,Trust warm neutral,"Inter, Open Sans","Skill tags, rating stars, portfolio grid","Overwhelming categories"
55,Newsletter Tool,"newsletter,email,subscriber,substack-like,mailchimp",Minimal & Direct|Editorial,Minimalism|Editorial Grid,Warm editorial,"Lora, DM Sans","Subscribe hero, preview card, stats","Heavy interactive UI"
56,Personal Blog,"blog,writing,article,personal-site,medium-like",Editorial Grid Magazine,Editorial Grid Magazine,Paper white or dark editorial,"Lora, Merriweather","Drop caps, reading time, related posts","Dashboard-style chrome"
57,News Media,"news,journalism,newspaper,media,breaking",Editorial Grid Magazine,Editorial Grid Magazine,Newspaper B&W + 1 accent,"Libre Baskerville, Source Serif","Breaking ticker, section nav, photo essays","Flashy animations"
58,Recipe Cooking,"recipe,cooking,food-blog,chef,ingredients",Hero-Centric Design|Editorial,Hero-Centric Design,Warm appetite,"Playfair Display, Lato","Food photography hero, step cards, print view","Dark or techy"
59,Weather App,"weather,forecast,temperature,climate,meteorology",Soft UI Evolution|Glassmorphism,Glassmorphism|Soft UI Evolution,Sky blues and warm amber,"Nunito, DM Mono for temps","Animated weather icons, hourly scroll","Text-heavy data"
60,Habit Tracker,"habit,tracker,streak,productivity,routine",Claymorphism|Gamification,Claymorphism|Vibrant,Bright motivating,"Nunito, Quicksand","Streak flame, calendar dots, celebration","Dark depressing themes"
61,Meditation App,"meditation,mindfulness,breathing,calm-app,sleep",Ambient Calm UI,Ambient Calm UI|Organic Biophilic,Soft lavender-navy-warm white,"Nunito, Lato","Breathing circle, ambient sound viz","Harsh colors, fast animations"
62,Diary Journal App,"diary,journal,writing,reflection,private",E-Ink Paper|Minimal,E-Ink Paper|Exaggerated Minimalism,Paper warm white or dark,"Lora, Merriweather","Lined paper feel, date nav","Social/sharing elements"
63,Mood Tracker,"mood,emotion,mental-log,feeling",Claymorphism|Soft,Claymorphism|Soft UI Evolution,Warm pastel rainbow,"Nunito, Quicksand","Emoji mood scale, color-coded calendar","Clinical or dark"
64,Home Automation,"smart-home,iot,automation,dashboard-home,alexa-like",HUD Sci-Fi FUI|Bento,Bento Box Grid|Dark Mode OLED,Dark slate + teal accent,"Inter, DM Mono","Device tiles, toggle animations, status rings","Colorful consumer"
65,Startup Landing,"startup,mvp,launch,product-launch,early-stage",Conversion-Optimized|Hero-Centric,Hero-Centric Design|Minimal & Direct,Brand-specific focused,"Sora, DM Sans","Bold headline, waitlist form, social proof","Feature grid overload"
66,Portfolio Personal,"personal,about-me,cv-online,personal-brand",Brutalism|Exaggerated Minimalism,Brutalism|Motion-Driven,Personal unique,"Variable/Clash Display","Strong type, project reveals, hover effects","Generic Bootstrap portfolio"
67,Documentation Site,"docs,documentation,api-docs,developer-docs,readme",Minimalism|Dark Mode,Minimalism|Dark Mode OLED,Neutral with code accent,"Inter, JetBrains Mono","Sidebar nav, code blocks, search","Heavy visual decoration"
68,Changelog Updates,"changelog,updates,release-notes,what-new",Minimalism|Flat,Minimalism|Flat Design,Clean white,"Inter, DM Sans","Timeline list, version badges","Complex interactive"
69,Status Page,"status,uptime,incident,operational,downtime",Minimalism|Accessible,Minimalism|Accessible & Ethical,Neutral green/red semantic,"Inter, Source Sans","Status dots, incident timeline","Colorful branding"
70,Admin Panel,"admin,backoffice,cms,management,crud",Data-Dense Dashboard,Bento Box Grid|Data-Dense,Neutral gray productive,"Inter, DM Sans","Sidebar + content, data tables, modals","Consumer-facing aesthetics"
71,CRM Platform,"crm,customer,sales-crm,contacts,pipeline",Data-Dense Dashboard,Bento Box Grid|Data-Dense,Professional neutral,"Inter, DM Sans","Pipeline kanban, contact cards, activity feed","Heavy animation"
72,HR Platform,"hr,human-resources,employees,onboarding,payroll",Soft UI Evolution,Soft UI Evolution|Bento Box Grid,Professional friendly,"Source Sans, Nunito","Org chart, vacation calendar, payroll table","Harsh corporate"
73,Event Platform,"event,conference,ticket,registration,venue",Hero-Centric Design|Social Proof,Hero-Centric Design,Event-specific thematic,"Raleway, Open Sans","Countdown timer, speaker grid, venue map","Text-heavy listings"
74,Auction Platform,"auction,bid,lot,sothebys-like,marketplace-auction",Trust & Authority|Editorial,Trust & Authority,Premium neutral-gold,"Libre Baskerville, DM Sans","Countdown bid timer, lot gallery","Playful or casual"
75,Charity Nonprofit,"charity,nonprofit,donation,cause,ngo",Storytelling-Driven|Social Proof,Storytelling-Driven Landing,Warm emotional palette,"Merriweather, Open Sans","Impact numbers, photo stories, donate CTA","Cold corporate"
76,Crowdfunding,"crowdfunding,kickstarter-like,fund,campaign,backer",Social Proof-Focused|Hero-Centric,Social Proof-Focused,Campaign-specific,"Nunito, Poppins","Progress bar, backer count, reward tiers","Generic marketplace"
77,Real Estate Investment,"realestate-invest,reit,property-invest,crowdfund-property",Trust & Authority|Financial,Trust & Authority,Premium navy-gold,"Source Serif, DM Sans","ROI charts, property cards, investor CTA","Casual design"
78,Pet Care,"pet,veterinary,dog,cat,pet-shop,grooming",Claymorphism|Vibrant,Claymorphism|Flat Design,Warm friendly animal palette,"Nunito, Quicksand","Pet profile cards, booking, breed search","Dark or clinical"
79,Children App,"kids,children,toddler,educational-game,abc",Claymorphism,Claymorphism,Bright primary colors,"Fredoka One, Nunito","Large tap targets 56px+, sound FX, animations","Small targets, small text"
80,Senior App,"senior,elderly,accessible,large-text,age60plus",Inclusive Design,Inclusive Design|Accessible & Ethical,High contrast clean,"Source Sans 18px+, Open Sans","48px+ buttons, simple nav, high contrast","Complex interactions"
81,Telematics Fleet,"fleet,telematics,gps,vehicle,logistics",HUD Sci-Fi FUI|Data-Dense,Data-Dense Dashboard|HUD,Dark map with status overlays,"Roboto Mono, IBM Plex","Live map, vehicle status badges","Consumer aesthetics"
82,Supply Chain,"supply-chain,logistics,warehouse,inventory,erp",Data-Dense Dashboard,Data-Dense Dashboard,Operational gray-blue,"IBM Plex, Source Sans","Gantt charts, inventory tables, alerts","Heavy decoration"
83,Airport Travel Tech,"airport,flight,boarding,travel-tech,aviation",Minimalism|HUD,Minimalism|HUD Sci-Fi FUI,Clean blue-white high contrast,"DM Mono, Source Sans","Flight boards, departure grids","Low contrast"
84,Climate Environment,"climate,environment,carbon,sustainability,eco",Nature Distilled|Organic,Nature Distilled|Organic Biophilic,Earth green-brown-sky,"Lora, Source Serif","Data viz for emissions, earth map","Neon or synthetic"
85,Fitness Wearable App,"wearable,fitbit-like,healthdata,heart-rate,steps",Soft UI Evolution|Dark,Dark Mode OLED|Soft UI Evolution,Black + health green/orange,"DM Mono, Nunito","Ring stats, heart rate viz, daily summary","Text-heavy tables"
86,Augmented Reality App,"ar,augmented-reality,spatial,lens,overlay",Spatial UI VisionOS,Spatial UI VisionOS|3D,Transparent overlays,"SF Pro, Inter","AR anchors, spatial panels, gesture hints","2D-only flat design"
87,Voice Assistant App,"voice,siri-like,alexa-app,speech-ui",Voice-First Multimodal,Voice-First Multimodal|Zero Interface,Dark minimal,"SF Pro, Nunito","Waveform orb, listening animation","Text-heavy dense UI"
88,Recruitment ATS,"ats,recruitment,hiring-tool,applicant-tracking",Data-Dense Dashboard,Data-Dense|Bento Box,Professional neutral,"Inter, Source Sans","Kanban pipeline, candidate cards, email threads","Consumer design"
89,Logistics Delivery,"logistics,delivery,tracking,parcel,shipment",Flat Design|Real-Time Monitoring,Flat Design|Real-Time,Map-forward neutral,"DM Sans, Roboto Mono for tracking codes","Live map, status timeline, ETA","Heavy branding"
90,Construction PM,"construction,building,project-pm,contractor",Flat Design|Data-Dense,Flat Design|Data-Dense,Industrial neutral,"Source Sans, IBM Plex","Gantt, site photos, punch list","Consumer-facing style"
91,Legal Tech,"legaltech,contract,e-sign,compliance-tech,docusign-like",Minimalism|Trust,Trust & Authority|Minimalism,Professional navy-white,"Neue Haas, Source Serif","Document viewer, signature flow, redline","Playful colors"
92,Prop Tech,"proptech,property-mgmt,landlord,tenant,rent",Flat Design|Social Proof,Social Proof|Flat Design,Clean blue-white,"DM Sans, Inter","Property cards, maintenance tickets","Overly luxurious"
93,EdTech Assessment,"edtech,quiz,assessment,test,exam-platform",Claymorphism|Flat,Claymorphism|Flat Design,Encouraging bright,"Nunito, Open Sans","Progress indicator, question cards, score reveal","Test-anxiety inducing dark"
94,Sports Analytics,"sports,stats,athlete,performance-data,scouting",Data-Dense|Vibrant,Data-Dense Dashboard|Vibrant,Dark + team accent,"DM Mono, Rajdhani","Radar charts, heatmaps, player cards","Generic BI"
95,Esports Tournament,"esports,tournament,bracket,team,competitive",Cyberpunk UI|Dark,Cyberpunk UI|Vibrant,Dark neon brand accent,"Exo 2, Orbitron","Bracket tree, live score, team logos","Corporate clean"
96,Agricultural Tech,"agtech,farming,crop,precision-agriculture,soil",Nature Distilled|Data-Dense,Nature Distilled|Data-Dense,Earth green-amber,"Source Serif, DM Sans","Field maps, sensor data, weather overlay","Urban tech dark themes"
97,Mining Resources,"mining,resources,extraction,geology",HUD|Data-Dense,HUD Sci-Fi FUI|Data-Dense,Industrial dark-amber,"IBM Plex Mono, Source Sans","Equipment status, sensor readings","Consumer-facing design"
98,Energy Utility,"energy,utility,grid,power,solar,wind",Data-Dense|Environmental,Data-Dense|Nature Distilled,Clean functional blue-green,"Source Sans, DM Mono","Energy flow diagrams, meter readings","Heavy branding"
99,Telecom Carrier,"telecom,carrier,network,5g,mobile-operator",Data-Dense|Trust,Trust & Authority|Data-Dense,Corporate blue-white,"Source Sans, Helvetica","Network map, coverage checker, plan tables","Dark/gaming aesthetics"
100,Pharmaceutical,"pharma,drug-discovery,clinical-trial,biotech",Accessible & Ethical|Minimalism,Accessible & Ethical,Clinical clean white-blue,"Source Sans, IBM Plex","Trial data tables, molecular viz","Playful or colorful"
101,Space Tech,"space,aerospace,satellite,rocket,nasa-like",HUD Sci-Fi FUI|Dark,HUD Sci-Fi FUI|3D,Dark navy-black + cyan,"Orbitron, Space Grotesk","Orbit viz, telemetry, star map bg","Consumer light themes"
102,Quantum Computing,"quantum,qubit,computing-research",HUD Sci-Fi FUI,HUD Sci-Fi FUI|Dark Mode,Dark + quantum blue-purple,"IBM Plex Mono, Space Grotesk","Wave function viz, qubit state","Plain corporate"
103,Autonomous Vehicle,"autonomous,self-driving,av,robotaxi,lidar",HUD Sci-Fi FUI|Real-Time,HUD Sci-Fi FUI|Real-Time Monitoring,Dark HUD blue,"DM Mono, IBM Plex","Bird's-eye map, sensor overlay, status","Consumer friendly colors"
104,Drone Fleet,"drone,uav,fleet-mgmt,aerial,surveillance",HUD Sci-Fi FUI|Data-Dense,HUD Sci-Fi FUI|Real-Time,Dark operational,"Roboto Mono, DM Mono","Live map, battery status, flight path","Consumer aesthetics"
105,Crypto Exchange,"exchange,dex,trading,order-book,swap",Dark Mode|Financial,Dark Mode OLED|Financial Dashboard,Dark + green-red trading,"Roboto Mono, Space Grotesk","Order book, candlestick, depth chart","Friendly consumer colors"
106,NFT Marketplace,"nft,marketplace,opensea-like,mint,collectible",Glassmorphism|Cyberpunk,Glassmorphism|Dark Mode,Dark + vibrant,"Space Grotesk, Monument Extended","Grid gallery, rarity badge, wallet connect","Traditional e-commerce"
107,DAO Governance,"dao,governance,voting,proposal,decentralized",Minimalism|Dark,Minimalism|Dark Mode,Dark neutral-green,"DM Mono, IBM Plex","Proposal cards, vote bars, treasury stats","Corporate branding"
108,Metaverse Platform,"metaverse,virtual-world,avatar,vr-social",3D & Hyperrealism|Spatial,3D & Hyperrealism|Spatial UI,Dark immersive + avatar accent,"Space Grotesk, Orbitron","3D world preview, avatar builder","Flat 2D only"
109,Productivity Suite,"productivity,office,docs,spreadsheet,workspace",Soft UI Evolution|Minimalism,Soft UI Evolution|Minimalism,Clean neutral gray-white,"Inter, DM Sans","Toolbar, document canvas, collaboration cursors","Heavy branding"
110,Password Manager,"password,security,vault,credentials,1password-like",Dark Mode|Trust,Dark Mode OLED|Trust & Authority,Dark secure + green accent,"JetBrains Mono, DM Sans","Strength meter, vault list, copy-to-clipboard","Colorful playful"
111,VPN Privacy App,"vpn,privacy,security-app,proxy,anonymous",Dark Mode|HUD,Dark Mode OLED|HUD Sci-Fi,Dark + secure green/cyan,"DM Mono, Space Grotesk","Globe connection viz, server list","Bright consumer colors"
112,File Storage Cloud,"cloud-storage,drive,files,s3-like,dropbox-like",Flat Design|Minimalism,Flat Design|Minimalism,Clean white-blue,"Inter, Source Sans","File browser, upload progress, shared links","Heavy gradients"
113,Email Client,"email,inbox,mail,client,gmail-like",Minimalism|Flat Design,Minimalism|Flat Design,Clean productive white,"Inter, DM Sans","Thread list, compose, label sidebar","Colorful distracting"
114,Calendar Scheduling,"calendar,scheduling,booking,time,appointment-mgmt",Flat Design|Soft UI,Flat Design|Soft UI Evolution,Clean time-based neutral,"Inter, DM Sans","Month/week grid, drag events, timezone","Heavy decoration"
115,Map Navigation,"map,navigation,gps,geo,mapbox-like",Dark Mode|Real-Time,Dark Mode OLED|Real-Time Monitoring,Dark map + action color,"DM Mono, Roboto","Map tiles, route overlay, POI pins","Light map on dark chrome"
116,Chat Messaging,"chat,messaging,dm,team-chat,slack-like",Flat Design|Dark Mode,Flat Design|Dark Mode OLED,Dark or white clean,"Inter, Nunito","Message bubbles, reactions, thread","Heavy branding decoration"
117,Video Conferencing,"video-call,conference,zoom-like,meeting,webrtc",Minimal & Direct|Dark,Minimalism|Dark Mode,Dark functional,"Inter, DM Sans","Video grid, mute/cam controls, screen share","Complex UI"
118,E-signature,"e-sign,signature,document-sign,docusign-like,contract-sign",Trust & Authority|Minimalism,Trust & Authority,Clean white professional,"Source Serif, Source Sans","Document viewer, signature field, audit trail","Playful or colorful"
119,Survey Form Tool,"survey,form,questionnaire,typeform-like,response",Minimalism|Claymorphism,Minimalism|Claymorphism,Clean or warm friendly,"Nunito, DM Sans","One-question-at-a-time, progress, animation","Overwhelming form dump"
120,A/B Testing Tool,"abtesting,experiment,optimization,cro-tool,split-test",Data-Dense|Minimalism,Data-Dense|Minimalism,Clean data-forward,"Inter, DM Mono","Variant comparison, significance meter","Heavy decoration"
121,Customer Support,"support,helpdesk,tickets,zendesk-like,customer-service",Flat Design|Soft UI,Flat Design|Soft UI Evolution,Friendly professional,"Source Sans, Open Sans","Ticket queue, status badge, CSAT stars","Intimidating corporate"
122,Live Chat Widget,"live-chat,chat-widget,intercom-like,support-chat",Soft UI Evolution,Soft UI Evolution|Glassmorphism,White + brand accent,"Inter, Nunito","Chat bubble, typing indicator, emoji","Dark or complex"
123,Push Notification Tool,"push,notification,engagement,onesignal-like",Flat Design|Minimal,Flat Design|Minimalism,Clean brand-neutral,"Inter, DM Sans","Preview cards, audience targeting UI","Heavy visualization"
124,Subscription Management,"subscription,manage,billing-portal,stripe-like",Minimalism|Trust,Minimalism|Trust & Authority,Clean professional,"Inter, Source Sans","Plan cards, usage meter, invoice list","Colorful decorative"
125,Affiliate Marketing,"affiliate,referral,commission,program,partner",Social Proof|Conversion,Social Proof-Focused|Conversion,Trust warm,"Nunito, Open Sans","Commission table, referral link, leaderboard","Complex dashboards"
126,Influencer Platform,"influencer,creator,ugc,brand-deal,sponsorship",Social Proof|Vibrant,Social Proof|Vibrant & Block,Creator energy palette,"Poppins, Nunito","Profile cards, reach stats, deal board","Corporate cold"
127,Learning Management,"lms,learning,course-platform,moodle-like,canvas-lms",Claymorphism|Flat Design,Claymorphism|Flat Design,Friendly educational,"Nunito, Open Sans","Course cards, progress bars, quiz","Dark intimidating"
128,Certification Platform,"certification,badge,credential,certificate,accreditation",Trust & Authority|Flat,Trust & Authority|Flat Design,Professional credible,"Source Serif, DM Sans","Badge showcase, exam flow, verify link","Overly playful"
129,Talent Assessment,"talent,assessment,psychometric,hiring-test,skills-test",Accessible & Ethical|Minimal,Accessible & Ethical|Minimalism,Clean neutral,"Source Sans, IBM Plex","Timed test UI, question types, results","Stressful dark themes"
130,Knowledge Base,"knowledge-base,wiki,help-center,docs-kb,faq",Minimalism|Flat Design,Minimalism|Flat Design,Clean white-gray,"Inter, Source Sans","Search-first, category cards, breadcrumb","Cluttered decoration"
131,Internal Tools,"internal,admin-tool,back-office,ops-tool",Data-Dense Dashboard,Bento Box Grid|Data-Dense,Neutral operational gray,"Inter, IBM Plex","CRUD tables, bulk actions, filter sidebar","Consumer branding"
132,Monitoring Observability,"monitoring,observability,logs,metrics,grafana-like",Real-Time Monitoring|Dark,Real-Time Monitoring|Dark Mode,Dark + signal green/orange,"DM Mono, IBM Plex Mono","Live metric charts, alert panels, log streams","Consumer aesthetics"
133,Data Pipeline ETL,"etl,pipeline,data-engineering,airflow-like,workflow",Data-Dense|HUD,Data-Dense Dashboard|HUD,Dark or neutral technical,"IBM Plex Mono, DM Mono","DAG visualization, run status, logs","Heavy branding"
134,Business Intelligence,"bi,business-intelligence,power-bi-like,tableau-like",Data-Dense Dashboard,Data-Dense Dashboard|Financial,Professional data-forward,"Inter, DM Mono","Drill-down charts, filter sliders, export","Consumer fun colors"
135,IoT Platform,"iot,sensors,devices,mqtt,telemetry",Real-Time Monitoring|HUD,Real-Time Monitoring|HUD Sci-Fi,Dark dashboard + status colors,"DM Mono, IBM Plex","Device grid, sensor sparklines, alert feed","Light consumer"
136,Robotics Platform,"robotics,robot,automation,ros,manufacturing-robot",HUD Sci-Fi FUI|Data-Dense,HUD Sci-Fi FUI|Data-Dense,Dark operational slate,"Roboto Mono, DM Mono","Joint visualization, status panel, telemetry","Consumer friendly"
137,Digital Twin,"digital-twin,simulation,3d-model,virtual-replica",HUD Sci-Fi FUI|3D,HUD Sci-Fi FUI|3D & Hyperrealism,Dark with 3D accent,"Space Grotesk, DM Mono","3D model viewer, sensor overlay","Flat 2D"
138,Blockchain Explorer,"blockchain,explorer,transactions,on-chain,etherscan-like",Dark Mode|Data-Dense,Dark Mode OLED|Data-Dense,Dark + blue-green technical,"JetBrains Mono, IBM Plex Mono","Transaction table, block list, hash display","Consumer design"
139,Social Commerce,"social-commerce,shoppable,instagram-shop,tiktok-shop",Social Proof|Vibrant,Social Proof|Vibrant,Warm social-native,"Nunito, Poppins","UGC grid, shoppable tags, quick checkout","Traditional e-commerce"
140,Reseller Platform,"reseller,white-label,partner-portal,distributor",Trust & Authority|Flat,Trust & Authority|Flat Design,Professional neutral,"Source Sans, DM Sans","Catalog, pricing tiers, order management","Consumer-facing design"
141,Auction House,"auction-house,fine-art,bidding,lot,christie-like",Editorial Grid|Trust,Editorial Grid Magazine|Trust & Authority,Monochrome + gold,"Cormorant Garamond, Libre Baskerville","Lot viewer, countdown, bid history","Colorful or playful"
142,Tax Software,"tax,irs,return,tax-prep,turbotax-like",Trust & Authority|Accessible,Trust & Authority|Accessible & Ethical,Conservative blue-white,"Source Sans, IBM Plex","Step-by-step wizard, form fields, refund estimate","Casual colors"
143,Insurance Comparison,"insurance-compare,quotes,compare,aggregator",Social Proof|Trust,Social Proof|Trust & Authority,Clean trust-forward,"Source Sans, DM Sans","Quote cards, comparison table, trust badges","Complex dark"
144,Mortgage Calculator,"mortgage,loan,calculator,home-loan,refinance",Trust & Authority|Minimalism,Trust & Authority|Minimalism,Professional clean,"Source Serif, Source Sans","Input sliders, amortization chart, CTA","Playful"
145,Subscription Billing,"billing,subscriptions,invoicing,recurly-like,chargebee",Minimalism|Data-Dense,Minimalism|Data-Dense,Clean professional,"Inter, DM Sans","MRR metrics, invoice list, plan management","Heavy decoration"
146,Customer Data Platform,"cdp,customer-data,profiles,segmentation,mparticle-like",Data-Dense|Bento,Data-Dense Dashboard|Bento Box,Data professional neutral,"Inter, DM Mono","Segment builder, profile cards, data flow viz","Consumer-friendly"
147,Content Management,"cms,content,wordpress-like,headless,website-editor",Flat Design|Minimalism,Flat Design|Minimalism,Clean editorial neutral,"Inter, Source Serif","Content editor, media library, publish flow","Heavy animation"
148,Product Roadmap,"roadmap,product-planning,feature-request,aha-like",Bento Box Grid|Flat,Bento Box Grid|Flat Design,Clean product-forward,"Inter, DM Sans","Timeline roadmap, vote widget, now/next/later","Overly complex"
149,Customer Success,"cs,customer-success,onboarding,churn,health-score",Soft UI Evolution|Bento,Soft UI Evolution|Bento Box,Friendly professional,"Nunito, Source Sans","Health score gauge, playbook cards, alert feed","Cold corporate"
150,Partner Ecosystem,"partner,ecosystem,marketplace,integration,app-store",Flat Design|Social Proof,Flat Design|Social Proof,Clean trust-forward,"Inter, DM Sans","Integration cards, partner levels, API status","Heavy branding"
151,Loyalty Rewards,"loyalty,rewards,points,gamification,program",Claymorphism|Vibrant,Claymorphism|Vibrant,Warm rewarding palette,"Nunito, Poppins","Point balance, reward cards, progress to tier","Cold corporate"
152,Event Ticketing,"ticketing,events-tickets,concert,venue,eventbrite-like",Hero-Centric|Social Proof,Hero-Centric Design|Social Proof,Event-thematic vibrant,"Raleway, Open Sans","Event hero, seat map, countdown","Plain listing"
153,Gig Economy,"gig,rideshare,uber-like,task,on-demand",Flat Design|Real-Time,Flat Design|Real-Time Monitoring,Clean map-forward,"DM Sans, Inter","Live map, request flow, rating","Heavy decoration"
154,Coworking Space,"coworking,office,desk-booking,hot-desk,workspace",Soft UI Evolution|Bento,Soft UI Evolution|Bento Box,Modern warm neutral,"Inter, Nunito","Floor map, desk booking calendar, amenity cards","Cold corporate"
155,Mental Wellness B2B,"eap,employee-wellness,mental-health-b2b,wellbeing",Organic Biophilic|Accessible,Organic Biophilic|Accessible & Ethical,Calming earth tones,"Nunito, Source Sans","Mood check-in, resource cards, usage stats","Clinical or harsh"
156,Compliance Regulatory,"compliance,regulatory,risk,audit,grc",Trust & Authority|Data-Dense,Trust & Authority|Data-Dense,Corporate professional navy,"Source Serif, IBM Plex","Compliance checklist, risk heat map, audit log","Consumer aesthetics"
157,Learning Experience,"lxp,personalized-learning,skill-path,growth",Claymorphism|Bento,Claymorphism|Bento Box Grid,Encouraging warm-bright,"Nunito, Poppins","Skill graph, learning path, achievement badges","Dark or intimidating"
158,Digital Signage,"signage,display,kiosk,digital-screen,ooh",Dark Mode OLED|Vibrant,Dark Mode OLED|Vibrant,High contrast vivid,"Exo 2, Source Sans (large)","Large text, bold graphics, looping animations","Small text, complex UI"
159,Smart City Platform,"smart-city,urban,city-data,gov-tech,municipality",Data-Dense|HUD,Data-Dense Dashboard|HUD Sci-Fi,Dark gov-tech blue-gray,"IBM Plex, DM Mono","City map, KPI tiles, incident feed","Consumer-friendly"
160,Research Platform,"research,academic,data-collection,survey-research",Minimalism|Accessible,Minimalism|Accessible & Ethical,Clean academic white,"Merriweather, Source Sans","Citation tools, data viz, export","Heavy branding"
161,Quantum Computing Interface,"quantum-ui,qubit-viz,quantum-dashboard",HUD Sci-Fi FUI|Dark,HUD Sci-Fi FUI|Dark Mode,Dark quantum blue-purple,"IBM Plex Mono, Space Grotesk","Bloch sphere viz, circuit diagram, probability wave","Plain tables"
"""
# 57 TYPOGRAPHY PAIRINGS
_TYPOGRAPHY_CSV = """id,pairing,display_font,body_font,mood,best_for,google_fonts_url
1,Sora + Inter,Sora,Inter,Modern clean tech,SaaS / AI / Developer tools,https://fonts.google.com/share?selection.family=Sora:wght@400;600;700|Inter:wght@400;500;600
2,Playfair Display + Lato,Playfair Display,Lato,Elegant editorial,Luxury / Restaurant / Beauty spa,https://fonts.google.com/share?selection.family=Playfair+Display:wght@400;600;700|Lato:wght@300;400;700
3,Space Grotesk + JetBrains Mono,Space Grotesk,JetBrains Mono,Technical premium,AI / Crypto / Dev tools,https://fonts.google.com/share?selection.family=Space+Grotesk:wght@400;500;700|JetBrains+Mono:wght@400;500
4,Cormorant Garamond + Montserrat,Cormorant Garamond,Montserrat,Refined luxurious,Luxury / Legal / Architecture,https://fonts.google.com/share?selection.family=Cormorant+Garamond:wght@400;600|Montserrat:wght@400;500;600
5,Geist + Geist Mono,Geist,Geist Mono,Dev-first clean,Developer tools / Documentation,https://fonts.google.com/share?selection.family=Geist:wght@400;500;600|Geist+Mono:wght@400;500
6,Nunito + Open Sans,Nunito,Open Sans,Friendly approachable,Educational / Children / Wellness,https://fonts.google.com/share?selection.family=Nunito:wght@400;600;700|Open+Sans:wght@400;500;600
7,Clash Display + Satoshi,Clash Display,Satoshi,Gen Z creative,Creative agency / Brand / Gen Z,https://fonts.google.com/share?selection.family=Clash+Display:wght@400;600;700
8,DM Serif Display + DM Sans,DM Serif Display,DM Sans,Editorial modern,Blog / News / Editorial,https://fonts.google.com/share?selection.family=DM+Serif+Display|DM+Sans:wght@400;500;600
9,Libre Baskerville + Source Sans 3,Libre Baskerville,Source Sans 3,Traditional trustworthy,Legal / Finance / Government,https://fonts.google.com/share?selection.family=Libre+Baskerville:wght@400;700|Source+Sans+3:wght@400;500;600
10,Exo 2 + Rajdhani,Exo 2,Rajdhani,Energetic sporty,Gaming / Fitness / Esports,https://fonts.google.com/share?selection.family=Exo+2:wght@400;600;700|Rajdhani:wght@400;500;600
11,Merriweather + Source Sans 3,Merriweather,Source Sans 3,Scholarly readable,Academic / Research / Journalism,https://fonts.google.com/share?selection.family=Merriweather:wght@400;700|Source+Sans+3:wght@400;500
12,Poppins + Lato,Poppins,Lato,Versatile modern,E-commerce / Startup / Lifestyle,https://fonts.google.com/share?selection.family=Poppins:wght@400;500;600;700|Lato:wght@300;400;700
13,IBM Plex Serif + IBM Plex Sans,IBM Plex Serif,IBM Plex Sans,Technical editorial,B2B / Enterprise / Pharma,https://fonts.google.com/share?selection.family=IBM+Plex+Serif:wght@400;600|IBM+Plex+Sans:wght@400;500;600
14,Raleway + Open Sans,Raleway,Open Sans,Elegant versatile,Hotel / Travel / Events,https://fonts.google.com/share?selection.family=Raleway:wght@400;500;700|Open+Sans:wght@400;500
15,Fredoka One + Quicksand,Fredoka One,Quicksand,Playful fun,Children / Pet care / Games,https://fonts.google.com/share?selection.family=Fredoka+One|Quicksand:wght@400;500;600
16,Neue Haas Grotesk + Helvetica Neue,Neue Haas Grotesk,Helvetica Neue,Swiss professional,Corporate / Banking / Insurance,https://fonts.google.com/
17,Monument Extended + Space Grotesk,Monument Extended,Space Grotesk,Bold crypto,Web3 / NFT / Crypto,https://fonts.google.com/share?selection.family=Space+Grotesk:wght@400;500;700
18,Orbitron + Space Grotesk,Orbitron,Space Grotesk,Sci-fi futuristic,Space tech / Gaming / HUD,https://fonts.google.com/share?selection.family=Orbitron:wght@400;600;700|Space+Grotesk:wght@400;500
19,Circular + Nunito,Circular,Nunito,Music streaming,Music / Podcast / Media,https://fonts.google.com/share?selection.family=Nunito:wght@400;500;600
20,Lora + DM Sans,Lora,DM Sans,Editorial warm,Newsletter / Blog / Recipe,https://fonts.google.com/share?selection.family=Lora:wght@400;500;600|DM+Sans:wght@400;500
21,Syne + Inter,Syne,Inter,Modern bold,Creative portfolio / Agency,https://fonts.google.com/share?selection.family=Syne:wght@400;600;700|Inter:wght@400;500;600
22,Bricolage Grotesque + Inter,Bricolage Grotesque,Inter,Contemporary fresh,Startup / SaaS / Product,https://fonts.google.com/share?selection.family=Bricolage+Grotesque:wght@400;500;600;700|Inter:wght@400;500
23,Cabinet Grotesk + Satoshi,Cabinet Grotesk,Satoshi,Premium modern,Fintech / SaaS / Premium,https://fonts.google.com/share?selection.family=Cabinet+Grotesk:wght@400;500;700
24,Fraunces + Inter,Fraunces,Inter,Quirky editorial,Brand / Blog / Creative,https://fonts.google.com/share?selection.family=Fraunces:wght@400;600;700|Inter:wght@400;500
25,Plus Jakarta Sans + DM Sans,Plus Jakarta Sans,DM Sans,Clean productive,Productivity / SaaS / Clean,https://fonts.google.com/share?selection.family=Plus+Jakarta+Sans:wght@400;500;600;700|DM+Sans:wght@400;500
26,Anybody + Inter,Anybody,Inter,Variable expressive,Creative / Experimental,https://fonts.google.com/share?selection.family=Anybody:wght@400;500;700|Inter:wght@400;500
27,Bebas Neue + Open Sans,Bebas Neue,Open Sans,Bold impactful,Fitness / Sports / Marketing,https://fonts.google.com/share?selection.family=Bebas+Neue|Open+Sans:wght@400;500;600
28,Oswald + Source Sans 3,Oswald,Source Sans 3,Strong editorial,News / Sports / Event,https://fonts.google.com/share?selection.family=Oswald:wght@400;500;600|Source+Sans+3:wght@400;500
29,Italiana + Lato,Italiana,Lato,High fashion,Fashion / Luxury / Beauty,https://fonts.google.com/share?selection.family=Italiana|Lato:wght@300;400;700
30,Spectral + Source Sans 3,Spectral,Source Sans 3,Literary refined,Publishing / Legal / Academic,https://fonts.google.com/share?selection.family=Spectral:wght@400;500;600|Source+Sans+3:wght@400;500
31,Work Sans + Roboto,Work Sans,Roboto,Utilitarian clear,Internal tools / Admin,https://fonts.google.com/share?selection.family=Work+Sans:wght@400;500;600|Roboto:wght@400;500
32,Josefin Sans + Josefin Slab,Josefin Sans,Josefin Slab,Art deco vintage,Art / Design / Vintage brand,https://fonts.google.com/share?selection.family=Josefin+Sans:wght@400;600|Josefin+Slab:wght@400;600
33,Rubik + Rubik,Rubik,Rubik,Modern rounded,Mobile / App / SaaS,https://fonts.google.com/share?selection.family=Rubik:wght@400;500;600;700
34,Manrope + Manrope,Manrope,Manrope,Elegant uniform,Design tool / Portfolio / SaaS,https://fonts.google.com/share?selection.family=Manrope:wght@400;500;600;700
35,Fira Code + Fira Sans,Fira Code,Fira Sans,Developer focused,Code / Dev tool / Technical,https://fonts.google.com/share?selection.family=Fira+Code:wght@400;500|Fira+Sans:wght@400;500;600
36,Righteous + Roboto,Righteous,Roboto,Retro fun,Gaming / Entertainment / Youth,https://fonts.google.com/share?selection.family=Righteous|Roboto:wght@400;500
37,Unbounded + Space Grotesk,Unbounded,Space Grotesk,Web3 bold,Web3 / NFT / Crypto / Bold tech,https://fonts.google.com/share?selection.family=Unbounded:wght@400;600;700|Space+Grotesk:wght@400;500
38,Red Hat Display + Red Hat Text,Red Hat Display,Red Hat Text,Open source tech,Developer / Open source / Docs,https://fonts.google.com/share?selection.family=Red+Hat+Display:wght@400;500;700|Red+Hat+Text:wght@400;500
39,Barlow + Barlow Semi Condensed,Barlow,Barlow Semi Condensed,Industrial condensed,Construction / Logistics / Auto,https://fonts.google.com/share?selection.family=Barlow:wght@400;500;600|Barlow+Semi+Condensed:wght@400;500
40,Kanit + Sarabun,Kanit,Sarabun,Modern Thai-friendly,Southeast Asia / Global,https://fonts.google.com/share?selection.family=Kanit:wght@400;500;600|Sarabun:wght@400;500
41,Staatliches + Roboto Condensed,Staatliches,Roboto Condensed,Brutalist poster,Art / Music / Event poster,https://fonts.google.com/share?selection.family=Staatliches|Roboto+Condensed:wght@400;700
42,Cinzel + Raleway,Cinzel,Raleway,Classical roman,Luxury / Legal / Historical,https://fonts.google.com/share?selection.family=Cinzel:wght@400;600;700|Raleway:wght@400;500
43,Audiowide + Exo 2,Audiowide,Exo 2,Tech scifi,Gaming / Drone / Space,https://fonts.google.com/share?selection.family=Audiowide|Exo+2:wght@400;500;600
44,Cardo + Raleway,Cardo,Raleway,Classic editorial,Literature / Publishing / Art,https://fonts.google.com/share?selection.family=Cardo:wght@400;700|Raleway:wght@400;500
45,Lexend + Lexend,Lexend,Lexend,Reading optimized,Accessibility / Reading / Education,https://fonts.google.com/share?selection.family=Lexend:wght@400;500;600;700
46,Bai Jamjuree + Sarabun,Bai Jamjuree,Sarabun,Contemporary Thai,Thailand / SE Asia market,https://fonts.google.com/share?selection.family=Bai+Jamjuree:wght@400;500;600|Sarabun:wght@400;500
47,Comfortaa + Nunito,Comfortaa,Nunito,Soft rounded,Children / Wellness / Friendly,https://fonts.google.com/share?selection.family=Comfortaa:wght@400;500;700|Nunito:wght@400;500;600
48,Alfa Slab One + Raleway,Alfa Slab One,Raleway,Bold serif impact,Sports / Newspaper / Retail,https://fonts.google.com/share?selection.family=Alfa+Slab+One|Raleway:wght@400;500;600
49,Bitter + Hind,Bitter,Hind,South Asian editorial,India / Bangladesh market,https://fonts.google.com/share?selection.family=Bitter:wght@400;500;700|Hind:wght@400;500;600
50,Vollkorn + Source Sans 3,Vollkorn,Source Sans 3,Scholarly warm,Academic / Research / Nonprofit,https://fonts.google.com/share?selection.family=Vollkorn:wght@400;600|Source+Sans+3:wght@400;500
51,Bodoni Moda + DM Sans,Bodoni Moda,DM Sans,Luxury contrast,Fashion / High-end / Premium,https://fonts.google.com/share?selection.family=Bodoni+Moda:wght@400;600|DM+Sans:wght@400;500
52,Secular One + Rubik,Secular One,Rubik,Bold Hebrew-friendly,Middle East / International,https://fonts.google.com/share?selection.family=Secular+One|Rubik:wght@400;500
53,BioRhyme + Open Sans,BioRhyme,Open Sans,Organic natural,Biotech / Organic / Health,https://fonts.google.com/share?selection.family=BioRhyme:wght@400;700|Open+Sans:wght@400;500
54,Epilogue + Inter,Epilogue,Inter,Contemporary editorial,Newsletter / Modern media,https://fonts.google.com/share?selection.family=Epilogue:wght@400;500;600;700|Inter:wght@400;500
55,Figtree + Inter,Figtree,Inter,Friendly geometric,SaaS / Product / Clean modern,https://fonts.google.com/share?selection.family=Figtree:wght@400;500;600;700|Inter:wght@400;500
56,Outfit + DM Sans,Outfit,DM Sans,Rounded modern,App / Startup / Modern product,https://fonts.google.com/share?selection.family=Outfit:wght@400;500;600;700|DM+Sans:wght@400;500
57,Kumbh Sans + Noto Sans,Kumbh Sans,Noto Sans,Global multilingual,International / Multi-language,https://fonts.google.com/share?selection.family=Kumbh+Sans:wght@400;500;600|Noto+Sans:wght@400;500
"""
# 25 CHART TYPES
_CHARTS_CSV = """id,chart_type,use_case,library,keywords
1,Line Chart,Time-series trends,Recharts / Chart.js,trend timeline progress
2,Area Chart,Volume over time,Recharts / ApexCharts,area filled cumulative
3,Bar Chart,Category comparison,Recharts / Chart.js,comparison ranking bars
4,Stacked Bar,Part-to-whole over time,Recharts / ApexCharts,stacked segments breakdown
5,Horizontal Bar,Long category labels,Chart.js / Recharts,horizontal ranking leaderboard
6,Pie Chart,Simple proportion,Chart.js,proportion share percentage simple
7,Donut Chart,Proportion + center metric,Recharts / ApexCharts,donut ring center kpi
8,Scatter Plot,Correlation between variables,D3.js / Recharts,scatter correlation cluster
9,Bubble Chart,3-variable comparison,D3.js / Recharts,bubble size dimension
10,Heatmap,Matrix density,D3.js / Nivo,heatmap matrix density intensity
11,Treemap,Hierarchical proportion,D3.js / Nivo,treemap hierarchy nested proportion
12,Funnel Chart,Conversion stages,ApexCharts / Funnel.js,funnel conversion drop-off stages
13,Gauge / Radial,Single KPI vs target,ApexCharts / D3,gauge radial meter speedometer kpi
14,Candlestick,Financial OHLC data,ApexCharts / Lightweight Charts,candlestick ohlc stock trading financial
15,Waterfall Chart,Sequential change,ApexCharts / D3,waterfall delta change flow profit
16,Sankey Diagram,Flow between nodes,D3.js,sankey flow alluvial transition
17,Radar / Spider,Multi-dimension comparison,Recharts / ApexCharts,radar spider polygon multi-dimension skill
18,Gantt Chart,Project timeline,DHTMLX / Frappe Gantt,gantt project timeline schedule
19,Network Graph,Relationship nodes,D3.js / Sigma.js,network graph nodes edges relationship
20,Choropleth Map,Geographic data,Leaflet / Mapbox / D3,map geographic choropleth region country
21,Histogram,Distribution,Chart.js / D3,histogram distribution frequency bucket
22,Box Plot,Statistical distribution,D3.js / ApexCharts,box plot whisker outlier distribution quartile
23,Chord Diagram,Bidirectional flow,D3.js,chord flow matrix bidirectional
24,Timeline,Events over time,vis.js / D3,timeline events history chronological
25,Word Cloud,Text frequency,D3-cloud,wordcloud text frequency tag
"""
# 99 UX GUIDELINES
_UX_GUIDELINES = """
═══ 99 UX GUIDELINES (UI/UX PRO MAX v2.5) ═══
LAYOUT (Rules 1-20):
1. Mobile-first breakpoints: 375px → 768px → 1024px → 1440px
2. 8px grid system: spacing in 4/8/16/24/32/48/64px
3. Max content width: 1280px centered with auto margins
4. Sidebar: 240-280px desktop, drawer on mobile
5. Header height: 52-64px desktop, 52px mobile
6. Card padding: 16-24px consistent
7. Section padding: 64-96px vertical on desktop, 40-48px mobile
8. CTA button min-height: 44px (touch target)
9. Form label above input (not placeholder-only)
10. Sticky header max 64px to preserve viewport
11. Footer: full-width, 3-4 columns desktop, stacked mobile
12. Grid columns: 12-col desktop, 8-col tablet, 4-col mobile
13. Hero section: 100vh or min 540px
14. Modal max-width: 560px, centered with backdrop
15. Tooltip max-width: 200px
16. Dropdown max-height: 320px with scroll
17. Z-index scale: 10 base, 100 dropdown, 200 modal, 300 toast
18. Negative space ratio: 40%+ for premium feel
19. Left-to-right reading flow: most important element top-left
20. F-pattern scan: headline → subhead → body → CTA
INTERACTIONS (Rules 21-40):
21. cursor:pointer on ALL clickable elements — no exceptions
22. Hover transition: 150-200ms ease for most elements
23. Button press: scale(0.97) or scale(0.98) active state
24. Link underline on hover at minimum
25. Loading skeleton for all async data fetches
26. Empty state: illustration + helpful message + CTA
27. Error state: red border, error text below, no shake
28. Success state: green check, auto-dismiss toast 3s
29. Disabled: opacity 0.4-0.5, cursor:not-allowed
30. Focus ring: 2px solid + 2px offset (visible keyboard nav)
31. Scroll restoration on route change
32. Infinite scroll: show spinner, load more button at 80% scroll
33. Drag and drop: ghost opacity 0.5, drop zone highlight
34. Form validation: on blur (not on every keystroke)
35. Password field: show/hide toggle
36. Search: debounce 300ms, clear button, loading indicator
37. Select all: checkbox in table header
38. Tooltip: delay 400ms show, 100ms hide
39. Context menu: right-click or 3-dot kebab
40. Undo: toast with 5s undo action for destructive ops
TYPOGRAPHY (Rules 41-55):
41. Body font size: 14-16px, never below 12px
42. Line-height body: 1.6-1.7
43. Heading line-height: 1.2-1.35
44. Max line length: 65-75 characters (38-45rem)
45. Min contrast body text: 4.5:1 (WCAG AA)
46. Min contrast large text (18px+): 3:1
47. Font-weight scale: 400 body, 500 medium, 600 semi-bold, 700 bold
48. Heading scale: H1 40-48px, H2 32px, H3 24px, H4 20px, H5 16px
49. Caption/label: 11-12px, uppercase + tracking for labels
50. Code font: JetBrains Mono, Fira Code, or Roboto Mono
51. Avoid: all-caps for long text, justified text (ragged-right preferred)
52. Letter-spacing: -0.02em for large headings, 0.05em for uppercase labels
53. Orphan control: max 1-2 words on last line
54. RTL support: use logical properties (margin-inline-start not margin-left)
55. Variable fonts preferred for performance
PERFORMANCE (Rules 56-65):
56. Lazy load images below fold: loading="lazy"
57. Use CSS transforms for animations (not left/top)
58. will-change: transform only when needed, remove after animation
59. Image formats: WebP preferred, AVIF for hero
60. Icon sprites or SVG inline (avoid icon fonts)
61. Critical CSS inline for above-fold
62. Font display: swap for web fonts
63. Preconnect to font CDNs:
64. Debounce resize/scroll handlers
65. Avoid layout thrash: batch DOM reads before writes
ACCESSIBILITY (Rules 66-75):
66. All images: meaningful alt text (or alt="" for decorative)
67. All icons used as buttons: aria-label
68. Form inputs: associated