41 KiB
41 KiB
| 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 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2 | 1 | Minimalism & Swiss Style | General | Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential | Monochromatic, Black #000000, White #FFFFFF | Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent | Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading | Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools | Creative portfolios, entertainment, playful brands, artistic experiments | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AAA | ✓ High | ◐ Medium | Tailwind 10/10, Bootstrap 9/10, MUI 9/10 | 1950s Swiss | Low |
| 3 | 2 | Neumorphism | General | Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic | Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8 | Tints/shades (±30%), gradient subtlety, color harmony | Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow | Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs | Complex apps, critical accessibility, data-heavy dashboards, high-contrast required | ✓ Full | ◐ Partial | ⚡ Good | ⚠ Low contrast | ✓ Good | ◐ Medium | Tailwind 8/10, CSS-in-JS 9/10 | 2020s Modern | Medium |
| 4 | 3 | Glassmorphism | General | Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer | Translucent white: rgba(255,255,255,0.1-0.3) | Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA | Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth | Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation | Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark | ✓ Full | ✓ Full | ⚠ Good | ⚠ Ensure 4.5:1 | ✓ Good | ✓ High | Tailwind 9/10, MUI 8/10, Chakra 8/10 | 2020s Modern | Medium |
| 5 | 4 | Brutalism | General | Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design | Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF | Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary | No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks | Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs | Corporate environments, conservative industries, critical accessibility, customer-facing professional | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AAA | ◐ Medium | ✗ Low | Tailwind 10/10, Bootstrap 7/10 | 1950s Brutalist | Low |
| 6 | 5 | 3D & Hyperrealism | General | Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive | Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0 | Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker) | WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms) | Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR | Low-end mobile, performance-limited, critical accessibility, data tables/forms | ◐ Partial | ◐ Partial | ❌ Poor | ⚠ Not accessible | ✗ Low | ◐ Medium | Three.js 10/10, R3F 10/10, Babylon.js 10/10 | 2020s Modern | High |
| 7 | 6 | Vibrant & Block-based | General | Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic | Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00 | Complementary: Orange #FF7F00, Shocking Pink #FF006E, Lime #CCFF00, triadic schemes | Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms | Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer | Financial institutions, healthcare, formal business, government, conservative, elderly | ✓ Full | ✓ Full | ⚡ Good | ◐ Ensure WCAG | ✓ High | ✓ High | Tailwind 10/10, Chakra 9/10, Styled 9/10 | 2020s Modern | Medium |
| 8 | 7 | Dark Mode (OLED) | General | Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient | Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27 | Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF | Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus | Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light | Print-first content, high-brightness outdoor, color-accuracy-critical | ✗ No | ✓ Only | ⚡ Excellent | ✓ WCAG AAA | ✓ High | ◐ Low | Tailwind 10/10, MUI 10/10, Chakra 10/10 | 2020s Modern | Low |
| 9 | 8 | Accessible & Ethical | General | High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic | WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+) | Symbol-based colors (not color-only), supporting patterns, inclusive combinations | Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets | Government, healthcare, education, inclusive products, large audience, legal compliance, public | None - accessibility universal | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AAA | ✓ High | ✓ High | All frameworks 10/10 | Universal | Low |
| 10 | 9 | Claymorphism | General | Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px) | Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG | Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle | Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions | Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games | Formal corporate, professional services, data-critical, serious/medical, legal apps, finance | ✓ Full | ◐ Partial | ⚡ Good | ⚠ Ensure 4.5:1 | ✓ High | ✓ High | Tailwind 9/10, CSS-in-JS 9/10 | 2020s Modern | Medium |
| 11 | 10 | Aurora UI | General | Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract | Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF | Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply) | Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph | Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections | Data-heavy dashboards, critical accessibility, content-heavy where distraction issues | ✓ Full | ✓ Full | ⚠ Good | ⚠ Text contrast | ✓ Good | ✓ High | Tailwind 9/10, CSS-in-JS 10/10 | 2020s Modern | Medium |
| 12 | 11 | Retro-Futurism | General | Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave | Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0 | Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents | CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes) | Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk | Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance | ✓ Full | ✓ Dark focused | ⚠ Moderate | ⚠ High contrast/strain | ◐ Medium | ◐ Medium | Tailwind 8/10, CSS-in-JS 9/10 | 1980s Retro | Medium |
| 13 | 12 | Flat Design | General | 2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy | Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max) | Complementary colors, muted secondaries, high saturation, clean accents | No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons | Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate | Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AAA | ✓ High | ✓ High | Tailwind 10/10, Bootstrap 10/10, MUI 9/10 | 2010s Modern | Low |
| 14 | 13 | Skeuomorphism | General | Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material | Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects | Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors | Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms) | Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education | Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern) | ◐ Partial | ◐ Partial | ❌ Poor | ⚠ Textures reduce readability | ✗ Low | ◐ Medium | CSS-in-JS 7/10, Custom 8/10 | 2007-2012 iOS | High |
| 15 | 14 | Liquid Glass | General | Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration | Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity | Chromatic aberration (Red-Cyan), iridescent oil-spill, fluid gradient blends, holographic effects | Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions | Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios | Performance-limited, critical accessibility, complex data, budget projects | ✓ Full | ✓ Full | ⚠ Moderate-Poor | ⚠ Text contrast | ◐ Medium | ✓ High | Framer Motion 10/10, GSAP 10/10 | 2020s Modern | High |
| 16 | 15 | Motion-Driven | General | Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions | Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors | Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback | Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions | Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS | Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive | ✓ Full | ✓ Full | ⚠ Good | ⚠ Prefers-reduced-motion | ✓ Good | ✓ High | GSAP 10/10, Framer Motion 10/10 | 2020s Modern | High |
| 17 | 16 | Micro-interactions | General | Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive | Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B | Accent feedback, neutral supporting, clear action indicators | Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic | Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components | Desktop-only, critical performance, accessibility-first (alternatives needed) | ✓ Full | ✓ Full | ⚡ Excellent | ✓ Good | ✓ High | ✓ High | Framer Motion 10/10, React Spring 9/10 | 2020s Modern | Medium |
| 18 | 17 | Inclusive Design | General | Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal | WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary | Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators | Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic | Public services, education, healthcare, finance, government, accessible consumer, inclusive | None - accessibility universal | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AAA | ✓ High | ✓ High | All frameworks 10/10 | Universal | Low |
| 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 |
| 41 | 40 | Y2K Aesthetic | General | Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia | #FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple) | Metallic gradients, glossy overlays, iridescent effects, chrome textures | linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes | Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused | B2B enterprise, healthcare, finance, conservative industries, elderly users | ✓ Full | ◐ Partial | ⚠ Good | ⚠ Check contrast | ✓ Good | ✓ High | Tailwind 8/10, CSS-in-JS 9/10 | Y2K 2000s | Medium |
| 42 | 41 | Cyberpunk UI | General | Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir | #00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark) | Neon gradients, scanline overlays, glitch colors, terminal green accents | Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts | Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment | Corporate enterprise, healthcare, family apps, conservative brands, elderly users | ✗ No | ✓ Only | ⚠ Moderate | ⚠ Limited (dark+neon) | ◐ Medium | ◐ Medium | Tailwind 8/10, Custom CSS 10/10 | 2020s Cyberpunk | Medium |
| 43 | 42 | Organic Biophilic | General | Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures | #228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige) | Natural gradients, earth tones, sky blues, organic textures, wood/stone colors | Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes | Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands | Tech-focused products, gaming, industrial, urban brands | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AA | ✓ High | ✓ High | Tailwind 10/10, CSS 10/10 | 2020s Sustainable | Low |
| 44 | 43 | AI-Native UI | General | Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions | Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background) | Status indicators, streaming highlights, context card colors, subtle accent variations | Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals | AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces | Traditional forms, data-heavy dashboards, print-first content | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AA | ✓ High | ✓ High | Tailwind 10/10, React 10/10 | 2020s AI-Era | Low |
| 45 | 44 | Memphis Design | General | 80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold | #FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple) | Complementary geometric colors, pattern fills, contrasting accent shapes | transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes | Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment | Corporate finance, healthcare, legal, elderly users, conservative brands | ✓ Full | ✓ Full | ⚡ Excellent | ⚠ Check contrast | ✓ Good | ◐ Medium | Tailwind 9/10, CSS 10/10 | 1980s Postmodern | Medium |
| 46 | 45 | Vaporwave | General | Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic | #FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple) | Sunset gradients, glitch overlays, VHS effects, neon accents, pastel variations | text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines | Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects | Business apps, e-commerce, education, healthcare, enterprise software | ✓ Full | ✓ Dark focused | ⚠ Moderate | ⚠ Poor (motion) | ◐ Medium | ◐ Medium | Tailwind 8/10, CSS-in-JS 9/10 | 1980s-90s Retro | Medium |
| 47 | 46 | Dimensional Layering | General | Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy | Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements | Shadow variations (sm/md/lg/xl), elevation colors, highlight colors for top layers | z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax | Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces | Print-style layouts, simple blogs, low-end devices, flat design requirements | ✓ Full | ✓ Full | ⚠ Good | ⚠ Moderate (SR issues) | ✓ Good | ✓ High | Tailwind 10/10, MUI 10/10, Chakra 10/10 | 2020s Modern | Medium |
| 48 | 47 | Exaggerated Minimalism | General | Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design | #000000 (Black), #FFFFFF (White), single vibrant accent only | Minimal - single accent color, no secondary colors, extreme restraint | font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace | Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial | E-commerce catalogs, dashboards, forms, data-heavy, elderly users, complex apps | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AA | ✓ High | ✓ High | Tailwind 10/10, Typography.js 10/10 | 2020s Modern | Low |
| 49 | 48 | Kinetic Typography | General | Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text | Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette | Accent colors for emphasis, transition colors, gradient text fills | @keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text | Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages | Long-form content, accessibility-critical, data interfaces, forms, elderly users | ✓ Full | ✓ Full | ⚠ Moderate | ❌ Poor (motion) | ✓ Good | ✓ Very High | GSAP 10/10, Framer Motion 10/10 | 2020s Modern | High |
| 50 | 49 | Parallax Storytelling | General | Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered | Story-dependent, often gradients and natural colors, section-specific palettes | Section transition colors, depth layer colors, narrative mood colors | transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations | Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns | E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required | ✓ Full | ✓ Full | ❌ Poor | ❌ Poor (motion) | ✗ Low | ✓ High | GSAP ScrollTrigger 10/10, Locomotive Scroll 10/10 | 2020s Modern | High |
| 51 | 50 | Swiss Modernism 2.0 | General | Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing | #000000, #FFFFFF, #F5F5F5, single vibrant accent only | Minimal secondary, accent for emphasis only, no gradients | display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy | Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation | Playful brands, children's sites, entertainment, gaming, emotional storytelling | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AAA | ✓ High | ✓ High | Tailwind 10/10, Bootstrap 9/10, Foundation 10/10 | 1950s Swiss + 2020s | Low |
| 52 | 51 | HUD / Sci-Fi FUI | General | Futuristic, technical, wireframe, neon, data, transparency, iron man, sci-fi, interface | Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000 | Transparent Black, Grid Lines #333333 | Glow effects, scanning animations, ticker text, blinking markers, fine line drawing | Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards | Standard corporate, reading heavy content, accessible public services | ✓ Low | ✓ Full | ⚠ Moderate (renders) | ⚠ Poor (thin lines) | ◐ Medium | ✗ Low | React 9/10, Canvas 10/10 | 2010s Sci-Fi | High |
| 53 | 52 | Pixel Art | General | Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade | Primary colors (NES Palette), brights, limited palette | Black outlines, shading via dithering or block colors | Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text | Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT | Professional corporate, modern SaaS, high-res photography sites | ✓ Full | ✓ Full | ⚡ Excellent | ✓ Good (if contrast ok) | ✓ High | ◐ Medium | CSS (box-shadow) 8/10, Canvas 10/10 | 1980s Arcade | Medium |
| 54 | 53 | Bento Grids | General | Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft | Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F | Subtle accents, soft shadows, blurred backdrops | Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal | Product features, dashboards, personal sites, marketing summaries, galleries | Long-form reading, data tables, complex forms | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AA | ✓ High | ✓ High | CSS Grid 10/10, Tailwind 10/10 | 2020s Apple/Linear | Low |
| 55 | 54 | Neubrutalism | General | Bold, ugly-cute, raw, high contrast, flat, hard shadows, distinct, playful, loud | Pop Yellow #FFDE59, Bright Red #FF5757, Black #000000 | Lavender #CBA6F7, Mint #76E0C2 | Hard hover shifts (4px), marquee scrolling, jitter animations, bold borders | Design tools, creative agencies, Gen Z brands, personal blogs, gumroad-style | Banking, legal, healthcare, serious enterprise, elderly users | ✓ Full | ✓ Full | ⚡ Excellent | ✓ WCAG AAA | ✓ High | ✓ High | Tailwind 10/10, Plain CSS 10/10 | 2020s Modern Retro | Low |
| 56 | 55 | Spatial UI (VisionOS) | General | Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro | Frosted Glass #FFFFFF (15-30% opacity), System White | Vibrant system colors for active states, deep shadows for depth | Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus | Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards | Text-heavy documents, high-contrast requirements, non-3D capable devices | ✓ Full | ✓ Full | ⚠ Moderate (blur cost) | ⚠ Contrast risks | ✓ High (if adapted) | ✓ High | SwiftUI, React (Three.js/Fiber) | 2024 Spatial Era | High |
| 57 | 56 | E-Ink / Paper | General | Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome | Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A | Pencil Grey #4A4A4A, Highlighter Yellow #FFFF00 (accent) | No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade) | Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands | Gaming, video platforms, high-energy marketing, dark mode dependent apps | ✓ Full | ✗ Low (inverted only) | ⚡ Excellent | ✓ WCAG AAA | ✓ High | ✓ Medium | Tailwind 10/10, CSS 10/10 | 2020s Digital Well-being | Low |
| 58 | 57 | Gen Z Chaos / Maximalism | General | Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic | Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF | Gradients, rainbow, glitch, noise, heavily saturated mix | Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop | Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion | Corporate, government, healthcare, banking, serious tools | ✓ Full | ✓ Full | ⚠ Poor (heavy assets) | ❌ Poor | ◐ Medium | ✓ High (Viral) | CSS-in-JS 8/10 | 2023+ Internet Core | High |
| 59 | 58 | Biomimetic / Organic 2.0 | General | Nature-inspired, cellular, fluid, breathing, generative, algorithms, life-like | Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue | Deep Ocean #001E3C, Coral #FF7F50, Organic gradients | Breathing animations, fluid morphing, generative growth, physics-based movement | Sustainability tech, biotech, advanced health, meditation, generative art platforms | Standard SaaS, data grids, strict corporate, accounting | ✓ Full | ✓ Full | ⚠ Moderate | ✓ Good | ✓ Good | ✓ High | Canvas 10/10, WebGL 10/10 | 2024+ Generative | High |