@nockdev/awf 6.2.0

package/.agent/skills/cross-cutting/ui-ux-pro-max/data/styles.yaml

@@ -0,0 +1,1473 @@
+metadata:
+  skill: ui-ux-pro-max
+  domain: styles
+  version: 6.2.0
+  updated: '2026-02-05'
+  migrated_from: styles.csv
+  patterns_count: 58
+  columns:
+  - 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
+patterns:
+- id: '1'
+  style_category: Minimalism & Swiss Style
+  type: General
+  keywords:
+  - Clean
+  - simple
+  - spacious
+  - functional
+  - white space
+  - high contrast
+  - geometric
+  - sans-serif
+  - grid-based
+  - essential
+  primary_colors: 'Monochromatic, Black #000000, White #FFFFFF'
+  secondary_colors: 'Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent'
+  effects_animation: Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading
+  best_for: Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools
+  do_not_use_for: Creative portfolios, entertainment, playful brands, artistic experiments
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ High
+  conversion_focused: ◐ Medium
+  framework_compatibility: Tailwind 10/10, Bootstrap 9/10, MUI 9/10
+  era_origin: 1950s Swiss
+  complexity: Low
+- id: '2'
+  style_category: Neumorphism
+  type: General
+  keywords:
+  - Soft UI
+  - embossed
+  - debossed
+  - convex
+  - concave
+  - light source
+  - subtle depth
+  - rounded (12-16px)
+  - monochromatic
+  primary_colors: 'Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8'
+  secondary_colors: Tints/shades (±30%), gradient subtlety, color harmony
+  effects_animation: 'Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow'
+  best_for: Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs
+  do_not_use_for: Complex apps, critical accessibility, data-heavy dashboards, high-contrast required
+  light_mode: ✓ Full
+  dark_mode: ◐ Partial
+  performance: ⚡ Good
+  accessibility: ⚠ Low contrast
+  mobile_friendly: ✓ Good
+  conversion_focused: ◐ Medium
+  framework_compatibility: Tailwind 8/10, CSS-in-JS 9/10
+  era_origin: 2020s Modern
+  complexity: Medium
+- id: '3'
+  style_category: Glassmorphism
+  type: General
+  keywords:
+  - Frosted glass
+  - transparent
+  - blurred background
+  - layered
+  - vibrant background
+  - light source
+  - depth
+  - multi-layer
+  primary_colors: 'Translucent white: rgba(255,255,255,0.1-0.3)'
+  secondary_colors: 'Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA'
+  effects_animation: Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth
+  best_for: Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation
+  do_not_use_for: Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Good
+  accessibility: ⚠ Ensure 4.5:1
+  mobile_friendly: ✓ Good
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 9/10, MUI 8/10, Chakra 8/10
+  era_origin: 2020s Modern
+  complexity: Medium
+- id: '4'
+  style_category: Brutalism
+  type: General
+  keywords:
+  - Raw
+  - unpolished
+  - stark
+  - high contrast
+  - plain text
+  - default fonts
+  - visible borders
+  - asymmetric
+  - anti-design
+  primary_colors: 'Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF'
+  secondary_colors: 'Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary'
+  effects_animation: No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks
+  best_for: Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs
+  do_not_use_for: Corporate environments, conservative industries, critical accessibility, customer-facing professional
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✗ Low
+  framework_compatibility: Tailwind 10/10, Bootstrap 7/10
+  era_origin: 1950s Brutalist
+  complexity: Low
+- id: '5'
+  style_category: 3D & Hyperrealism
+  type: General
+  keywords:
+  - Depth
+  - realistic textures
+  - 3D models
+  - spatial navigation
+  - tactile
+  - skeuomorphic elements
+  - rich detail
+  - immersive
+  primary_colors: 'Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0'
+  secondary_colors: Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)
+  effects_animation: WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)
+  best_for: Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR
+  do_not_use_for: Low-end mobile, performance-limited, critical accessibility, data tables/forms
+  light_mode: ◐ Partial
+  dark_mode: ◐ Partial
+  performance: ❌ Poor
+  accessibility: ⚠ Not accessible
+  mobile_friendly: ✗ Low
+  conversion_focused: ◐ Medium
+  framework_compatibility: Three.js 10/10, R3F 10/10, Babylon.js 10/10
+  era_origin: 2020s Modern
+  complexity: High
+- id: '6'
+  style_category: Vibrant & Block-based
+  type: General
+  keywords:
+  - Bold
+  - energetic
+  - playful
+  - block layout
+  - geometric shapes
+  - high color contrast
+  - duotone
+  - modern
+  - energetic
+  primary_colors: 'Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00'
+  secondary_colors: 'Complementary: Orange #FF7F00, Shocking Pink #FF006E, Lime #CCFF00, triadic schemes'
+  effects_animation: Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms
+  best_for: Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer
+  do_not_use_for: Financial institutions, healthcare, formal business, government, conservative, elderly
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Good
+  accessibility: ◐ Ensure WCAG
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, Chakra 9/10, Styled 9/10
+  era_origin: 2020s Modern
+  complexity: Medium
+- id: '7'
+  style_category: Dark Mode (OLED)
+  type: General
+  keywords:
+  - Dark theme
+  - low light
+  - high contrast
+  - deep black
+  - midnight blue
+  - eye-friendly
+  - OLED
+  - night mode
+  - power efficient
+  primary_colors: 'Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27'
+  secondary_colors: 'Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF'
+  effects_animation: 'Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus'
+  best_for: Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light
+  do_not_use_for: Print-first content, high-brightness outdoor, color-accuracy-critical
+  light_mode: ✗ No
+  dark_mode: ✓ Only
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ High
+  conversion_focused: ◐ Low
+  framework_compatibility: Tailwind 10/10, MUI 10/10, Chakra 10/10
+  era_origin: 2020s Modern
+  complexity: Low
+- id: '8'
+  style_category: Accessible & Ethical
+  type: General
+  keywords:
+  - High contrast
+  - large text (16px+)
+  - keyboard navigation
+  - screen reader friendly
+  - WCAG compliant
+  - focus state
+  - semantic
+  primary_colors: WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+)
+  secondary_colors: Symbol-based colors (not color-only), supporting patterns, inclusive combinations
+  effects_animation: Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets
+  best_for: Government, healthcare, education, inclusive products, large audience, legal compliance, public
+  do_not_use_for: None - accessibility universal
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: All frameworks 10/10
+  era_origin: Universal
+  complexity: Low
+- id: '9'
+  style_category: Claymorphism
+  type: General
+  keywords:
+  - Soft 3D
+  - chunky
+  - playful
+  - toy-like
+  - bubbly
+  - thick borders (3-4px)
+  - double shadows
+  - rounded (16-24px)
+  primary_colors: 'Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG'
+  secondary_colors: Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle
+  effects_animation: Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions
+  best_for: Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games
+  do_not_use_for: Formal corporate, professional services, data-critical, serious/medical, legal apps, finance
+  light_mode: ✓ Full
+  dark_mode: ◐ Partial
+  performance: ⚡ Good
+  accessibility: ⚠ Ensure 4.5:1
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 9/10, CSS-in-JS 9/10
+  era_origin: 2020s Modern
+  complexity: Medium
+- id: '10'
+  style_category: Aurora UI
+  type: General
+  keywords:
+  - Vibrant gradients
+  - smooth blend
+  - Northern Lights effect
+  - mesh gradient
+  - luminous
+  - atmospheric
+  - abstract
+  primary_colors: 'Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF'
+  secondary_colors: Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)
+  effects_animation: Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph
+  best_for: Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections
+  do_not_use_for: Data-heavy dashboards, critical accessibility, content-heavy where distraction issues
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Good
+  accessibility: ⚠ Text contrast
+  mobile_friendly: ✓ Good
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 9/10, CSS-in-JS 10/10
+  era_origin: 2020s Modern
+  complexity: Medium
+- id: '11'
+  style_category: Retro-Futurism
+  type: General
+  keywords:
+  - Vintage sci-fi
+  - 80s aesthetic
+  - neon glow
+  - geometric patterns
+  - CRT scanlines
+  - pixel art
+  - cyberpunk
+  - synthwave
+  primary_colors: 'Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0'
+  secondary_colors: 'Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents'
+  effects_animation: CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)
+  best_for: Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk
+  do_not_use_for: Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance
+  light_mode: ✓ Full
+  dark_mode: ✓ Dark focused
+  performance: ⚠ Moderate
+  accessibility: ⚠ High contrast/strain
+  mobile_friendly: ◐ Medium
+  conversion_focused: ◐ Medium
+  framework_compatibility: Tailwind 8/10, CSS-in-JS 9/10
+  era_origin: 1980s Retro
+  complexity: Medium
+- id: '12'
+  style_category: Flat Design
+  type: General
+  keywords:
+  - 2D
+  - minimalist
+  - bold colors
+  - no shadows
+  - clean lines
+  - simple shapes
+  - typography-focused
+  - modern
+  - icon-heavy
+  primary_colors: 'Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)'
+  secondary_colors: Complementary colors, muted secondaries, high saturation, clean accents
+  effects_animation: No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons
+  best_for: Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate
+  do_not_use_for: Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, Bootstrap 10/10, MUI 9/10
+  era_origin: 2010s Modern
+  complexity: Low
+- id: '13'
+  style_category: Skeuomorphism
+  type: General
+  keywords:
+  - Realistic
+  - texture
+  - depth
+  - 3D appearance
+  - real-world metaphors
+  - shadows
+  - gradients
+  - tactile
+  - detailed
+  - material
+  primary_colors: 'Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects'
+  secondary_colors: Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors
+  effects_animation: Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)
+  best_for: Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education
+  do_not_use_for: Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)
+  light_mode: ◐ Partial
+  dark_mode: ◐ Partial
+  performance: ❌ Poor
+  accessibility: ⚠ Textures reduce readability
+  mobile_friendly: ✗ Low
+  conversion_focused: ◐ Medium
+  framework_compatibility: CSS-in-JS 7/10, Custom 8/10
+  era_origin: 2007-2012 iOS
+  complexity: High
+- id: '14'
+  style_category: Liquid Glass
+  type: General
+  keywords:
+  - Flowing glass
+  - morphing
+  - smooth transitions
+  - fluid effects
+  - translucent
+  - animated blur
+  - iridescent
+  - chromatic aberration
+  primary_colors: Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity
+  secondary_colors: Chromatic aberration (Red-Cyan), iridescent oil-spill, fluid gradient blends, holographic effects
+  effects_animation: Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions
+  best_for: Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios
+  do_not_use_for: Performance-limited, critical accessibility, complex data, budget projects
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Moderate-Poor
+  accessibility: ⚠ Text contrast
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✓ High
+  framework_compatibility: Framer Motion 10/10, GSAP 10/10
+  era_origin: 2020s Modern
+  complexity: High
+- id: '15'
+  style_category: Motion-Driven
+  type: General
+  keywords:
+  - Animation-heavy
+  - microinteractions
+  - smooth transitions
+  - scroll effects
+  - parallax
+  - entrance anim
+  - page transitions
+  primary_colors: Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors
+  secondary_colors: 'Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback'
+  effects_animation: Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions
+  best_for: Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS
+  do_not_use_for: Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Good
+  accessibility: ⚠ Prefers-reduced-motion
+  mobile_friendly: ✓ Good
+  conversion_focused: ✓ High
+  framework_compatibility: GSAP 10/10, Framer Motion 10/10
+  era_origin: 2020s Modern
+  complexity: High
+- id: '16'
+  style_category: Micro-interactions
+  type: General
+  keywords:
+  - Small animations
+  - gesture-based
+  - tactile feedback
+  - subtle animations
+  - contextual interactions
+  - responsive
+  primary_colors: 'Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B'
+  secondary_colors: Accent feedback, neutral supporting, clear action indicators
+  effects_animation: Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic
+  best_for: Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components
+  do_not_use_for: Desktop-only, critical performance, accessibility-first (alternatives needed)
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ Good
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Framer Motion 10/10, React Spring 9/10
+  era_origin: 2020s Modern
+  complexity: Medium
+- id: '17'
+  style_category: Inclusive Design
+  type: General
+  keywords:
+  - Accessible
+  - color-blind friendly
+  - high contrast
+  - haptic feedback
+  - voice interaction
+  - screen reader
+  - WCAG AAA
+  - universal
+  primary_colors: WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary
+  secondary_colors: Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators
+  effects_animation: Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic
+  best_for: Public services, education, healthcare, finance, government, accessible consumer, inclusive
+  do_not_use_for: None - accessibility universal
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: All frameworks 10/10
+  era_origin: Universal
+  complexity: Low
+- id: '18'
+  style_category: Zero Interface
+  type: General
+  keywords:
+  - Minimal visible UI
+  - voice-first
+  - gesture-based
+  - AI-driven
+  - invisible controls
+  - predictive
+  - context-aware
+  - ambient
+  primary_colors: 'Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8'
+  secondary_colors: 'Subtle feedback: light green, light red, minimal UI elements, soft accents'
+  effects_animation: Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions
+  best_for: Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences
+  do_not_use_for: Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ Excellent
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, Custom 10/10
+  era_origin: 2020s AI-Era
+  complexity: Low
+- id: '19'
+  style_category: Soft UI Evolution
+  type: General
+  keywords:
+  - Evolved soft UI
+  - better contrast
+  - modern aesthetics
+  - subtle depth
+  - accessibility-focused
+  - improved shadows
+  - hybrid
+  primary_colors: 'Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy'
+  secondary_colors: Better combinations, accessible secondary, supporting with improved contrast, modern accents
+  effects_animation: Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA
+  best_for: Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid
+  do_not_use_for: Extreme minimalism, critical performance, systems without modern OS
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AA+
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 9/10, MUI 9/10, Chakra 9/10
+  era_origin: 2020s Modern
+  complexity: Medium
+- id: '20'
+  style_category: Hero-Centric Design
+  type: Landing Page
+  keywords:
+  - Large hero section
+  - compelling headline
+  - high-contrast CTA
+  - product showcase
+  - value proposition
+  - hero image/video
+  - dramatic visual
+  primary_colors: Brand primary color, white/light backgrounds for contrast, accent color for CTA
+  secondary_colors: Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)
+  effects_animation: Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect
+  best_for: SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies
+  do_not_use_for: Complex navigation, multi-page experiences, data-heavy applications
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Good
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ Full
+  conversion_focused: ✓ Very High
+  framework_compatibility: Tailwind 10/10, Bootstrap 9/10
+  era_origin: 2020s Modern
+  complexity: Medium
+- id: '21'
+  style_category: Conversion-Optimized
+  type: Landing Page
+  keywords:
+  - Form-focused
+  - minimalist design
+  - single CTA focus
+  - high contrast
+  - urgency elements
+  - trust signals
+  - social proof
+  - clear value
+  primary_colors: Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers
+  secondary_colors: Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits
+  effects_animation: Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback
+  best_for: E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers
+  do_not_use_for: Complex feature explanations, multi-product showcases, technical documentation
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ Full (mobile-optimized)
+  conversion_focused: ✓ Very High
+- id: '22'
+  style_category: Feature-Rich Showcase
+  type: Landing Page
+  keywords:
+  - Multiple feature sections
+  - grid layout
+  - benefit cards
+  - visual feature demonstrations
+  - interactive elements
+  - problem-solution pairs
+  primary_colors: Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs
+  secondary_colors: 'Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)'
+  effects_animation: Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions
+  best_for: Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products
+  do_not_use_for: Simple product pages, early-stage startups with few features, entertainment landing pages
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Good
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ Good
+  conversion_focused: ✓ High
+- id: '23'
+  style_category: Minimal & Direct
+  type: Landing Page
+  keywords:
+  - Minimal text
+  - white space heavy
+  - single column layout
+  - direct messaging
+  - clean typography
+  - visual-centric
+  - fast-loading
+  primary_colors: Monochromatic primary, white background, single accent color for CTA, black/dark grey text
+  secondary_colors: Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements
+  effects_animation: Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll
+  best_for: Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios
+  do_not_use_for: Feature-heavy products, complex explanations, multi-product showcases
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ Full
+  conversion_focused: ✓ High
+- id: '24'
+  style_category: Social Proof-Focused
+  type: Landing Page
+  keywords:
+  - Testimonials prominent
+  - client logos displayed
+  - case studies sections
+  - reviews/ratings
+  - user avatars
+  - success metrics
+  - credibility markers
+  primary_colors: Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds
+  secondary_colors: Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors
+  effects_animation: Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings
+  best_for: B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands
+  do_not_use_for: Startup MVPs, products without users, niche/experimental products
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Good
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ Full
+  conversion_focused: ✓ High
+- id: '25'
+  style_category: Interactive Product Demo
+  type: Landing Page
+  keywords:
+  - Embedded product mockup/video
+  - interactive elements
+  - product walkthrough
+  - step-by-step guides
+  - hover-to-reveal features
+  - embedded demos
+  primary_colors: Primary brand, interface colors matching product, demo highlight colors for interactive elements
+  secondary_colors: Product UI colors, tutorial step colors (numbered progression), hover state indicators
+  effects_animation: Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction
+  best_for: SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software
+  do_not_use_for: Simple services, consulting, non-digital products, complexity-averse audiences
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Good (video/interactive)
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ Good
+  conversion_focused: ✓ Very High
+- id: '26'
+  style_category: Trust & Authority
+  type: Landing Page
+  keywords:
+  - Certificates/badges displayed
+  - expert credentials
+  - case studies with metrics
+  - before/after comparisons
+  - industry recognition
+  - security badges
+  primary_colors: Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)
+  secondary_colors: Certificate highlight colors, metric showcase colors, comparison highlight (success green)
+  effects_animation: Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal
+  best_for: Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services
+  do_not_use_for: Casual products, entertainment, viral/social-first products
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ Full
+  conversion_focused: ✓ High
+- id: '27'
+  style_category: Storytelling-Driven
+  type: Landing Page
+  keywords:
+  - Narrative flow
+  - visual story progression
+  - section transitions
+  - consistent character/brand voice
+  - emotional messaging
+  - journey visualization
+  primary_colors: Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety
+  secondary_colors: Story section color coding, emotional state colors (calm, excitement, success), transitional gradients
+  effects_animation: Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative
+  best_for: Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational
+  do_not_use_for: Technical/complex products (unless narrative-driven), traditional enterprise software
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Moderate (animations)
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ Good
+  conversion_focused: ✓ High
+- id: '28'
+  style_category: Data-Dense Dashboard
+  type: BI/Analytics
+  keywords:
+  - Multiple charts/widgets
+  - data tables
+  - KPI cards
+  - minimal padding
+  - grid layout
+  - space-efficient
+  - maximum data visibility
+  primary_colors: 'Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333'
+  secondary_colors: 'Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)'
+  effects_animation: Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners
+  best_for: Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing
+  do_not_use_for: Marketing dashboards, consumer-facing analytics, simple reporting
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✗ Not applicable
+- id: '29'
+  style_category: Heat Map & Heatmap Style
+  type: BI/Analytics
+  keywords:
+  - Color-coded grid/matrix
+  - data intensity visualization
+  - geographical heat maps
+  - correlation matrices
+  - cell-based representation
+  - gradient coloring
+  primary_colors: 'Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)'
+  secondary_colors: 'Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options'
+  effects_animation: Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation
+  best_for: Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data
+  do_not_use_for: Linear data representation, categorical comparisons (use bar charts), small datasets
+  light_mode: ✓ Full
+  dark_mode: ✓ Full (with adjustments)
+  performance: ⚡ Excellent
+  accessibility: ⚠ Colorblind considerations
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✗ Not applicable
+- id: '30'
+  style_category: Executive Dashboard
+  type: BI/Analytics
+  keywords:
+  - High-level KPIs
+  - large key metrics
+  - minimal detail
+  - summary view
+  - trend indicators
+  - at-a-glance insights
+  - executive summary
+  primary_colors: Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns
+  secondary_colors: 'KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors'
+  effects_animation: KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect
+  best_for: C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views
+  do_not_use_for: Detailed analyst dashboards, technical deep-dives, operational monitoring
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✗ Low (not mobile-optimized)
+  conversion_focused: ✗ Not applicable
+- id: '31'
+  style_category: Real-Time Monitoring
+  type: BI/Analytics
+  keywords:
+  - Live data updates
+  - status indicators
+  - alert notifications
+  - streaming data visualization
+  - active monitoring
+  - streaming charts
+  primary_colors: 'Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)'
+  secondary_colors: Status indicator colors, chart line colors varying by metric, streaming data highlight colors
+  effects_animation: Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect
+  best_for: System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking
+  do_not_use_for: Historical analysis, long-term trend reports, archived data dashboards
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Good (real-time load)
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✗ Not applicable
+- id: '32'
+  style_category: Drill-Down Analytics
+  type: BI/Analytics
+  keywords:
+  - Hierarchical data exploration
+  - expandable sections
+  - interactive drill-down paths
+  - summary-to-detail flow
+  - context preservation
+  primary_colors: Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors
+  secondary_colors: Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors
+  effects_animation: Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation
+  best_for: Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence
+  do_not_use_for: Simple linear data, single-metric dashboards, streaming real-time dashboards
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Good
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✗ Not applicable
+- id: '33'
+  style_category: Comparative Analysis Dashboard
+  type: BI/Analytics
+  keywords:
+  - Side-by-side comparisons
+  - period-over-period metrics
+  - A/B test results
+  - regional comparisons
+  - performance benchmarks
+  primary_colors: 'Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)'
+  secondary_colors: Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors
+  effects_animation: Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare
+  best_for: Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance
+  do_not_use_for: Single metric dashboards, future projections (use forecasting), real-time only (no historical)
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✗ Not applicable
+- id: '34'
+  style_category: Predictive Analytics
+  type: BI/Analytics
+  keywords:
+  - Forecast lines
+  - confidence intervals
+  - trend projections
+  - scenario modeling
+  - AI-driven insights
+  - anomaly detection visualization
+  primary_colors: Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors
+  secondary_colors: High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)
+  effects_animation: Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations
+  best_for: Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning
+  do_not_use_for: Historical-only dashboards, simple reporting, real-time operational dashboards
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Good (computation)
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✗ Not applicable
+- id: '35'
+  style_category: User Behavior Analytics
+  type: BI/Analytics
+  keywords:
+  - Funnel visualization
+  - user flow diagrams
+  - conversion tracking
+  - engagement metrics
+  - user journey mapping
+  - cohort analysis
+  primary_colors: 'Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)'
+  secondary_colors: Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors
+  effects_animation: Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill
+  best_for: Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking
+  do_not_use_for: Real-time operational metrics, technical system monitoring, financial transactions
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Good
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ Good
+  conversion_focused: ✗ Not applicable
+- id: '36'
+  style_category: Financial Dashboard
+  type: BI/Analytics
+  keywords:
+  - Revenue metrics
+  - profit/loss visualization
+  - budget tracking
+  - financial ratios
+  - portfolio performance
+  - cash flow
+  - audit trail
+  primary_colors: 'Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)'
+  secondary_colors: Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)
+  effects_animation: Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions
+  best_for: Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics
+  do_not_use_for: Simple business dashboards, entertainment/social metrics, non-financial data
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✗ Low
+  conversion_focused: ✗ Not applicable
+- id: '37'
+  style_category: Sales Intelligence Dashboard
+  type: BI/Analytics
+  keywords:
+  - Deal pipeline
+  - sales metrics
+  - territory performance
+  - sales rep leaderboard
+  - win-loss analysis
+  - quota tracking
+  - forecast accuracy
+  primary_colors: 'Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)'
+  secondary_colors: Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors
+  effects_animation: Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights
+  best_for: CRM dashboards, sales management, opportunity tracking, performance management, quota planning
+  do_not_use_for: Marketing analytics, customer support metrics, HR dashboards
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Good
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✗ Not applicable
+  framework_compatibility: Recharts 9/10, Chart.js 9/10
+  era_origin: 2020s Modern
+  complexity: Medium
+- id: '38'
+  style_category: Neubrutalism
+  type: General
+  keywords:
+  - Bold borders
+  - black outlines
+  - primary colors
+  - thick shadows
+  - no gradients
+  - flat colors
+  - 45° shadows
+  - playful
+  - Gen Z
+  primary_colors: '#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)'
+  secondary_colors: Limited accent colors, high contrast combinations, no gradients allowed
+  effects_animation: 'box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography'
+  best_for: Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs
+  do_not_use_for: Luxury brands, finance, healthcare, conservative industries (too playful)
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, Bootstrap 8/10
+  era_origin: 2020s Modern
+  complexity: Low
+- id: '39'
+  style_category: Bento Box Grid
+  type: General
+  keywords:
+  - Modular cards
+  - asymmetric grid
+  - varied sizes
+  - Apple-style
+  - dashboard tiles
+  - negative space
+  - clean hierarchy
+  - cards
+  primary_colors: 'Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary'
+  secondary_colors: Subtle gradients, shadow variations, accent highlights for interactive cards
+  effects_animation: grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions
+  best_for: Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS
+  do_not_use_for: Dense data tables, text-heavy content, real-time monitoring
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, CSS Grid 10/10
+  era_origin: 2020s Apple
+  complexity: Low
+- id: '40'
+  style_category: Y2K Aesthetic
+  type: General
+  keywords:
+  - Neon pink
+  - chrome
+  - metallic
+  - bubblegum
+  - iridescent
+  - glossy
+  - retro-futurism
+  - 2000s
+  - futuristic nostalgia
+  primary_colors: '#FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple)'
+  secondary_colors: Metallic gradients, glossy overlays, iridescent effects, chrome textures
+  effects_animation: linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes
+  best_for: Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused
+  do_not_use_for: B2B enterprise, healthcare, finance, conservative industries, elderly users
+  light_mode: ✓ Full
+  dark_mode: ◐ Partial
+  performance: ⚠ Good
+  accessibility: ⚠ Check contrast
+  mobile_friendly: ✓ Good
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 8/10, CSS-in-JS 9/10
+  era_origin: Y2K 2000s
+  complexity: Medium
+- id: '41'
+  style_category: Cyberpunk UI
+  type: General
+  keywords:
+  - Neon
+  - dark mode
+  - terminal
+  - HUD
+  - sci-fi
+  - glitch
+  - dystopian
+  - futuristic
+  - matrix
+  - tech noir
+  primary_colors: '#00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)'
+  secondary_colors: Neon gradients, scanline overlays, glitch colors, terminal green accents
+  effects_animation: Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts
+  best_for: Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment
+  do_not_use_for: Corporate enterprise, healthcare, family apps, conservative brands, elderly users
+  light_mode: ✗ No
+  dark_mode: ✓ Only
+  performance: ⚠ Moderate
+  accessibility: ⚠ Limited (dark+neon)
+  mobile_friendly: ◐ Medium
+  conversion_focused: ◐ Medium
+  framework_compatibility: Tailwind 8/10, Custom CSS 10/10
+  era_origin: 2020s Cyberpunk
+  complexity: Medium
+- id: '42'
+  style_category: Organic Biophilic
+  type: General
+  keywords:
+  - Nature
+  - organic shapes
+  - green
+  - sustainable
+  - rounded
+  - flowing
+  - wellness
+  - earthy
+  - natural textures
+  primary_colors: '#228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)'
+  secondary_colors: Natural gradients, earth tones, sky blues, organic textures, wood/stone colors
+  effects_animation: Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes
+  best_for: Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands
+  do_not_use_for: Tech-focused products, gaming, industrial, urban brands
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, CSS 10/10
+  era_origin: 2020s Sustainable
+  complexity: Low
+- id: '43'
+  style_category: AI-Native UI
+  type: General
+  keywords:
+  - Chatbot
+  - conversational
+  - voice
+  - assistant
+  - agentic
+  - ambient
+  - minimal chrome
+  - streaming text
+  - AI interactions
+  primary_colors: 'Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)'
+  secondary_colors: Status indicators, streaming highlights, context card colors, subtle accent variations
+  effects_animation: Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals
+  best_for: AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces
+  do_not_use_for: Traditional forms, data-heavy dashboards, print-first content
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, React 10/10
+  era_origin: 2020s AI-Era
+  complexity: Low
+- id: '44'
+  style_category: Memphis Design
+  type: General
+  keywords:
+  - 80s
+  - geometric
+  - playful
+  - postmodern
+  - shapes
+  - patterns
+  - squiggles
+  - triangles
+  - neon
+  - abstract
+  - bold
+  primary_colors: '#FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple)'
+  secondary_colors: Complementary geometric colors, pattern fills, contrasting accent shapes
+  effects_animation: 'transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes'
+  best_for: Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment
+  do_not_use_for: Corporate finance, healthcare, legal, elderly users, conservative brands
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ⚠ Check contrast
+  mobile_friendly: ✓ Good
+  conversion_focused: ◐ Medium
+  framework_compatibility: Tailwind 9/10, CSS 10/10
+  era_origin: 1980s Postmodern
+  complexity: Medium
+- id: '45'
+  style_category: Vaporwave
+  type: General
+  keywords:
+  - Synthwave
+  - retro-futuristic
+  - 80s-90s
+  - neon
+  - glitch
+  - nostalgic
+  - sunset gradient
+  - dreamy
+  - aesthetic
+  primary_colors: '#FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)'
+  secondary_colors: Sunset gradients, glitch overlays, VHS effects, neon accents, pastel variations
+  effects_animation: 'text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines'
+  best_for: Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects
+  do_not_use_for: Business apps, e-commerce, education, healthcare, enterprise software
+  light_mode: ✓ Full
+  dark_mode: ✓ Dark focused
+  performance: ⚠ Moderate
+  accessibility: ⚠ Poor (motion)
+  mobile_friendly: ◐ Medium
+  conversion_focused: ◐ Medium
+  framework_compatibility: Tailwind 8/10, CSS-in-JS 9/10
+  era_origin: 1980s-90s Retro
+  complexity: Medium
+- id: '46'
+  style_category: Dimensional Layering
+  type: General
+  keywords:
+  - Depth
+  - overlapping
+  - z-index
+  - layers
+  - 3D
+  - shadows
+  - elevation
+  - floating
+  - cards
+  - spatial hierarchy
+  primary_colors: 'Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements'
+  secondary_colors: Shadow variations (sm/md/lg/xl), elevation colors, highlight colors for top layers
+  effects_animation: 'z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax'
+  best_for: Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces
+  do_not_use_for: Print-style layouts, simple blogs, low-end devices, flat design requirements
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Good
+  accessibility: ⚠ Moderate (SR issues)
+  mobile_friendly: ✓ Good
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, MUI 10/10, Chakra 10/10
+  era_origin: 2020s Modern
+  complexity: Medium
+- id: '47'
+  style_category: Exaggerated Minimalism
+  type: General
+  keywords:
+  - Bold minimalism
+  - oversized typography
+  - high contrast
+  - negative space
+  - loud minimal
+  - statement design
+  primary_colors: '#000000 (Black), #FFFFFF (White), single vibrant accent only'
+  secondary_colors: Minimal - single accent color, no secondary colors, extreme restraint
+  effects_animation: 'font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace'
+  best_for: Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial
+  do_not_use_for: E-commerce catalogs, dashboards, forms, data-heavy, elderly users, complex apps
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, Typography.js 10/10
+  era_origin: 2020s Modern
+  complexity: Low
+- id: '48'
+  style_category: Kinetic Typography
+  type: General
+  keywords:
+  - Motion text
+  - animated type
+  - moving letters
+  - dynamic
+  - typing effect
+  - morphing
+  - scroll-triggered text
+  primary_colors: Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette
+  secondary_colors: Accent colors for emphasis, transition colors, gradient text fills
+  effects_animation: '@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text'
+  best_for: Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages
+  do_not_use_for: Long-form content, accessibility-critical, data interfaces, forms, elderly users
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Moderate
+  accessibility: ❌ Poor (motion)
+  mobile_friendly: ✓ Good
+  conversion_focused: ✓ Very High
+  framework_compatibility: GSAP 10/10, Framer Motion 10/10
+  era_origin: 2020s Modern
+  complexity: High
+- id: '49'
+  style_category: Parallax Storytelling
+  type: General
+  keywords:
+  - Scroll-driven
+  - narrative
+  - layered scrolling
+  - immersive
+  - progressive disclosure
+  - cinematic
+  - scroll-triggered
+  primary_colors: Story-dependent, often gradients and natural colors, section-specific palettes
+  secondary_colors: Section transition colors, depth layer colors, narrative mood colors
+  effects_animation: 'transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations'
+  best_for: Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns
+  do_not_use_for: E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ❌ Poor
+  accessibility: ❌ Poor (motion)
+  mobile_friendly: ✗ Low
+  conversion_focused: ✓ High
+  framework_compatibility: GSAP ScrollTrigger 10/10, Locomotive Scroll 10/10
+  era_origin: 2020s Modern
+  complexity: High
+- id: '50'
+  style_category: Swiss Modernism 2.0
+  type: General
+  keywords:
+  - Grid system
+  - Helvetica
+  - modular
+  - asymmetric
+  - international style
+  - rational
+  - clean
+  - mathematical spacing
+  primary_colors: '#000000, #FFFFFF, #F5F5F5, single vibrant accent only'
+  secondary_colors: Minimal secondary, accent for emphasis only, no gradients
+  effects_animation: 'display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy'
+  best_for: Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation
+  do_not_use_for: Playful brands, children's sites, entertainment, gaming, emotional storytelling
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, Bootstrap 9/10, Foundation 10/10
+  era_origin: 1950s Swiss + 2020s
+  complexity: Low
+- id: '51'
+  style_category: HUD / Sci-Fi FUI
+  type: General
+  keywords:
+  - Futuristic
+  - technical
+  - wireframe
+  - neon
+  - data
+  - transparency
+  - iron man
+  - sci-fi
+  - interface
+  primary_colors: 'Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000'
+  secondary_colors: 'Transparent Black, Grid Lines #333333'
+  effects_animation: Glow effects, scanning animations, ticker text, blinking markers, fine line drawing
+  best_for: Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards
+  do_not_use_for: Standard corporate, reading heavy content, accessible public services
+  light_mode: ✓ Low
+  dark_mode: ✓ Full
+  performance: ⚠ Moderate (renders)
+  accessibility: ⚠ Poor (thin lines)
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✗ Low
+  framework_compatibility: React 9/10, Canvas 10/10
+  era_origin: 2010s Sci-Fi
+  complexity: High
+- id: '52'
+  style_category: Pixel Art
+  type: General
+  keywords:
+  - Retro
+  - 8-bit
+  - 16-bit
+  - gaming
+  - blocky
+  - nostalgic
+  - pixelated
+  - arcade
+  primary_colors: Primary colors (NES Palette), brights, limited palette
+  secondary_colors: Black outlines, shading via dithering or block colors
+  effects_animation: Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text
+  best_for: Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT
+  do_not_use_for: Professional corporate, modern SaaS, high-res photography sites
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ Good (if contrast ok)
+  mobile_friendly: ✓ High
+  conversion_focused: ◐ Medium
+  framework_compatibility: CSS (box-shadow) 8/10, Canvas 10/10
+  era_origin: 1980s Arcade
+  complexity: Medium
+- id: '53'
+  style_category: Bento Grids
+  type: General
+  keywords:
+  - Apple-style
+  - modular
+  - cards
+  - organized
+  - clean
+  - hierarchy
+  - grid
+  - rounded
+  - soft
+  primary_colors: 'Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F'
+  secondary_colors: Subtle accents, soft shadows, blurred backdrops
+  effects_animation: Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal
+  best_for: Product features, dashboards, personal sites, marketing summaries, galleries
+  do_not_use_for: Long-form reading, data tables, complex forms
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: CSS Grid 10/10, Tailwind 10/10
+  era_origin: 2020s Apple/Linear
+  complexity: Low
+- id: '54'
+  style_category: Neubrutalism
+  type: General
+  keywords:
+  - Bold
+  - ugly-cute
+  - raw
+  - high contrast
+  - flat
+  - hard shadows
+  - distinct
+  - playful
+  - loud
+  primary_colors: 'Pop Yellow #FFDE59, Bright Red #FF5757, Black #000000'
+  secondary_colors: 'Lavender #CBA6F7, Mint #76E0C2'
+  effects_animation: Hard hover shifts (4px), marquee scrolling, jitter animations, bold borders
+  best_for: Design tools, creative agencies, Gen Z brands, personal blogs, gumroad-style
+  do_not_use_for: Banking, legal, healthcare, serious enterprise, elderly users
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ High
+  framework_compatibility: Tailwind 10/10, Plain CSS 10/10
+  era_origin: 2020s Modern Retro
+  complexity: Low
+- id: '55'
+  style_category: Spatial UI (VisionOS)
+  type: General
+  keywords:
+  - Glass
+  - depth
+  - immersion
+  - spatial
+  - translucent
+  - gaze
+  - gesture
+  - apple
+  - vision-pro
+  primary_colors: 'Frosted Glass #FFFFFF (15-30% opacity), System White'
+  secondary_colors: Vibrant system colors for active states, deep shadows for depth
+  effects_animation: Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus
+  best_for: Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards
+  do_not_use_for: Text-heavy documents, high-contrast requirements, non-3D capable devices
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Moderate (blur cost)
+  accessibility: ⚠ Contrast risks
+  mobile_friendly: ✓ High (if adapted)
+  conversion_focused: ✓ High
+  framework_compatibility: SwiftUI, React (Three.js/Fiber)
+  era_origin: 2024 Spatial Era
+  complexity: High
+- id: '56'
+  style_category: E-Ink / Paper
+  type: General
+  keywords:
+  - Paper-like
+  - matte
+  - high contrast
+  - texture
+  - reading
+  - calm
+  - slow tech
+  - monochrome
+  primary_colors: 'Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A'
+  secondary_colors: 'Pencil Grey #4A4A4A, Highlighter Yellow #FFFF00 (accent)'
+  effects_animation: No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)
+  best_for: Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands
+  do_not_use_for: Gaming, video platforms, high-energy marketing, dark mode dependent apps
+  light_mode: ✓ Full
+  dark_mode: ✗ Low (inverted only)
+  performance: ⚡ Excellent
+  accessibility: ✓ WCAG AAA
+  mobile_friendly: ✓ High
+  conversion_focused: ✓ Medium
+  framework_compatibility: Tailwind 10/10, CSS 10/10
+  era_origin: 2020s Digital Well-being
+  complexity: Low
+- id: '57'
+  style_category: Gen Z Chaos / Maximalism
+  type: General
+  keywords:
+  - Chaos
+  - clutter
+  - stickers
+  - raw
+  - collage
+  - mixed media
+  - loud
+  - internet culture
+  - ironic
+  primary_colors: 'Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF'
+  secondary_colors: Gradients, rainbow, glitch, noise, heavily saturated mix
+  effects_animation: Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop
+  best_for: Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion
+  do_not_use_for: Corporate, government, healthcare, banking, serious tools
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Poor (heavy assets)
+  accessibility: ❌ Poor
+  mobile_friendly: ◐ Medium
+  conversion_focused: ✓ High (Viral)
+  framework_compatibility: CSS-in-JS 8/10
+  era_origin: 2023+ Internet Core
+  complexity: High
+- id: '58'
+  style_category: Biomimetic / Organic 2.0
+  type: General
+  keywords:
+  - Nature-inspired
+  - cellular
+  - fluid
+  - breathing
+  - generative
+  - algorithms
+  - life-like
+  primary_colors: 'Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue'
+  secondary_colors: 'Deep Ocean #001E3C, Coral #FF7F50, Organic gradients'
+  effects_animation: Breathing animations, fluid morphing, generative growth, physics-based movement
+  best_for: Sustainability tech, biotech, advanced health, meditation, generative art platforms
+  do_not_use_for: Standard SaaS, data grids, strict corporate, accounting
+  light_mode: ✓ Full
+  dark_mode: ✓ Full
+  performance: ⚠ Moderate
+  accessibility: ✓ Good
+  mobile_friendly: ✓ Good
+  conversion_focused: ✓ High
+  framework_compatibility: Canvas 10/10, WebGL 10/10
+  era_origin: 2024+ Generative
+  complexity: High