| 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 finance, 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, 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 |
