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

fix: csv data files (#20)

Browse Source 
* fix: csv data files

* fix: missing columns in styles.csv
This commit is contained in:
Phạm Minh Hùng
2025-12-05 20:50:23 +07:00
committed by GitHub
parent 363cd8911f
commit 998cae1ea1
3 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.shared/ui-ux-pro-max/data/charts.csv
View File

@@ -21,6 +21,6 @@ No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performan
20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover 20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand 21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR 22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS, SciChart,Real-time + Pause 23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,"Smoothed D3.js, CanvasJS, SciChart",Real-time + Pause
24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter 24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click 25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click
1 No Data Type Keywords Best Chart Type Secondary Options Color Guidance Performance Impact Accessibility Notes Library Recommendation Interactive Level
21 20 Hierarchical Proportional hierarchical-proportional Sunburst Chart Treemap, Icicle, Circle Packing Center to outer: darker to lighter. 15-20% lighter per level. ⚠ Moderate ⚠ Poor - provide hierarchy table alternative. D3.js (d3-hierarchy), Recharts, ApexCharts Drilldown + Hover
22 21 Root Cause Analysis root cause, decomposition, tree, hierarchy, drill-down, ai-split Decomposition Tree Decision Tree, Flow Chart Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey. ⚠ Moderate (calculation heavy) ✓ clear hierarchy. Allow keyboard navigation for nodes. Power BI (native), React-Flow, Custom D3.js Drill + Expand
23 22 3D Spatial Data 3d, spatial, immersive, terrain, molecular, volumetric 3D Scatter/Surface Plot Volumetric Rendering, Point Cloud Depth cues: lighting/shading. Z-axis: color gradient (cool to warm). ❌ Heavy (WebGL required) ❌ Poor - requires alternative 2D view or data table. Three.js, Deck.gl, Plotly 3D Rotate + Zoom + VR
24 23 Real-Time Streaming streaming, real-time, ticker, live, velocity, pulse Streaming Area Chart Ticker Tape, Moving Gauge Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark. ⚡ Optimized (canvas/webgl) ⚠ Flashing elements - provide pause button. High contrast. Smoothed D3.js Smoothed D3.js, CanvasJS, SciChart CanvasJS Real-time + Pause
25 24 Sentiment/Emotion sentiment, emotion, nlp, opinion, feeling Word Cloud with Sentiment Sentiment Arc, Radar Chart Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency. ⚡ Good ⚠ Word clouds poor for screen readers. Use list view. D3-cloud, Highcharts, Nivo Hover + Filter
26 25 Process Mining process, mining, variants, path, bottleneck, log Process Map / Graph Directed Acyclic Graph (DAG), Petri Net Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444. ⚠ Moderate to Heavy ⚠ Complex graphs hard to navigate. Provide path summary. React-Flow, Cytoscape.js, Recharts Drag + Node-Click

18
.shared/ui-ux-pro-max/data/landing.csv
View File

@@ -20,12 +20,12 @@ No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Reco
19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews. 19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding." 20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."
21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer. 21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',Search: High contrast. Categories: Visual icons. Trust: Blue/Green.,Search autocomplete animation, map hover pins, card carousel,Search bar is the CTA. Reduce friction to search. Popular searches suggestions. 22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',Search: High contrast. Categories: Visual icons. Trust: Blue/Green.,"Search autocomplete animation, map hover pins, card carousel","Search bar is the CTA. Reduce friction to search. Popular searches suggestions."
23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,Minimalist. Paper-like background. Text focus. Accent color for Subscribe.,Text highlight animations, typewriter effect, subtle fade-in,Single field form (Email only). Show 'Join X,000 readers'. Read sample link. 23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,Minimalist. Paper-like background. Text focus. Accent color for Subscribe.,"Text highlight animations, typewriter effect, subtle fade-in","Single field form (Email only). Show 'Join X,000 readers'. Read sample link."
24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.,Countdown timer, speaker avatar float, urgent ticker,Limited seats logic. 'Live' indicator. Auto-fill timezone. 24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.,"Countdown timer, speaker avatar float, urgent ticker","Limited seats logic. 'Live' indicator. Auto-fill timezone."
25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),Corporate: Navy/Grey. High integrity. Conservative accents.,Slow video background, logo carousel, tab switching for industries,Path selection (I am a...). Mega menu navigation. Trust signals prominent. 25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),Corporate: Navy/Grey. High integrity. Conservative accents.,"Slow video background, logo carousel, tab switching for industries","Path selection (I am a...). Mega menu navigation. Trust signals prominent."
26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,Neutral background (let work shine). Text: Black/White. Accent: Minimal.,Image lazy load reveal, hover overlay info, lightbox view,Visuals first. Filter by category. Fast loading essential. 26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,Neutral background (let work shine). Text: Black/White. Accent: Minimal.,"Image lazy load reveal, hover overlay info, lightbox view","Visuals first. Filter by category. Fast loading essential."
27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer","Floating Sticky CTA or End of Horizontal Track","Continuous palette transition. Chapter colors. Progress bar #000000.","Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Immersive product discovery. High engagement. Keep navigation visible. 27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer","Floating Sticky CTA or End of Horizontal Track","Continuous palette transition. Chapter colors. Progress bar #000000.","Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Immersive product discovery. High engagement. Keep navigation visible."
28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA","Floating Action Button or Bottom of Grid","Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Scannable value props. High information density without clutter. Mobile stack. 28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA","Floating Action Button or Bottom of Grid","Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Scannable value props. High information density without clutter. Mobile stack."
29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase","Inside Configurator UI + Sticky Bottom Bar","Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart. 29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase","Inside Configurator UI + Sticky Bottom Bar","Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart."
30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative","1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop","Input Field (Hero) + 'Try it' Buttons","Adaptive to user input. Dark mode for compute feel. Neon accents.","Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start. 30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative","1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop","Input Field (Hero) + 'Try it' Buttons","Adaptive to user input. Dark mode for compute feel. Neon accents.","Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start."
Can't render this file because it contains an unexpected character in line 29 and column 24.

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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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
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 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 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 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 Tailwind 10/10, Bootstrap 9/10 2020s Modern Medium
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 Tailwind 10/10, Bootstrap 9/10 2020s Modern Medium
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 Tailwind 10/10, Bootstrap 10/10 2020s Modern Low
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 Tailwind 10/10, Bootstrap 9/10 2020s Modern Medium
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 Tailwind 9/10, React 10/10, Framer Motion 9/10 2020s Modern 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 Tailwind 10/10, Bootstrap 9/10 2020s Modern Low
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 GSAP 10/10, Framer Motion 9/10, Tailwind 8/10 2020s Modern 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 Recharts 9/10, Chart.js 9/10, D3.js 10/10 2020s Modern Medium
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 D3.js 10/10, Recharts 8/10, Chart.js 8/10 2020s Modern Medium
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 Recharts 9/10, Chart.js 9/10, MUI 9/10 2020s Modern Low
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 Recharts 9/10, D3.js 10/10, Socket.io 10/10 2020s Modern High
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 D3.js 10/10, Recharts 8/10, AG Grid 9/10 2020s Modern High
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 Recharts 9/10, Chart.js 9/10, D3.js 9/10 2020s Modern Medium
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 D3.js 10/10, Recharts 8/10, TensorFlow.js 8/10 2020s Modern High
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 Recharts 9/10, Chart.js 9/10, D3.js 9/10 2020s Modern Medium
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 Recharts 9/10, Chart.js 9/10, AG Grid 10/10 2020s Modern Medium
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