thomas/ui-ux-pro-max-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: v2.0.0 - Design System Generator with 100 reasoning rules

Browse Source 
## Major Features
- Add --design-system flag for AI-powered design recommendations
- 100 industry-specific reasoning rules in ui-reasoning.csv
- Multi-domain parallel search (product, style, color, landing, typography)
- Anti-patterns to avoid for each industry

## New Files
- data/ui-reasoning.csv - 100 UI category rules with style priority, effects, anti-patterns
- scripts/design_system.py - Reasoning engine with BM25 ranking

## Workflow Updates
- All agent workflows updated with new design system generation step
- Step 2 now requires --design-system for comprehensive recommendations
- Updated example workflow with beauty spa case study

## CLI Updates
- Version bumped to 2.0.0
- Added Qoder and Roo Code support
- Synced all agent folders to cli/assets/

## README Updates
- Added version badges and PayPal donation button
- New "What's New in v2.0" section with architecture diagram
- Updated CLI installation instructions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Viet Tran
2026-01-16 10:46:02 +07:00
parent 1d5659bd77
commit d5fbbfdc9b
136 changed files with 14818 additions and 1843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
.shared/ui-ux-pro-max/data/styles.csv
View File

@@ -19,22 +19,22 @@ STT,Style Category,Type,Keywords,Primary Colors,Secondary Colors,Effects & Anima
18,Zero Interface,General,"Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient","Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8","Subtle feedback: light green, light red, minimal UI elements, soft accents","Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions","Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences","Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control",✓ Full,✓ Full,⚡ Excellent,✓ Excellent,✓ High,✓ High,"Tailwind 10/10, Custom 10/10",2020s AI-Era,Low
19,Soft UI Evolution,General,"Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid","Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy","Better combinations, accessible secondary, supporting with improved contrast, modern accents","Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA","Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid","Extreme minimalism, critical performance, systems without modern OS",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA+,✓ High,✓ High,"Tailwind 9/10, MUI 9/10, Chakra 9/10",2020s Modern,Medium
20,Hero-Centric Design,Landing Page,"Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual","Brand primary color, white/light backgrounds for contrast, accent color for CTA","Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)","Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect","SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies","Complex navigation, multi-page experiences, data-heavy applications",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ Very High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
21,Conversion-Optimized,Landing Page,"Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value","Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers","Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits","Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback","E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers","Complex feature explanations, multi-product showcases, technical documentation",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ Full (mobile-optimized),✓ Very High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
22,Feature-Rich Showcase,Landing Page,"Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs","Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs","Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)","Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions","Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products","Simple product pages, early-stage startups with few features, entertainment landing pages",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
23,Minimal & Direct,Landing Page,"Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading","Monochromatic primary, white background, single accent color for CTA, black/dark grey text","Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements","Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll","Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios","Feature-heavy products, complex explanations, multi-product showcases",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High,"Tailwind 10/10, Bootstrap 10/10",2020s Modern,Low
24,Social Proof-Focused,Landing Page,"Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers","Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds","Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors","Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings","B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands","Startup MVPs, products without users, niche/experimental products",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Medium
25,Interactive Product Demo,Landing Page,"Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos","Primary brand, interface colors matching product, demo highlight colors for interactive elements","Product UI colors, tutorial step colors (numbered progression), hover state indicators","Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction","SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software","Simple services, consulting, non-digital products, complexity-averse audiences",✓ Full,✓ Full,⚠ Good (video/interactive),✓ WCAG AA,✓ Good,✓ Very High,"Tailwind 9/10, React 10/10, Framer Motion 9/10",2020s Modern,High
26,Trust & Authority,Landing Page,"Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges","Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)","Certificate highlight colors, metric showcase colors, comparison highlight (success green)","Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal","Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services","Casual products, entertainment, viral/social-first products",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High,"Tailwind 10/10, Bootstrap 9/10",2020s Modern,Low
27,Storytelling-Driven,Landing Page,"Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization","Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety","Story section color coding, emotional state colors (calm, excitement, success), transitional gradients","Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative","Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational","Technical/complex products (unless narrative-driven), traditional enterprise software",✓ Full,✓ Full,⚠ Moderate (animations),✓ WCAG AA,✓ Good,✓ High,"GSAP 10/10, Framer Motion 9/10, Tailwind 8/10",2020s Modern,High
28,Data-Dense Dashboard,BI/Analytics,"Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility","Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333","Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)","Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners","Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing","Marketing dashboards, consumer-facing analytics, simple reporting",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 10/10",2020s Modern,Medium
29,Heat Map & Heatmap Style,BI/Analytics,"Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring","Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)","Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options","Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation","Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data","Linear data representation, categorical comparisons (use bar charts), small datasets",✓ Full,✓ Full (with adjustments),⚡ Excellent,⚠ Colorblind considerations,◐ Medium,✗ Not applicable,"D3.js 10/10, Recharts 8/10, Chart.js 8/10",2020s Modern,Medium
30,Executive Dashboard,BI/Analytics,"High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary","Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns","KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors","KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect","C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views","Detailed analyst dashboards, technical deep-dives, operational monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✗ Low (not mobile-optimized),✗ Not applicable,"Recharts 9/10, Chart.js 9/10, MUI 9/10",2020s Modern,Low
31,Real-Time Monitoring,BI/Analytics,"Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts","Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)","Status indicator colors, chart line colors varying by metric, streaming data highlight colors","Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect","System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking","Historical analysis, long-term trend reports, archived data dashboards",✓ Full,✓ Full,⚡ Good (real-time load),✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, D3.js 10/10, Socket.io 10/10",2020s Modern,High
32,Drill-Down Analytics,BI/Analytics,"Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation","Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors","Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors","Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation","Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence","Simple linear data, single-metric dashboards, streaming real-time dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable,"D3.js 10/10, Recharts 8/10, AG Grid 9/10",2020s Modern,High
33,Comparative Analysis Dashboard,BI/Analytics,"Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks","Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)","Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors","Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare","Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance","Single metric dashboards, future projections (use forecasting), real-time only (no historical)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 9/10",2020s Modern,Medium
34,Predictive Analytics,BI/Analytics,"Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization","Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors","High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)","Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations","Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning","Historical-only dashboards, simple reporting, real-time operational dashboards",✓ Full,✓ Full,⚠ Good (computation),✓ WCAG AA,◐ Medium,✗ Not applicable,"D3.js 10/10, Recharts 8/10, TensorFlow.js 8/10",2020s Modern,High
35,User Behavior Analytics,BI/Analytics,"Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis","Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)","Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors","Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill","Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking","Real-time operational metrics, technical system monitoring, financial transactions",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, D3.js 9/10",2020s Modern,Medium
36,Financial Dashboard,BI/Analytics,"Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail","Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)","Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)","Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions","Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics","Simple business dashboards, entertainment/social metrics, non-financial data",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✗ Low,✗ Not applicable,"Recharts 9/10, Chart.js 9/10, AG Grid 10/10",2020s Modern,Medium
21,Conversion-Optimized,Landing Page,"Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value","Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers","Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits","Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback","E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers","Complex feature explanations, multi-product showcases, technical documentation",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ Full (mobile-optimized),✓ Very High
22,Feature-Rich Showcase,Landing Page,"Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs","Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs","Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)","Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions","Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products","Simple product pages, early-stage startups with few features, entertainment landing pages",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✓ High
23,Minimal & Direct,Landing Page,"Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading","Monochromatic primary, white background, single accent color for CTA, black/dark grey text","Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements","Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll","Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios","Feature-heavy products, complex explanations, multi-product showcases",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High
24,Social Proof-Focused,Landing Page,"Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers","Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds","Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors","Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings","B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands","Startup MVPs, products without users, niche/experimental products",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Full,✓ High
25,Interactive Product Demo,Landing Page,"Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos","Primary brand, interface colors matching product, demo highlight colors for interactive elements","Product UI colors, tutorial step colors (numbered progression), hover state indicators","Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction","SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software","Simple services, consulting, non-digital products, complexity-averse audiences",✓ Full,✓ Full,⚠ Good (video/interactive),✓ WCAG AA,✓ Good,✓ Very High
26,Trust & Authority,Landing Page,"Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges","Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)","Certificate highlight colors, metric showcase colors, comparison highlight (success green)","Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal","Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services","Casual products, entertainment, viral/social-first products",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ Full,✓ High
27,Storytelling-Driven,Landing Page,"Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization","Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety","Story section color coding, emotional state colors (calm, excitement, success), transitional gradients","Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative","Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational","Technical/complex products (unless narrative-driven), traditional enterprise software",✓ Full,✓ Full,⚠ Moderate (animations),✓ WCAG AA,✓ Good,✓ High
28,Data-Dense Dashboard,BI/Analytics,"Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility","Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333","Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)","Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners","Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing","Marketing dashboards, consumer-facing analytics, simple reporting",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable
29,Heat Map & Heatmap Style,BI/Analytics,"Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring","Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)","Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options","Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation","Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data","Linear data representation, categorical comparisons (use bar charts), small datasets",✓ Full,✓ Full (with adjustments),⚡ Excellent,⚠ Colorblind considerations,◐ Medium,✗ Not applicable
30,Executive Dashboard,BI/Analytics,"High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary","Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns","KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors","KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect","C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views","Detailed analyst dashboards, technical deep-dives, operational monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✗ Low (not mobile-optimized),✗ Not applicable
31,Real-Time Monitoring,BI/Analytics,"Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts","Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)","Status indicator colors, chart line colors varying by metric, streaming data highlight colors","Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect","System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking","Historical analysis, long-term trend reports, archived data dashboards",✓ Full,✓ Full,⚡ Good (real-time load),✓ WCAG AA,◐ Medium,✗ Not applicable
32,Drill-Down Analytics,BI/Analytics,"Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation","Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors","Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors","Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation","Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence","Simple linear data, single-metric dashboards, streaming real-time dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable
33,Comparative Analysis Dashboard,BI/Analytics,"Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks","Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)","Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors","Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare","Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance","Single metric dashboards, future projections (use forecasting), real-time only (no historical)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,◐ Medium,✗ Not applicable
34,Predictive Analytics,BI/Analytics,"Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization","Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors","High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)","Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations","Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning","Historical-only dashboards, simple reporting, real-time operational dashboards",✓ Full,✓ Full,⚠ Good (computation),✓ WCAG AA,◐ Medium,✗ Not applicable
35,User Behavior Analytics,BI/Analytics,"Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis","Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)","Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors","Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill","Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking","Real-time operational metrics, technical system monitoring, financial transactions",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,✓ Good,✗ Not applicable
36,Financial Dashboard,BI/Analytics,"Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail","Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)","Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)","Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions","Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics","Simple business dashboards, entertainment/social metrics, non-financial data",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✗ Low,✗ Not applicable
37,Sales Intelligence Dashboard,BI/Analytics,"Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy","Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)","Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors","Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights","CRM dashboards, sales management, opportunity tracking, performance management, quota planning","Marketing analytics, customer support metrics, HR dashboards",✓ Full,✓ Full,⚡ Good,✓ WCAG AA,◐ Medium,✗ Not applicable,"Recharts 9/10, Chart.js 9/10",2020s Modern,Medium
38,Neubrutalism,General,"Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z","#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)","Limited accent colors, high contrast combinations, no gradients allowed","box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography","Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs","Luxury brands, finance, healthcare, conservative industries (too playful)",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AAA,✓ High,✓ High,"Tailwind 10/10, Bootstrap 8/10",2020s Modern,Low
39,Bento Box Grid,General,"Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards","Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary","Subtle gradients, shadow variations, accent highlights for interactive cards","grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions","Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS","Dense data tables, text-heavy content, real-time monitoring",✓ Full,✓ Full,⚡ Excellent,✓ WCAG AA,✓ High,✓ High,"Tailwind 10/10, CSS Grid 10/10",2020s Apple,Low
1 STT Style Category Type Keywords Primary Colors Secondary Colors Effects & Animation Best For Do Not Use For Light Mode ✓ Dark Mode ✓ Performance Accessibility Mobile-Friendly Conversion-Focused Framework Compatibility Era/Origin Complexity
19 18 Zero Interface General Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8 Subtle feedback: light green, light red, minimal UI elements, soft accents Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control ✓ Full ✓ Full ⚡ Excellent ✓ Excellent ✓ High ✓ High Tailwind 10/10, Custom 10/10 2020s AI-Era Low
20 19 Soft UI Evolution General Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy Better combinations, accessible secondary, supporting with improved contrast, modern accents Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid Extreme minimalism, critical performance, systems without modern OS ✓ Full ✓ Full ⚡ Excellent ✓ WCAG AA+ ✓ High ✓ High Tailwind 9/10, MUI 9/10, Chakra 9/10 2020s Modern Medium
21 20 Hero-Centric Design Landing Page Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual Brand primary color, white/light backgrounds for contrast, accent color for CTA Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos) Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies Complex navigation, multi-page experiences, data-heavy applications ✓ Full ✓ Full ⚡ Good ✓ WCAG AA ✓ Full ✓ Very High Tailwind 10/10, Bootstrap 9/10 2020s Modern Medium
22 21 Conversion-Optimized Landing Page Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers Complex feature explanations, multi-product showcases, technical documentation ✓ Full ✓ Full ⚡ Excellent ✓ WCAG AA ✓ Full (mobile-optimized) ✓ Very High
23 22 Feature-Rich Showcase Landing Page Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral) Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products Simple product pages, early-stage startups with few features, entertainment landing pages ✓ Full ✓ Full ⚡ Good ✓ WCAG AA ✓ Good ✓ High
24 23 Minimal & Direct Landing Page Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading Monochromatic primary, white background, single accent color for CTA, black/dark grey text Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios Feature-heavy products, complex explanations, multi-product showcases ✓ Full ✓ Full ⚡ Excellent ✓ WCAG AAA ✓ Full ✓ High
25 24 Social Proof-Focused Landing Page Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands Startup MVPs, products without users, niche/experimental products ✓ Full ✓ Full ⚡ Good ✓ WCAG AA ✓ Full ✓ High
26 25 Interactive Product Demo Landing Page Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos Primary brand, interface colors matching product, demo highlight colors for interactive elements Product UI colors, tutorial step colors (numbered progression), hover state indicators Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software Simple services, consulting, non-digital products, complexity-averse audiences ✓ Full ✓ Full ⚠ Good (video/interactive) ✓ WCAG AA ✓ Good ✓ Very High
27 26 Trust & Authority Landing Page Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents) Certificate highlight colors, metric showcase colors, comparison highlight (success green) Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services Casual products, entertainment, viral/social-first products ✓ Full ✓ Full ⚡ Excellent ✓ WCAG AAA ✓ Full ✓ High
28 27 Storytelling-Driven Landing Page Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety Story section color coding, emotional state colors (calm, excitement, success), transitional gradients Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational Technical/complex products (unless narrative-driven), traditional enterprise software ✓ Full ✓ Full ⚠ Moderate (animations) ✓ WCAG AA ✓ Good ✓ High
29 28 Data-Dense Dashboard BI/Analytics Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333 Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey) Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing Marketing dashboards, consumer-facing analytics, simple reporting ✓ Full ✓ Full ⚡ Excellent ✓ WCAG AA ◐ Medium ✗ Not applicable
30 29 Heat Map & Heatmap Style BI/Analytics Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow) Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data Linear data representation, categorical comparisons (use bar charts), small datasets ✓ Full ✓ Full (with adjustments) ⚡ Excellent ⚠ Colorblind considerations ◐ Medium ✗ Not applicable
31 30 Executive Dashboard BI/Analytics High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views Detailed analyst dashboards, technical deep-dives, operational monitoring ✓ Full ✓ Full ⚡ Excellent ✓ WCAG AA ✗ Low (not mobile-optimized) ✗ Not applicable
32 31 Real-Time Monitoring BI/Analytics Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation) Status indicator colors, chart line colors varying by metric, streaming data highlight colors Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking Historical analysis, long-term trend reports, archived data dashboards ✓ Full ✓ Full ⚡ Good (real-time load) ✓ WCAG AA ◐ Medium ✗ Not applicable
33 32 Drill-Down Analytics BI/Analytics Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence Simple linear data, single-metric dashboards, streaming real-time dashboards ✓ Full ✓ Full ⚡ Good ✓ WCAG AA ◐ Medium ✗ Not applicable
34 33 Comparative Analysis Dashboard BI/Analytics Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red) Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance Single metric dashboards, future projections (use forecasting), real-time only (no historical) ✓ Full ✓ Full ⚡ Excellent ✓ WCAG AA ◐ Medium ✗ Not applicable
35 34 Predictive Analytics BI/Analytics Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue) Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning Historical-only dashboards, simple reporting, real-time operational dashboards ✓ Full ✓ Full ⚠ Good (computation) ✓ WCAG AA ◐ Medium ✗ Not applicable
36 35 User Behavior Analytics BI/Analytics Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey) Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking Real-time operational metrics, technical system monitoring, financial transactions ✓ Full ✓ Full ⚡ Good ✓ WCAG AA ✓ Good ✗ Not applicable
37 36 Financial Dashboard BI/Analytics Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366) Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue) Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics Simple business dashboards, entertainment/social metrics, non-financial data ✓ Full ✓ Full ⚡ Excellent ✓ WCAG AAA ✗ Low ✗ Not applicable
38 37 Sales Intelligence Dashboard BI/Analytics Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey) Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights CRM dashboards, sales management, opportunity tracking, performance management, quota planning Marketing analytics, customer support metrics, HR dashboards ✓ Full ✓ Full ⚡ Good ✓ WCAG AA ◐ Medium ✗ Not applicable Recharts 9/10, Chart.js 9/10 2020s Modern Medium
39 38 Neubrutalism General Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z #FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders) Limited accent colors, high contrast combinations, no gradients allowed box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs Luxury brands, finance, healthcare, conservative industries (too playful) ✓ Full ✓ Full ⚡ Excellent ✓ WCAG AAA ✓ High ✓ High Tailwind 10/10, Bootstrap 8/10 2020s Modern Low
40 39 Bento Box Grid General Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary Subtle gradients, shadow variations, accent highlights for interactive cards grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS Dense data tables, text-heavy content, real-time monitoring ✓ Full ✓ Full ⚡ Excellent ✓ WCAG AA ✓ High ✓ High Tailwind 10/10, CSS Grid 10/10 2020s Apple Low