@design-ai/cli 4.55.0

package/knowledge/patterns/styles-catalog.md

@@ -0,0 +1,2599 @@
+---
+title: Visual style catalog
+source: refs/ui-ux-pro-max/src/ui-ux-pro-max/data/styles.csv
+upstream: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
+extracted_at: 2026-05-19
+applies_to: [visual-design, art-direction]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# Visual style catalog
+
+A catalog of distinct visual languages. Use as **art-direction shorthand** — pick a style by best-for/avoid-for, then implement using its keywords, colors, and CSS hints.
+
+## 1. Minimalism & Swiss Style
+
+- **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**: 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
+- **Avoid for**: Creative portfolios, entertainment, playful brands, artistic experiments
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 1950s Swiss
+- **Complexity**: Low
+
+**AI prompt**: Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity and functionality.
+
+```css
+/* Minimalism & Swiss Style hints */
+display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary
+```
+
+**Checklist**:
+- [ ] Grid-based layout 12-16 columns
+- [ ] Typography hierarchy clear
+- [ ] No unnecessary decorations
+- [ ] WCAG AAA contrast verified
+- [ ] Mobile responsive grid
+
+## 2. Neumorphism
+
+- **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**: 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
+- **Avoid for**: Complex apps, critical accessibility, data-heavy dashboards, high-contrast required
+- **Light mode**: ✓ Full
+- **Dark mode**: ◐ Partial
+- **Performance**: ⚡ Good
+- **Accessibility**: ⚠ Low contrast
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements.
+
+```css
+/* Neumorphism hints */
+border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on press
+```
+
+**Checklist**:
+- [ ] Rounded corners 12-16px consistent
+- [ ] Multiple shadow layers (2-3)
+- [ ] Pastel color verified
+- [ ] Monochromatic palette checked
+- [ ] Press animation smooth 150ms
+
+## 3. Glassmorphism
+
+- **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**: 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
+- **Avoid 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
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Perfect for modern overlays and cards.
+
+```css
+/* Glassmorphism hints */
+backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth
+```
+
+**Checklist**:
+- [ ] Backdrop-filter blur 10-20px
+- [ ] Translucent white 15-30% opacity
+- [ ] Subtle border 1px light
+- [ ] Vibrant background verified
+- [ ] Text contrast 4.5:1 checked
+
+## 4. Brutalism
+
+- **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**: 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
+- **Avoid for**: Corporate environments, conservative industries, critical accessibility, customer-facing professional
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 1950s Brutalist
+- **Complexity**: Low
+
+**AI prompt**: Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements.
+
+```css
+/* Brutalism hints */
+border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF
+```
+
+**Checklist**:
+- [ ] No border-radius (0px)
+- [ ] No transitions (instant)
+- [ ] Bold typography (700+)
+- [ ] Pure primary colors used
+- [ ] Visible grid/borders
+- [ ] Asymmetric layout intentional
+
+## 5. 3D & Hyperrealism
+
+- **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**: 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
+- **Avoid for**: Low-end mobile, performance-limited, critical accessibility, data tables/forms
+- **Light mode**: ◐ Partial
+- **Dark mode**: ◐ Partial
+- **Performance**: ❌ Poor
+- **Accessibility**: ⚠ Not accessible
+- **Era**: 2020s Modern
+- **Complexity**: High
+
+**AI prompt**: Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail.
+
+```css
+/* 3D & Hyperrealism hints */
+transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()
+```
+
+**Checklist**:
+- [ ] WebGL/Three.js integrated
+- [ ] 3D models loaded
+- [ ] Parallax 3-5 layers
+- [ ] Realistic lighting verified
+- [ ] Complex shadows rendered
+- [ ] Physics animation smooth 300-400ms
+
+## 6. Vibrant & Block-based
+
+- **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**: 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
+- **Avoid for**: Financial institutions, healthcare, formal business, government, conservative, elderly
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Good
+- **Accessibility**: ◐ Ensure WCAG
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone effects. Perfect for startups and youth-focused apps. Use 4-6 contrasting colors from complementary/triadic schemes.
+
+```css
+/* Vibrant & Block-based hints */
+display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movement
+```
+
+**Checklist**:
+- [ ] Block layout with 48px+ gaps
+- [ ] Large typography 32px+
+- [ ] 4-6 vibrant colors max
+- [ ] Animated patterns active
+- [ ] Scroll-snap enabled
+- [ ] High contrast verified (7:1+)
+
+## 7. Dark Mode (OLED)
+
+- **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**: 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
+- **Avoid for**: Print-first content, high-brightness outdoor, color-accuracy-critical
+- **Light mode**: ✗ No
+- **Dark mode**: ✓ Only
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 2020s Modern
+- **Complexity**: Low
+
+**AI prompt**: Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green, blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving.
+
+```css
+/* Dark Mode (OLED) hints */
+background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: dark
+```
+
+**Checklist**:
+- [ ] Deep black #000000 or #121212
+- [ ] Vibrant neon accents used
+- [ ] Text contrast 7:1+
+- [ ] Minimal glow effects
+- [ ] OLED power optimization
+- [ ] No white (#FFFFFF) background
+
+## 8. Accessible & Ethical
+
+- **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**: 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
+- **Avoid for**: None - accessibility universal
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: Universal
+- **Complexity**: Low
+
+**AI prompt**: Design with WCAG AAA compliance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states visible (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support (prefers-reduced-motion), 44x44px touch targets.
+
+```css
+/* Accessible & Ethical hints */
+color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointer
+```
+
+**Checklist**:
+- [ ] WCAG AAA verified
+- [ ] 7:1+ contrast checked
+- [ ] Keyboard navigation tested
+- [ ] Screen reader tested
+- [ ] Focus visible 3-4px
+- [ ] Semantic HTML used
+- [ ] Touch targets 44x44px
+
+## 9. Claymorphism
+
+- **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**: 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
+- **Avoid 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
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth animations. Perfect for children's apps and creative tools.
+
+```css
+/* Claymorphism hints */
+border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56)
+```
+
+**Checklist**:
+- [ ] Border-radius 16-24px
+- [ ] Thick borders 3-4px
+- [ ] Double shadows (inner+outer)
+- [ ] Pastel colors used
+- [ ] Soft bounce animations
+- [ ] Playful interactions
+
+## 10. Aurora UI
+
+- **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**: 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
+- **Avoid for**: Data-heavy dashboards, critical accessibility, content-heavy where distraction issues
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Good
+- **Accessibility**: ⚠ Text contrast
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange, purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects.
+
+```css
+/* Aurora UI hints */
+background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiply
+```
+
+**Checklist**:
+- [ ] Mesh/flowing gradients applied
+- [ ] 8-12s animation loop
+- [ ] Complementary colors used
+- [ ] Smooth color transitions
+- [ ] Iridescent effect subtle
+- [ ] Text contrast verified
+
+## 11. Retro-Futurism
+
+- **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**: 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
+- **Avoid for**: Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Dark focused
+- **Performance**: ⚠ Moderate
+- **Accessibility**: ⚠ High contrast/strain
+- **Era**: 1980s Retro
+- **Complexity**: Medium
+
+**AI prompt**: Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (blue, pink, cyan), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow text/borders, monospace fonts, geometric patterns. Use neon text-shadow and animated glitch effects.
+
+```css
+/* Retro-Futurism hints */
+color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotate
+```
+
+**Checklist**:
+- [ ] Neon colors used
+- [ ] CRT scanlines effect
+- [ ] Glitch animations active
+- [ ] Monospace font
+- [ ] Deep black background
+- [ ] Glow effects applied
+- [ ] 80s patterns present
+
+## 12. Flat Design
+
+- **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**: 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
+- **Avoid for**: Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 2010s Modern
+- **Complexity**: Low
+
+**AI prompt**: Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid, bright colors in a limited palette with high saturation.
+
+```css
+/* Flat Design hints */
+box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVG
+```
+
+**Checklist**:
+- [ ] No shadows/gradients
+- [ ] 4-6 solid colors max
+- [ ] Clean lines consistent
+- [ ] Simple shapes used
+- [ ] Icon-heavy layout
+- [ ] High saturation colors
+- [ ] Fast loading verified
+
+## 13. Skeuomorphism
+
+- **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**: 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
+- **Avoid for**: Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)
+- **Light mode**: ◐ Partial
+- **Dark mode**: ◐ Partial
+- **Performance**: ❌ Poor
+- **Accessibility**: ⚠ Textures reduce readability
+- **Era**: 2007-2012 iOS
+- **Complexity**: High
+
+**AI prompt**: Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Perfect for premium/luxury products.
+
+```css
+/* Skeuomorphism hints */
+background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms)
+```
+
+**Checklist**:
+- [ ] Realistic textures applied
+- [ ] Complex gradients 8-12 stops
+- [ ] Multi-layer shadows
+- [ ] Texture overlays present
+- [ ] Tactile animations smooth
+- [ ] Depth effect pronounced
+
+## 14. Liquid Glass
+
+- **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**: 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
+- **Avoid for**: Performance-limited, critical accessibility, complex data, budget projects
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Moderate-Poor
+- **Accessibility**: ⚠ Text contrast
+- **Era**: 2020s Modern
+- **Complexity**: High
+
+**AI prompt**: Create a premium liquid glass effect with morphing shapes, flowing animations, chromatic aberration, iridescent gradients, smooth 400-600ms transitions. Use SVG morphing for shape changes, dynamic blur, smooth color transitions creating a fluid, premium feel.
+
+```css
+/* Liquid Glass hints */
+animation: morphing SVG paths (400-600ms), backdrop-filter: blur + saturate, filter: hue-rotate + brightness, blend-mode: screen, background: iridescent gradient
+```
+
+**Checklist**:
+- [ ] Morphing animations 400-600ms
+- [ ] Chromatic aberration applied
+- [ ] Dynamic blur active
+- [ ] Iridescent gradients
+- [ ] Smooth color transitions
+- [ ] Premium feel achieved
+
+## 15. Motion-Driven
+
+- **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**: 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
+- **Avoid for**: Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Good
+- **Accessibility**: ⚠ Prefers-reduced-motion
+- **Era**: 2020s Modern
+- **Complexity**: High
+
+**AI prompt**: Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration.
+
+```css
+/* Motion-Driven hints */
+animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms
+```
+
+**Checklist**:
+- [ ] Scroll animations active
+- [ ] Parallax 3-5 layers
+- [ ] Entrance animations smooth
+- [ ] Page transitions fluid
+- [ ] GPU accelerated
+- [ ] Prefers-reduced-motion respected
+
+## 16. Micro-interactions
+
+- **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**: 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
+- **Avoid for**: Desktop-only, critical performance, accessibility-first (alternatives needed)
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ Good
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.
+
+```css
+/* Micro-interactions hints */
+animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop
+```
+
+**Checklist**:
+- [ ] Micro-animations 50-100ms
+- [ ] Gesture-responsive
+- [ ] Tactile feedback visual/haptic
+- [ ] Loading spinners smooth
+- [ ] Success/error states clear
+- [ ] Hover effects subtle
+
+## 17. Inclusive Design
+
+- **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**: 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
+- **Avoid for**: None - accessibility universal
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: Universal
+- **Complexity**: Low
+
+**AI prompt**: Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, WCAG AAA compliance, symbol-based color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options.
+
+```css
+/* Inclusive Design hints */
+aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associated
+```
+
+**Checklist**:
+- [ ] WCAG AAA verified
+- [ ] 7:1+ contrast all text
+- [ ] Keyboard accessible (Tab/Enter)
+- [ ] Screen reader tested
+- [ ] Focus visible 3-4px
+- [ ] No color-only indicators
+- [ ] Haptic fallback
+
+## 18. Zero Interface
+
+- **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**: 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
+- **Avoid for**: Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ Excellent
+- **Era**: 2020s AI-Era
+- **Complexity**: Low
+
+**AI prompt**: Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition UI, gesture detection, AI predictions, smart suggestions, context-aware actions. Hide controls until needed.
+
+```css
+/* Zero Interface hints */
+voice-commands: Web Speech API, gesture-detection: touch events, AI-predictions: hidden by default (reveal on hover), progressive-disclosure: show on demand, minimal UI visible
+```
+
+**Checklist**:
+- [ ] Voice commands responsive
+- [ ] Gesture detection active
+- [ ] AI predictions hidden/revealed
+- [ ] Progressive disclosure working
+- [ ] Minimal visible UI
+- [ ] Smart suggestions contextual
+
+## 19. Soft UI Evolution
+
+- **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**: 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
+- **Avoid for**: Extreme minimalism, critical performance, systems without modern OS
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA+
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design evolved neumorphism with improved contrast (WCAG AA+), modern aesthetics, subtle depth, accessibility focus. Use soft shadows (softer than flat but clearer than pure neumorphism), better color hierarchy, improved focus states, modern 200-300ms animations.
+
+```css
+/* Soft UI Evolution hints */
+box-shadow: softer multi-layer (0 2px 4px), background: improved contrast pastels, border-radius: 8-12px, animation: 200-300ms smooth, outline: 2-3px on focus, contrast: 4.5:1+
+```
+
+**Checklist**:
+- [ ] Improved contrast AA/AAA
+- [ ] Soft shadows modern
+- [ ] Border-radius 8-12px
+- [ ] Animations 200-300ms
+- [ ] Focus states visible
+- [ ] Color hierarchy clear
+
+## 20. Hero-Centric Design
+
+- **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**: 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
+- **Avoid for**: Complex navigation, multi-page experiences, data-heavy applications
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Good
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a hero-centric landing page. Use: full-width hero section, compelling headline (60-80 chars), high-contrast CTA button, product screenshot or video, value proposition above fold, gradient or image background, clear visual hierarchy.
+
+```css
+/* Hero-Centric Design hints */
+min-height: 100vh, display: flex, align-items: center, background: linear-gradient or image, text-shadow for readability, max-width: 800px for text, button with hover scale (1.05)
+```
+
+**Checklist**:
+- [ ] Hero section full viewport height
+- [ ] Headline visible above fold
+- [ ] CTA button high contrast
+- [ ] Background image optimized (WebP)
+- [ ] Text readable on background
+- [ ] Mobile responsive layout
+
+## 21. Conversion-Optimized
+
+- **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**: 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
+- **Avoid for**: Complex feature explanations, multi-product showcases, technical documentation
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a conversion-optimized landing page. Use: single primary CTA, minimal distractions, trust badges, urgency elements (limited time), social proof (testimonials), clear value proposition, form above fold, progress indicators.
+
+```css
+/* Conversion-Optimized hints */
+form with focus states, input:focus ring, button: primary color high contrast, position: sticky for CTA, max-width: 600px for form, loading spinner, success/error states
+```
+
+**Checklist**:
+- [ ] Single primary CTA visible
+- [ ] Form fields minimal (3-5)
+- [ ] Trust badges present
+- [ ] Social proof above fold
+- [ ] Mobile form optimized
+- [ ] Loading states implemented
+- [ ] A/B test ready
+
+## 22. Feature-Rich Showcase
+
+- **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**: 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
+- **Avoid for**: Simple product pages, early-stage startups with few features, entertainment landing pages
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Good
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a feature showcase landing page. Use: grid layout for features (3-4 columns), feature cards with icons, benefit-focused copy, alternating sections, comparison tables, interactive demos, problem-solution pairs.
+
+```css
+/* Feature-Rich Showcase hints */
+display: grid, grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), gap: 2rem, card hover effects (translateY -4px), icon containers, alternating background colors
+```
+
+**Checklist**:
+- [ ] Feature grid responsive
+- [ ] Icons consistent style
+- [ ] Card hover effects smooth
+- [ ] Alternating sections contrast
+- [ ] Benefits clearly stated
+- [ ] Mobile stacks properly
+
+## 23. Minimal & Direct
+
+- **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**: 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
+- **Avoid for**: Feature-heavy products, complex explanations, multi-product showcases
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a minimal direct landing page. Use: single column layout, maximum white space, essential content only, one CTA, clean typography, no decorative elements, fast loading, direct messaging.
+
+```css
+/* Minimal & Direct hints */
+max-width: 680px, margin: 0 auto, padding: 4rem 2rem, font-size: 18-20px, line-height: 1.6, minimal animations, no box-shadow, clean borders only
+```
+
+**Checklist**:
+- [ ] Single column centered
+- [ ] White space generous
+- [ ] One primary CTA only
+- [ ] No decorative images
+- [ ] Page weight < 500KB
+- [ ] Load time < 2s
+
+## 24. Social Proof-Focused
+
+- **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**: 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
+- **Avoid for**: Startup MVPs, products without users, niche/experimental products
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Good
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a social proof landing page. Use: testimonials with photos, client logos grid, case study cards, review ratings (stars), user count metrics, success stories, trust indicators, before/after comparisons.
+
+```css
+/* Social Proof-Focused hints */
+testimonial cards with avatar, logo grid (grayscale filter), star rating SVGs, counter animations (count-up), blockquote styling, carousel for testimonials, metric cards
+```
+
+**Checklist**:
+- [ ] Testimonials with real photos
+- [ ] Logo grid 6-12 logos
+- [ ] Star ratings accessible
+- [ ] Metrics animated on scroll
+- [ ] Case studies linked
+- [ ] Mobile carousel works
+
+## 25. Interactive Product Demo
+
+- **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**: 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
+- **Avoid for**: Simple services, consulting, non-digital products, complexity-averse audiences
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Good (video/interactive)
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design an interactive demo landing page. Use: embedded product mockup, video walkthrough, step-by-step guide, hover-to-reveal features, live demo button, screenshot carousel, feature highlights on interaction.
+
+```css
+/* Interactive Product Demo hints */
+video element with controls, position: relative for overlays, hover reveal (opacity transition), step indicators, modal for full demo, screenshot lightbox, play button overlay
+```
+
+**Checklist**:
+- [ ] Demo video loads fast
+- [ ] Fallback for no-JS
+- [ ] Step indicators clear
+- [ ] Hover states obvious
+- [ ] Mobile touch friendly
+- [ ] Demo CTA prominent
+
+## 26. Trust & Authority
+
+- **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**: 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
+- **Avoid for**: Casual products, entertainment, viral/social-first products
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a trust-focused landing page. Use: certification badges, security indicators, expert credentials, industry awards, case study metrics, compliance logos (GDPR, SOC2), guarantee badges, professional photography.
+
+```css
+/* Trust & Authority hints */
+badge grid layout, shield icons, lock icons for security, certificate styling, metric cards with icons, professional color scheme (blue/grey), subtle shadows for depth
+```
+
+**Checklist**:
+- [ ] Security badges visible
+- [ ] Certifications verified
+- [ ] Metrics with sources
+- [ ] Professional imagery
+- [ ] Guarantee clearly stated
+- [ ] Contact info accessible
+
+## 27. Storytelling-Driven
+
+- **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**: 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
+- **Avoid for**: Technical/complex products (unless narrative-driven), traditional enterprise software
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Moderate (animations)
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a storytelling landing page. Use: narrative flow sections, scroll-triggered reveals, chapter-like structure, emotional imagery, brand journey visualization, founder story, mission statement, timeline progression.
+
+```css
+/* Storytelling-Driven hints */
+scroll-snap sections, Intersection Observer for reveals, parallax backgrounds, section transitions, timeline CSS, narrative typography (varied sizes), image-text alternating
+```
+
+**Checklist**:
+- [ ] Story flows naturally
+- [ ] Scroll reveals smooth
+- [ ] Sections timed well
+- [ ] Emotional hooks present
+- [ ] Mobile story readable
+- [ ] Skip option available
+
+## 28. Data-Dense Dashboard
+
+- **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**: 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
+- **Avoid for**: Marketing dashboards, consumer-facing analytics, simple reporting
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a data-dense dashboard. Use: multiple chart widgets, KPI cards row, data tables with sorting, minimal padding (8-12px), efficient grid layout, filter sidebar, dense but readable typography, maximum information density.
+
+```css
+/* Data-Dense Dashboard hints */
+display: grid, grid-template-columns: repeat(12, 1fr), gap: 8px, padding: 12px, font-size: 12-14px, overflow: auto for tables, compact card design, sticky headers
+```
+
+**Checklist**:
+- [ ] Grid layout 12 columns
+- [ ] KPI cards responsive
+- [ ] Tables sortable
+- [ ] Filters functional
+- [ ] Loading states for data
+- [ ] Export functionality
+
+## 29. Heat Map & Heatmap Style
+
+- **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**: 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
+- **Avoid for**: Linear data representation, categorical comparisons (use bar charts), small datasets
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full (with adjustments)
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ⚠ Colorblind considerations
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a heatmap visualization. Use: color gradient scale (cool to hot), cell-based grid, intensity legend, hover tooltips, geographic or matrix layout, divergent color scheme for +/- values, accessible color alternatives.
+
+```css
+/* Heat Map & Heatmap Style hints */
+display: grid, background: linear-gradient for legend, cell hover states, tooltip positioning, color scale (blue→white→red), SVG for geographic, canvas for large datasets
+```
+
+**Checklist**:
+- [ ] Color scale clear
+- [ ] Legend visible
+- [ ] Tooltips informative
+- [ ] Colorblind alternatives
+- [ ] Zoom/pan for geo
+- [ ] Performance for large data
+
+## 30. Executive Dashboard
+
+- **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**: 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
+- **Avoid for**: Detailed analyst dashboards, technical deep-dives, operational monitoring
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design an executive dashboard. Use: large KPI cards (4-6 max), trend sparklines, high-level summary only, clean layout with white space, traffic light indicators (red/yellow/green), at-a-glance insights, minimal detail.
+
+```css
+/* Executive Dashboard hints */
+display: flex for KPI row, large font-size (24-48px) for metrics, sparkline SVG inline, status indicators (border-left color), card shadows for hierarchy, responsive breakpoints
+```
+
+**Checklist**:
+- [ ] KPIs 4-6 maximum
+- [ ] Trends visible
+- [ ] Status colors clear
+- [ ] One-page view
+- [ ] Mobile simplified
+- [ ] Print-friendly layout
+
+## 31. Real-Time Monitoring
+
+- **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**: 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
+- **Avoid for**: Historical analysis, long-term trend reports, archived data dashboards
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Good (real-time load)
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a real-time monitoring dashboard. Use: live status indicators (pulsing), streaming charts, alert notifications, connection status, auto-refresh indicators, critical alerts prominent, system health overview.
+
+```css
+/* Real-Time Monitoring hints */
+animation: pulse for live, WebSocket for streaming, position: fixed for alerts, status-dot with animation, chart real-time updates, notification toast, connection indicator
+```
+
+**Checklist**:
+- [ ] Live updates working
+- [ ] Alert sounds optional
+- [ ] Connection status shown
+- [ ] Auto-refresh indicated
+- [ ] Critical alerts prominent
+- [ ] Offline fallback
+
+## 32. Drill-Down 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**: 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
+- **Avoid for**: Simple linear data, single-metric dashboards, streaming real-time dashboards
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Good
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a drill-down analytics dashboard. Use: breadcrumb navigation, expandable sections, summary-to-detail flow, back button prominent, level indicators, context preservation, hierarchical data display.
+
+```css
+/* Drill-Down Analytics hints */
+breadcrumb nav with separators, details/summary for expand, transition for drill animation, position: sticky breadcrumb, nested grid layouts, smooth scroll to detail
+```
+
+**Checklist**:
+- [ ] Breadcrumbs clear
+- [ ] Back navigation easy
+- [ ] Expand animation smooth
+- [ ] Context preserved
+- [ ] Mobile drill works
+- [ ] Deep links supported
+
+## 33. Comparative Analysis Dashboard
+
+- **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**: 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
+- **Avoid for**: Single metric dashboards, future projections (use forecasting), real-time only (no historical)
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a comparison dashboard. Use: side-by-side metrics, period selectors (vs last month), delta indicators (+/-), benchmark lines, A/B comparison tables, winning/losing highlights, percentage change badges.
+
+```css
+/* Comparative Analysis Dashboard hints */
+display: flex for side-by-side, gap for comparison spacing, color coding (green up, red down), arrow indicators, diff highlighting, comparison table zebra striping
+```
+
+**Checklist**:
+- [ ] Period selector works
+- [ ] Deltas calculated
+- [ ] Colors meaningful
+- [ ] Benchmarks shown
+- [ ] Mobile stacks properly
+- [ ] Export comparison
+
+## 34. Predictive 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**: 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
+- **Avoid for**: Historical-only dashboards, simple reporting, real-time operational dashboards
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Good (computation)
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a predictive analytics dashboard. Use: forecast lines (dashed), confidence intervals (shaded bands), trend projections, anomaly highlights, scenario toggles, AI insight cards, probability indicators.
+
+```css
+/* Predictive Analytics hints */
+stroke-dasharray for forecast lines, fill-opacity for confidence bands, anomaly markers (circles), tooltip for predictions, toggle switches for scenarios, gradient for probability
+```
+
+**Checklist**:
+- [ ] Forecast line distinct
+- [ ] Confidence bands visible
+- [ ] Anomalies highlighted
+- [ ] Scenarios switchable
+- [ ] Predictions dated
+- [ ] Accuracy shown
+
+## 35. User Behavior 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**: 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
+- **Avoid for**: Real-time operational metrics, technical system monitoring, financial transactions
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Good
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a user behavior analytics dashboard. Use: funnel visualization, user flow diagrams (Sankey), conversion metrics, engagement heatmaps, cohort tables, retention curves, session replay indicators.
+
+```css
+/* User Behavior Analytics hints */
+SVG funnel with gradients, Sankey diagram library, percentage labels, cohort grid cells, retention chart (line/area), click heatmap overlay, session timeline
+```
+
+**Checklist**:
+- [ ] Funnel stages clear
+- [ ] Flow diagram readable
+- [ ] Conversions calculated
+- [ ] Cohorts comparable
+- [ ] Retention trends visible
+- [ ] Privacy compliant
+
+## 36. Financial Dashboard
+
+- **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**: 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
+- **Avoid for**: Simple business dashboards, entertainment/social metrics, non-financial data
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a financial dashboard. Use: revenue/expense charts, profit margins, budget vs actual, cash flow waterfall, financial ratios, audit trail table, currency formatting, period comparisons.
+
+```css
+/* Financial Dashboard hints */
+number formatting (Intl.NumberFormat), waterfall chart (positive/negative bars), variance coloring, table with totals row, sparkline for trends, sticky column headers
+```
+
+**Checklist**:
+- [ ] Currency formatted
+- [ ] Decimals consistent
+- [ ] P&L clear
+- [ ] Budget variance shown
+- [ ] Audit trail complete
+- [ ] Export to Excel
+
+## 37. Sales Intelligence Dashboard
+
+- **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**: 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
+- **Avoid for**: Marketing analytics, customer support metrics, HR dashboards
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Good
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design a sales intelligence dashboard. Use: pipeline funnel, deal cards (kanban), quota gauges, leaderboard table, territory map, win/loss ratios, forecast accuracy, activity timeline.
+
+```css
+/* Sales Intelligence Dashboard hints */
+kanban columns (flex), gauge chart (SVG arc), leaderboard ranking styles, map integration (Mapbox/Google), timeline vertical, deal card with status border
+```
+
+**Checklist**:
+- [ ] Pipeline stages shown
+- [ ] Deals draggable
+- [ ] Quotas visualized
+- [ ] Rankings updated
+- [ ] Territory clickable
+- [ ] CRM integration
+
+## 38. Neubrutalism
+
+- **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**: 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
+- **Avoid for**: Luxury brands, finance, healthcare, conservative industries (too playful)
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 2020s Modern
+- **Complexity**: Low
+
+**AI prompt**: Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard shadows (offset 4px 4px), raw aesthetic but functional.
+
+```css
+/* Neubrutalism hints */
+border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients
+```
+
+**Checklist**:
+- [ ] Hard borders (2-4px)
+- [ ] Hard offset shadows
+- [ ] High saturation colors
+- [ ] Bold typography
+- [ ] No blurs/gradients
+- [ ] Distinctive 'ugly-cute' look
+
+## 39. Bento Box Grid
+
+- **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**: 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
+- **Avoid for**: Dense data tables, text-heavy content, real-time monitoring
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Apple
+- **Complexity**: Low
+
+**AI prompt**: Design a Bento Box grid layout. Use: modular cards with varied sizes (1x1, 2x1, 2x2), Apple-style aesthetic, rounded corners (16-24px), soft shadows, clean hierarchy, asymmetric grid, neutral backgrounds (#F5F5F7), hover effects.
+
+```css
+/* Bento Box Grid hints */
+display: grid, grid-template-columns: repeat(4, 1fr), grid-auto-rows: 200px, gap: 16px, border-radius: 24px, background: #FFFFFF, box-shadow: 0 4px 6px rgba(0,0,0,0.05)
+```
+
+**Checklist**:
+- [ ] Grid responsive (4→2→1 cols)
+- [ ] Card spans varied
+- [ ] Rounded corners consistent
+- [ ] Shadows subtle
+- [ ] Content fits cards
+- [ ] Hover scale (1.02)
+
+## 40. Y2K Aesthetic
+
+- **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**: 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
+- **Avoid for**: B2B enterprise, healthcare, finance, conservative industries, elderly users
+- **Light mode**: ✓ Full
+- **Dark mode**: ◐ Partial
+- **Performance**: ⚠ Good
+- **Accessibility**: ⚠ Check contrast
+- **Era**: Y2K 2000s
+- **Complexity**: Medium
+
+**AI prompt**: Design a Y2K aesthetic interface. Use: neon pink/cyan colors, chrome/metallic textures, bubblegum gradients, glossy buttons, iridescent effects, 2000s futurism, star/sparkle decorations, bubble shapes, tech-optimistic vibe.
+
+```css
+/* Y2K Aesthetic hints */
+background: linear-gradient(135deg, #FF69B4, #00FFFF), filter: drop-shadow for glow, border-radius: 50% for bubbles, metallic gradients (silver/chrome), text-shadow: neon glow, ::before for sparkles
+```
+
+**Checklist**:
+- [ ] Neon colors balanced
+- [ ] Chrome effects visible
+- [ ] Glossy buttons styled
+- [ ] Bubble shapes decorative
+- [ ] Sparkle animations
+- [ ] Retro fonts loaded
+
+## 41. Cyberpunk UI
+
+- **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**: 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
+- **Avoid for**: Corporate enterprise, healthcare, family apps, conservative brands, elderly users
+- **Light mode**: ✗ No
+- **Dark mode**: ✓ Only
+- **Performance**: ⚠ Moderate
+- **Accessibility**: ⚠ Limited (dark+neon)
+- **Era**: 2020s Cyberpunk
+- **Complexity**: Medium
+
+**AI prompt**: Design a cyberpunk interface. Use: neon colors on dark (#0D0D0D), terminal/HUD aesthetic, glitch effects, scanlines overlay, matrix green accents, monospace fonts, angular shapes, dystopian tech feel.
+
+```css
+/* Cyberpunk UI hints */
+background: #0D0D0D, color: #00FF00 or #FF00FF, font-family: monospace, text-shadow: 0 0 10px neon, animation: glitch (transform skew), ::before scanlines (repeating-linear-gradient)
+```
+
+**Checklist**:
+- [ ] Dark background only
+- [ ] Neon accents visible
+- [ ] Glitch effect subtle
+- [ ] Scanlines optional
+- [ ] Monospace font
+- [ ] Terminal aesthetic
+
+## 42. Organic Biophilic
+
+- **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**: 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
+- **Avoid for**: Tech-focused products, gaming, industrial, urban brands
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Sustainable
+- **Complexity**: Low
+
+**AI prompt**: Design a biophilic organic interface. Use: nature-inspired colors (greens, browns), organic curved shapes, rounded corners (16-24px), natural textures (wood, stone), flowing SVG elements, wellness aesthetic, earthy palette.
+
+```css
+/* Organic Biophilic hints */
+border-radius: 16-24px (varied), background: earth tones, SVG organic shapes (blob), box-shadow: natural soft, color: #228B22 #8B4513 #87CEEB, texture overlays (subtle)
+```
+
+**Checklist**:
+- [ ] Earth tones dominant
+- [ ] Organic curves present
+- [ ] Natural textures subtle
+- [ ] Green accents
+- [ ] Rounded everywhere
+- [ ] Calming feel
+
+## 43. AI-Native UI
+
+- **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**: 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
+- **Avoid for**: Traditional forms, data-heavy dashboards, print-first content
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s AI-Era
+- **Complexity**: Low
+
+**AI prompt**: Design an AI-native interface. Use: minimal chrome, conversational layout, streaming text area, typing indicators (3-dot pulse), context cards, subtle AI accent color (#6366F1), clean input field, response bubbles.
+
+```css
+/* AI-Native UI hints */
+chat bubble layout (flex-direction: column), typing animation (3 dots pulse), streaming text (overflow: hidden + animation), input: sticky bottom, context cards (border-left accent), minimal borders
+```
+
+**Checklist**:
+- [ ] Chat layout responsive
+- [ ] Typing indicator smooth
+- [ ] Input always visible
+- [ ] Context cards styled
+- [ ] AI responses distinct
+- [ ] User messages aligned right
+
+## 44. Memphis Design
+
+- **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**: 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
+- **Avoid for**: Corporate finance, healthcare, legal, elderly users, conservative brands
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ⚠ Check contrast
+- **Era**: 1980s Postmodern
+- **Complexity**: Medium
+
+**AI prompt**: Design a Memphis style interface. Use: bold geometric shapes (triangles, squiggles, circles), bright clashing colors, 80s postmodern aesthetic, playful patterns, dotted textures, asymmetric layouts, decorative elements.
+
+```css
+/* Memphis Design hints */
+clip-path: polygon() for shapes, background: repeating patterns, transform: rotate() for tilted elements, mix-blend-mode for overlays, border: dashed/dotted patterns, bold sans-serif
+```
+
+**Checklist**:
+- [ ] Geometric shapes visible
+- [ ] Colors bold/clashing
+- [ ] Patterns present
+- [ ] Layout asymmetric
+- [ ] Playful decorations
+- [ ] 80s vibe achieved
+
+## 45. Vaporwave
+
+- **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**: 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
+- **Avoid for**: Business apps, e-commerce, education, healthcare, enterprise software
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Dark focused
+- **Performance**: ⚠ Moderate
+- **Accessibility**: ⚠ Poor (motion)
+- **Era**: 1980s-90s Retro
+- **Complexity**: Medium
+
+**AI prompt**: Design a vaporwave aesthetic interface. Use: sunset gradients (pink/cyan/purple), 80s-90s nostalgia, glitch effects, Greek statue imagery, palm trees, grid patterns, neon glow, retro-futuristic feel, dreamy atmosphere.
+
+```css
+/* Vaporwave hints */
+background: linear-gradient(180deg, #FF71CE, #01CDFE, #B967FF), filter: hue-rotate(), text-shadow: neon glow, retro grid (perspective + linear-gradient), VHS scanlines
+```
+
+**Checklist**:
+- [ ] Sunset gradient present
+- [ ] Neon glow applied
+- [ ] Retro grid visible
+- [ ] Glitch effects subtle
+- [ ] Dreamy atmosphere
+- [ ] 80s-90s aesthetic
+
+## 46. Dimensional Layering
+
+- **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**: z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax
+- **Best for**: Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces
+- **Avoid for**: Print-style layouts, simple blogs, low-end devices, flat design requirements
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Good
+- **Accessibility**: ⚠ Moderate (SR issues)
+- **Era**: 2020s Modern
+- **Complexity**: Medium
+
+**AI prompt**: Design with dimensional layering. Use: z-index depth (multiple layers), overlapping cards, elevation shadows (4 levels), floating elements, parallax depth, backdrop blur for hierarchy, spatial UI feel.
+
+```css
+/* Dimensional Layering hints */
+z-index: 1-4 levels, box-shadow: elevation scale (sm/md/lg/xl), transform: translateZ(), backdrop-filter: blur(), position: relative for stacking, parallax on scroll
+```
+
+**Checklist**:
+- [ ] Layers clearly defined
+- [ ] Shadows show depth
+- [ ] Overlaps intentional
+- [ ] Hierarchy clear
+- [ ] Performance optimized
+- [ ] Mobile depth maintained
+
+## 47. Exaggerated Minimalism
+
+- **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**: 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
+- **Avoid for**: E-commerce catalogs, dashboards, forms, data-heavy, elderly users, complex apps
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Modern
+- **Complexity**: Low
+
+**AI prompt**: Design with exaggerated minimalism. Use: oversized typography (clamp 3rem-12rem), extreme negative space, black/white primary, single accent color only, bold statements, minimal elements, dramatic contrast.
+
+```css
+/* Exaggerated Minimalism hints */
+font-size: clamp(3rem, 10vw, 12rem), font-weight: 900, letter-spacing: -0.05em, color: #000 or #FFF, padding: 8rem+, single accent, no decorations
+```
+
+**Checklist**:
+- [ ] Typography oversized
+- [ ] White space extreme
+- [ ] Black/white dominant
+- [ ] Single accent only
+- [ ] Elements minimal
+- [ ] Statement clear
+
+## 48. Kinetic Typography
+
+- **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**: @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
+- **Avoid for**: Long-form content, accessibility-critical, data interfaces, forms, elderly users
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Moderate
+- **Accessibility**: ❌ Poor (motion)
+- **Era**: 2020s Modern
+- **Complexity**: High
+
+**AI prompt**: Design with kinetic typography. Use: animated text, scroll-triggered reveals, typing effects, letter-by-letter animations, morphing text, gradient text fills, oversized hero text, text as the main visual element.
+
+```css
+/* Kinetic Typography hints */
+@keyframes for text animation, background-clip: text, GSAP SplitText, typing effect (steps()), transform on letters, scroll-triggered (Intersection Observer), variable fonts for morphing
+```
+
+**Checklist**:
+- [ ] Text animations smooth
+- [ ] Prefers-reduced-motion respected
+- [ ] Fallback for no-JS
+- [ ] Mobile performance ok
+- [ ] Typing effect timed
+- [ ] Scroll triggers work
+
+## 49. Parallax Storytelling
+
+- **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**: transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations
+- **Best for**: Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns
+- **Avoid for**: E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ❌ Poor
+- **Accessibility**: ❌ Poor (motion)
+- **Era**: 2020s Modern
+- **Complexity**: High
+
+**AI prompt**: Design a parallax storytelling page. Use: scroll-driven narrative, layered backgrounds (3-5 layers), fixed/sticky sections, cinematic transitions, progressive disclosure, full-screen chapters, depth perception.
+
+```css
+/* Parallax Storytelling hints */
+position: fixed/sticky, transform: translateY(calc()), perspective: 1px, z-index layering, scroll-snap-type, Intersection Observer for triggers, will-change: transform
+```
+
+**Checklist**:
+- [ ] Layers parallax smoothly
+- [ ] Story flows naturally
+- [ ] Mobile alternative provided
+- [ ] Performance optimized
+- [ ] Skip option available
+- [ ] Reduced motion fallback
+
+## 50. Swiss Modernism 2.0
+
+- **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**: 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
+- **Avoid for**: Playful brands, children's sites, entertainment, gaming, emotional storytelling
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 1950s Swiss + 2020s
+- **Complexity**: Low
+
+**AI prompt**: Design with Swiss Modernism 2.0. Use: strict grid system (12 columns), Helvetica/Inter fonts, mathematical spacing, asymmetric balance, high contrast, minimal decoration, clean hierarchy, single accent color.
+
+```css
+/* Swiss Modernism 2.0 hints */
+display: grid, grid-template-columns: repeat(12, 1fr), gap: 1rem (8px base unit), font-family: Inter/Helvetica, font-weight: 400-700, color: #000/#FFF, single accent
+```
+
+**Checklist**:
+- [ ] 12-column grid strict
+- [ ] Spacing mathematical
+- [ ] Typography hierarchy clear
+- [ ] Single accent only
+- [ ] No decorations
+- [ ] High contrast verified
+
+## 51. HUD / Sci-Fi FUI
+
+- **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**: Glow effects, scanning animations, ticker text, blinking markers, fine line drawing
+- **Best for**: Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards
+- **Avoid for**: Standard corporate, reading heavy content, accessible public services
+- **Light mode**: ✓ Low
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Moderate (renders)
+- **Accessibility**: ⚠ Poor (thin lines)
+- **Era**: 2010s Sci-Fi
+- **Complexity**: High
+
+**AI prompt**: Design a futuristic HUD (Heads Up Display) or FUI. Use: thin lines (1px), neon cyan/blue on black, technical markers, decorative brackets, data visualization, monospaced tech fonts, glowing elements, transparency.
+
+```css
+/* HUD / Sci-Fi FUI hints */
+border: 1px solid rgba(0,255,255,0.5), color: #00FFFF, background: transparent or rgba(0,0,0,0.8), font-family: monospace, text-shadow: 0 0 5px cyan
+```
+
+**Checklist**:
+- [ ] Fine lines 1px
+- [ ] Neon glow text/borders
+- [ ] Monospaced font
+- [ ] Dark/Transparent BG
+- [ ] Decorative tech markers
+- [ ] Holographic feel
+
+## 52. Pixel Art
+
+- **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**: Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text
+- **Best for**: Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT
+- **Avoid for**: Professional corporate, modern SaaS, high-res photography sites
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ Good (if contrast ok)
+- **Era**: 1980s Arcade
+- **Complexity**: Medium
+
+**AI prompt**: Design a pixel art inspired interface. Use: pixelated fonts, 8-bit or 16-bit aesthetic, sharp edges (image-rendering: pixelated), limited color palette, blocky UI elements, retro gaming feel.
+
+```css
+/* Pixel Art hints */
+font-family: 'Press Start 2P', image-rendering: pixelated, box-shadow: 4px 0 0 #000 (pixel border), no anti-aliasing
+```
+
+**Checklist**:
+- [ ] Pixelated fonts loaded
+- [ ] Images sharp (no blur)
+- [ ] CSS box-shadow for pixel borders
+- [ ] Retro palette
+- [ ] Blocky layout
+
+## 53. Bento Grids
+
+- **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**: Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal
+- **Best for**: Product features, dashboards, personal sites, marketing summaries, galleries
+- **Avoid for**: Long-form reading, data tables, complex forms
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s Apple/Linear
+- **Complexity**: Low
+
+**AI prompt**: Design a Bento Grid layout. Use: modular grid system, rounded corners (16-24px), different card sizes (1x1, 2x1, 2x2), card-based hierarchy, soft backgrounds (#F5F5F7), subtle borders, content-first, Apple-style aesthetic.
+
+```css
+/* Bento Grids hints */
+display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle
+```
+
+**Checklist**:
+- [ ] Grid layout (CSS Grid)
+- [ ] Rounded corners 16-24px
+- [ ] Varied card spans
+- [ ] Content fits card size
+- [ ] Responsive re-flow
+- [ ] Apple-like aesthetic
+
+## 55. Spatial UI (VisionOS)
+
+- **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**: Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus
+- **Best for**: Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards
+- **Avoid for**: Text-heavy documents, high-contrast requirements, non-3D capable devices
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Moderate (blur cost)
+- **Accessibility**: ⚠ Contrast risks
+- **Era**: 2024 Spatial Era
+- **Complexity**: High
+
+**AI prompt**: Design a VisionOS-style spatial interface. Use: frosted glass panels, depth layers, translucent backgrounds (15-30% opacity), vibrant colors for active states, gaze-hover effects, floating windows, immersive feel.
+
+```css
+/* Spatial UI (VisionOS) hints */
+backdrop-filter: blur(40px) saturate(180%), background: rgba(255,255,255,0.2), border-radius: 24px, box-shadow: 0 8px 32px rgba(0,0,0,0.1), transform: scale on focus, depth via shadows
+```
+
+**Checklist**:
+- [ ] Glass effect visible
+- [ ] Depth layers clear
+- [ ] Hover states defined
+- [ ] Colors vibrant on active
+- [ ] Floating feel achieved
+- [ ] Contrast maintained
+
+## 56. E-Ink / Paper
+
+- **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**: 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
+- **Avoid for**: Gaming, video platforms, high-energy marketing, dark mode dependent apps
+- **Light mode**: ✓ Full
+- **Dark mode**: ✗ Low (inverted only)
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 2020s Digital Well-being
+- **Complexity**: Low
+
+**AI prompt**: Design an e-ink/paper style interface. Use: high contrast black on off-white, paper texture, no animations (instant transitions), reading-focused, minimal UI chrome, distraction-free, calm aesthetic, monochrome.
+
+```css
+/* E-Ink / Paper hints */
+background: #FDFBF7 (paper white), color: #1A1A1A, transition: none, font-family: serif for reading, no gradients, border: 1px solid #E0E0E0, texture overlay (noise)
+```
+
+**Checklist**:
+- [ ] Paper background color
+- [ ] High contrast text
+- [ ] No animations
+- [ ] Reading optimized
+- [ ] Distraction-free
+- [ ] Print-friendly
+
+## 57. Gen Z Chaos / Maximalism
+
+- **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**: 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
+- **Avoid for**: Corporate, government, healthcare, banking, serious tools
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Poor (heavy assets)
+- **Accessibility**: ❌ Poor
+- **Era**: 2023+ Internet Core
+- **Complexity**: High
+
+**AI prompt**: Design a Gen Z chaos maximalist interface. Use: clashing bright colors, sticker overlays, collage aesthetic, raw/unpolished feel, mixed media, ironic elements, loud typography, GIF-heavy, internet culture references.
+
+```css
+/* Gen Z Chaos / Maximalism hints */
+mix-blend-mode: multiply/screen, transform: rotate(random), animation: jitter, marquee text, position: absolute for scattered elements, filter: saturate(150%), z-index chaos
+```
+
+**Checklist**:
+- [ ] Colors clash intentionally
+- [ ] Stickers/overlays present
+- [ ] Layout chaotic but usable
+- [ ] GIFs optimized
+- [ ] Mobile scrollable
+- [ ] Performance acceptable
+
+## 58. Biomimetic / Organic 2.0
+
+- **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**: Breathing animations, fluid morphing, generative growth, physics-based movement
+- **Best for**: Sustainability tech, biotech, advanced health, meditation, generative art platforms
+- **Avoid for**: Standard SaaS, data grids, strict corporate, accounting
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Moderate
+- **Accessibility**: ✓ Good
+- **Era**: 2024+ Generative
+- **Complexity**: High
+
+**AI prompt**: Design a biomimetic organic interface. Use: cellular/fluid shapes, breathing animations, generative patterns, bioluminescent colors, physics-based movement, nature algorithms, life-like elements, flowing gradients.
+
+```css
+/* Biomimetic / Organic 2.0 hints */
+SVG morphing (SMIL or GSAP), canvas for generative, animation: breathing (scale pulse), filter: blur for organic, clip-path for cellular, WebGL for advanced, physics libraries
+```
+
+**Checklist**:
+- [ ] Organic shapes present
+- [ ] Animations feel alive
+- [ ] Generative elements
+- [ ] Performance monitored
+- [ ] Mobile fallback
+- [ ] Accessibility alt content
+
+## 59. Anti-Polish / Raw Aesthetic
+
+- **Keywords**: Hand-drawn, collage, scanned textures, unfinished, imperfect, authentic, human, sketch, raw marks, creative process
+- **Primary colors**: Paper White #FAFAF8, Pencil Grey #4A4A4A, Marker Black #1A1A1A, Kraft Brown #C4A77D
+- **Secondary colors**: Watercolor washes, pencil shading, ink splatters, tape textures, aged paper tones
+- **Effects**: No smooth transitions, hand-drawn animations, paper texture overlays, jitter effects, sketch reveal
+- **Best for**: Creative portfolios, artist sites, indie brands, handmade products, authentic storytelling, editorial
+- **Avoid for**: Corporate enterprise, fintech, healthcare, government, polished SaaS
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2025+ Anti-Digital
+- **Complexity**: Low
+
+**AI prompt**: Design with anti-polish raw aesthetic. Use: hand-drawn elements, scanned textures, unfinished look, paper/pencil textures, collage style, authentic imperfection, sketch marks, tape/sticker overlays, human touch.
+
+```css
+/* Anti-Polish / Raw Aesthetic hints */
+background: url(paper-texture.png), filter: grayscale() contrast(), border: hand-drawn SVG, transform: rotate(small random), no smooth transitions, sketch-style fonts, opacity variations
+```
+
+**Checklist**:
+- [ ] Textures loaded
+- [ ] Hand-drawn elements present
+- [ ] Imperfections intentional
+- [ ] Authentic feel achieved
+- [ ] Performance ok with textures
+- [ ] Accessibility maintained
+
+## 60. Tactile Digital / Deformable UI
+
+- **Keywords**: Jelly buttons, chrome, clay, squishy, deformable, bouncy, physical, tactile feedback, press response
+- **Primary colors**: Gradient metallics, Chrome Silver #C0C0C0, Jelly Pink #FF9ECD, Soft Blue #87CEEB
+- **Secondary colors**: Glossy highlights, shadow depth, reflection effects, material-specific colors
+- **Effects**: Press deformation (scale + squish), bounce-back (cubic-bezier), material response, haptic-like feedback, spring physics
+- **Best for**: Modern mobile apps, playful brands, entertainment, gaming UI, consumer products, interactive demos
+- **Avoid for**: Enterprise software, data dashboards, accessibility-critical, professional tools
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Good
+- **Accessibility**: ⚠ Motion sensitive
+- **Era**: 2025+ Tactile Era
+- **Complexity**: Medium
+
+**AI prompt**: Design a tactile deformable interface. Use: jelly/squishy buttons, press deformation effect, bounce-back animations, chrome/clay materials, spring physics, haptic-like feedback, material response, 3D depth on interaction.
+
+```css
+/* Tactile Digital / Deformable UI hints */
+transform: scale(0.95) on active, animation: bounce (cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow: inset for press, filter: brightness on press, spring physics (react-spring/framer-motion)
+```
+
+**Checklist**:
+- [ ] Press effect visible
+- [ ] Bounce-back smooth
+- [ ] Material feels tactile
+- [ ] Spring physics tuned
+- [ ] Mobile touch responsive
+- [ ] Reduced motion option
+
+## 61. Nature Distilled
+
+- **Keywords**: Muted earthy, skin tones, wood, soil, sand, terracotta, warmth, organic materials, handmade warmth
+- **Primary colors**: Terracotta #C67B5C, Sand Beige #D4C4A8, Warm Clay #B5651D, Soft Cream #F5F0E1
+- **Secondary colors**: Earth Brown #8B4513, Olive Green #6B7B3C, Warm Stone #9C8B7A, muted gradients
+- **Effects**: Subtle parallax, natural easing (ease-out), texture overlays, grain effects, soft shadows
+- **Best for**: Wellness brands, sustainable products, artisan goods, organic food, spa/beauty, home decor
+- **Avoid for**: Tech startups, gaming, nightlife, corporate finance, high-energy brands
+- **Light mode**: ✓ Full
+- **Dark mode**: ◐ Partial
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2025+ Handmade Warmth
+- **Complexity**: Low
+
+**AI prompt**: Design with nature distilled aesthetic. Use: muted earthy colors (terracotta, sand, olive), organic materials feel, warm tones, handmade warmth, natural textures, artisan quality, sustainable vibe, soft gradients.
+
+```css
+/* Nature Distilled hints */
+background: warm earth tones, color: #C67B5C #D4C4A8 #6B7B3C, border-radius: organic (varied), box-shadow: soft natural, texture overlays (grain), font: humanist sans-serif
+```
+
+**Checklist**:
+- [ ] Earth tones dominant
+- [ ] Warm feel achieved
+- [ ] Textures subtle
+- [ ] Handmade quality
+- [ ] Sustainable messaging
+- [ ] Calming aesthetic
+
+## 62. Interactive Cursor Design
+
+- **Keywords**: Custom cursor, cursor as tool, hover effects, cursor feedback, pointer transformation, cursor trail, magnetic cursor
+- **Primary colors**: Brand-dependent, cursor accent color, high contrast for visibility
+- **Secondary colors**: Trail colors, hover state colors, magnetic zone indicators, feedback colors
+- **Effects**: Cursor scale on hover, magnetic pull to elements, cursor morphing, trail effects, blend mode cursors, click feedback
+- **Best for**: Creative portfolios, interactive experiences, agency sites, product showcases, gaming, entertainment
+- **Avoid for**: Mobile-first (no cursor), accessibility-critical, data-heavy dashboards, forms
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Good
+- **Accessibility**: ⚠ Not for touch/SR
+- **Era**: 2025+ Interactive
+- **Complexity**: Medium
+
+**AI prompt**: Design with interactive cursor effects. Use: custom cursor, cursor morphing on hover, magnetic cursor pull, cursor trails, blend mode cursors, click feedback animations, cursor as interaction tool, pointer transformation.
+
+```css
+/* Interactive Cursor Design hints */
+cursor: none (custom), position: fixed for cursor element, mix-blend-mode: difference, transform on hover targets, magnetic effect (JS position lerp), trail with opacity fade, scale on click
+```
+
+**Checklist**:
+- [ ] Custom cursor works
+- [ ] Hover morph smooth
+- [ ] Magnetic pull subtle
+- [ ] Trail performance ok
+- [ ] Click feedback visible
+- [ ] Touch fallback provided
+
+## 63. Voice-First Multimodal
+
+- **Keywords**: Voice UI, multimodal, audio feedback, conversational, hands-free, ambient, contextual, speech recognition
+- **Primary colors**: Calm neutrals: Soft White #FAFAFA, Muted Blue #6B8FAF, Gentle Purple #9B8FBB
+- **Secondary colors**: Audio waveform colors, status indicators (listening/processing/speaking), success/error tones
+- **Effects**: Voice waveform visualization, listening pulse, processing spinner, speak animation, smooth transitions
+- **Best for**: Voice assistants, accessibility apps, hands-free tools, smart home, automotive UI, cooking apps
+- **Avoid for**: Visual-heavy content, data entry, complex forms, noisy environments
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ Excellent
+- **Era**: 2025+ Voice Era
+- **Complexity**: Medium
+
+**AI prompt**: Design a voice-first multimodal interface. Use: voice waveform visualization, listening state indicator, speaking animation, minimal visible UI, audio feedback cues, hands-free optimized, conversational flow, ambient design.
+
+```css
+/* Voice-First Multimodal hints */
+Web Speech API integration, canvas for waveform, animation: pulse for listening, status indicators (color change), audio visualization (Web Audio API), minimal chrome, large touch targets
+```
+
+**Checklist**:
+- [ ] Voice recognition works
+- [ ] Visual feedback clear
+- [ ] Listening state obvious
+- [ ] Speaking animation smooth
+- [ ] Fallback UI provided
+- [ ] Accessibility excellent
+
+## 64. 3D Product Preview
+
+- **Keywords**: 360 product view, rotatable, zoomable, touch-to-spin, AR preview, product configurator, interactive 3D model
+- **Primary colors**: Product-dependent, neutral backgrounds: Soft Grey #E8E8E8, Pure White #FFFFFF
+- **Secondary colors**: Shadow gradients, reflection planes, environment lighting colors, accent highlights
+- **Effects**: Drag-to-rotate, pinch-to-zoom, spin animation, AR placement, material switching, smooth orbit controls
+- **Best for**: E-commerce, furniture, fashion, automotive, electronics, jewelry, product configurators
+- **Avoid for**: Content-heavy sites, blogs, dashboards, low-bandwidth, accessibility-critical
+- **Light mode**: ◐ Partial
+- **Dark mode**: ◐ Partial
+- **Performance**: ❌ Poor (3D rendering)
+- **Accessibility**: ⚠ Alt content needed
+- **Era**: 2025+ E-commerce 3D
+- **Complexity**: High
+
+**AI prompt**: Design a 3D product preview interface. Use: 360° rotation, drag-to-spin, pinch-to-zoom, AR preview button, material/color switcher, hotspot annotations, orbit controls, product configurator, smooth rendering.
+
+```css
+/* 3D Product Preview hints */
+Three.js or model-viewer, OrbitControls, touch events for rotation, WebXR for AR, canvas with WebGL, loading placeholder, LOD for performance, environment lighting
+```
+
+**Checklist**:
+- [ ] 3D model loads fast
+- [ ] Rotation smooth
+- [ ] Zoom works (pinch/scroll)
+- [ ] AR button functional
+- [ ] Colors switchable
+- [ ] Mobile touch works
+
+## 65. Gradient Mesh / Aurora Evolved
+
+- **Keywords**: Complex gradients, mesh gradients, multi-color blend, aurora effect, flowing colors, iridescent, holographic, prismatic
+- **Primary colors**: Multi-stop gradients: Cyan #00FFFF, Magenta #FF00FF, Yellow #FFFF00, Blue #0066FF, Green #00FF66
+- **Secondary colors**: Complementary mesh points, smooth color transitions, iridescent overlays, chromatic shifts
+- **Effects**: CSS mesh-gradient (experimental), SVG gradients, canvas gradients, smooth color morphing, flowing animation
+- **Best for**: Hero sections, backgrounds, creative brands, music platforms, fashion, lifestyle, premium products
+- **Avoid for**: Data interfaces, text-heavy content, accessibility-critical, conservative brands
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Good
+- **Accessibility**: ⚠ Text contrast
+- **Era**: 2025+ Gradient Evolution
+- **Complexity**: Medium
+
+**AI prompt**: Design with gradient mesh aurora effect. Use: multi-color mesh gradients, flowing color transitions, aurora/northern lights feel, iridescent overlays, holographic shimmer, prismatic effects, smooth color morphing.
+
+```css
+/* Gradient Mesh / Aurora Evolved hints */
+background: conic-gradient or mesh (SVG), animation: gradient flow (background-position), filter: hue-rotate for shimmer, mix-blend-mode: screen, canvas for complex mesh, multiple gradient layers
+```
+
+**Checklist**:
+- [ ] Mesh gradient visible
+- [ ] Colors flow smoothly
+- [ ] Aurora effect achieved
+- [ ] Performance acceptable
+- [ ] Text remains readable
+- [ ] Mobile renders ok
+
+## 66. Editorial Grid / Magazine
+
+- **Keywords**: Magazine layout, asymmetric grid, editorial typography, pull quotes, drop caps, column layout, print-inspired
+- **Primary colors**: High contrast: Black #000000, White #FFFFFF, accent brand color
+- **Secondary colors**: Muted supporting, pull quote highlights, byline colors, section dividers
+- **Effects**: Smooth scroll, reveal on scroll, parallax images, text animations, page-flip transitions
+- **Best for**: News sites, blogs, magazines, editorial content, long-form articles, journalism, publishing
+- **Avoid for**: Dashboards, apps, e-commerce catalogs, real-time data, short-form content
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA
+- **Era**: 2020s Editorial Digital
+- **Complexity**: Low
+
+**AI prompt**: Design an editorial magazine layout. Use: asymmetric grid, pull quotes, drop caps, multi-column text, large imagery, bylines, section dividers, print-inspired typography, article hierarchy, white space balance.
+
+```css
+/* Editorial Grid / Magazine hints */
+display: grid with named areas, column-count for text, ::first-letter for drop caps, blockquote styling, figure/figcaption, gap variations, font: serif for body, variable widths
+```
+
+**Checklist**:
+- [ ] Grid asymmetric
+- [ ] Typography editorial
+- [ ] Pull quotes styled
+- [ ] Drop caps present
+- [ ] Images large/impactful
+- [ ] Mobile reflows well
+
+## 67. Chromatic Aberration / RGB Split
+
+- **Keywords**: RGB split, color fringing, glitch, retro tech, VHS, analog error, distortion, lens effect
+- **Primary colors**: Offset RGB: Red #FF0000, Green #00FF00, Blue #0000FF, Black #000000
+- **Secondary colors**: Neon accents, scan lines, noise overlays, error colors
+- **Effects**: RGB offset animation, glitch timing, scan line movement, noise flicker, distortion on hover
+- **Best for**: Music platforms, gaming, tech brands, creative portfolios, nightlife, entertainment, video platforms
+- **Avoid for**: Corporate, healthcare, finance, accessibility-critical, elderly users
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Dark preferred
+- **Performance**: ⚠ Good
+- **Accessibility**: ⚠ Can cause strain
+- **Era**: 2020s Retro-Tech
+- **Complexity**: Medium
+
+**AI prompt**: Design with chromatic aberration RGB split effect. Use: color channel offset (R/G/B), glitch aesthetic, retro tech feel, VHS error look, lens distortion, scan lines, noise overlay, analog imperfection.
+
+```css
+/* Chromatic Aberration / RGB Split hints */
+filter: drop-shadow with offset colors, text-shadow: RGB offset (-2px 0 red, 2px 0 cyan), animation: glitch (random offset), ::before for scanlines, mix-blend-mode: screen for overlays
+```
+
+**Checklist**:
+- [ ] RGB split visible
+- [ ] Glitch effect controlled
+- [ ] Scan lines subtle
+- [ ] Performance ok
+- [ ] Readability maintained
+- [ ] Reduced motion option
+
+## 68. Vintage Analog / Retro Film
+
+- **Keywords**: Film grain, VHS, cassette tape, polaroid, analog warmth, faded colors, light leaks, vintage photography
+- **Primary colors**: Faded Cream #F5E6C8, Warm Sepia #D4A574, Muted Teal #4A7B7C, Soft Pink #E8B4B8
+- **Secondary colors**: Grain overlays, light leak oranges, shadow blues, vintage paper tones, desaturated accents
+- **Effects**: Film grain overlay, VHS tracking effect, polaroid shake, fade-in transitions, light leak animations
+- **Best for**: Photography portfolios, music/vinyl brands, vintage fashion, nostalgia marketing, film industry, cafes
+- **Avoid for**: Modern tech, SaaS, healthcare, children's apps, corporate enterprise
+- **Light mode**: ✓ Full
+- **Dark mode**: ◐ Partial
+- **Performance**: ⚡ Good
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 1970s-90s Analog Revival
+- **Complexity**: Medium
+
+**AI prompt**: Design with vintage analog film aesthetic. Use: film grain overlay, faded/desaturated colors, warm sepia tones, light leaks, VHS tracking effect, polaroid frame, analog warmth, nostalgic photography feel.
+
+```css
+/* Vintage Analog / Retro Film hints */
+filter: sepia() contrast() saturate(0.8), background: noise texture overlay, animation: VHS tracking (transform skew), light leak gradient overlay, border for polaroid frame, grain via SVG filter
+```
+
+**Checklist**:
+- [ ] Film grain visible
+- [ ] Colors faded/warm
+- [ ] Light leaks present
+- [ ] Nostalgic feel achieved
+- [ ] Performance with filters
+- [ ] Images look vintage
+
+## 69. Bauhaus (包豪斯)
+
+- **Keywords**: bauhaus, geometric, constructivist, primary colors, hard shadow, bold, tactile, functional, poster, mechanical, architectural
+- **Primary colors**: Primary Red #D02020, Primary Blue #1040C0, Primary Yellow #F0C020
+- **Secondary colors**: Background #F0F0F0 (Off-white), Foreground #121212 (Stark Black), Muted #E0E0E0
+- **Effects**: Hard offset shadows (4px 4px 0px black), mechanical press active:translate, no smooth hover — instant 0ms transitions, dot grid pattern on sections, slide-over transitions
+- **Best for**: Mobile-first apps needing high personality, onboarding flows, branding-forward product screens, artisan/design brands, editorial mobile experiences
+- **Avoid for**: Enterprise dashboards, accessibility-critical contexts (requires extra a11y work), data-heavy screens, conservative industries
+- **Light mode**: ✓ Full
+- **Dark mode**: ◐ Partial (primary palette only)
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ⚠ WCAG AA (high contrast primaries; verify yellow text separately)
+- **Era**: 1919 Bauhaus Movement
+- **Complexity**: Medium
+
+**AI prompt**: Design a Bauhaus mobile app. Use strict geometric shapes (circles and squares only), primary color blocking (Red #D02020, Blue #1040C0, Yellow #F0C020), hard 4px offset black shadows, OFF-WHITE canvas (#F0F0F0), massive bold uppercase headlines (Outfit Black 900), rectangular full-width buttons with mechanical press animation. No gradients. No rounded cards. No soft transitions.
+
+```css
+/* Bauhaus (包豪斯) hints */
+border-radius: 0px (cards/inputs) or 9999px (buttons/FAB), box-shadow: 4px 4px 0px 0px #121212, active:translate-x-[2px] active:translate-y-[2px] active:shadow-none, border: 2px solid #121212, font-family: Outfit, font-weight: 900 uppercase tracking-tighter (headlines)
+```
+
+**Checklist**:
+- [ ] Geometric shapes only (circle/square)
+- [ ] Primary color blocking applied
+- [ ] Hard offset shadows 4px
+- [ ] border-2 border-black on all elements
+- [ ] Mechanical press active state
+- [ ] Outfit Black 900 uppercase headlines
+- [ ] Safe area (pt-safe pb-safe) respected
+- [ ] Thumb-friendly h-12/h-14 touch targets
+- [ ] No hover states (mobile-only)
+- [ ] Vertical rhythm single-column stack
+
+## 70. Minimalist Monochrome
+
+- **Keywords**: monochrome, black white, editorial, austere, typographic, sharp, zero radius, high contrast, brutalist, pocket editorial, serif, mechanical
+- **Primary colors**: Pure Black #000000, Pure White #FFFFFF
+- **Secondary colors**: Muted #F5F5F5, Dark Gray #525252, Border Light #E5E5E5
+- **Effects**: Instant inversion active state (tap → bg-black text-white, zero transition-none), no shadows (strictly 2D), full-bleed horizontal rules (4px black section dividers), subtle paper noise texture (opacity: 0.03), slide-in page transitions with hard edge
+- **Best for**: Luxury fashion e-commerce mobile, editorial publications, high-end portfolio apps, experimental/avant-garde brands, digital exhibitions
+- **Avoid for**: Entertainment, colorful brands, friendly consumer apps, anything requiring visual warmth or gradient
+- **Light mode**: ✓ Full (Light Mode Enforced)
+- **Dark mode**: ◐ Dark by section only (inverted sections)
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AAA (pure black/white)
+- **Era**: 2020s Editorial Mobile
+- **Complexity**: Medium
+
+**AI prompt**: Design a minimalist monochrome mobile app. Use ONLY black (#000000) and white (#FFFFFF). Zero border-radius on every element. No shadows — depth is created by 1–4px black borders and color inversion only. Typography is the primary visual: Playfair Display for heroes (text-5xl–text-6xl, tracking-tighter, leading-[0.9]), Source Serif 4 for body, JetBrains Mono for labels/tags. Tap states instantly invert (bg-black text-white). Full-width horizontal rules separate sections. Use the word 'MENU' instead of hamburger icon.
+
+```css
+/* Minimalist Monochrome hints */
+border-radius: 0px (ALL elements including modals), box-shadow: none, active:bg-black active:text-white transition-none, border-b-4 border-black (section dividers), divide-y divide-black (lists), font-family: Playfair Display (headers) + Source Serif 4 (body) + JetBrains Mono (labels), background-image: noise SVG opacity-[0.03]
+```
+
+**Checklist**:
+- [ ] 0px border-radius on ALL elements
+- [ ] No shadows anywhere
+- [ ] Instant inversion on every tap (transition-none)
+- [ ] 4px black line separates hero from content
+- [ ] Safe area respected (pt-safe pb-safe)
+- [ ] h-14 touch targets
+- [ ] Sticky section headers with border-b
+- [ ] Typography hero: word spans full screen width
+- [ ] Paper noise texture on backgrounds
+- [ ] Menu word-label instead of icon
+
+## 71. Modern Dark (Cinema Mobile)
+
+- **Keywords**: dark mode, cinematic, ambient light, glassmorphism, deep black, indigo, glow, blur, atmospheric, reanimated, haptic, premium, layered, frosted glass, linear gradient
+- **Primary colors**: Deep #020203, Base #050506, Elevated #0a0a0c, Accent #5E6AD2
+- **Secondary colors**: Foreground #EDEDEF, Muted #8A8F98, Accent Glow rgba(94 106 210/0.2), Border rgba(255 255 255/0.08), Surface rgba(255 255 255/0.05)
+- **Effects**: Expo.out Bezier(0.16,1,0.3,1) easing; spring modals (damping:20 stiffness:90); haptic-linked press (Impact Light/Medium); animated ambient light blobs (Reanimated translateX/Y slow oscillation); BlurView glassmorphism headers/nav (intensity 20); scale press 0.97 → 1.0; avoid pure #000000 (OLED smear)
+- **Best for**: Developer tools, pro productivity apps, fintech/trading dashboards, media/streaming platforms, AI tool interfaces, high-end gaming companion apps
+- **Avoid for**: Consumer apps needing warmth, children's apps, health/medical contexts where dark feels harsh, high-accessibility contexts needing maximum contrast
+- **Light mode**: ✓ Light mode only as exception
+- **Dark mode**: ✓ Dark Mode Primary
+- **Performance**: ⚠ Good (blur effects require native driver)
+- **Accessibility**: ⚠ WCAG AA (requires careful accent contrast check)
+- **Era**: 2020s Cinematic Mobile
+- **Complexity**: High
+
+**AI prompt**: Design a cinematic dark mobile app. Background: LinearGradient from #0a0a0f (top) to #020203 (bottom). Add 2–3 absolute animated 'blob' views: circular, blurRadius 30–50, opacity 0.08–0.12, slow Reanimated oscillation. Cards: borderRadius 16, border rgba(255,255,255,0.08) hairline, subtle top-edge shine gradient. Primary button: #5E6AD2, scale press 0.97, haptic on press. BlurView (intensity 20, tint dark) for tab bar and headers. Typography: Inter 700 for headers, 400 for body. Never use pure #000000. Accent glow: rgba(94,106,210,0.2) behind primary actions.
+
+```css
+/* Modern Dark (Cinema Mobile) hints */
+borderRadius: 16 (cards/buttons), background: LinearGradient #0a0a0f→#020203, border: StyleSheet.hairlineWidth rgba(255,255,255,0.08), BlurView intensity={20} tint='dark', useAnimatedStyle + withRepeat (blob oscillation), Easing.bezier(0.16,1,0.3,1), withSpring damping:20 stiffness:90, Haptics.impactAsync(ImpactFeedbackStyle.Light), scale: 0.97 press
+```
+
+**Checklist**:
+- [ ] No pure #000000 backgrounds
+- [ ] LinearGradient base screen
+- [ ] Animated ambient blobs (Reanimated
+- [ ] native driver)
+- [ ] BlurView on tab bar and headers
+- [ ] borderRadius 16 on all cards
+- [ ] Haptic feedback on every Pressable
+- [ ] Bezier(0.16
+- [ ] 1
+- [ ] 0.3
+- [ ] 1) easing used
+- [ ] Accent glow behind primary button
+- [ ] No solid grey borders (rgba only)
+- [ ] Bottom sheets replace all modals
+
+## 72. SaaS Mobile (High-Tech Boutique)
+
+- **Keywords**: saas, electric blue, gradient, fintech, spring animation, dual font, glassmorphism, boutique, premium, calistoga, inter, mono, tactile, haptic, bento
+- **Primary colors**: Electric Blue #0052FF, Gradient End #4D7CFF
+- **Secondary colors**: Background #FAFAFA, Foreground #0F172A, Muted #F1F5F9, Card #FFFFFF, Border #E2E8F0
+- **Effects**: Spring animations (mass:1 damping:15 stiffness:120); gradient buttons (0052FF→4D7CFF); scale press 0.96→1.0 with haptics; floating FAB with gentle bobbing (Reanimated); glassmorphism BlurView navigation bars; staggered fade-in entrance (Y:20→0 + opacity:0→1); pulsing status dot on section badges; layout transitions (LayoutAnimation or Reanimated entering)
+- **Best for**: B2B SaaS mobile dashboards, fintech apps, developer tool mobile companions, marketing analytics apps, HR/operations apps, modern business productivity
+- **Avoid for**: Pure consumer entertainment, children's apps, highly decorative lifestyle apps, contexts where Electric Blue feels too corporate
+- **Light mode**: ✓ Full
+- **Dark mode**: ◐ Partial
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ WCAG AA
+- **Era**: 2020s SaaS Mobile
+- **Complexity**: Medium
+
+**AI prompt**: Design a high-tech boutique SaaS mobile app. Primary canvas: #FAFAFA (warm off-white). Cards: #FFFFFF with 1pt Slate-200 border, iOS shadow (shadowOpacity:0.1, shadowRadius:10, offset y:4), Android elevation:4, padding 24px, borderRadius 16. Buttons: LinearGradient #0052FF→#4D7CFF, height 56px, borderRadius 16, scale press 0.96 + haptic. Section badges: rounded pill with rgba(0,82,255,0.05) bg and rgba(0,82,255,0.2) border + PulseDot + JetBrains Mono text. Typography: Calistoga for heroes (36–42pt), Inter for body (16–18pt), JetBrains Mono for data labels. All screen transitions: spring (mass:1 damping:15 stiffness:120). Always include SafeAreaView.
+
+```css
+/* SaaS Mobile (High-Tech Boutique) hints */
+borderRadius: 16 (buttons/cards), LinearGradient colors={['#0052FF','#4D7CFF']}, shadowOpacity: 0.1, shadowRadius: 10, elevation: 4, Haptics.impactAsync(ImpactFeedbackStyle.Light) on press, withSpring({mass:1, damping:15, stiffness:120}), withTiming Y:20→0 opacity:0→1 staggered entrance, LayoutAnimation.configureNext for list updates, BlurView on nav bars
+```
+
+**Checklist**:
+- [ ] SafeAreaView wraps all screens
+- [ ] All touch targets ≥ 44×44px
+- [ ] Spring config used for all transitions
+- [ ] Gradient buttons (not flat)
+- [ ] Haptic on every Pressable
+- [ ] Section badges with PulseDot
+- [ ] Staggered entrance animation on screen mount
+- [ ] JetBrains Mono for data labels
+- [ ] Calistoga for hero headlines
+- [ ] Elevation/shadow on cards
+
+## 73. Terminal CLI (Mobile)
+
+- **Keywords**: terminal, cli, matrix green, monospace, hacker, ascii, command line, developer, web3, crypto, sci-fi, OLED, retro-future, field operative
+- **Primary colors**: Matrix Green #33FF00, OLED Black #050505
+- **Secondary colors**: Amber #FFB000, Muted Green #1A3D1A, Error Red #FF3333, Border Green #33FF00
+- **Effects**: Blinking cursor (500ms opacity loop), typewriter text reveal hook, scanline overlay (repeating lines 0.05 opacity), ASCII art headers, instant color inversion on press (bg-green text-black), haptic on every keystroke, boot sequence splash on launch
+- **Best for**: Developer tools, Web3/blockchain apps, geek-culture apps, ARG games, sci-fi/noir gaming companions, hacker/security tools, creative studio portfolios
+- **Avoid for**: Consumer products, health apps, anything requiring approachability or warmth, children's apps, standard enterprise contexts
+- **Light mode**: ✗ No
+- **Dark mode**: ✓ OLED Dark Only
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ High contrast (green on black ≫4.5:1 ratio)
+- **Era**: Retro-Future 1980s–2020s
+- **Complexity**: Medium
+
+**AI prompt**: Design a Mobile Terminal CLI app. Background: #050505 OLED black. ALL text in Matrix Green #33FF00. Font: JetBrains Mono or SpaceMono ONLY — zero border-radius everywhere. ASCII borders using +, -, |, * characters instead of standard containers. Buttons displayed as [ EXECUTE ] or > PROCEED. On press: instantly inverts to green bg + black text + haptic. Cursor: blinking View opacity 0→1 at 500ms. Show boot sequence on launch (fake log scroll). Progress bars as [#####-----] text. Status bar footer: [BATTERY:88%] [NET:CONNECTED]. Scanline overlay: absolute View with repeating 1px horizontal lines at opacity 0.05. Typewriter effect on new data.
+
+```css
+/* Terminal CLI (Mobile) hints */
+borderRadius: 0 (ALL elements), borderWidth: 1, borderColor: '#33FF00', backgroundColor: '#050505', color: '#33FF00', fontFamily: 'SpaceMono-Regular' or JetBrains Mono, fontSize: 12 or 14 or 16 only, lineHeight: 1.2x fontSize, Haptics.impactAsync(Light) on every press, useAnimatedValue blink 500ms, hitSlop: 12px all sides for bracketed buttons
+```
+
+**Checklist**:
+- [ ] 0px border-radius everywhere
+- [ ] ASCII-style borders on cards
+- [ ] Boot sequence on launch
+- [ ] Blinking cursor component
+- [ ] Typewriter hook for new content
+- [ ] Scanline overlay (0.05 opacity)
+- [ ] Haptic on every button press
+- [ ] Footer status bar component
+- [ ] hitSlop on all bracketed buttons (44×44dp)
+- [ ] Reduced motion respected
+
+## 74. Kinetic Brutalism (Mobile)
+
+- **Keywords**: kinetic, brutalism, motion, marquee, acid yellow, uppercase, oversized, aggressive typography, street, zine, high contrast, scroll-driven, haptic, reanimated
+- **Primary colors**: Acid Yellow #DFE104, Rich Black #09090B
+- **Secondary colors**: Off-white #FAFAFA, Dark Gray #27272A, Zinc #A1A1AA, Border Zinc #3F3F46
+- **Effects**: Infinite marquee (Reanimated, Linear easing, 5s loop, hard clip), hero parallax (scale 1.0→1.3 + fade), sticky section header push, card flood inversion on press (bg→#DFE104, text→#000000), haptic Medium on every press, scroll-triggered interpolate transforms, 0px radius, 2px borders, 100ms color transitions
+- **Best for**: Immersive storytelling apps, brand flagship mobile, music/culture platforms, sports apps, underground zines, limited-edition product drops, performance dashboards
+- **Avoid for**: Calm informational apps, healthcare, finance contexts needing trust, children's, any context where aggressive typography feels inappropriate
+- **Light mode**: ✓ Dark Primary
+- **Dark mode**: ◐ Dark only (inverted sections)
+- **Performance**: ⚡ Excellent (native driver required)
+- **Accessibility**: ⚠ WCAG AA (verify zinc body text on dark bg)
+- **Era**: 2020s Mobile Brutalism
+- **Complexity**: High
+
+**AI prompt**: Design a Kinetic Brutalism mobile app. Canvas: #09090B. Primary accent: Acid Yellow #DFE104 (text: #000000). Typography: Space Grotesk BOLD. Display text: 60–120pt, uppercase, letterSpacing -1, lineHeight 0.9–1.1x. Body: 18–20pt. Labels: 12pt uppercase letterSpacing +2. Add infinite marquee rows (Reanimated, no easing, hard edge clip). Hero text parallax on scroll (Interpolate: scale 1.0→1.3, opacity 1→0). Card press: instantly flood to #DFE104 + flip text to #000. Haptic Medium on every press. 0px radius. 2px solid borders. NO shadows. No gradients. Scale all fonts by (windowWidth / 375 * size) for responsiveness.
+
+```css
+/* Kinetic Brutalism (Mobile) hints */
+borderRadius: 0, borderWidth: 2, borderColor: '#3F3F46', backgroundColor: '#09090B', color: '#FAFAFA', fontWeight: '800 or 900', letterSpacing: -1 (large) or 2 (labels), lineHeight: 0.9–1.1 * fontSize, Reanimated withRepeat marquee timing 5000ms Easing.linear, Interpolate scroll→scale + opacity, Haptics.impactAsync(Medium), scale press: 0.95, 100ms color transitions
+```
+
+**Checklist**:
+- [ ] Infinite marquee rows (Reanimated
+- [ ] no fade edges)
+- [ ] Hero parallax scroll (scale+opacity Interpolate)
+- [ ] All display text uppercase
+- [ ] 0px border-radius
+- [ ] 2px borders
+- [ ] Acid yellow card flood on press
+- [ ] Haptic Medium on every interaction
+- [ ] Font scale helper (windowWidth/375*size)
+- [ ] Safe area for massive headers
+- [ ] Reduced motion stops marquees
+
+## 75. Flat Design Mobile (Touch-First)
+
+- **Keywords**: flat, 2D, no shadow, color blocking, geometric, bold, poster, icon, touch-first, minimal, clean, tailored, cross-platform
+- **Primary colors**: Blue #3B82F6, Emerald #10B981
+- **Secondary colors**: Background #FFFFFF, Surface #F3F4F6, Text #111827, Amber #F59E0B, Border #E5E7EB
+- **Effects**: Immediate press feedback (scale 0.97, no delay), color section blocking (full-width contrasting View), zero elevation/shadow, solid icon containers (colored squares/circles), geometric low-opacity shape overlays, bottom tabs solid fill (no floating)
+- **Best for**: Cross-platform apps (iOS+Android parity), information-dense dashboards, system UI, brand illustration, onboarding flows, marketing pages, icon design
+- **Avoid for**: Ultra-premium contexts needing depth/shadow, dark-mode-first products, contexts where flat design reads as unfinished or sterile
+- **Light mode**: ✓ Full
+- **Dark mode**: ◐ Partial (Dark mode via color swap only)
+- **Performance**: ⚡ Excellent (no GPU effects)
+- **Accessibility**: ✓ WCAG AA (large bold type helps)
+- **Era**: 2010s–2020s Flat Mobile
+- **Complexity**: Low
+
+**AI prompt**: Design a Flat Mobile app. NO shadows (shadowOpacity: 0, elevation: 0). Color creates all hierarchy. Sections: full-width View blocks alternating contrasting bg colors (Blue Hero → White Content → Gray Block). Buttons: solid #3B82F6, borderRadius 8, height 56. Cards: backgroundColor #FFFFFF (on gray bg) or #DBEAFE (blue tint) — no shadow. Text: fontWeight 800 letterSpacing -0.5 (heads), 600 (sub), 400 (body). Inputs: #F3F4F6 bg, focused: borderWidth 2 borderColor #3B82F6. Icons: Lucide strokeWidth 2.5 inside solid colored square/circle. Press feedback: scale 0.97 Pressable. Use position absolute low-opacity geometric shapes (circles, rotated squares) as background decoration.
+
+```css
+/* Flat Design Mobile (Touch-First) hints */
+shadowOpacity: 0, elevation: 0, borderRadius: 6/12/999, height: 48 minimum touch targets, spacing: 4/8/16/24/32/48 system, backgroundColor (section blocking), Pressable scale: pressed ? 0.97 : 1, fontWeight: '800' heads / '600' sub / '400' body, letterSpacing: -0.5 heads / 1 labels, textTransform: 'uppercase' labels, strokeWidth={2.5} icons, borderWidth: 3/4 for featured CTAs
+```
+
+**Checklist**:
+- [ ] Zero elevation AND shadowOpacity on all elements
+- [ ] Color-blocking sections (not borders)
+- [ ] All touch targets ≥ 48×48
+- [ ] No gradients on flat elements
+- [ ] Icons inside solid colored containers
+- [ ] Pressable scale feedback
+- [ ] Geometric shapes as bg decoration
+- [ ] Bold flat bottom tabs (no floating)
+- [ ] Primary headlines much larger than body
+- [ ] 4pt spacing system throughout
+
+## 76. Material You (MD3 Mobile)
+
+- **Keywords**: material design 3, md3, tonal surfaces, pills, soft curves, android, md3 easing, state layers, haptic, fab, google
+- **Primary colors**: Primary Violet #6750A4, Secondary Container #E8DEF8, Tertiary #7D5260
+- **Secondary colors**: Surface #FFFBFE, On Surface #1C1B1F, Surface Container #F3EDF7, Outline #79747E
+- **Effects**: Tonal elevation (overlay colors instead of strong shadows), pill-shaped buttons and chips (borderRadius 999), emphasized easing Easing.bezier(0.2,0,0,1), state layers (pressed overlays 10–15% opacity), Reanimated-filled label float for inputs, HapticFeedback on FAB/toggles
+- **Best for**: Android ecosystem apps, cross-platform productivity tools, MD3-based admin panels, data-heavy back-office UI with Material UI
+- **Avoid for**: Ultra-minimal brutalist brands, terminal/hacker aesthetics, monochrome editorial apps
+- **Light mode**: ✓ Full
+- **Dark mode**: ✓ Full
+- **Performance**: ⚠ Good (requires gradients and overlays)
+- **Accessibility**: ✓ WCAG AA (with MD3 token checks)
+- **Era**: Material Design 3
+- **Complexity**: Medium
+
+**AI prompt**: Design a Material You (MD3) mobile app. Use #FFFBFE background, #6750A4 primary, #E8DEF8 secondary container, #F3EDF7 surface container. All interactive elements are pill-shaped (borderRadius: 999). Buttons use Pressable with scale: 0.95 on press and state-layer overlays (black 10% or primary 12%). Inputs use filled M3 style: background #E7E0EC with floating label animation on focus. Elevation is tonal (layering containers) plus light shadow/elevation on Android. Animations use emphasized easing (0.2,0,0,1) at 100–400ms. FABs are tertiary-colored rounded squares/circles with level 3 elevation.
+
+```css
+/* Material You (MD3 Mobile) hints */
+borderRadius: 999 (buttons/chips), containerRadius: 16–28, backgroundColor: '#FFFBFE', colorPrimary: '#6750A4', colorSecondaryContainer: '#E8DEF8', colorSurfaceContainer: '#F3EDF7', outlineColor: '#79747E', Pressable state-layer overlay (opacity 0.1–0.15), Easing.bezier(0.2,0,0,1), HapticFeedback.impactMedium on FAB, floating label using Reanimated translateY/scale
+```
+
+**Checklist**:
+- [ ] MD3 color tokens applied (background/surface/container)
+- [ ] All CTAs are pill-shaped
+- [ ] State-layer overlays instead of opacity 0.5 hacks
+- [ ] Emphasized easing used for all animations
+- [ ] Floating label inputs implemented
+- [ ] FAB uses tertiary color with correct elevation
+- [ ] Safe areas respected for organic shapes
+- [ ] No pure white background
+- [ ] No harsh box-shadows (ambient only)
+
+## 77. Neo Brutalism (Mobile)
+
+- **Keywords**: neo brutalism, pop art, stickers, thick borders, cream background, hot red, vivid yellow, soft violet, hard offset shadow, mechanical press, collage
+- **Primary colors**: Cream #FFFDF5, Hot Red #FF6B6B, Vivid Yellow #FFD93D
+- **Secondary colors**: Soft Violet #C4B5FD, Pure Black #000000, White #FFFFFF
+- **Effects**: Thick 4px black borders on all major elements, hard offset shadows (4–8px, no blur), mechanical press: translateX/Y equal to shadow offset, slightly rotated cards/badges (-2deg/2deg), high-saturation color blocking, spring/linear animations only
+- **Best for**: Creative tools, collab platforms, Gen Z marketing & e-commerce, portfolio sites, sticker-book style content apps
+- **Avoid for**: Serious enterprise apps, conservative industries, sober fintech, accessibility-first contexts (must tune contrast)
+- **Light mode**: ✓ Light-first
+- **Dark mode**: ✗ Dark
+- **Performance**: ⚠ Moderate (shadows + transforms)
+- **Accessibility**: ⚠ Requires careful contrast tuning
+- **Era**: 2020s Neo-Brutalism
+- **Complexity**: High
+
+**AI prompt**: Design a Mobile Neo-Brutalist app. Background: Cream #FFFDF5. All content blocks: white or violet with borderWidth 4 borderColor #000. Shadows are solid offset blocks (no blur) using an extra View behind offset by 4px or 8px. Typography: Space Grotesk Bold/Black only (700–900). Buttons: 56px tall, 4px border, 0 radius; press animation translates button to cover the shadow. Cards slightly rotated (-1deg, 2deg). Colors: Hot Red #FF6B6B for primary, Yellow #FFD93D for focus/badges, Soft Violet #C4B5FD as tertiary. Animation: spring/linear only, no ease-out luxury motion.
+
+```css
+/* Neo Brutalism (Mobile) hints */
+borderWidth: 4 (primary), 2 (secondary), borderRadius: 0 or 999 (badges only), backgroundColor: '#FFFDF5', shadow implemented as offset View, transform: [{translateX:4},{translateY:4}] on PressIn, fontFamily: 'SpaceGrotesk-Bold', fontWeight: '700/900', transform: [{ rotate: '-1deg' }] on cards, padding: 20,☐ 4px borders on major elements
+```
+
+**Checklist**:
+- [ ] Hard offset shadow implemented via extra View
+
+## 78. Bold Typography (Mobile Poster)
+
+- **Keywords**: bold typography, editorial, poster, broadsheet, vermillion, negative space, edge-to-edge type, underline CTA, near-black, warm white
+- **Primary colors**: Near Black #0A0A0A, Warm White #FAFAFA
+- **Secondary colors**: Muted #1A1A1A, Secondary Text #737373, Accent Vermillion #FF3D00, Border #262626
+- **Effects**: Hero headlines 48–72px (5:1 vs body size), tight tracking (-1.5px), edge-to-edge type, massive vertical spacing (60px+), underline CTAs (2–3px accent line), instant 200ms transitions (no bounce), strictly 0px radius containers, color shifts for active state instead of elevation
+- **Best for**: Creative brand heroes, reading-focused apps, event/exhibition pages, editorial mobile experiences, landing hero sections
+- **Avoid for**: Utility dashboards, kids apps, playful consumer products, contexts needing many icons or heavy imagery
+- **Light mode**: ✓ Dark Mode Primary
+- **Dark mode**: ◐ Light sections optional
+- **Performance**: ⚡ Excellent
+- **Accessibility**: ✓ Contrast 18:1 achievable
+- **Era**: Editorial 2020s
+- **Complexity**: Medium
+
+**AI prompt**: Design a Bold Typography mobile screen. Background #0A0A0A, text #FAFAFA, accent #FF3D00. Use Inter Tight/Inter 600+ for all type; JetBrains Mono for labels. Headline: 56–72px, tracking -1.5, lineHeight 1.1, full-bleed width with slight bleed off-screen. Body: 16–18px, leading 1.6. Buttons: underline CTA (accent text + 2px underline block), or inverted box with 0 radius. No shadows, no rounded corners. Layout: single column, paddingHorizontal 24, vertical gaps 64 between sections. Animation: 200ms, Easing.bezier(0.25,0,0,1), slight slide-up 10px + fade on mount.
+
+```css
+/* Bold Typography (Mobile Poster) hints */
+backgroundColor: '#0A0A0A', color: '#FAFAFA', accent: '#FF3D00', borderColor: '#262626', borderRadius: 0, paddingHorizontal: 24, headline style: fontSize:56–72, fontWeight:'700/800', letterSpacing:-1.5, lineHeight:1.1*fontSize, body: fontSize:16–18, lineHeight:1.6*fontSize, underline CTA: 2–3px height View under text, transition: 200ms cubic-bezier(0.25,0,0,1)
+```
+
+**Checklist**:
+- [ ] H1 at least 4–5× body size
+- [ ] All containers 0 radius
+- [ ] Underline CTA pattern used
+- [ ] Large vertical gaps between sections
+- [ ] No shadows or soft corners
+- [ ] Accent used only for interaction
+- [ ] Text bleeds to/over screen edges
+- [ ] Animation timings 200ms
+- [ ] Accessible contrast ≥ 18:1
+- [ ] Body text never below 16px
+
+## 79. Academia (Scholarly Mobile)
+
+- **Keywords**: academia, library, mahogany, parchment, brass, crimson, serif, drop cap, arch-top, vignette, leather, scholarly, tactile
+- **Primary colors**: Mahogany #1C1714, Oak #251E19
+- **Secondary colors**: Parchment #E8DFD4, Worn Leather #3D332B, Faded Ink #9C8B7A, Brass #C9A962, Library Crimson #8B2635
+- **Effects**: Deep mahogany backgrounds, oak surface cards, brass accented CTAs, arch-top hero/imagery, heavy vignette overlays, sepia-tinted images, drop caps with brass Cinzel, Roman numeral volume headings, slow timing-based animations (Easing.out poly(4)), zero neon or modern tech cues
+- **Best for**: Knowledge management apps, deep reading tools, ritual-heavy personal brands, lore-heavy RPG/roleplay apps, culture-specific community platforms
+- **Avoid for**: Hyper-modern tech dashboards, neon/glassmorphism, playful Gen Z branding
+- **Light mode**: ✓ Dark Rich
+- **Dark mode**: ◐ Light parchment sections
+- **Performance**: ⚠ Moderate (vignette + shadows)
+- **Accessibility**: ✓ Legible (serif optimized)
+- **Era**: Timeless Scholarly
+- **Complexity**: High
+
+**AI prompt**: Design a Scholarly Academia mobile app. Background #1C1714 (mahogany), alt surfaces #251E19 (oak), text #E8DFD4 (parchment). Accent brass #C9A962 for CTAs + borders; crimson #8B2635 for wax seals. Typography: Cormorant Garamond (headings), Crimson Pro (body), Cinzel (labels/overlines). Use arch-top hero containers (borderTopRadius 100). Cards: oak bg, 1px wood-grain border. Inputs: worn-leather background, brass focus border. Global vignette overlay and ornate brass dividers (Unicode glyph + gradient line). Animations: no spring, only Timing with Easing.out(Easing.poly(4)).
+
+```css
+/* Academia (Scholarly Mobile) hints */
+backgroundColor: '#1C1714', altSurface: '#251E19', textColor: '#E8DFD4', mutedBg: '#3D332B', borderColor: '#4A3F35', brass: '#C9A962', crimson: '#8B2635', borderRadius: 4 (default), archTopRadius: 100 for hero, shadowOpacity:0.4 shadowRadius:6 elevation:8 for cards, textShadow on headings, vignette overlay via LinearGradient
+```
+
+**Checklist**:
+- [ ] Mahogany/oak/parchment palette applied
+- [ ] Brass used on all tappable items
+- [ ] Arch-top imagery used in hero/cards
+- [ ] Drop caps & Roman numerals used
+- [ ] Vignette overlay present
+- [ ] No sans-serif body fonts
+- [ ] No neon/bright modern colors
+- [ ] Animations use non-spring timing
+- [ ] Inputs use worn-leather style
+- [ ] Wax seal badges implemented
+
+## 80. Cyberpunk Mobile HUD
+
+- **Keywords**: cyberpunk, neon, glitch, chamfered, orbitron, jetbrains, scanlines, crt, hud, matrix, military, decker
+- **Primary colors**: Void #0A0A0F, Card #12121A
+- **Secondary colors**: Neon Green #00FF88, Neon Magenta #FF00FF, Cyber Cyan #00D4FF, Neutral Text #E0E0E0, Alert Red #FF3366, Border #2A2A3A
+- **Effects**: Deep void background with neon radiance, chamfered 45° corners via SVG/Skia, scanline overlay, CRT flicker opacity oscillation, glitch animations (translateX ±2), neon pulses around buttons, HUD corner brackets, terminal prompt text inputs, heavy use of blurView holographic panels
+- **Best for**: Gaming dashboards, crypto/cyberpunk apps, sci-fi companion tools, hacker OS skins, data-heavy monitoring HUDs
+- **Avoid for**: Serious enterprise, health/finance requiring calm trust, minimal editorial apps
+- **Light mode**: ✗ Light
+- **Dark mode**: ✓ Dark-only
+- **Performance**: ⚠ Moderate–Heavy (Skia/blur/animations)
+- **Accessibility**: ⚠ Requires careful reduced-motion handling
+- **Era**: Cyber-Noir
+- **Complexity**: High
+
+**AI prompt**: Design a Cyberpunk mobile HUD. Background #0A0A0F, card #12121A. Accents: #00FF88 (primary), #FF00FF, #00D4FF. Typography: Orbitron for headings, JetBrains Mono for data. All shapes use chamfered corners via SVG or Skia clipPath. Buttons: neon glow shadows, scale 0.98 + haptic on press, optional glitch jitter on active. Global scanline overlay (semi-transparent horizontal lines) and CRT flicker (root opacity 0.98–1). Inputs: prompt style with '>' in accent, custom blinking block cursor. HUD cards use corner brackets and subtle gradients.
+
+```css
+/* Cyberpunk Mobile HUD hints */
+backgroundColor: '#0A0A0F', cardBg: '#12121A', accent: '#00FF88', accent2: '#FF00FF', accent3: '#00D4FF', borderColor: '#2A2A3A', destructive: '#FF3366', borderRadius: 0, chamfer via SVG path, shadowColor accent with animated radius, scanline overlay View pointerEvents='none', withRepeat glitch translateX [-2,2,0], Easing.steps(2)
+```
+
+**Checklist**:
+- [ ] Chamfered corners used instead of radius
+- [ ] Scanline & CRT flicker implemented
+- [ ] Orbitron + JetBrains Mono typography
+- [ ] Neon glow shadows on primary buttons
+- [ ] Glitch animation on active states
+- [ ] Prompt-style inputs with custom cursor
+- [ ] HUD corner brackets implemented
+- [ ] Safe-area system status bar styled
+- [ ] Reduced motion disables glitch/flicker
+- [ ] Icons configured with Lucide accent color
+
+## 81. Bitcoin DeFi (Mobile)
+
+- **Keywords**: web3, bitcoin, defi, digital gold, fintech, wallet, orange, glassmorphism, gradient, blur, holographic, trust, precision
+- **Primary colors**: Bitcoin Orange #F7931A, Burnt Orange #EA580C, Digital Gold #FFD600
+- **Secondary colors**: Void #030304, Dark Matter #0F1115, Pure Light #FFFFFF, Stardust #94A3B8, Border Dim rgba(30,41,59,0.2)
+- **Effects**: Deep void + dark matter surfaces, Bitcoin orange/gold gradients for CTAs, pill buttons with glowing shadows, glassmorphic BlurView nav, monospace data rows, gradient text balances + masked orange-gold, pulsing status indicators and vertical ledger timelines, ultra-thin borders, high-precision typography
+- **Best for**: DeFi dashboards, wallets, NFT marketplaces, Web3 social, metaverse utilities, high-tech fintech brands
+- **Avoid for**: Playful casual apps, low-tech brands, ultra-minimal editorial apps
+- **Light mode**: ✗ Light
+- **Dark mode**: ✓ Dark-only
+- **Performance**: ⚠ Moderate (gradients+blur)
+- **Accessibility**: ✓ WCAG AA with care
+- **Era**: Fintech/Web3
+- **Complexity**: High
+
+**AI prompt**: Design a Bitcoin DeFi mobile app. Background #030304, cards #0F1115, text #FFFFFF, muted #94A3B8. Primary CTA: LinearGradient #EA580C→#F7931A with orange glow shadow. Typography: Space Grotesk Bold for headings, Inter for body, JetBrains Mono for prices/hashes. Use BlurView (intensity 20) for nav bars and floating panels. Cards as 'blocks' with hairline borders and light orange glow on active. Use grid background (low-opacity 50px grid). Gradient text for key balances via MaskedView and LinearGradient orange→gold. Status indicators pulse using Reanimated. Ledger timelines drawn as vertical gradient line with pulsing dots.
+
+```css
+/* Bitcoin DeFi (Mobile) hints */
+backgroundColor: '#030304', cardBg: '#0F1115', textColor: '#FFFFFF', mutedText: '#94A3B8', borderColor: 'rgba(30,41,59,0.2)', accentBitcoin: '#F7931A', accentBurnt: '#EA580C', accentGold: '#FFD600', borderRadius: 24 for cards, radiusPill: 999 for buttons, BlurView intensity 20, LinearGradient on CTAs, shadowColor '#F7931A' shadowRadius up to 10, JetBrains Mono for numeric text
+```
+
+**Checklist**:
+- [ ] Void/dark-matter palette applied
+- [ ] Bitcoin orange/gold gradient buttons
+- [ ] BlurView nav implemented
+- [ ] Monospace for numeric data
+- [ ] Hairline borders on blocks
+- [ ] Gradient text on balances
+- [ ] Pulsing network status indicators
+- [ ] Ledger vertical timeline
+- [ ] Haptics on money actions
+- [ ] SafeArea + FlashList for heavy lists
+
+## 82. Claymorphism (Mobile)
+
+- **Keywords**: claymorphism, clay, 3d, soft, bubbly, candy, playful, rounded, squish, tactile, inflate, silicone, haptic, spring
+- **Primary colors**: Vivid Violet #7C3AED, Hot Pink #DB2777
+- **Secondary colors**: Canvas #F4F1FA, Soft Charcoal #332F3A, Emerald #10B981, Amber #F59E0B, Lavender-Gray #635F69
+- **Effects**: Multi-layer shadow stacks (nested View) to simulate clay depth, LinearGradient #A78BFA→#7C3AED buttons, borderRadius 40–50 outer / 32 cards / 20 buttons, Reanimated spring squish (scale 0.92 on press), BlurView glass-clay hybrid cards, floating blobs with slow ±20px drift, Haptics Light on every press
+- **Best for**: Children education apps, teen social products, crypto gamification, creative tools, brand mascot-led apps
+- **Avoid for**: Serious enterprise, high-density data, editorial reading apps, fintech trust signals
+- **Light mode**: ✓ Light
+- **Dark mode**: ⚠ Dark (adjusted)
+- **Performance**: ⚠ Moderate–Heavy (shadows+blur)
+- **Accessibility**: ✓ WCAG AA (careful)
+- **Era**: Consumer/Education
+- **Complexity**: High
+
+**AI prompt**: Design a high-fidelity Claymorphism mobile app. Background #F4F1FA (cool lavender-white, never pure white). Primary CTA: LinearGradient #A78BFA to #7C3AED, borderRadius 20, height 56. Cards: borderRadius 32, backgroundColor rgba(255,255,255,0.7) with BlurView. Multi-layer shadow: outer offset(12,12) rgba(160,150,180,0.2) + highlight offset(-8,-8) white. Typography: Nunito Black 900 for headings (48px hero, 32px section, 22px card), DM Sans Medium 500 for body 16px. Spring animations: scale 0.92 on press, spring back damping 10. Background blobs drift ±20px over 8–10s. Bento 2-column grid with hero card spanning full width. Haptics.impactAsync Light on every button press.
+
+```css
+/* Claymorphism (Mobile) hints */
+backgroundColor: '#F4F1FA', cardBg: 'rgba(255,255,255,0.7)', textPrimary: '#332F3A', textMuted: '#635F69', accentPrimary: '#7C3AED', accentSecondary: '#DB2777', success: '#10B981', warning: '#F59E0B', radiusOuter: 50, radiusCard: 32, radiusButton: 20, shadowStack: 'nested View', gradientButton: ['#A78BFA', '#7C3AED'], springDamping: 10
+```
+
+**Checklist**:
+- [ ] Background uses #F4F1FA (no pure white)
+- [ ] Multi-layer clay shadow stack applied
+- [ ] Cards use blurred glass-clay hybrid
+- [ ] Buttons squish to scale 0.92 on press
+- [ ] Spring physics on all interactions
+- [ ] Nunito Black for headings
+- [ ] Background blobs drifting
+- [ ] Haptics on every press
+- [ ] Nested border radius (card 32
+- [ ] inner 24)
+- [ ] Bento layout with hero span
+
+## 83. Enterprise SaaS (Mobile)
+
+- **Keywords**: enterprise, saas, b2b, professional, indigo, violet, gradient, polished, trustworthy, clean, approachable, spring, haptic
+- **Primary colors**: Indigo #4F46E5, Violet #7C3AED
+- **Secondary colors**: Slate 50 #F8FAFC, White #FFFFFF, Slate 900 #0F172A, Slate 500 #64748B, Emerald #10B981, Slate 200 #E2E8F0
+- **Effects**: Indigo→Violet gradient primary CTAs + active tab highlights, colored card shadows rgba(79,70,229,0.08), pill buttons or 12pt radius, full-width CTA at screen bottom, spring press scale 0.97, floating label inputs with animated focus border, skeletal loading pulses (Indigo/Slate tint), Bottom Sheets with drag dismiss, swipe-to-action list cards, scroll-linked title collapse
+- **Best for**: B2B backend management, productivity tools, government and finance mobile apps, SaaS companion apps, enterprise dashboards
+- **Avoid for**: Pure consumer entertainment, Gen-Z youth apps, gaming UI, ultra-minimal editorial
+- **Light mode**: ✓ Light
+- **Dark mode**: ✓ Dark-ready (token inversion)
+- **Performance**: ✓ Performant
+- **Accessibility**: ✓ WCAG AA
+- **Era**: Enterprise/SaaS
+- **Complexity**: High
+
+**AI prompt**: Design a Modern Enterprise SaaS mobile app. Background #F8FAFC, surfaces #FFFFFF, primary #4F46E5 (Indigo), secondary #7C3AED (Violet). Typography: Plus Jakarta Sans, ExtraBold 800 for screen titles, Bold 700 for section headers, SemiBold 600 for buttons, Regular 400 for body. Line height 1.1–1.2 for titles, 1.4–1.5 for body. Primary button: full-width, LinearGradient Indigo→Violet, pill-shaped or radius 12, scale 0.95 on press with medium haptic. Cards: white bg, 16pt radius, hairline border, shadow rgba(79,70,229,0.08). Inputs: white bg, 8pt radius, floating label, Indigo border on focus. Bottom Tab Navigation (3–5 items), gradient active tab icon. Screen padding 16–20pt. Vertical rhythm 24pt between sections, 12pt between items. Shared Element Transition for hero cards opening to detail.
+
+```css
+/* Enterprise SaaS (Mobile) hints */
+backgroundColor: '#F8FAFC', surfaceBg: '#FFFFFF', textPrimary: '#0F172A', textMuted: '#64748B', primary: '#4F46E5', secondary: '#7C3AED', success: '#10B981', border: '#E2E8F0', radiusCard: 16, radiusButton: 999, radiusInput: 8, shadowCard: 'rgba(79,70,229,0.08)', gradientPrimary: ['#4F46E5', '#7C3AED'], screenPadding: 20
+```
+
+**Checklist**:
+- [ ] Background #F8FAFC applied
+- [ ] Indigo→Violet gradient on primary CTA
+- [ ] Colored card shadows (not gray)
+- [ ] Plus Jakarta Sans typography
+- [ ] Floating label inputs with Indigo focus
+- [ ] Scale 0.97 press with haptic Medium
+- [ ] Bottom Tab Navigation implemented
+- [ ] Safe Area strict compliance
+- [ ] Skeletal loading placeholders
+- [ ] Reduced Motion fallback
+
+## 84. Sketch Hand-Drawn (Mobile)
+
+- **Keywords**: sketch, hand-drawn, handwriting, wobbly, imperfect, paper, kalam, organic, collage, post-it, tape, offset shadow, scribble
+- **Primary colors**: Red Marker #FF4D4D, Pencil Black #2D2D2D
+- **Secondary colors**: Warm Paper #FDFBF7, Old Paper #E5E0D8, Blue Ballpoint #2D5DA1, Post-it Yellow #FFF9C4
+- **Effects**: Wobbly borderRadius (unique per corner: 15/25/20/10), borderWidth 2–3 solid/dashed, hard offset shadow via rear View (4px,4px) #2D2D2D, Kalam Bold headings, PatrickHand Regular body, slight rotation (-1deg/1deg) on cards, absolute SVG scribble overlays (arrows/tape/tacks), jiggle -2deg↔2deg on error, LayoutAnimation spring on layout changes, Haptics on press, paper texture repeating background
+- **Best for**: Low-fidelity prototyping, creative brands, children/picturebook apps, education tools, journaling apps, gamified puzzles
+- **Avoid for**: Enterprise dashboards, high-density data tables, fintech precision tools, medical or legal apps
+- **Light mode**: ✓ Light
+- **Dark mode**: ⚠ Dark (requires texture inversion)
+- **Performance**: ✓ Lightweight
+- **Accessibility**: ⚠ Moderate (small/muted text risk)
+- **Era**: Creative/Education
+- **Complexity**: Medium
+
+**AI prompt**: Design a Hand-Drawn (Sketch) mobile app. Background #FDFBF7 (warm paper texture). Typography: Kalam Bold for headings (high weight, felt-tip style), PatrickHand Regular for body (human but legible). Colors: Pencil Black #2D2D2D for all text and borders, Red Marker #FF4D4D for accents, Blue Ballpoint #2D5DA1for input focus. Cards: white background, wobbly corner radii (e.g., 15/25/20/10), borderWidth 3, rotate -1deg or +1deg. Hard offset shadow implemented as a second View behind the card offset 4px right and 4px down. Buttons: Post-it yellow #FFF9C4 for primary CTA, press state shifts the button (translateX 4, translateY 4) to cover the shadow. Inputs: PatrickHand font, wobbly border, focus changes to Blue Ballpoint. Add absolute SVG tape and tack decorations. Error: jiggle animation -2deg to +2deg. All touch targets minimum 48x48.
+
+```css
+/* Sketch Hand-Drawn (Mobile) hints */
+backgroundColor: '#FDFBF7', cardBg: '#FFFFFF', textPrimary: '#2D2D2D', accentRed: '#FF4D4D', accentBlue: '#2D5DA1', accentYellow: '#FFF9C4', border: '#2D2D2D', shadowView: 'offset 4px 4px #2D2D2D', wobblyRadius: [15,25,20,10], fontHeading: 'Kalam-Bold', fontBody: 'PatrickHand-Regular'
+```
+
+**Checklist**:
+- [ ] Warm paper background texture applied
+- [ ] Kalam Bold headings
+- [ ] Wobbly corner radii on all cards
+- [ ] Hard offset shadow View (not blur)
+- [ ] Cards slightly rotated
+- [ ] Button press shifts to cover shadow
+- [ ] SVG tape/tack decorations
+- [ ] PatrickHand for inputs
+- [ ] Jiggle error animation
+- [ ] Minimum 48x48 touch targets
+
+## 85. Neumorphism (Mobile)
+
+- **Keywords**: neumorphism, soft ui, dual shadow, extruded, inset, clay surface, monochromatic, cool grey, haptic, ceramic, physical, depth
+- **Primary colors**: Accent Violet #6C63FF, Clay Base #E0E5EC
+- **Secondary colors**: Text Dark #3D4852, Text Muted #6B7280, Shadow Light rgba(255,255,255,0.6), Shadow Dark rgba(163,177,198,0.7), Inset Background #D1D9E6
+- **Effects**: Full-screen #E0E5EC base, dual-layer shadow via nested View (light top-left + dark bottom-right), extruded convex resting state, inset concave pressed/input state, Reanimated scale 0.97 on press, shadow opacity interpolates 1→0.4 on press, Haptics Light on every interaction, 8pt grid, no blur shadows (no shadowRadius blend), nested depth (extruded card contains inset icon slot)
+- **Best for**: Minimal hardware controls, smart home apps, aesthetic utility tools, health monitors, brand showcase pages
+- **Avoid for**: High-density data, bright multi-color apps, apps needing strong visual hierarchy via color, dark-mode-only products
+- **Light mode**: ✓ Light-only
+- **Dark mode**: ✗ Dark (breaks material metaphor)
+- **Performance**: ✓ Lightweight
+- **Accessibility**: ⚠ Moderate (low-contrast risk)
+- **Era**: Tools/Lifestyle
+- **Complexity**: Medium
+
+**AI prompt**: Design a Neumorphism (Soft UI) mobile app. Entire background is a single color #E0E5EC (Cool Clay). No other background colors. Dual shadows: outer dark shadowColor rgba(163,177,198,0.7) offset(6,6) radius 10 + outer light #FFFFFF offset(-6,-6) radius 10 using nested View or react-native-shadow-2. Extruded (convex) for resting buttons and cards. Inset (concave) for inputs and pressed states. Buttons: height 56, borderRadius 16, scale 0.97 on press with shadow opacity→0.4, Haptics.impactAsync Light. Cards: padding 24, borderRadius 32, nested inner icon container uses inset style. Inputs: height 50, borderRadius 16, backgroundColor #E0E5EC (NOT white), inset depth effect, focus borderColor #6C63FF width 1.5. Typography: Plus Jakarta Sans Bold or System. Heading 24–32pt, body 16pt, caption 12pt, letterSpacing -0.5 for headings. Animation: 250ms Bezier(0.4,0,0.2,1). No black shadows, no pure white backgrounds.
+
+```css
+/* Neumorphism (Mobile) hints */
+backgroundColor: '#E0E5EC', textPrimary: '#3D4852', textMuted: '#6B7280', accent: '#6C63FF', shadowLight: 'rgba(255,255,255,0.6)', shadowDark: 'rgba(163,177,198,0.7)', insetBg: '#D1D9E6', radiusCard: 32, radiusButton: 16, radiusPill: 999, shadowOffset: 6, shadowRadius: 10
+```
+
+**Checklist**:
+- [ ] Single #E0E5EC base applied across all screens
+- [ ] Dual shadow (light+dark) implemented via nested View
+- [ ] Extruded resting state on cards/buttons
+- [ ] Inset concave state on inputs
+- [ ] Scale 0.97 press + shadow opacity interpolation
+- [ ] Haptics Light on all presses
+- [ ] No black shadows or white backgrounds
+- [ ] Nested depth pattern (extruded→inset)
+- [ ] Accent #6C63FF on active/focus only
+- [ ] 8pt grid spacing