ui-ux-pro-mcp

"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","CSS_Code","Motion_Config","Animation_Variants" "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",".minimal { background: #FFFFFF; color: #000000; font-family: 'Helvetica Neue', sans-serif; transition: all 200ms ease; } .minimal:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".neumorphic { background: #E8E8E8; border-radius: 16px; box-shadow: -5px -5px 15px rgba(255,255,255,0.8), 5px 5px 15px rgba(0,0,0,0.1); transition: all 150ms ease; } .neumorphic:active { box-shadow: inset -2px -2px 5px rgba(255,255,255,0.7), inset 2px 2px 5px rgba(0,0,0,0.1); }","{""type"":""spring"",""stiffness"":50,""damping"":20,""mass"":1.2}","{""hidden"":{""opacity"":0,""y"":20,""scale"":0.98},""visible"":{""opacity"":1,""y"":0,""scale"":1},""hover"":{""y"":-5,""boxShadow"":""0 10px 30px rgba(0,0,0,0.1)""}}" "3","Glassmorphism","General","Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer, navbar states","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, navbar scroll states","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",".glass { background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Navbar States */ .glass-navbar { background: transparent; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .glass-navbar.scrolled { background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .glass-navbar-mobile { background: rgba(15,23,42,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }","{""type"":""spring"",""stiffness"":50,""damping"":20,""mass"":1.2}","{""hidden"":{""opacity"":0,""y"":20,""scale"":0.98},""visible"":{""opacity"":1,""y"":0,""scale"":1},""hover"":{""y"":-5,""boxShadow"":""0 10px 30px rgba(0,0,0,0.1)""}}" "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",".brutalist { background: #FFFFFF; border: 3px solid #000000; font-family: 'Courier New', monospace; font-weight: 700; border-radius: 0; transition: none; } .brutalist:hover { background: #FFFF00; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""scale"":0.95,""x"":-10,""filter"":""brightness(2)""},""visible"":{""opacity"":1,""scale"":1,""x"":0,""filter"":""brightness(1)""},""hover"":{""x"":5,""filter"":""hue-rotate(90deg)""}}" "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",".hyperrealism { background: linear-gradient(135deg, #001F3F 0%, #228B22 50%, #800020 100%); box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 2px 10px rgba(0,0,0,0.2); transform: perspective(1000px) rotateX(2deg); transition: transform 350ms ease; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".vibrant-block { background: #BF00FF; color: #FFFFFF; padding: 48px; font-size: 32px; font-weight: 700; transition: background 250ms ease; } .vibrant-block:hover { background: #39FF14; color: #000000; }","{""type"":""spring"",""stiffness"":200,""damping"":10,""mass"":0.8}","{""hidden"":{""opacity"":0,""scale"":0.5,""rotate"":-5},""visible"":{""opacity"":1,""scale"":1,""rotate"":0},""hover"":{""scale"":1.1,""rotate"":3}}" "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",".dark-oled { background: #000000; color: #FFFFFF; } .dark-oled a { color: #0080FF; text-shadow: 0 0 10px rgba(0,128,255,0.5); } .dark-oled:focus { outline: 2px solid #39FF14; outline-offset: 2px; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".accessible { font-size: 16px; line-height: 1.5; } .accessible:focus { outline: 3px solid #005FCC; outline-offset: 2px; } .accessible button { min-width: 44px; min-height: 44px; } @media (prefers-reduced-motion: reduce) { .accessible { transition: none; animation: none; } }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".claymorphism { background: linear-gradient(145deg, #FDBCB4, #E6E6FA); border: 3px solid rgba(0,0,0,0.1); border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.1), inset 0 -2px 6px rgba(0,0,0,0.05); transition: transform 200ms ease-out; } .claymorphism:active { transform: scale(0.98); }","{""type"":""spring"",""stiffness"":200,""damping"":10,""mass"":0.8}","{""hidden"":{""opacity"":0,""scale"":0.5,""rotate"":-5},""visible"":{""opacity"":1,""scale"":1,""rotate"":0},""hover"":{""scale"":1.1,""rotate"":3}}" "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",".aurora { background: linear-gradient(135deg, #0080FF 0%, #FF1493 50%, #00FFFF 100%); background-size: 400% 400%; animation: aurora-shift 10s ease infinite; } @keyframes aurora-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }","{""type"":""spring"",""stiffness"":50,""damping"":20,""mass"":1.2}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".retro-futurism { background: #1A1A2E; color: #00FFFF; text-shadow: 0 0 10px #00FFFF, 0 0 20px #FF006E; } .retro-futurism::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px); pointer-events: none; }","{""type"":""tween"",""ease"":""steps(5)"",""duration"":0.1}","{""hidden"":{""opacity"":0,""scale"":0.95,""x"":-10,""filter"":""brightness(2)""},""visible"":{""opacity"":1,""scale"":1,""x"":0,""filter"":""brightness(1)""},""hover"":{""x"":5,""filter"":""hue-rotate(90deg)""}}" "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",".flat { background: #3498DB; color: #FFFFFF; border: none; border-radius: 4px; box-shadow: none; transition: opacity 150ms ease; } .flat:hover { opacity: 0.85; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".skeuomorphic { background: linear-gradient(180deg, #D4A574 0%, #8B6914 50%, #5D4E37 100%); border: 2px solid #3D3426; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2); transition: all 400ms ease; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".liquid-glass { background: linear-gradient(135deg, rgba(255,100,100,0.2), rgba(100,100,255,0.2)); backdrop-filter: blur(20px); border-radius: 24px; transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1); } .liquid-glass:hover { backdrop-filter: blur(30px); transform: scale(1.02); }","{""type"":""spring"",""stiffness"":50,""damping"":20,""mass"":1.2}","{""hidden"":{""opacity"":0,""y"":20,""scale"":0.98},""visible"":{""opacity"":1,""y"":0,""scale"":1},""hover"":{""y"":-5,""boxShadow"":""0 10px 30px rgba(0,0,0,0.1)""}}" "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",".motion-driven { opacity: 0; transform: translateY(20px); transition: all 350ms ease-out; } .motion-driven.visible { opacity: 1; transform: translateY(0); } .motion-driven:hover { transform: scale(1.05); transition-duration: 300ms; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".micro-interaction { transition: all 80ms ease; } .micro-interaction:hover { transform: scale(1.02); } .micro-interaction:active { transform: scale(0.98); } .micro-interaction.success { background: #22C55E; } .micro-interaction.error { background: #EF4444; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".inclusive { font-size: 18px; line-height: 1.6; color: #1A1A1A; } .inclusive:focus-visible { outline: 4px solid #005FCC; outline-offset: 3px; } .inclusive .error { border-left: 4px solid #EF4444; background: url('data:image/svg+xml,...') no-repeat; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".zero-ui { background: #FAFAFA; } .zero-ui .suggestion { opacity: 0; transform: translateY(10px); transition: all 300ms ease; } .zero-ui .suggestion.visible { opacity: 1; transform: translateY(0); } .zero-ui .voice-indicator { animation: pulse 1.5s ease infinite; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".soft-ui-evolved { background: #F8FAFC; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); transition: all 250ms ease; } .soft-ui-evolved:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .soft-ui-evolved:focus-visible { outline: 2px solid #87CEEB; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".hero-section { min-height: 100vh; display: flex; align-items: center; } .hero-section .headline { opacity: 0; animation: fadeInUp 800ms ease forwards; } .hero-section .cta { box-shadow: 0 0 20px rgba(59,130,246,0.5); animation: pulse 2s infinite; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "21","Conversion-Optimized","Landing Page","Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value","Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers","Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits","Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback","E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers","Complex feature explanations, multi-product showcases, technical documentation","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ Full (mobile-optimized)","✓ Very High","Tailwind 10/10, Bootstrap 9/10","2020s Modern","Medium",".conversion-cta { background: #3B82F6; color: #FFFFFF; padding: 16px 32px; border-radius: 8px; font-weight: 600; transition: all 200ms ease; box-shadow: 0 4px 14px rgba(59,130,246,0.4); } .conversion-cta:hover { transform: scale(1.05); background: #2563EB; } .conversion-form input:focus { outline: 2px solid #3B82F6; outline-offset: 2px; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "22","Feature-Rich Showcase","Landing Page","Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs","Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs","Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)","Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions","Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products","Simple product pages, early-stage startups with few features, entertainment landing pages","✓ Full","✓ Full","⚡ Good","✓ WCAG AA","✓ Good","✓ High","Tailwind 10/10, Bootstrap 9/10","2020s Modern","Medium",".feature-card { background: #FFFFFF; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 250ms ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); } .feature-icon { transition: transform 300ms ease; } .feature-card:hover .feature-icon { transform: scale(1.1); }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "23","Minimal & Direct","Landing Page","Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading","Monochromatic primary, white background, single accent color for CTA, black/dark grey text","Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements","Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll","Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios","Feature-heavy products, complex explanations, multi-product showcases","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AAA","✓ Full","✓ High","Tailwind 10/10, Bootstrap 10/10","2020s Modern","Low",".minimal-direct { background: #FFFFFF; color: #1A1A1A; max-width: 680px; margin: 0 auto; } .minimal-direct h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; } .minimal-direct a { color: #000000; text-decoration: underline; transition: opacity 150ms; } .minimal-direct a:hover { opacity: 0.7; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "24","Social Proof-Focused","Landing Page","Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers","Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds","Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors","Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings","B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands","Startup MVPs, products without users, niche/experimental products","✓ Full","✓ Full","⚡ Good","✓ WCAG AA","✓ Full","✓ High","Tailwind 10/10, Bootstrap 9/10","2020s Modern","Medium",".testimonial-card { background: #F8FAFC; border-radius: 12px; padding: 24px; border-left: 4px solid #3B82F6; } .logo-grid { display: grid; gap: 32px; opacity: 0; animation: fadeIn 600ms ease forwards; } .stat-counter { font-size: 3rem; font-weight: 700; color: #22C55E; } @keyframes fadeIn { to { opacity: 1; } }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "25","Interactive Product Demo","Landing Page","Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos","Primary brand, interface colors matching product, demo highlight colors for interactive elements","Product UI colors, tutorial step colors (numbered progression), hover state indicators","Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction","SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software","Simple services, consulting, non-digital products, complexity-averse audiences","✓ Full","✓ Full","⚠ Good (video/interactive)","✓ WCAG AA","✓ Good","✓ Very High","Tailwind 9/10, React 10/10, Framer Motion 9/10","2020s Modern","High",".demo-container { border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.15); } .demo-step { opacity: 0.5; transition: all 300ms ease; } .demo-step.active { opacity: 1; transform: scale(1.02); } .demo-hotspot { animation: pulse 2s infinite; cursor: pointer; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); } 50% { box-shadow: 0 0 0 10px rgba(59,130,246,0); } }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "26","Trust & Authority","Landing Page","Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges","Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)","Certificate highlight colors, metric showcase colors, comparison highlight (success green)","Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal","Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services","Casual products, entertainment, viral/social-first products","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AAA","✓ Full","✓ High","Tailwind 10/10, Bootstrap 9/10","2020s Modern","Low",".trust-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px; } .trust-badge:hover { border-color: #CBD5E1; } .credential { color: #1E40AF; font-weight: 600; } .security-seal { filter: grayscale(0); transition: filter 200ms; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "27","Storytelling-Driven","Landing Page","Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization","Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety","Story section color coding, emotional state colors (calm, excitement, success), transitional gradients","Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative","Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational","Technical/complex products (unless narrative-driven), traditional enterprise software","✓ Full","✓ Full","⚠ Moderate (animations)","✓ WCAG AA","✓ Good","✓ High","GSAP 10/10, Framer Motion 9/10, Tailwind 8/10","2020s Modern","High",".story-section { min-height: 100vh; opacity: 0; transform: translateY(40px); transition: all 600ms ease-out; } .story-section.visible { opacity: 1; transform: translateY(0); } .story-chapter { background: linear-gradient(180deg, var(--chapter-color) 0%, transparent 100%); } .narrative-text { font-size: 1.25rem; line-height: 1.8; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "28","Data-Dense Dashboard","BI/Analytics","Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility","Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333","Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)","Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners","Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing","Marketing dashboards, consumer-facing analytics, simple reporting","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","◐ Medium","✗ Not applicable","Recharts 9/10, Chart.js 9/10, D3.js 10/10","2020s Modern","Medium",".dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .widget-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px; padding: 16px; } .data-row:hover { background: #F3F4F6; } .kpi-value { font-size: 2rem; font-weight: 700; color: #111827; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "29","Heat Map & Heatmap Style","BI/Analytics","Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring","Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)","Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options","Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation","Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data","Linear data representation, categorical comparisons (use bar charts), small datasets","✓ Full","✓ Full (with adjustments)","⚡ Excellent","⚠ Colorblind considerations","◐ Medium","✗ Not applicable","D3.js 10/10, Recharts 8/10, Chart.js 8/10","2020s Modern","Medium",".heatmap-cell { transition: all 200ms ease; } .heatmap-cell:hover { transform: scale(1.1); z-index: 10; box-shadow: 0 0 8px rgba(0,0,0,0.3); } .heatmap-gradient { background: linear-gradient(90deg, #0080FF 0%, #FFFFFF 50%, #FF0000 100%); } .heatmap-tooltip { background: #1F2937; color: #FFFFFF; padding: 8px 12px; border-radius: 6px; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "30","Executive Dashboard","BI/Analytics","High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary","Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns","KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors","KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect","C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views","Detailed analyst dashboards, technical deep-dives, operational monitoring","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✗ Low (not mobile-optimized)","✗ Not applicable","Recharts 9/10, Chart.js 9/10, MUI 9/10","2020s Modern","Low",".exec-kpi { font-size: 3.5rem; font-weight: 800; } .exec-card { background: #FFFFFF; border-radius: 16px; padding: 32px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .trend-up { color: #22C55E; } .trend-down { color: #EF4444; } .exec-card:hover { transform: translateY(-2px); transition: transform 200ms ease; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "31","Real-Time Monitoring","BI/Analytics","Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts","Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)","Status indicator colors, chart line colors varying by metric, streaming data highlight colors","Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect","System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking","Historical analysis, long-term trend reports, archived data dashboards","✓ Full","✓ Full","⚡ Good (real-time load)","✓ WCAG AA","◐ Medium","✗ Not applicable","Recharts 9/10, D3.js 10/10, Socket.io 10/10","2020s Modern","High",".status-indicator { width: 12px; height: 12px; border-radius: 50%; } .status-critical { background: #FF0000; animation: pulse-alert 1s infinite; } .status-normal { background: #22C55E; } @keyframes pulse-alert { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,0,0,0.4); } 50% { box-shadow: 0 0 0 8px rgba(255,0,0,0); } } .live-badge { animation: blink 2s infinite; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "32","Drill-Down Analytics","BI/Analytics","Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation","Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors","Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors","Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation","Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence","Simple linear data, single-metric dashboards, streaming real-time dashboards","✓ Full","✓ Full","⚡ Good","✓ WCAG AA","◐ Medium","✗ Not applicable","D3.js 10/10, Recharts 8/10, AG Grid 9/10","2020s Modern","High",".breadcrumb { display: flex; gap: 8px; align-items: center; } .breadcrumb-item { color: #6B7280; cursor: pointer; transition: color 150ms; } .breadcrumb-item:hover { color: #3B82F6; } .drill-section { overflow: hidden; transition: max-height 300ms ease; } .drill-row { cursor: pointer; } .drill-row:hover { background: #EFF6FF; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "33","Comparative Analysis Dashboard","BI/Analytics","Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks","Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)","Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors","Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare","Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance","Single metric dashboards, future projections (use forecasting), real-time only (no historical)","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","◐ Medium","✗ Not applicable","Recharts 9/10, Chart.js 9/10, D3.js 9/10","2020s Modern","Medium",".compare-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .compare-bar { height: 24px; border-radius: 4px; transition: width 500ms ease-out; } .compare-primary { background: #3B82F6; } .compare-secondary { background: #F97316; } .delta-positive { color: #22C55E; } .delta-negative { color: #EF4444; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "34","Predictive Analytics","BI/Analytics","Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization","Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors","High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)","Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations","Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning","Historical-only dashboards, simple reporting, real-time operational dashboards","✓ Full","✓ Full","⚠ Good (computation)","✓ WCAG AA","◐ Medium","✗ Not applicable","D3.js 10/10, Recharts 8/10, TensorFlow.js 8/10","2020s Modern","High",".forecast-line { stroke: #8B5CF6; stroke-dasharray: 8 4; stroke-width: 2; } .confidence-band { fill: rgba(139,92,246,0.15); } .anomaly-point { fill: #EF4444; animation: anomaly-pulse 1.5s infinite; } @keyframes anomaly-pulse { 0%, 100% { r: 6; } 50% { r: 10; } } .actual-line { stroke: #3B82F6; stroke-width: 2; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "35","User Behavior Analytics","BI/Analytics","Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis","Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)","Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors","Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill","Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking","Real-time operational metrics, technical system monitoring, financial transactions","✓ Full","✓ Full","⚡ Good","✓ WCAG AA","✓ Good","✗ Not applicable","Recharts 9/10, Chart.js 9/10, D3.js 9/10","2020s Modern","Medium",".funnel-stage { transition: all 400ms ease; } .funnel-stage:hover { filter: brightness(1.1); } .flow-arrow { stroke: #9CA3AF; stroke-width: 2; marker-end: url(#arrowhead); } .conversion-badge { background: #22C55E; color: #FFFFFF; padding: 4px 12px; border-radius: 12px; font-weight: 600; } .dropoff-indicator { color: #EF4444; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "36","Financial Dashboard","BI/Analytics","Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail","Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)","Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)","Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions","Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics","Simple business dashboards, entertainment/social metrics, non-financial data","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AAA","✗ Low","✗ Not applicable","Recharts 9/10, Chart.js 9/10, AG Grid 10/10","2020s Modern","Medium",".financial-metric { font-family: 'SF Mono', 'Roboto Mono', monospace; font-weight: 600; } .profit { color: #22C55E; } .loss { color: #EF4444; } .currency { font-size: 2.5rem; } .financial-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px; padding: 20px; } .variance-positive::before { content: '▲'; margin-right: 4px; } .variance-negative::before { content: '▼'; margin-right: 4px; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".pipeline-stage { padding: 16px; border-radius: 8px; transition: all 200ms ease; } .stage-won { background: #DCFCE7; border-left: 4px solid #22C55E; } .stage-lost { background: #FEE2E2; border-left: 4px solid #EF4444; } .stage-active { background: #DBEAFE; border-left: 4px solid #3B82F6; } .leaderboard-row { display: flex; align-items: center; gap: 12px; padding: 12px; } .quota-gauge { stroke-linecap: round; transition: stroke-dashoffset 500ms ease; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "38","Neubrutalism (Classic)","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",".neubrutalist { background: #FFEB3B; border: 3px solid #000000; border-radius: 0; box-shadow: 4px 4px 0 #000000; font-weight: 700; transition: all 100ms ease; } .neubrutalist:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000000; } .neubrutalist:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000000; }","{""type"":""spring"",""stiffness"":200,""damping"":10,""mass"":0.8}","{""hidden"":{""opacity"":0,""scale"":0.95,""x"":-10,""filter"":""brightness(2)""},""visible"":{""opacity"":1,""scale"":1,""x"":0,""filter"":""brightness(1)""},""hover"":{""x"":5,""filter"":""hue-rotate(90deg)""}}" "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",".bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .bento-card { background: #FFFFFF; border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: all 250ms ease; } .bento-card:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .bento-large { grid-column: span 2; grid-row: span 2; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".y2k { background: linear-gradient(135deg, #FF69B4 0%, #00FFFF 50%, #9400D3 100%); border-radius: 20px; } .y2k-chrome { background: linear-gradient(180deg, #E8E8E8 0%, #C0C0C0 50%, #A0A0A0 100%); border: 2px solid #FFFFFF; box-shadow: 0 4px 15px rgba(255,105,180,0.4); } .y2k-glow { text-shadow: 0 0 10px #FF69B4, 0 0 20px #00FFFF; animation: y2k-pulse 2s infinite; } @keyframes y2k-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }","{""type"":""tween"",""ease"":""steps(5)"",""duration"":0.1}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".cyberpunk { background: #0D0D0D; color: #00FF00; font-family: 'Share Tech Mono', monospace; text-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00; } .cyberpunk::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,0,0.03) 2px, rgba(0,255,0,0.03) 4px); pointer-events: none; } .cyberpunk-glitch { animation: glitch 0.3s infinite; } @keyframes glitch { 0%, 100% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(2px, -2px); } }","{""type"":""tween"",""ease"":""steps(5)"",""duration"":0.1}","{""hidden"":{""opacity"":0,""scale"":0.95,""x"":-10,""filter"":""brightness(2)""},""visible"":{""opacity"":1,""scale"":1,""x"":0,""filter"":""brightness(1)""},""hover"":{""x"":5,""filter"":""hue-rotate(90deg)""}}" "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",".biophilic { background: linear-gradient(180deg, #F5F5DC 0%, #E8F5E9 100%); border-radius: 24px 16px 24px 16px; box-shadow: 0 8px 32px rgba(34,139,34,0.15); } .biophilic-card { background: #FFFFFF; border-radius: 20px; padding: 24px; border: 1px solid rgba(139,69,19,0.1); } .biophilic-accent { color: #228B22; } .biophilic-shape { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transition: border-radius 500ms ease; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".ai-native { background: #F5F5F5; font-family: system-ui, sans-serif; } .ai-message { background: #FFFFFF; border-radius: 16px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .ai-typing { display: flex; gap: 4px; } .ai-typing span { width: 8px; height: 8px; background: #6366F1; border-radius: 50%; animation: typing-bounce 1.4s infinite; } .ai-typing span:nth-child(2) { animation-delay: 0.2s; } .ai-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".memphis { background: #FFFFFF; position: relative; } .memphis-shape { position: absolute; } .memphis-triangle { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 50px solid #FF71CE; transform: rotate(15deg); } .memphis-circle { width: 60px; height: 60px; background: #FFCE5C; border-radius: 50%; } .memphis-squiggle { border: 4px solid #86CCCA; border-radius: 50%; width: 100px; height: 50px; border-top-color: transparent; transform: rotate(-20deg); }","{""type"":""spring"",""stiffness"":200,""damping"":10,""mass"":0.8}","{""hidden"":{""opacity"":0,""scale"":0.5,""rotate"":-5},""visible"":{""opacity"":1,""scale"":1,""rotate"":0},""hover"":{""scale"":1.1,""rotate"":3}}" "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",".vaporwave { background: linear-gradient(180deg, #FF71CE 0%, #B967FF 50%, #01CDFE 100%); color: #FFFFFF; text-shadow: 0 0 10px #FF71CE, 0 0 20px #01CDFE, 0 0 30px #B967FF; } .vaporwave-text { font-family: 'VT323', monospace; letter-spacing: 0.1em; } .vaporwave-grid { background-image: linear-gradient(#B967FF 1px, transparent 1px), linear-gradient(90deg, #B967FF 1px, transparent 1px); background-size: 40px 40px; animation: grid-scroll 20s linear infinite; } @keyframes grid-scroll { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } }","{""type"":""tween"",""ease"":""steps(5)"",""duration"":0.1}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".layer-base { background: #F5F5F5; } .layer-1 { background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.08); z-index: 1; } .layer-2 { background: #FFFFFF; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 2; } .layer-3 { background: #FFFFFF; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 3; } .layer-4 { background: #FFFFFF; box-shadow: 0 16px 48px rgba(0,0,0,0.15); z-index: 4; } .layer-floating { transform: translateY(-4px); transition: all 250ms ease; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".exaggerated-minimal { background: #FFFFFF; color: #000000; padding: 10vh 5vw; } .exaggerated-minimal h1 { font-size: clamp(3rem, 10vw, 12rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; margin: 0; } .exaggerated-minimal p { font-size: clamp(1rem, 2vw, 1.5rem); max-width: 40ch; } .exaggerated-minimal a { color: inherit; text-decoration: none; border-bottom: 3px solid currentColor; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".kinetic-text { font-size: clamp(2rem, 8vw, 6rem); font-weight: 800; overflow: hidden; } .kinetic-letter { display: inline-block; animation: letter-rise 0.6s ease forwards; opacity: 0; transform: translateY(100%); } @keyframes letter-rise { to { opacity: 1; transform: translateY(0); } } .kinetic-gradient { background: linear-gradient(90deg, #3B82F6, #8B5CF6, #EC4899); background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 200% auto; animation: gradient-shift 3s linear infinite; } @keyframes gradient-shift { to { background-position: 200% center; } }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".parallax-container { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .parallax-layer { position: absolute; inset: 0; } .parallax-back { transform: translateZ(-2px) scale(3); } .parallax-mid { transform: translateZ(-1px) scale(2); } .parallax-front { transform: translateZ(0); } .story-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(50px); transition: all 600ms ease-out; } .story-section.visible { opacity: 1; transform: translateY(0); }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".swiss-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; } .swiss-grid h1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 3rem; letter-spacing: -0.02em; line-height: 1.1; } .swiss-grid p { font-size: 1rem; line-height: 1.618; max-width: 65ch; } .swiss-accent { color: #FF0000; } .swiss-rule { border: none; border-top: 2px solid #000000; margin: 2rem 0; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".hud { background: rgba(0,0,0,0.9); color: #00FFFF; font-family: 'Orbitron', 'Share Tech Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; } .hud-panel { border: 1px solid rgba(0,255,255,0.3); background: rgba(0,255,255,0.05); box-shadow: 0 0 20px rgba(0,255,255,0.1), inset 0 0 20px rgba(0,255,255,0.05); } .hud-glow { text-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF; } .hud-scan { animation: hud-scan 2s linear infinite; } @keyframes hud-scan { 0% { background-position: 0 -100%; } 100% { background-position: 0 100%; } } .hud-blink { animation: hud-blink 1s step-end infinite; } @keyframes hud-blink { 50% { opacity: 0; } }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".pixel-art { font-family: 'Press Start 2P', 'Courier New', monospace; image-rendering: pixelated; image-rendering: crisp-edges; } .pixel-button { background: #4CAF50; color: #FFFFFF; border: 4px solid #000000; padding: 12px 24px; box-shadow: 4px 4px 0 #000000; transition: none; } .pixel-button:active { transform: translate(4px, 4px); box-shadow: none; } .pixel-border { border: 4px solid #000000; box-shadow: inset -4px -4px 0 #888888, inset 4px 4px 0 #FFFFFF; } .pixel-cursor { animation: cursor-blink 0.5s step-end infinite; } @keyframes cursor-blink { 50% { opacity: 0; } }","{""type"":""tween"",""ease"":""steps(5)"",""duration"":0.1}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); gap: 12px; padding: 12px; background: #F5F5F7; } .bento-item { background: #FFFFFF; border-radius: 20px; padding: 24px; transition: all 300ms ease; } .bento-item:hover { transform: scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .bento-large { grid-column: span 2; grid-row: span 2; } .bento-wide { grid-column: span 2; } .bento-tall { grid-row: span 2; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".neubrutalism { background: #FFDE59; border: 3px solid #000000; border-radius: 0; box-shadow: 5px 5px 0 #000000; font-weight: 800; transition: all 100ms ease; } .neubrutalism:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 #000000; } .neubrutalism:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 #000000; } .neubrutalism-card { background: #FFFFFF; border: 3px solid #000000; padding: 24px; } .neubrutalism-accent { background: #FF5757; }","{""type"":""spring"",""stiffness"":200,""damping"":10,""mass"":0.8}","{""hidden"":{""opacity"":0,""scale"":0.95,""x"":-10,""filter"":""brightness(2)""},""visible"":{""opacity"":1,""scale"":1,""x"":0,""filter"":""brightness(1)""},""hover"":{""x"":5,""filter"":""hue-rotate(90deg)""}}" "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",".spatial-ui { background: rgba(255,255,255,0.15); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border-radius: 32px; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.3); transition: all 300ms ease; } .spatial-ui:hover { transform: scale(1.02) translateZ(10px); box-shadow: 0 16px 48px rgba(0,0,0,0.15); } .spatial-panel { padding: 24px; transform-style: preserve-3d; }","{""type"":""spring"",""stiffness"":50,""damping"":20,""mass"":1.2}","{""hidden"":{""opacity"":0,""y"":20,""scale"":0.98},""visible"":{""opacity"":1,""y"":0,""scale"":1},""hover"":{""y"":-5,""boxShadow"":""0 10px 30px rgba(0,0,0,0.1)""}}" "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",".e-ink { background: #FDFBF7; color: #1A1A1A; font-family: 'Charter', 'Georgia', serif; line-height: 1.7; } .e-ink::before { content: ''; position: absolute; inset: 0; background: url('data:image/svg+xml,...') repeat; opacity: 0.03; pointer-events: none; } .e-ink-text { font-size: 1.125rem; max-width: 65ch; } .e-ink-highlight { background: #FFFF00; padding: 0 4px; } .e-ink-divider { border: none; border-top: 1px solid #1A1A1A; margin: 2rem 0; }","{""type"":""tween"",""ease"":""steps(5)"",""duration"":0.1}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".gen-z-chaos { background: linear-gradient(45deg, #FF00FF, #00FF00, #FFFF00, #0000FF); background-size: 400% 400%; animation: chaos-gradient 3s ease infinite; } @keyframes chaos-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .chaos-sticker { position: absolute; transform: rotate(var(--rotation, 0deg)); animation: jitter 0.15s infinite; } @keyframes jitter { 0%, 100% { transform: rotate(var(--rotation)) translate(0); } 50% { transform: rotate(var(--rotation)) translate(2px, -2px); } } .chaos-marquee { animation: marquee 10s linear infinite; }","{""type"":""spring"",""stiffness"":200,""damping"":10,""mass"":0.8}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "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",".biomimetic { background: linear-gradient(135deg, #001E3C 0%, #00FF41 50%, #FF9999 100%); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation: morph 8s ease-in-out infinite; } @keyframes morph { 0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 50% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; } } .biomimetic-breathe { animation: breathe 4s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } } .biomimetic-cell { border-radius: 50%; filter: blur(1px); }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "59","Hyper-Personalized UI","General","AI-driven, dynamic, adaptive, personalized, context-aware, user-specific, recommendation, machine learning","Adaptive brand colors, user preference-based, dynamic accent selection","Context-dependent secondary, mood-based variations, time-of-day adaptive","Real-time content morphing, preference-based layouts, A/B personalization, dynamic theming","AI products, e-commerce, streaming platforms, news aggregators, personalized dashboards","Static content sites, government, legal, print-first","✓ Full","✓ Full","⚡ Good","⚠ Requires fallbacks","✓ High","✓ Very High","React 10/10, Next.js 10/10, Tailwind 9/10","2024+ AI-Era","Medium",".personalized { --user-primary: #3B82F6; --user-accent: #8B5CF6; background: var(--user-bg, #FFFFFF); color: var(--user-text, #1F2937); transition: all 500ms ease; } .personalized-card { background: color-mix(in srgb, var(--user-primary) 5%, white); border-radius: 12px; padding: 20px; } .personalized-cta { background: var(--user-primary); color: white; } .personalized-recommendation { border-left: 3px solid var(--user-accent); padding-left: 16px; } @media (prefers-color-scheme: dark) { .personalized { --user-bg: #0F172A; --user-text: #F1F5F9; } }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "60","Glassmorphism 3.0","General","Enhanced glass, micro-interactions, animated blur, dynamic transparency, depth layers, haptic glass","Translucent white rgba(255,255,255,0.08-0.25), Vibrant underlays #6366F1 #EC4899 #10B981","Gradient blurs, chromatic shifts, iridescent overlays, animated opacity","Dynamic blur on scroll (5-25px), glass ripple on tap, depth-aware parallax, shimmer effects","Modern SaaS, fintech dashboards, iOS-style apps, premium overlays, AI interfaces","Low-end devices, accessibility-critical, print layouts","✓ Full","✓ Full","⚠ Moderate (GPU)","⚠ Text contrast care","✓ Good","✓ High","Tailwind 9/10, Framer Motion 10/10","2024+ Modern","Medium",".glass-3 { background: rgba(255,255,255,0.1); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.2); border-radius: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); } .glass-3:hover { backdrop-filter: blur(25px) saturate(200%); transform: translateY(-2px); } .glass-3-shimmer { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }","{""type"":""spring"",""stiffness"":50,""damping"":20,""mass"":1.2}","{""hidden"":{""opacity"":0,""y"":20,""scale"":0.98},""visible"":{""opacity"":1,""y"":0,""scale"":1},""hover"":{""y"":-5,""boxShadow"":""0 10px 30px rgba(0,0,0,0.1)""}}" "61","Agentic Interface Design","General","AI-native, autonomous, agent-first, conversational, task-oriented, proactive, multi-step, workflow","Neutral base #F8FAFC, AI Purple #7C3AED, Success #10B981, Processing #3B82F6","Status indicators: thinking #F59E0B, acting #3B82F6, complete #10B981, error #EF4444","Thinking indicators (pulsing dots), action previews, step-by-step reveals, confidence bars","AI assistants, autonomous agents, copilot interfaces, workflow automation, task managers","Traditional forms, static dashboards, content-heavy sites","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","✓ High","React 10/10, Tailwind 10/10","2024+ AI-Era","Medium",".agentic { background: #F8FAFC; font-family: system-ui, sans-serif; } .agent-thinking { display: flex; gap: 6px; padding: 12px; } .agent-thinking span { width: 10px; height: 10px; background: #F59E0B; border-radius: 50%; animation: agent-pulse 1.4s ease-in-out infinite; } .agent-thinking span:nth-child(2) { animation-delay: 0.2s; } .agent-thinking span:nth-child(3) { animation-delay: 0.4s; } @keyframes agent-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } .agent-action { border-left: 3px solid #3B82F6; padding-left: 16px; } .agent-complete { border-left-color: #10B981; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "62","Spatial UI / VisionOS Style","General","Apple Vision Pro, spatial computing, depth, glass layers, gaze interaction, immersive, floating panels","Frosted Glass White rgba(255,255,255,0.15-0.30), System Blue #007AFF, System Gray #8E8E93","Depth shadows, ambient lighting, environment-aware tints","Gaze-hover scale (1.02-1.05), pinch-select feedback, depth parallax, ambient light response","VR/AR apps, spatial computing, immersive dashboards, future-forward products, Apple ecosystem","2D-only platforms, low-end devices, accessibility-first","✓ Full","✓ Full","⚠ Moderate (3D)","⚠ Depth perception","◐ Medium","✓ High","SwiftUI 10/10, Three.js 9/10, R3F 9/10","2024 Spatial Era","High",".visionos { background: rgba(255,255,255,0.2); backdrop-filter: blur(50px) saturate(200%); -webkit-backdrop-filter: blur(50px) saturate(200%); border-radius: 40px; border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 20px 60px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.4); transform-style: preserve-3d; transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1); } .visionos:hover { transform: scale(1.03) translateZ(20px); box-shadow: 0 30px 80px rgba(0,0,0,0.2); } .visionos-panel { padding: 32px; } .visionos-button { background: #007AFF; border-radius: 20px; padding: 12px 24px; }","{""type"":""spring"",""stiffness"":50,""damping"":20,""mass"":1.2}","{""hidden"":{""opacity"":0,""y"":20,""scale"":0.98},""visible"":{""opacity"":1,""y"":0,""scale"":1},""hover"":{""y"":-5,""boxShadow"":""0 10px 30px rgba(0,0,0,0.1)""}}" "63","Bento Grid Design","Landing Page","Modular marketing, Apple-style grid, asymmetric cards, feature showcase, visual hierarchy, scannable","Off-white #F5F5F7, Card White #FFFFFF, Text Dark #1D1D1F, Accent varies","Subtle shadows, gradient cards, video thumbnails, icon accents","Card hover lift (scale 1.02), staggered reveal on scroll, video autoplay on hover","Product marketing, feature pages, portfolios, SaaS landing pages, tech showcases","Dense data tables, real-time dashboards, text-heavy content","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","✓ Very High","CSS Grid 10/10, Tailwind 10/10, Framer 9/10","2020s Apple/Linear","Low",".bento-landing { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: 16px; padding: 24px; background: #F5F5F7; } .bento-card { background: #FFFFFF; border-radius: 24px; padding: 32px; overflow: hidden; transition: all 350ms ease; } .bento-card:hover { transform: scale(1.02); box-shadow: 0 24px 48px rgba(0,0,0,0.1); } .bento-hero { grid-column: span 2; grid-row: span 2; } .bento-feature { grid-column: span 2; } .bento-reveal { opacity: 0; transform: translateY(20px); transition: all 500ms ease; } .bento-reveal.visible { opacity: 1; transform: translateY(0); }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "64","Fluid Design System","General","Variable everything, responsive, adaptive, fluid typography, container queries, dynamic spacing","Fluid scale, responsive palette, adaptive contrast based on viewport","Proportional secondaries, viewport-aware accents","Fluid animations (duration scales with viewport), responsive easing, adaptive density","Design systems, cross-platform apps, responsive dashboards, component libraries","Fixed-width designs, print layouts, legacy browser support","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA+","✓ Excellent","✓ High","Tailwind v4 10/10, CSS Container Queries 10/10","2024+ Modern","Medium",".fluid { --fluid-min: 320; --fluid-max: 1200; font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); padding: clamp(1rem, 0.5rem + 2vw, 3rem); } .fluid h1 { font-size: clamp(2rem, 1.5rem + 3vw, 4rem); } .fluid-container { container-type: inline-size; } @container (min-width: 400px) { .fluid-card { display: grid; grid-template-columns: 1fr 2fr; } } .fluid-space { gap: clamp(0.5rem, 0.25rem + 1vw, 1.5rem); } .fluid-transition { transition-duration: clamp(150ms, 100ms + 0.1vw, 300ms); }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "65","Eco-Digital Aesthetic","General","Sustainability, low-carbon, efficient, green computing, minimal assets, eco-friendly, conscious design","Earth Green #228B22, Sky Blue #87CEEB, Warm Sand #F4E4BC, Clean White #FAFAFA","Natural gradients, earth tones, recycled paper textures","Minimal animations (reduced motion default), efficient transitions, low-power colors","Sustainability brands, eco-tech, carbon calculators, green energy, environmental apps","High-energy gaming, luxury excess, heavy 3D","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AAA","✓ High","✓ High","Tailwind 10/10, Vanilla CSS 10/10","2024+ Sustainable","Low",".eco-digital { background: #FAFAFA; color: #1A1A1A; font-family: system-ui, sans-serif; } .eco-card { background: #F4E4BC; border-radius: 8px; padding: 20px; border: 1px solid rgba(34,139,34,0.2); } .eco-accent { color: #228B22; } .eco-button { background: #228B22; color: #FFFFFF; border-radius: 4px; padding: 12px 24px; } @media (prefers-reduced-motion: reduce) { .eco-digital * { animation: none !important; transition-duration: 0.01ms !important; } } .eco-efficient { will-change: auto; contain: layout style paint; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "66","AI-Generative Patterns","General","Procedural backgrounds, generative art, algorithmic design, dynamic patterns, unique visuals","Dynamic generation, user-seeded colors, algorithmic palette","Complementary generated, harmonic variations","Real-time pattern generation, noise-based animations, shader backgrounds, morphing shapes","AI products, creative platforms, unique branding, generative art, NFT platforms","Performance-limited, accessibility-critical, conservative brands","✓ Full","✓ Full","⚠ Moderate (WebGL)","⚠ Motion sensitivity","◐ Medium","✓ High","WebGL 10/10, Three.js 10/10, p5.js 9/10","2024+ Generative","High",".generative-pattern { position: relative; overflow: hidden; } .generative-canvas { position: absolute; inset: 0; z-index: 0; } .generative-content { position: relative; z-index: 1; } .generative-noise { background-image: url('data:image/svg+xml,...'); animation: noise 0.5s steps(10) infinite; } @keyframes noise { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -5%); } 20% { transform: translate(-10%, 5%); } } .generative-gradient { background: conic-gradient(from var(--angle, 0deg), #6366F1, #EC4899, #10B981, #6366F1); animation: rotate-gradient 10s linear infinite; } @keyframes rotate-gradient { to { --angle: 360deg; } }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "67","Emotional Design 2.0","General","Sentiment-aware, mood-responsive, emotional intelligence, adaptive tone, empathetic UI","Mood-adaptive: Calm #E0F2FE, Happy #FEF3C7, Focus #EDE9FE, Alert #FEE2E2","Sentiment-driven accents, time-of-day palette shifts","Breathing backgrounds, mood-responsive micro-animations, sentiment feedback loops","Mental health apps, wellness platforms, journaling, meditation, emotional tracking","Data-heavy dashboards, financial, legal, government","✓ Full","✓ Full","⚡ Good","✓ WCAG AA","✓ High","✓ High","React 10/10, Tailwind 9/10","2024+ Wellness","Medium",".emotional { transition: background-color 1s ease; } .emotional-calm { background: #E0F2FE; } .emotional-happy { background: #FEF3C7; } .emotional-focus { background: #EDE9FE; } .emotional-alert { background: #FEE2E2; } .emotional-breathe { animation: breathe 6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.02); opacity: 1; } } .emotional-feedback { transition: all 400ms ease; border-radius: 16px; padding: 20px; } .emotional-positive { box-shadow: 0 0 20px rgba(34,197,94,0.2); }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "68","Neo-Skeuomorphism","General","Realistic 3D, tactile, physical metaphors, depth, material design, tangible interfaces","Rich realistic: Leather #8B4513, Metal #C0C0C0, Wood #DEB887, Glass #E8F4F8","Material-specific gradients, realistic lighting, texture overlays","Tactile press animations (300-400ms), material-specific feedback, realistic shadows","Premium apps, gaming interfaces, luxury products, music apps, creative tools","Flat design systems, minimalist brands, accessibility-first","◐ Partial","◐ Partial","⚠ Moderate","⚠ Texture readability","◐ Medium","◐ Medium","CSS-in-JS 8/10, Custom 9/10","2024+ Revival","High",".neo-skeu { background: linear-gradient(180deg, #E8E8E8 0%, #C0C0C0 50%, #A0A0A0 100%); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(0,0,0,0.1); transition: all 300ms ease; } .neo-skeu:active { transform: translateY(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.3); } .neo-skeu-leather { background: linear-gradient(180deg, #A0522D 0%, #8B4513 50%, #6B3410 100%); } .neo-skeu-wood { background: linear-gradient(180deg, #DEB887 0%, #D2B48C 50%, #C4A882 100%); } .neo-skeu-glass { background: rgba(232,244,248,0.8); backdrop-filter: blur(10px); }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "69","Data Maximalism","BI/Analytics","Information-dense, organized complexity, high data density, structured chaos, power user","Neutral base #F8FAFC, Category colors for data series, High contrast text #0F172A","Data type specific: Positive #22C55E, Negative #EF4444, Neutral #64748B, Highlight #F59E0B","Hover reveals, progressive disclosure, collapsible sections, zoom interactions","Trading platforms, analytics dashboards, developer tools, research platforms, power user apps","Consumer apps, onboarding flows, mobile-first, elderly users","✓ Full","✓ Full","⚡ Excellent","⚠ Complexity","✗ Low","✗ N/A","D3.js 10/10, AG Grid 10/10, Recharts 9/10","2024+ Pro Tools","High",".data-max { background: #F8FAFC; color: #0F172A; font-family: 'SF Mono', 'Roboto Mono', monospace; font-size: 12px; } .data-max-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; } .data-max-cell { padding: 8px; border: 1px solid #E2E8F0; } .data-max-cell:hover { background: #F1F5F9; } .data-max-positive { color: #22C55E; } .data-max-negative { color: #EF4444; } .data-max-highlight { background: #FEF3C7; } .data-max-collapse { max-height: 0; overflow: hidden; transition: max-height 200ms ease; } .data-max-collapse.open { max-height: 1000px; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "70","Ambient Computing UI","General","Contextual, invisible, zero-UI, calm technology, proactive, environment-aware, seamless","Near-invisible: Soft White #FAFAFA, Gentle Grey #E5E7EB, Ambient accents","Context-triggered colors, environment-responsive","Subtle presence indicators, context-aware reveals, ambient notifications, fade transitions","Smart home, IoT dashboards, ambient displays, contextual assistants, background apps","Complex workflows, data entry, explicit control required","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","◐ Medium","React 10/10, Tailwind 10/10, Custom 10/10","2024+ AI-Era","Low",".ambient { background: #FAFAFA; color: #374151; } .ambient-hidden { opacity: 0; transform: translateY(10px); transition: all 500ms ease; } .ambient-hidden.visible { opacity: 1; transform: translateY(0); } .ambient-notification { background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-radius: 12px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); animation: ambient-fade 300ms ease; } @keyframes ambient-fade { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .ambient-indicator { width: 8px; height: 8px; background: #E5E7EB; border-radius: 50%; transition: background 300ms ease; } .ambient-indicator.active { background: #10B981; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}" "71","Agentic Interface","General","AI agent, autonomous, copilot, multi-step workflow, tool use, reasoning, agent chain, Claude, ChatGPT, task orchestration","Neutral base #F8FAFC, AI Purple #7C3AED, Success #10B981, Warning #F59E0B, Processing Blue #3B82F6","Status: Thinking #FDE68A, Acting #93C5FD, Complete #BBF7D0, Error #FECACA, Pending #E5E7EB","Thinking pulse (3-dot), step-by-step reveals, action preview cards, confidence indicators, tool execution spinners","AI assistants, autonomous agents, copilot UIs, workflow automation, Claude/ChatGPT interfaces, task managers","Static forms, traditional CRUD, content-heavy blogs, print-first layouts","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","✓ High","React 10/10, Tailwind 10/10, Framer Motion 9/10","2026 AI-Native","Medium",".agentic { background: #F8FAFC; } .agent-step { border-left: 3px solid #E5E7EB; padding: 16px; margin: 8px 0; transition: all 300ms ease; } .agent-step.thinking { border-color: #F59E0B; background: #FFFBEB; } .agent-step.acting { border-color: #3B82F6; background: #EFF6FF; } .agent-step.complete { border-color: #10B981; background: #ECFDF5; } .agent-thinking-dots { display: flex; gap: 6px; } .agent-thinking-dots span { width: 8px; height: 8px; background: #F59E0B; border-radius: 50%; animation: agent-bounce 1.4s infinite; } .agent-thinking-dots span:nth-child(2) { animation-delay: 0.2s; } .agent-thinking-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes agent-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } } .agent-tool { background: #F3F4F6; border-radius: 8px; padding: 12px; font-family: monospace; }","{""type"":""spring"",""stiffness"":120,""damping"":14}","{""hidden"":{""opacity"":0,""x"":-20},""visible"":{""opacity"":1,""x"":0},""thinking"":{""opacity"":[0.5,1],""transition"":{""repeat"":""Infinity"",""duration"":1}},""complete"":{""scale"":[1,1.02,1]}}" "72","Streaming UI","General","Token streaming, real-time generation, typewriter effect, LLM output, live text, ChatGPT-style, incremental render, cursor blink","Dark terminal #0F172A, Soft white #F1F5F9, Cursor green #22C55E, Code block #1E293B","Token highlight #FBBF24, Selection #3B82F6, Link #60A5FA, Inline code #E2E8F0","Token-by-token fade-in (50ms), cursor blink (530ms), smooth auto-scroll, code block syntax highlighting","AI chat interfaces, LLM applications, code generation tools, real-time assistants, streaming APIs","Static content, forms, dashboards, data tables, print layouts","✓ Full","✓ Full (dark native)","⚡ Excellent","✓ WCAG AA","✓ High","✓ High","React 10/10, Tailwind 10/10, Vanilla JS 9/10","2026 AI-Native","Low",".streaming-ui { background: #0F172A; color: #F1F5F9; font-family: system-ui, -apple-system, sans-serif; line-height: 1.7; } .streaming-text { display: inline; } .streaming-token { opacity: 0; animation: token-fade 150ms ease forwards; } @keyframes token-fade { to { opacity: 1; } } .streaming-cursor { display: inline-block; width: 2px; height: 1.2em; background: #22C55E; margin-left: 2px; animation: cursor-blink 1.06s step-end infinite; } @keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .streaming-container { max-height: 70vh; overflow-y: auto; scroll-behavior: smooth; } .streaming-code { background: #1E293B; border-radius: 8px; padding: 16px; font-family: monospace; font-size: 14px; overflow-x: auto; }","{""type"":""tween"",""ease"":""linear"",""duration"":0.05}","{""hidden"":{""opacity"":0},""visible"":{""opacity"":1,""transition"":{""staggerChildren"":0.02}},""token"":{""opacity"":[0,1],""transition"":{""duration"":0.1}}}" "73","Spatial UI 3D","General","Vision Pro, AR/VR, spatial computing, depth layers, floating panels, 3D transforms, z-axis, immersive, glass cards, perspective","Deep space #000814, Glass white rgba(255,255,255,0.12), System blue #007AFF, Highlight #5856D6","Depth shadow layers, ambient glow #7C3AED, Focus ring #0A84FF, Surface tint rgba(255,255,255,0.05)","Z-depth parallax, gaze-hover scale (1.03), pinch-select feedback, floating card hover, perspective transforms","VisionOS apps, AR/VR interfaces, spatial dashboards, immersive experiences, 3D product showcases, Apple ecosystem","2D-only platforms, low-end devices, text-heavy content, accessibility-critical apps","✓ Full","✓ Full (dark native)","⚠ Moderate (GPU)","⚠ Depth perception","◐ Medium","✓ High","Three.js 10/10, R3F 10/10, SwiftUI 10/10, CSS 8/10","2026 Spatial Era","High",".spatial-3d { perspective: 1000px; transform-style: preserve-3d; } .spatial-panel { background: rgba(255,255,255,0.12); backdrop-filter: blur(60px) saturate(180%); -webkit-backdrop-filter: blur(60px) saturate(180%); border-radius: 32px; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 25px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.1) inset; transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1); } .spatial-panel:hover { transform: scale(1.03) translateZ(30px); box-shadow: 0 35px 70px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.15) inset; } .spatial-depth-1 { transform: translateZ(0); } .spatial-depth-2 { transform: translateZ(50px); } .spatial-depth-3 { transform: translateZ(100px); } .spatial-glow { box-shadow: 0 0 40px rgba(124,58,237,0.3); } @keyframes spatial-float { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-10px) translateZ(20px); } }","{""type"":""spring"",""stiffness"":60,""damping"":20,""mass"":1.5}","{""hidden"":{""opacity"":0,""z"":-100,""scale"":0.9},""visible"":{""opacity"":1,""z"":0,""scale"":1},""hover"":{""z"":30,""scale"":1.03},""focus"":{""boxShadow"":""0 0 0 4px rgba(10,132,255,0.5)""}}" "74","Voice UI","General","Voice-first, audio interface, hands-free, accessibility, speech recognition, audio visualization, waveform, listening state","Minimal chrome #FAFAFA, Voice active #7C3AED, Listening #3B82F6, Speaking #10B981, Error #EF4444","Waveform gradient #818CF8 to #C084FC, Silence state #D1D5DB, Feedback pulse #A78BFA","Audio waveform animation, listening pulse ring, speaking indicator bars, voice activity detection, state transitions","Voice assistants, accessibility tools, hands-free apps, car interfaces, smart speakers, dictation tools","Visual-heavy dashboards, complex forms, data tables, image galleries","✓ Full","✓ Full","⚡ Excellent","✓ Excellent (voice-native)","✓ High","✓ High","React 10/10, Web Audio API 10/10, Tailwind 9/10","2026 AI-Native","Medium",".voice-ui { background: #FAFAFA; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } .voice-orb { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, #818CF8, #C084FC); transition: all 300ms ease; } .voice-orb.listening { animation: voice-pulse 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(124,58,237,0.4); } @keyframes voice-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124,58,237,0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(124,58,237,0); } } .voice-waveform { display: flex; align-items: center; gap: 3px; height: 40px; } .voice-waveform span { width: 4px; background: #7C3AED; border-radius: 2px; animation: wave-bar 1s ease-in-out infinite; } .voice-waveform span:nth-child(odd) { animation-delay: 0.2s; } @keyframes wave-bar { 0%, 100% { height: 8px; } 50% { height: 32px; } } .voice-transcript { font-size: 1.5rem; text-align: center; max-width: 600px; color: #1F2937; }","{""type"":""spring"",""stiffness"":100,""damping"":18}","{""hidden"":{""opacity"":0,""scale"":0.8},""visible"":{""opacity"":1,""scale"":1},""listening"":{""scale"":[1,1.05,1],""transition"":{""repeat"":""Infinity"",""duration"":2}},""speaking"":{""scale"":1.02,""boxShadow"":""0 0 30px rgba(16,185,129,0.4)""}}" "75","Scroll-Driven Animation","General","scroll-driven, animation-timeline, parallax, reveal, scroll-linked, scroll-triggered, viewport animation, CSS scroll","Neutral base #F8FAFC, Reveal accent #3B82F6, Parallax depth #1E293B, Highlight #10B981","Scroll progress #60A5FA, Fade gradient rgba(255,255,255,0), Section divider #E2E8F0","Scroll-linked transforms, viewport reveal animations, parallax depth effects, progress indicators, fade-in on scroll","Modern landing pages, scroll storytelling, product showcases, portfolio sites, marketing pages, interactive articles","Static dashboards, data tables, forms, accessibility-critical apps, print layouts","✓ Full","✓ Full","⚡ Excellent (CSS-only)","✓ WCAG AA (with reduced-motion)","✓ High","✓ High","Vanilla CSS 10/10, Tailwind 9/10, React 9/10","2024+ Modern CSS","Medium","@keyframes reveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .scroll-reveal { animation: reveal linear; animation-timeline: view(); animation-range: entry 10% cover 30%; } @keyframes parallax { to { transform: translateY(-50%); } } .scroll-parallax { animation: parallax linear; animation-timeline: scroll(); } .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: #3B82F6; animation: progress linear; animation-timeline: scroll(); } @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .scroll-reveal, .scroll-parallax { animation: none; opacity: 1; transform: none; } }","{""type"":""linear"",""ease"":""linear""}","{""hidden"":{""opacity"":0,""y"":30},""visible"":{""opacity"":1,""y"":0},""parallax"":{""y"":""-50%""}}" "76","Navbar Glassmorphism States","Component","navbar scroll header sticky glassmorphism blur compact shrink states fixed navigation transparent height transition scroll-driven","Transparent default: rgba(255,255,255,0.1), Scrolled: rgba(255,255,255,0.95), Dark mode: rgba(15,23,42,0.95)","Border glow: rgba(255,255,255,0.2), Shadow: rgba(0,0,0,0.08), Accent CTA: #3B82F6, Text: #1F2937 light / #F1F5F9 dark","backdrop-filter blur (12-20px), box-shadow on scroll, height transition (80px→56px), logo scale, border-bottom appear, CTA glow pulse, CSS scroll-driven animation","Modern landing pages, SaaS headers, fintech dashboards, tech company sites, product pages, startup landing","Static content sites, print layouts, sites requiring maximum viewport space, accessibility-critical apps","✓ Full","✓ Full","⚡ Good (blur has GPU cost)","✓ WCAG AA","✓ High","✓ High","Tailwind 10/10, CSS 10/10, React 10/10, Next.js 10/10","2026 Modern","Low","/* CSS Scroll-Driven Animation (2026 - 90%+ browser support) */ @supports (animation-timeline: scroll()) { .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 80px; animation: navbar-shrink linear both; animation-timeline: scroll(root block); animation-range: 0px 100px; } @keyframes navbar-shrink { from { height: 80px; padding: 1.5rem 2rem; background: transparent; backdrop-filter: blur(0); box-shadow: none; } to { height: 56px; padding: 0.75rem 2rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.05); } } } /* JS Fallback for older browsers */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 80px; padding: 1.25rem 2rem; background: transparent; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .navbar.scrolled { height: 56px; padding: 0.75rem 2rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.05); } .navbar-dark.scrolled { background: rgba(15,23,42,0.95); border-bottom: 1px solid rgba(255,255,255,0.1); } .navbar-logo { transition: transform 0.3s ease; } .navbar.scrolled .navbar-logo { transform: scale(0.9); } .navbar-link { transition: color 0.2s ease; } .navbar-cta { padding: 0.5rem 1.25rem; border-radius: 0.5rem; background: #3B82F6; color: white; transition: all 0.3s ease; } .navbar.scrolled .navbar-cta { box-shadow: 0 0 20px rgba(59,130,246,0.4); } /* Mobile menu state */ .mobile-menu { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.3s ease; } .mobile-menu.active { max-height: 400px; opacity: 1; } /* JS Fallback: if (!CSS.supports('animation-timeline', 'scroll()')) { window.addEventListener('scroll', () => { navbar.classList.toggle('scrolled', window.scrollY > 50); }); } */","{""type"":""tween"",""ease"":""cubicBezier(0.4, 0, 0.2, 1)"",""duration"":0.4}","{""default"":{""height"":""80px"",""background"":""transparent"",""padding"":""1.25rem 2rem"",""backdropFilter"":""none""},""scrolled"":{""height"":""56px"",""background"":""rgba(255,255,255,0.95)"",""padding"":""0.75rem 2rem"",""backdropFilter"":""blur(12px)"",""boxShadow"":""0 4px 20px rgba(0,0,0,0.08)""},""mobile"":{""maxHeight"":0,""opacity"":0},""mobileActive"":{""maxHeight"":""400px"",""opacity"":1}}" "77","Theme Toggle","Component","dark mode light mode toggle switch sun moon theme icon animation transition color scheme switcher","transparent button, subtle hover background, system-ui font","Sun: #F59E0B, Moon: #6366F1, Toggle BG: rgba(0,0,0,0.1), Hover: rgba(0,0,0,0.05)","Sun/moon rotation animation, smooth theme transition, icon swap, opacity crossfade","Any site with dark/light mode, SaaS apps, blogs, portfolios, documentation sites","Sites without theme switching, print-only layouts","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","✓ High","Tailwind 10/10, CSS 10/10, React 10/10","2024+ Modern","Low",".theme-toggle { position: relative; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; cursor: pointer; transition: background 0.2s ease; } .theme-toggle:hover { background: rgba(0,0,0,0.05); } .theme-toggle .sun, .theme-toggle .moon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } .theme-toggle .sun { color: #F59E0B; } .theme-toggle .moon { color: #6366F1; opacity: 0; transform: rotate(-90deg) scale(0.5); } .dark .theme-toggle .sun { opacity: 0; transform: rotate(90deg) scale(0.5); } .dark .theme-toggle .moon { opacity: 1; transform: rotate(0) scale(1); } .dark .theme-toggle:hover { background: rgba(255,255,255,0.1); }","{""type"":""spring"",""stiffness"":200,""damping"":20}","{""sun"":{""rotate"":0,""scale"":1,""opacity"":1},""moon"":{""rotate"":-90,""scale"":0.5,""opacity"":0},""sunHidden"":{""rotate"":90,""scale"":0.5,""opacity"":0},""moonVisible"":{""rotate"":0,""scale"":1,""opacity"":1}}" "78","Bento Grid Layout","Layout","bento grid modular apple feature showcase responsive sections dashboard cards asymmetric tiles visual hierarchy scannable","Neutral backgrounds #F5F5F7 #FFFFFF, Accent highlights varies by brand, Dark #1D1D1F","Subtle shadows rgba(0,0,0,0.04), Gradient cards, Accent borders, Video thumbnail overlays","Rounded corners (20-24px), subtle shadows (0 2px 8px), consistent spacing (12-16px gap), responsive reflow, CSS Grid variable spans","Feature showcases, dashboards, landing pages, portfolio sites, product marketing, SaaS feature grids, Apple-style layouts","Dense data tables, real-time monitoring, text-heavy content, linear reading flows","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","✓ Very High","CSS Grid 10/10, Tailwind 10/10, React 10/10, Framer 9/10","2024+ Apple/Linear","Low",".bento-layout { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; padding: 16px; background: #F5F5F7; } .bento-card { background: #FFFFFF; border-radius: 24px; padding: 24px; overflow: hidden; transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); } .bento-card:hover { transform: scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .bento-hero { grid-column: span 2; grid-row: span 2; } .bento-wide { grid-column: span 2; } .bento-tall { grid-row: span 2; } @media (max-width: 768px) { .bento-layout { grid-template-columns: 1fr; } .bento-hero, .bento-wide { grid-column: span 1; } }","{""type"":""tween"",""ease"":""cubicBezier(0.4, 0, 0.2, 1)"",""duration"":0.3}","{""hidden"":{""opacity"":0,""y"":20,""scale"":0.98},""visible"":{""opacity"":1,""y"":0,""scale"":1},""hover"":{""scale"":1.02,""boxShadow"":""0 20px 40px rgba(0,0,0,0.08)""}}" "79","Neubrutalism 2026","Visual","neubrutalism brutal bold borders thick shadows high contrast raw accessible chunky offset playful Gen-Z anti-design","Saturated primaries: #FF6B6B (Coral Red), #4ECDC4 (Teal), #FFE66D (Yellow), #000000 (Black)","Limited palette, no gradients, high contrast only: #FFFFFF, #95E1D3, #F38181, accent varies","Hard 4px black borders, chunky box-shadow (4-6px offset), no border-radius (0px), bold 700-900 typography, instant transitions","Creative portfolios, indie games, editorial sites, Gen-Z products, Figma-style apps, personal blogs, startups","Luxury brands, finance, healthcare, conservative industries, elderly users, accessibility-critical","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AAA","✓ High","✓ High","Tailwind 10/10, Plain CSS 10/10, React 10/10","2024+ Modern Retro","Low",".neubrutalism { background: #FFE66D; border: 4px solid #000000; border-radius: 0; box-shadow: 6px 6px 0 #000000; font-weight: 800; transition: all 100ms ease; } .neubrutalism:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #000000; } .neubrutalism:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #000000; } .neubrutalism-card { background: #FFFFFF; border: 4px solid #000000; padding: 24px; } .neubrutalism-btn { background: #FF6B6B; color: #000000; border: 4px solid #000000; padding: 12px 24px; font-weight: 900; text-transform: uppercase; cursor: pointer; } .neubrutalism-btn:hover { background: #4ECDC4; }","{""type"":""spring"",""stiffness"":300,""damping"":15}","{""hidden"":{""opacity"":0,""x"":-10},""visible"":{""opacity"":1,""x"":0},""hover"":{""x"":-3,""y"":-3},""active"":{""x"":3,""y"":3}}" "80","Organic Biophilic","Visual","organic biophilic nature earthy fluid shapes anti-grid wellness sustainability curves blob natural texture breathing","Earth tones: Forest Green #2D5016, Terracotta #C84B31, Sand #E8DCC4, Warm White #FAF7F2","Natural gradients, sky blue #87CEEB, moss #8FBC8F, clay #D2691E, stone #A9A9A9, water #5F9EA0","Blob shapes (border-radius 40% 60%), organic curves, texture overlays, gradient blurs, fluid clip-paths, SVG morphing","Wellness apps, sustainable brands, meditation platforms, eco products, organic food, spa services, environmental nonprofits","Tech-focused products, gaming, industrial, urban brands, data-heavy dashboards","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","✓ High","Tailwind 10/10, CSS 10/10, SVG 10/10","2024+ Sustainable","Medium",".biophilic-organic { background: linear-gradient(180deg, #FAF7F2 0%, #E8DCC4 100%); } .biophilic-card { background: #FFFFFF; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; padding: 32px; box-shadow: 0 8px 32px rgba(45,80,22,0.12); transition: border-radius 600ms ease, transform 400ms ease; } .biophilic-card:hover { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1.02); } .biophilic-blob { clip-path: ellipse(70% 60% at 50% 50%); background: linear-gradient(135deg, #2D5016, #8FBC8F); } .biophilic-breathe { animation: breathe-organic 5s ease-in-out infinite; } @keyframes breathe-organic { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.03); opacity: 1; } } .biophilic-accent { color: #2D5016; }","{""type"":""spring"",""stiffness"":40,""damping"":20,""mass"":1.5}","{""hidden"":{""opacity"":0,""scale"":0.95},""visible"":{""opacity"":1,""scale"":1},""hover"":{""scale"":1.02,""borderRadius"":""60% 40% 30% 70% / 60% 30% 70% 40%""},""breathe"":{""scale"":[1,1.03,1],""opacity"":[0.9,1,0.9],""transition"":{""duration"":5,""repeat"":""Infinity""}}}" "81","VisionOS Spatial","Platform","visionOS spatial computing depth layering glass material Apple Vision Pro 3D UI floating panels immersive AR VR","Translucent white rgba(255,255,255,0.15-0.30), System Blue #007AFF, System Gray #8E8E93, Deep space #000814","Vibrancy tints, depth shadows, ambient lighting rgba(124,58,237,0.2), focus ring #0A84FF, surface highlight rgba(255,255,255,0.4)","Multi-layer glass (backdrop-filter 40-60px), depth shadows (layered), environment lighting, volumetric feel, perspective transforms, z-depth parallax","VR/AR interfaces, VisionOS apps, immersive dashboards, futuristic products, spatial computing, Apple ecosystem, 3D showcases","2D-only platforms, low-end devices, text-heavy content, accessibility-critical apps, budget projects","✓ Full","✓ Full (dark native)","⚠ Moderate (GPU)","⚠ Depth perception","◐ Medium","✓ High","SwiftUI 10/10, Three.js 10/10, R3F 9/10, CSS 8/10","2026 Spatial Era","High",".visionos-spatial { perspective: 1200px; transform-style: preserve-3d; background: #000814; } .visionos-panel { background: rgba(255,255,255,0.18); backdrop-filter: blur(50px) saturate(200%); -webkit-backdrop-filter: blur(50px) saturate(200%); border-radius: 36px; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 25px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4); transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1); } .visionos-panel:hover { transform: scale(1.03) translateZ(25px); box-shadow: 0 35px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5); } .visionos-depth-1 { transform: translateZ(0); } .visionos-depth-2 { transform: translateZ(40px); } .visionos-depth-3 { transform: translateZ(80px); } .visionos-glow { box-shadow: 0 0 50px rgba(0,122,255,0.3); } .visionos-button { background: #007AFF; border-radius: 18px; padding: 14px 28px; color: white; }","{""type"":""spring"",""stiffness"":50,""damping"":22,""mass"":1.4}","{""hidden"":{""opacity"":0,""z"":-80,""scale"":0.92},""visible"":{""opacity"":1,""z"":0,""scale"":1},""hover"":{""z"":25,""scale"":1.03},""focus"":{""boxShadow"":""0 0 0 4px rgba(0,122,255,0.5)""}}" "82","Conversational AI","Component","conversational AI chat interface streaming bubble assistant chatbot NLP message typing indicator real-time dialogue","Neutral bubbles #F3F4F6, AI accent #7C3AED (Purple), User #3B82F6 (Blue), Background #FAFAFA","Typing indicator #9CA3AF, Success #10B981, Error #EF4444, Link #60A5FA, Code block #1E293B","Typing indicator (3-dot bounce), message bubble slide-up animations, streaming text reveal (typewriter), smooth auto-scroll","AI assistants, chatbots, customer support widgets, copilot UIs, conversational commerce, help desks, virtual agents","Static content pages, data dashboards, forms-heavy interfaces, print layouts","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","✓ High","React 10/10, Tailwind 10/10, Framer Motion 9/10, Vue 9/10","2026 AI-Native","Medium",".chat-container { display: flex; flex-direction: column; max-height: 80vh; overflow-y: auto; padding: 16px; background: #FAFAFA; scroll-behavior: smooth; } .chat-bubble { max-width: 75%; padding: 12px 16px; border-radius: 18px; margin: 4px 0; animation: bubble-in 0.3s ease; } @keyframes bubble-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .chat-bubble-user { background: #3B82F6; color: white; align-self: flex-end; border-bottom-right-radius: 4px; } .chat-bubble-ai { background: #F3F4F6; color: #1F2937; align-self: flex-start; border-bottom-left-radius: 4px; } .chat-typing { display: flex; gap: 4px; padding: 12px 16px; } .chat-typing span { width: 8px; height: 8px; background: #9CA3AF; border-radius: 50%; animation: typing-dot 1.4s infinite; } .chat-typing span:nth-child(2) { animation-delay: 0.2s; } .chat-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } } .chat-streaming { display: inline; } .chat-cursor { display: inline-block; width: 2px; height: 1em; background: #7C3AED; animation: cursor-blink 1s step-end infinite; } @keyframes cursor-blink { 50% { opacity: 0; } }","{""type"":""spring"",""stiffness"":150,""damping"":18}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""messageIn"":{""opacity"":[0,1],""y"":[10,0],""transition"":{""duration"":0.3}},""typing"":{""y"":[0,-8,0],""transition"":{""duration"":0.6,""repeat"":""Infinity"",""repeatDelay"":0.2}}}" "83","Agentic Workflow UI","Component","agentic AI workflow multi-step reasoning action panels transparency dashboard autonomous task orchestration pipeline steps","Status colors: Blue active #3B82F6, Green complete #10B981, Amber pending #F59E0B, Gray idle #9CA3AF, Red error #EF4444","Thinking #FDE68A, Acting #DBEAFE, Success #D1FAE5, Background #F8FAFC, Card #FFFFFF, Border #E5E7EB","Step indicators (progress dots), action cards with status borders, reasoning accordion panels, progress pipeline bars, status pulse animations","AI automation tools, developer tools, enterprise AI dashboards, task orchestration, workflow builders, autonomous agents, CI/CD pipelines","Simple chat interfaces, static content, traditional forms, consumer apps","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","✓ High","React 10/10, Tailwind 10/10, Vue 9/10, Framer Motion 9/10","2026 AI-Native","Medium",".agentic-workflow { background: #F8FAFC; padding: 24px; } .agentic-pipeline { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; } .agentic-step { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; transition: all 0.3s ease; } .agentic-step-pending { background: #F3F4F6; color: #9CA3AF; border: 2px solid #E5E7EB; } .agentic-step-active { background: #DBEAFE; color: #3B82F6; border: 2px solid #3B82F6; animation: step-pulse 2s infinite; } @keyframes step-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); } 50% { box-shadow: 0 0 0 8px rgba(59,130,246,0); } } .agentic-step-complete { background: #10B981; color: white; border: 2px solid #10B981; } .agentic-connector { flex: 1; height: 2px; background: #E5E7EB; } .agentic-connector-active { background: linear-gradient(90deg, #10B981, #3B82F6); } .agentic-action-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px; margin: 8px 0; border-left: 4px solid #E5E7EB; transition: all 0.2s ease; } .agentic-action-card-active { border-left-color: #3B82F6; background: #F8FAFC; } .agentic-action-card-complete { border-left-color: #10B981; } .agentic-reasoning { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px; padding: 12px; margin: 8px 0; font-size: 14px; color: #92400E; }","{""type"":""spring"",""stiffness"":100,""damping"":16}","{""hidden"":{""opacity"":0,""x"":-20},""visible"":{""opacity"":1,""x"":0},""stepPending"":{""scale"":1,""opacity"":0.6},""stepActive"":{""scale"":1.1,""opacity"":1,""boxShadow"":""0 0 0 8px rgba(59,130,246,0.2)""},""stepComplete"":{""scale"":1,""opacity"":1},""cardExpand"":{""height"":""auto"",""opacity"":1}}" "84","M3 Expressive Button Groups","Component","M3 expressive material design 3 button group segmented controls toggle group chip group icon row unified selection Android mobile haptic","Surface Container #F3EDF7, Primary #6750A4, On-Primary #FFFFFF, Outline #79747E, Secondary Container #E8DEF8","State layers 8-12%, Pressed #49454F, Disabled #1D1B20 opacity 38%, Selected #EADDFF, Error #B3261E","Shape morphing tokens (pill to rounded), 200ms state transitions, ripple effects, press scale 0.96, selection slide animation","Android apps, mobile toolbars, filter selections, toggle settings, tab alternatives, action clusters, form inputs","Desktop-only UIs, complex dashboards, print layouts, legacy browsers","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ Native","✓ High","Jetpack Compose 10/10, Flutter 10/10, React Native 9/10, Tailwind 8/10","2026 M3 Expressive","Medium",".m3-button-group { display: inline-flex; background: #F3EDF7; border-radius: 20px; padding: 4px; gap: 0; }","{""type"":""spring"",""stiffness"":400,""damping"":25,""mass"":0.8}","{""hidden"":{""opacity"":0,""scale"":0.9},""visible"":{""opacity"":1,""scale"":1}}" "85","M3 FAB Menu Style","Component","M3 FAB floating action button menu expressive expanded speed dial Android mobile primary action material design 3 overflow actions","Primary Container #EADDFF, On-Primary Container #21005D, Surface #FFFBFE, Shadow elevation 3-6, Icon #6750A4","Secondary #625B71, Tertiary #7D5260, Extended background #FFFFFF, Surface tint 8%, Scrim rgba(0,0,0,0.32)","FAB expansion (spring physics), menu cascade reveal, elevation change 3dp to 6dp, rotation transform, stagger children 50ms, press ripple 400ms","Mobile apps, Android primary actions, quick actions menu, creation flows, compose actions, media controls, productivity tools","Desktop toolbars, navigation, settings pages, list items, inline actions","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ Native","✓ High","Jetpack Compose 10/10, Flutter 10/10, React Native 9/10, CSS 8/10","2026 M3 Expressive","Medium",".m3-fab { position: fixed; bottom: 16px; right: 16px; z-index: 100; }","{""type"":""spring"",""stiffness"":280,""damping"":22,""mass"":1}","{""hidden"":{""opacity"":0,""y"":20,""scale"":0.8},""visible"":{""opacity"":1,""y"":0,""scale"":1}}" "86","M3 Split Button Style","Component","M3 split button material design 3 dropdown action primary secondary expressive segmented Android mobile action overflow menu","Primary #6750A4, On-Primary #FFFFFF, Outline #79747E, Surface Container High #ECE6F0, Divider #CAC4D0","Hover state 8%, Pressed 12%, Disabled opacity 38%, Focus ring #6750A4, Error #B3261E, Dropdown shadow elevation 2","Split animation (primary 200ms, dropdown 250ms), dropdown cascade, pressed scale 0.97, ripple overlay, menu slide-fade","Mobile forms, Android action buttons, primary + options UIs, save dropdowns, send with options, export menus, share actions","Navigation, toggle controls, simple confirmations, icon-only buttons","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ Native","✓ High","Jetpack Compose 10/10, Flutter 10/10, React Native 9/10, Tailwind 8/10","2026 M3 Expressive","Medium",".m3-split-button { display: inline-flex; border-radius: 20px; overflow: hidden; }","{""type"":""spring"",""stiffness"":350,""damping"":28}","{""hidden"":{""opacity"":0,""y"":-8},""visible"":{""opacity"":1,""y"":0}}" "87","M3 Dynamic Color Tokens","System","M3 dynamic color material you theming tokens semantic palette expressive Android mobile system colors adaptive surface tonal","Dynamic Primary #6750A4, Dynamic Secondary #625B71, Dynamic Tertiary #7D5260, Surface #FFFBFE, Background #FFFBFE","Tonal surfaces (Surface Dim #DED8E1 to Surface Bright #FEF7FF), Error #B3261E, Inverse #322F35, Outline Variant #CAC4D0","Color scheme transitions 300ms, surface tint interpolation, semantic token mapping, light/dark crossfade, palette generation animation","Android apps, Material You theming, personalized UIs, adaptive color systems, wallpaper-based themes, brand flexibility","Static brand colors, print design, strict CI compliance, legacy compatibility","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA (dynamic)","✓ Native","✓ High","Jetpack Compose 10/10, Flutter 10/10, Web (MDC) 9/10, Tailwind 7/10","2026 M3 Expressive","High",":root { --md-sys-color-primary: #6750A4; --md-sys-color-on-primary: #FFFFFF; }","{""type"":""tween"",""ease"":""easeInOut"",""duration"":0.3}","{""colorSchemeChange"":{""transition"":{""duration"":0.3}}}" "88","M3 Expressive Loading","Component","M3 loading indicator progress spinner circular linear expressive material design 3 Android mobile async feedback indeterminate determinate","Primary #6750A4, Track #E8DEF8, Surface Container #F3EDF7, On-Surface-Variant #49454F, Secondary #625B71","Active track gradient, Buffer #D0BCFF, Error #B3261E, Success #4CAF50, Background blur rgba(255,251,254,0.9)","Circular spin (1.4s infinite), linear indeterminate (2s), expressive bounce, track fill animation, pulse glow, fade transitions","Mobile loading states, Android progress, async operations, file uploads, data fetching, form submission, content loading","Instant actions, static displays, already-loaded content, print layouts","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ Native","✓ High","Jetpack Compose 10/10, Flutter 10/10, React Native 9/10, CSS 9/10","2026 M3 Expressive","Low",".m3-circular-progress { width: 48px; height: 48px; position: relative; }","{""type"":""tween"",""ease"":""linear"",""duration"":1.4,""repeat"":""Infinity""}","{""spin"":{""rotate"":360},""pulse"":{""scale"":[1,1.05,1]}}" "89","Mobile Micro-interaction Style","Animation","mobile micro-interaction feedback touch response haptic subtle animation 200-300ms tap response button press state change iOS Android","Neutral surfaces #F5F5F5, Accent feedback #007AFF (iOS) #6750A4 (Android), Success #34C759, Error #FF3B30","Pressed state -10% luminosity, Active glow rgba(0,122,255,0.2), Ripple #000000 opacity 12%, Focus ring 2px offset","Touch feedback 200-300ms, scale press 0.95-0.98, opacity change 0.7, ripple expand 400ms, spring bounce 150ms, haptic sync timing","Mobile buttons, touch targets, interactive elements, form inputs, list items, card interactions, toggle switches, all tappable UI","Desktop hover-only, decorative elements, non-interactive content, background animations","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ Native","✓ High","React Native 10/10, Flutter 10/10, SwiftUI 10/10, CSS 9/10","2026 Mobile-First","Low",".micro-touch { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }","{'type':'spring','stiffness':500,'damping':30,'mass':0.5}","{'pressed':{'scale':0.97,'opacity':0.85},'released':{'scale':1,'opacity':1}}" "90","Mobile Spring Physics Style","Animation","mobile spring physics natural motion bounce elastic overshoot gesture-driven iOS Android 120Hz fluid responsive organic feel","System colors (adapts to platform), Motion accent #007AFF, Elastic indicator #34C759, Overscroll #E5E5EA","Shadow during motion rgba(0,0,0,0.1), Blur during velocity 8px, Velocity tint +5% saturation, Rest state baseline","Spring damping 15-25, stiffness 200-400, mass 0.8-1.2, velocity tracking, momentum decay, bounce overshoot 10-15%, gesture velocity inheritance","Pull-to-refresh, sheet presentations, card stacks, swipe actions, page transitions, modal animations, scroll physics, draggable elements","Static content, instant feedback needs, performance-critical loops, older devices","✓ Full","✓ Full","⚡ Good (GPU)","✓ WCAG AA","✓ Native","✓ High","React Native Reanimated 10/10, Flutter 10/10, SwiftUI 10/10, Framer Motion 10/10","2026 Mobile-Native","Medium",".spring-element { transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }","{'type':'spring','stiffness':260,'damping':20,'mass':1}","{'rest':{'scale':1,'y':0},'pressed':{'scale':0.95},'bounce':{'scale':[0.3,1.05,0.95,1]}}" "91","Mobile Gesture Animation Style","Animation","mobile gesture swipe pan pinch rotate drag drop long-press multi-touch haptic feedback iOS Android interaction continuous tracking","Gesture feedback #007AFF, Drag ghost 60% opacity, Swipe trail gradient, Pinch scale indicator #34C759, Rotate guide #FF9500","Action threshold indicators, Destructive swipe #FF3B30, Confirm swipe #34C759, Dismiss #8E8E93, Cancel zone #FFCC00","Gesture velocity mapping, continuous transform tracking, threshold snap animations, action preview fades, rubber-band physics, momentum continuation","Swipe-to-delete, card stacks, image galleries, map interactions, drag-drop lists, dismissible modals, zoomable content, rotatable elements","Keyboard-only interfaces, precise input needs, accessibility-first designs, static content","✓ Full","✓ Full","⚡ Good (GPU)","⚠ Gesture alternatives","✓ Native","✓ High","React Native Gesture Handler 10/10, Flutter 10/10, SwiftUI 10/10, Framer Motion 9/10","2026 Mobile-Native","High",".gesture-container { touch-action: none; user-select: none; }","{'type':'decay','velocity':0,'power':0.8,'timeConstant':350}","{'idle':{'scale':1,'rotate':0},'dragging':{'scale':1.02},'swipeLeft':{'x':'-100%','rotate':-5}}" "92","Mobile 120Hz Motion Style","Animation","120Hz high refresh rate smooth motion ProMotion variable refresh iOS Android flagship fluid frame interpolation buttery animation","Motion-aware colors (reduces intensity at high fps), Standard palette inherited, Motion blur simulation rgba(0,0,0,0.03)","Frame-perfect borders, Antialiased edges, Subpixel positioning, Velocity-based opacity 98-100%","120fps optimized keyframes, will-change hints, GPU compositing, frame budget 8.33ms, interpolation curves, variable refresh adaptation","Flagship mobile devices, premium app experiences, smooth scrolling, animation-heavy UIs, gaming interfaces, video apps, luxury brands","Budget devices, battery-critical apps, accessibility reduced-motion, background tasks","✓ Full","✓ Full","⚠ Battery impact","✓ WCAG AA","✓ Flagship","✓ High","React Native 10/10, Flutter 10/10, SwiftUI 10/10, CSS (limited) 7/10","2026 ProMotion Era","High","@media (prefers-reduced-motion: no-preference) { .motion-120hz { will-change: transform; } }","{'type':'tween','ease':[0.25,0.1,0.25,1],'duration':0.25}","{'hidden':{'opacity':0,'y':8},'visible':{'opacity':1,'y':0}}" "93","iOS Liquid Glass Style","Platform","iOS 26 liquid glass translucent morphism frosted blur vibrancy Apple adaptive materials depth layering premium native","Translucent white rgba(255,255,255,0.65-0.78), System fills adaptive, Tinted glass rgba(174,198,207,0.5), Deep blur layers","Vibrancy materials (label, fill, separator), System grays adaptive, Accent tints from content, Environment lighting reflection","Glass morph transitions 350ms, blur intensity animation, tint color lerp, layer depth parallax, environment reflection updates, press sink effect","iOS 26 apps, Apple ecosystem, premium mobile UIs, system-integrated designs, photo/media apps, translucent overlays, modern Apple aesthetic","Android-first apps, cross-platform consistency, performance-critical, legacy iOS support, high-contrast needs","✓ Full (tinted)","✓ Full (adaptive)","⚠ Moderate (blur)","✓ WCAG AA (adaptive)","✓ iOS Native","✓ High","SwiftUI 10/10, UIKit 10/10, CSS (partial) 7/10, React Native 8/10","2026 iOS Liquid Era","High",".liquid-glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(40px) saturate(180%); }","{'type':'spring','stiffness':180,'damping':24,'mass':1.1}","{'hidden':{'opacity':0,'scale':0.95},'visible':{'opacity':1,'scale':1},'pressed':{'scale':0.98}}" "94","iOS Vibrancy Effects Style","Platform","iOS vibrancy blur behind materials system effects adaptive colors content tint native Apple layering semantic fills labels","Vibrancy Label primary secondary tertiary quaternary, Vibrancy Fill thick regular thin ultra-thin, System adaptive","Separator vibrancy, Content-tinted overlays, Environment-aware colors, System background materials, Grouped table backgrounds","Material crossfade 250ms, vibrancy level transitions, tint inheritance updates, adaptive color shifts, blur radius animation","iOS native apps, system UI extensions, widgets, control center style, notifications, Today widgets, translucent toolbars","Cross-platform apps, Android targets, custom brand colors required, accessibility high-contrast","✓ Full (semantic)","✓ Full (semantic)","⚠ Moderate","✓ WCAG AA (system)","✓ iOS Only","✓ High","SwiftUI 10/10, UIKit 10/10, CSS (N/A) 3/10","2026 iOS Native","High",".vibrancy-background { backdrop-filter: blur(30px) saturate(180%); background: rgba(255,255,255,0.7); }","{'type':'tween','ease':'easeOut','duration':0.25}","{'fadeIn':{'opacity':[0,1]},'materialChange':{'backdropFilter':['blur(0px)','blur(30px)']}}" "95","Cupertino Navigation Style","Platform","Cupertino iOS navigation bar tab bar toolbar large title search Apple HIG native safe-area gesture-driven back swipe","Navigation Bar #F9F9F9 (light) #1C1C1E (dark), Tab Bar tint #007AFF, Large Title #000000/#FFFFFF, Toolbar separator rgba(60,60,67,0.29)","Inactive tab #8E8E93, Badge #FF3B30, Search field #E5E5EA/#1C1C1E, Selection highlight rgba(0,122,255,0.12)","Navigation push/pop (350ms spring), tab switch instant, large title collapse scroll-driven, search expand 250ms, bar show/hide 200ms","iOS apps, Apple ecosystem products, native mobile navigation, content apps, settings interfaces, media players, productivity tools","Android-style navigation, custom navigation patterns, games, immersive content, desktop-first apps","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ iOS Native","✓ High","SwiftUI 10/10, UIKit 10/10, React Native 9/10, Flutter (Cupertino) 9/10","2026 Apple HIG","Medium",".cupertino-nav-bar { height: 44px; background: rgba(249,249,249,0.94); backdrop-filter: blur(20px); }","{'type':'spring','stiffness':300,'damping':28,'mass':0.9}","{'pushIn':{'x':['100%','0%'],'opacity':[0.5,1]},'popOut':{'x':['0%','100%'],'opacity':[1,0.5]}}" "96","HIG Adaptive Layout Style","Platform","HIG Human Interface Guidelines adaptive layout size classes compact regular iOS iPadOS responsive multitasking split-view safe-area","System Background #FFFFFF/#000000, Grouped Background #F2F2F7/#1C1C1E, Secondary #F2F2F7/#2C2C2E, Tertiary #FFFFFF/#3A3A3C","System fills, Separator colors, Label hierarchy (primary/secondary/tertiary/quaternary), Tint colors adaptive","Layout transition 300ms, size class change animation, split-view resize, keyboard avoidance, safe-area adaptation, orientation change 350ms","Universal iOS/iPadOS apps, responsive mobile layouts, multitasking support, adaptive interfaces, cross-device Apple products","Fixed-width designs, desktop-only layouts, Android-first development, custom layout systems","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ iOS Native","✓ High","SwiftUI 10/10, UIKit 10/10, React Native 8/10, CSS 7/10","2026 Apple HIG","Medium",".hig-layout { padding: 16px; padding-left: max(16px, env(safe-area-inset-left)); }","{'type':'tween','ease':'easeInOut','duration':0.3}","{'sizeClassChange':{'transition':{'duration':0.3}},'keyboardShow':{'paddingBottom':[0,'var(--keyboard-height)']}}" "97","Back to Top Button","Component","back to top scroll up floating button anchor navigation utility return top arrow chevron fixed position landing footer long page scroll-to-top FAB sticky","Brand accent #007AFF (iOS) #6750A4 (Material), Primary #3B82F6, Circle bg rgba(59,130,246,0.9)","White icon #FFFFFF on colored bg, Brand color icon on subtle bg rgba(255,255,255,0.9), Shadow rgba(0,0,0,0.15)","Fade in at 300px scroll, smooth scroll animation 500ms, hover scale 1.1, pulse on first appear, opacity transition 200ms, translateY entrance","Long landing pages, documentation sites, blogs, e-commerce product lists, any page with significant scroll depth, portfolio galleries","Single-screen apps, modal dialogs, short pages under 100vh, infinite scroll feeds, mobile apps with native scroll","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","◐ Medium","Tailwind 10/10, CSS 10/10, React 10/10, Vue 10/10, Svelte 10/10","2020s Modern","Low",".back-to-top { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: #3B82F6; color: #FFFFFF; border: none; cursor: pointer; opacity: 0; visibility: hidden; transition: all 200ms ease-out; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; display: flex; align-items: center; justify-content: center; } .back-to-top.visible { opacity: 1; visibility: visible; } .back-to-top:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.2); } .back-to-top:active { transform: scale(0.95); } @media (max-width: 768px) { .back-to-top { bottom: 16px; right: 16px; width: 44px; height: 44px; } }","{'type':'spring','stiffness':300,'damping':25,'mass':0.8}","{'hidden':{'opacity':0,'y':20,'scale':0.8},'visible':{'opacity':1,'y':0,'scale':1},'hover':{'scale':1.1},'tap':{'scale':0.95},'pulse':{'scale':[1,1.15,1],'transition':{'duration':0.6}}}"