admin/SuperCharged-Claude-Code-Upgrade
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add custom Claude Code upgrades and restore all skills

Browse Source 
Added 16 custom skills:
- ralph (RalphLoop autonomous agent)
- brainstorming (with Ralph integration)
- dispatching-parallel-agents
- autonomous-loop
- multi-ai-brainstorm
- cognitive-context, cognitive-core, cognitive-planner, cognitive-safety
- tool-discovery-agent
- ui-ux-pro-max (full design system)
- wordpress-ai
- agent-pipeline-builder
- dev-browser
- planning-with-files
- playwright-skill

Also organized remaining skills that were at root level into skills/ folder.

Total: 272 skills from skills.sh + 16 custom upgrades

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
admin
2026-01-23 18:10:15 +00:00
Unverified
parent b723e2bd7d
commit 7b42ebd2b0
100 changed files with 30094 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
skills/ui-ux-pro-max/data/styles.csv Normal file
View File

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