MCP Probe Kit

[ { "No": "1", "Style Category": "Minimalism & Swiss Style", "Type": "General", "Keywords": "Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential", "Primary Colors": "Monochromatic, Black #000000, White #FFFFFF", "Secondary Colors": "Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent", "Effects & Animation": "Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading", "Best For": "Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools", "Do Not Use For": "Creative portfolios, entertainment, playful brands, artistic experiments", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "◐ Medium", "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10, MUI 9/10", "Era/Origin": "1950s Swiss", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary", "Implementation Checklist": "☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ WCAG AAA contrast verified, ☐ Mobile responsive grid", "Design System Variables": "--spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only" }, { "No": "2", "Style Category": "Neumorphism", "Type": "General", "Keywords": "Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic", "Primary Colors": "Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8", "Secondary Colors": "Tints/shades (±30%), gradient subtlety, color harmony", "Effects & Animation": "Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow", "Best For": "Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs", "Do Not Use For": "Complex apps, critical accessibility, data-heavy dashboards, high-contrast required", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "◐ Partial", "Performance": "⚡ Good", "Accessibility": "⚠ Low contrast", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "◐ Medium", "Framework Compatibility": "Tailwind 8/10, CSS-in-JS 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Rounded corners 12-16px consistent, ☐ Multiple shadow layers (2-3), ☐ Pastel color verified, ☐ Monochromatic palette checked, ☐ Press animation smooth 150ms", "Design System Variables": "--border-radius: 14px, --shadow-soft-1: -5px -5px 15px, --shadow-soft-2: 5px 5px 15px, --color-light: #F5F5F5, --color-primary: single pastel" }, { "No": "3", "Style Category": "Glassmorphism", "Type": "General", "Keywords": "Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer", "Primary Colors": "Translucent white: rgba(255,255,255,0.1-0.3)", "Secondary Colors": "Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA", "Effects & Animation": "Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth", "Best For": "Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation", "Do Not Use For": "Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Good", "Accessibility": "⚠ Ensure 4.5:1", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 9/10, MUI 8/10, Chakra 8/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked", "Design System Variables": "--blur-amount: 15px, --glass-opacity: 0.15, --border-color: rgba(255,255,255,0.2), --background: vibrant color, --text-color: light/dark based on BG" }, { "No": "4", "Style Category": "Brutalism", "Type": "General", "Keywords": "Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design", "Primary Colors": "Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF", "Secondary Colors": "Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary", "Effects & Animation": "No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks", "Best For": "Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs", "Do Not Use For": "Corporate environments, conservative industries, critical accessibility, customer-facing professional", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✗ Low", "Framework Compatibility": "Tailwind 10/10, Bootstrap 7/10", "Era/Origin": "1950s Brutalist", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional", "Design System Variables": "--border-radius: 0px, --transition-duration: 0s, --font-weight: 700-900, --colors: primary only, --border-style: visible, --grid-visible: true" }, { "No": "5", "Style Category": "3D & Hyperrealism", "Type": "General", "Keywords": "Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive", "Primary Colors": "Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0", "Secondary Colors": "Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)", "Effects & Animation": "WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)", "Best For": "Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR", "Do Not Use For": "Low-end mobile, performance-limited, critical accessibility, data tables/forms", "Light Mode ✓": "◐ Partial", "Dark Mode ✓": "◐ Partial", "Performance": "❌ Poor", "Accessibility": "⚠ Not accessible", "Mobile-Friendly": "✗ Low", "Conversion-Focused": "◐ Medium", "Framework Compatibility": "Three.js 10/10, R3F 10/10, Babylon.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()", "Implementation Checklist": "☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms", "Design System Variables": "--perspective: 1000px, --parallax-layers: 5, --lighting-intensity: realistic, --shadow-depth: 20-40%, --animation-duration: 300-400ms" }, { "No": "6", "Style Category": "Vibrant & Block-based", "Type": "General", "Keywords": "Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic", "Primary Colors": "Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00", "Secondary Colors": "Complementary: Orange #FF7F00, Shocking Pink #FF006E, Lime #CCFF00, triadic schemes", "Effects & Animation": "Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms", "Best For": "Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer", "Do Not Use For": "Financial institutions, healthcare, formal business, government, conservative, elderly", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Good", "Accessibility": "◐ Ensure WCAG", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Chakra 9/10, Styled 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movement", "Implementation 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+)", "Design System Variables": "--block-gap: 48px, --typography-size: 32px+, --color-palette: 4-6 vibrant colors, --animation: continuous pattern, --contrast-ratio: 7:1+" }, { "No": "7", "Style Category": "Dark Mode (OLED)", "Type": "General", "Keywords": "Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient", "Primary Colors": "Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27", "Secondary Colors": "Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF", "Effects & Animation": "Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus", "Best For": "Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light", "Do Not Use For": "Print-first content, high-brightness outdoor, color-accuracy-critical", "Light Mode ✓": "✗ No", "Dark Mode ✓": "✓ Only", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "◐ Low", "Framework Compatibility": "Tailwind 10/10, MUI 10/10, Chakra 10/10", "Era/Origin": "2020s Modern", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background", "Design System Variables": "--bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --glow-effect: minimal, --oled-optimized: true" }, { "No": "8", "Style Category": "Accessible & Ethical", "Type": "General", "Keywords": "High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic", "Primary Colors": "WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+)", "Secondary Colors": "Symbol-based colors (not color-only), supporting patterns, inclusive combinations", "Effects & Animation": "Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets", "Best For": "Government, healthcare, education, inclusive products, large audience, legal compliance, public", "Do Not Use For": "None - accessibility universal", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "All frameworks 10/10", "Era/Origin": "Universal", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ WCAG AAA verified, ☐ 7:1+ contrast checked, ☐ Keyboard navigation tested, ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ Semantic HTML used, ☐ Touch targets 44x44px", "Design System Variables": "--contrast-ratio: 7:1, --font-size-min: 16px, --focus-ring: 3-4px, --touch-target: 44x44px, --wcag-level: AAA, --keyboard-accessible: true, --sr-tested: true" }, { "No": "9", "Style Category": "Claymorphism", "Type": "General", "Keywords": "Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)", "Primary Colors": "Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG", "Secondary Colors": "Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle", "Effects & Animation": "Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions", "Best For": "Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games", "Do Not Use For": "Formal corporate, professional services, data-critical, serious/medical, legal apps, finance", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "◐ Partial", "Performance": "⚡ Good", "Accessibility": "⚠ Ensure 4.5:1", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 9/10, CSS-in-JS 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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)", "Implementation Checklist": "☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions", "Design System Variables": "--border-radius: 20px, --border-width: 3-4px, --shadow-inner: inset -2px -2px 8px, --shadow-outer: 4px 4px 8px, --color-palette: pastels, --animation: bounce" }, { "No": "10", "Style Category": "Aurora UI", "Type": "General", "Keywords": "Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract", "Primary Colors": "Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF", "Secondary Colors": "Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)", "Effects & Animation": "Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph", "Best For": "Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections", "Do Not Use For": "Data-heavy dashboards, critical accessibility, content-heavy where distraction issues", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Good", "Accessibility": "⚠ Text contrast", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 9/10, CSS-in-JS 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified", "Design System Variables": "--gradient-colors: complementary pairs, --animation-duration: 8-12s, --blend-mode: screen, --color-saturation: 1.2, --effect: iridescent, --loop-smooth: true" }, { "No": "11", "Style Category": "Retro-Futurism", "Type": "General", "Keywords": "Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave", "Primary Colors": "Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0", "Secondary Colors": "Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents", "Effects & Animation": "CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)", "Best For": "Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk", "Do Not Use For": "Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Dark focused", "Performance": "⚠ Moderate", "Accessibility": "⚠ High contrast/strain", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "◐ Medium", "Framework Compatibility": "Tailwind 8/10, CSS-in-JS 9/10", "Era/Origin": "1980s Retro", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Neon colors used, ☐ CRT scanlines effect, ☐ Glitch animations active, ☐ Monospace font, ☐ Deep black background, ☐ Glow effects applied, ☐ 80s patterns present", "Design System Variables": "--neon-colors: #0080FF #FF006E #00FFFF, --background: #000000, --font-family: monospace, --effect: glitch+glow, --scanline-opacity: 0.3, --crt-effect: true" }, { "No": "12", "Style Category": "Flat Design", "Type": "General", "Keywords": "2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy", "Primary Colors": "Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)", "Secondary Colors": "Complementary colors, muted secondaries, high saturation, clean accents", "Effects & Animation": "No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons", "Best For": "Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate", "Do Not Use For": "Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 10/10, MUI 9/10", "Era/Origin": "2010s Modern", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ No shadows/gradients, ☐ 4-6 solid colors max, ☐ Clean lines consistent, ☐ Simple shapes used, ☐ Icon-heavy layout, ☐ High saturation colors, ☐ Fast loading verified", "Design System Variables": "--shadow: none, --color-palette: 4-6 solid, --border-radius: 2px, --gradient: none, --icons: simplified SVG, --animation: minimal 150-200ms" }, { "No": "13", "Style Category": "Skeuomorphism", "Type": "General", "Keywords": "Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material", "Primary Colors": "Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects", "Secondary Colors": "Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors", "Effects & Animation": "Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)", "Best For": "Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education", "Do Not Use For": "Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)", "Light Mode ✓": "◐ Partial", "Dark Mode ✓": "◐ Partial", "Performance": "❌ Poor", "Accessibility": "⚠ Textures reduce readability", "Mobile-Friendly": "✗ Low", "Conversion-Focused": "◐ Medium", "Framework Compatibility": "CSS-in-JS 7/10, Custom 8/10", "Era/Origin": "2007-2012 iOS", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "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)", "Implementation Checklist": "☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced", "Design System Variables": "--gradient-stops: 8-12, --texture-overlay: noise+grain, --shadow-layers: 3+, --animation-duration: 300-500ms, --depth-effect: pronounced, --tactile: true" }, { "No": "14", "Style Category": "Liquid Glass", "Type": "General", "Keywords": "Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration", "Primary Colors": "Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity", "Secondary Colors": "Chromatic aberration (Red-Cyan), iridescent oil-spill, fluid gradient blends, holographic effects", "Effects & Animation": "Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions", "Best For": "Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios", "Do Not Use For": "Performance-limited, critical accessibility, complex data, budget projects", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Moderate-Poor", "Accessibility": "⚠ Text contrast", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✓ High", "Framework Compatibility": "Framer Motion 10/10, GSAP 10/10", "Era/Origin": "2020s Modern", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "animation: morphing SVG paths (400-600ms), backdrop-filter: blur + saturate, filter: hue-rotate + brightness, blend-mode: screen, background: iridescent gradient", "Implementation Checklist": "☐ Morphing animations 400-600ms, ☐ Chromatic aberration applied, ☐ Dynamic blur active, ☐ Iridescent gradients, ☐ Smooth color transitions, ☐ Premium feel achieved", "Design System Variables": "--morph-duration: 400-600ms, --blur-amount: 15px, --chromatic-aberration: true, --iridescent: true, --blend-mode: screen, --smooth-transitions: true" }, { "No": "15", "Style Category": "Motion-Driven", "Type": "General", "Keywords": "Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions", "Primary Colors": "Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors", "Secondary Colors": "Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback", "Effects & Animation": "Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions", "Best For": "Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS", "Do Not Use For": "Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Good", "Accessibility": "⚠ Prefers-reduced-motion", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ High", "Framework Compatibility": "GSAP 10/10, Framer Motion 10/10", "Era/Origin": "2020s Modern", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms", "Implementation Checklist": "☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected", "Design System Variables": "--animation-duration: 300-400ms, --parallax-layers: 5, --scroll-behavior: smooth, --gpu-accelerated: true, --entrance-animation: true, --page-transition: smooth" }, { "No": "16", "Style Category": "Micro-interactions", "Type": "General", "Keywords": "Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive", "Primary Colors": "Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B", "Secondary Colors": "Accent feedback, neutral supporting, clear action indicators", "Effects & Animation": "Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic", "Best For": "Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components", "Do Not Use For": "Desktop-only, critical performance, accessibility-first (alternatives needed)", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ Good", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Framer Motion 10/10, React Spring 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop", "Implementation Checklist": "☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle", "Design System Variables": "--micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error" }, { "No": "17", "Style Category": "Inclusive Design", "Type": "General", "Keywords": "Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal", "Primary Colors": "WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary", "Secondary Colors": "Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators", "Effects & Animation": "Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic", "Best For": "Public services, education, healthcare, finance, government, accessible consumer, inclusive", "Do Not Use For": "None - accessibility universal", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "All frameworks 10/10", "Era/Origin": "Universal", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation 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", "Design System Variables": "--contrast-ratio: 7:1, --font-size: 16px+, --keyboard-accessible: true, --sr-compatible: true, --wcag-level: AAA, --color-symbols: true, --haptic: enabled" }, { "No": "18", "Style Category": "Zero Interface", "Type": "General", "Keywords": "Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient", "Primary Colors": "Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8", "Secondary Colors": "Subtle feedback: light green, light red, minimal UI elements, soft accents", "Effects & Animation": "Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions", "Best For": "Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences", "Do Not Use For": "Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ Excellent", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Custom 10/10", "Era/Origin": "2020s AI-Era", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Voice commands responsive, ☐ Gesture detection active, ☐ AI predictions hidden/revealed, ☐ Progressive disclosure working, ☐ Minimal visible UI, ☐ Smart suggestions contextual", "Design System Variables": "--voice-ui: enabled, --gesture-detection: active, --ai-predictions: smart, --progressive-disclosure: true, --visible-ui: minimal, --context-aware: true" }, { "No": "19", "Style Category": "Soft UI Evolution", "Type": "General", "Keywords": "Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid", "Primary Colors": "Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy", "Secondary Colors": "Better combinations, accessible secondary, supporting with improved contrast, modern accents", "Effects & Animation": "Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA", "Best For": "Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid", "Do Not Use For": "Extreme minimalism, critical performance, systems without modern OS", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA+", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 9/10, MUI 9/10, Chakra 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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+", "Implementation Checklist": "☐ Improved contrast AA/AAA, ☐ Soft shadows modern, ☐ Border-radius 8-12px, ☐ Animations 200-300ms, ☐ Focus states visible, ☐ Color hierarchy clear", "Design System Variables": "--shadow-soft: modern blend, --border-radius: 10px, --animation-duration: 200-300ms, --contrast-ratio: 4.5:1+, --color-hierarchy: improved, --wcag-level: AA+" }, { "No": "20", "Style Category": "Hero-Centric Design", "Type": "Landing Page", "Keywords": "Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual", "Primary Colors": "Brand primary color, white/light backgrounds for contrast, accent color for CTA", "Secondary Colors": "Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)", "Effects & Animation": "Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect", "Best For": "SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies", "Do Not Use For": "Complex navigation, multi-page experiences, data-heavy applications", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Good", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ Full", "Conversion-Focused": "✓ Very High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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)", "Implementation 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", "Design System Variables": "--hero-min-height: 100vh, --headline-size: clamp(2rem, 5vw, 4rem), --cta-padding: 1rem 2rem, --overlay-opacity: 0.5, --text-shadow: 0 2px 4px rgba(0,0,0,0.3)" }, { "No": "21", "Style Category": "Conversion-Optimized", "Type": "Landing Page", "Keywords": "Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value", "Primary Colors": "Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers", "Secondary Colors": "Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits", "Effects & Animation": "Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback", "Best For": "E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers", "Do Not Use For": "Complex feature explanations, multi-product showcases, technical documentation", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ Full (mobile-optimized)", "Conversion-Focused": "✓ Very High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation 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", "Design System Variables": "--cta-color: high contrast primary, --form-max-width: 600px, --input-height: 48px, --focus-ring: 3px solid accent, --success-color: #22C55E, --error-color: #EF4444" }, { "No": "22", "Style Category": "Feature-Rich Showcase", "Type": "Landing Page", "Keywords": "Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs", "Primary Colors": "Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs", "Secondary Colors": "Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)", "Effects & Animation": "Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions", "Best For": "Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products", "Do Not Use For": "Simple product pages, early-stage startups with few features, entertainment landing pages", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Good", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "display: grid, grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), gap: 2rem, card hover effects (translateY -4px), icon containers, alternating background colors", "Implementation Checklist": "☐ Feature grid responsive, ☐ Icons consistent style, ☐ Card hover effects smooth, ☐ Alternating sections contrast, ☐ Benefits clearly stated, ☐ Mobile stacks properly", "Design System Variables": "--card-padding: 2rem, --card-radius: 12px, --icon-size: 48px, --grid-gap: 2rem, --section-padding: 4rem 0, --hover-transform: translateY(-4px)" }, { "No": "23", "Style Category": "Minimal & Direct", "Type": "Landing Page", "Keywords": "Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading", "Primary Colors": "Monochromatic primary, white background, single accent color for CTA, black/dark grey text", "Secondary Colors": "Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements", "Effects & Animation": "Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll", "Best For": "Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios", "Do Not Use For": "Feature-heavy products, complex explanations, multi-product showcases", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ Full", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Single column centered, ☐ White space generous, ☐ One primary CTA only, ☐ No decorative images, ☐ Page weight < 500KB, ☐ Load time < 2s", "Design System Variables": "--content-max-width: 680px, --spacing-large: 4rem, --font-size-body: 18px, --line-height: 1.6, --color-text: #1a1a1a, --color-bg: #ffffff" }, { "No": "24", "Style Category": "Social Proof-Focused", "Type": "Landing Page", "Keywords": "Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers", "Primary Colors": "Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds", "Secondary Colors": "Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors", "Effects & Animation": "Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings", "Best For": "B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands", "Do Not Use For": "Startup MVPs, products without users, niche/experimental products", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Good", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ Full", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "testimonial cards with avatar, logo grid (grayscale filter), star rating SVGs, counter animations (count-up), blockquote styling, carousel for testimonials, metric cards", "Implementation Checklist": "☐ Testimonials with real photos, ☐ Logo grid 6-12 logos, ☐ Star ratings accessible, ☐ Metrics animated on scroll, ☐ Case studies linked, ☐ Mobile carousel works", "Design System Variables": "--avatar-size: 64px, --logo-height: 40px, --star-color: #FBBF24, --metric-font-size: 3rem, --testimonial-bg: #F9FAFB, --blockquote-border: 4px solid accent" }, { "No": "25", "Style Category": "Interactive Product Demo", "Type": "Landing Page", "Keywords": "Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos", "Primary Colors": "Primary brand, interface colors matching product, demo highlight colors for interactive elements", "Secondary Colors": "Product UI colors, tutorial step colors (numbered progression), hover state indicators", "Effects & Animation": "Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction", "Best For": "SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software", "Do Not Use For": "Simple services, consulting, non-digital products, complexity-averse audiences", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Good (video/interactive)", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ Very High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "video element with controls, position: relative for overlays, hover reveal (opacity transition), step indicators, modal for full demo, screenshot lightbox, play button overlay", "Implementation Checklist": "☐ Demo video loads fast, ☐ Fallback for no-JS, ☐ Step indicators clear, ☐ Hover states obvious, ☐ Mobile touch friendly, ☐ Demo CTA prominent", "Design System Variables": "--video-aspect-ratio: 16/9, --overlay-bg: rgba(0,0,0,0.7), --step-indicator-size: 32px, --play-button-size: 80px, --transition-duration: 300ms" }, { "No": "26", "Style Category": "Trust & Authority", "Type": "Landing Page", "Keywords": "Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges", "Primary Colors": "Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)", "Secondary Colors": "Certificate highlight colors, metric showcase colors, comparison highlight (success green)", "Effects & Animation": "Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal", "Best For": "Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services", "Do Not Use For": "Casual products, entertainment, viral/social-first products", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ Full", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "badge grid layout, shield icons, lock icons for security, certificate styling, metric cards with icons, professional color scheme (blue/grey), subtle shadows for depth", "Implementation Checklist": "☐ Security badges visible, ☐ Certifications verified, ☐ Metrics with sources, ☐ Professional imagery, ☐ Guarantee clearly stated, ☐ Contact info accessible", "Design System Variables": "--badge-height: 48px, --trust-color: #1E40AF, --security-green: #059669, --card-shadow: 0 4px 6px rgba(0,0,0,0.1), --metric-highlight: #F59E0B" }, { "No": "27", "Style Category": "Storytelling-Driven", "Type": "Landing Page", "Keywords": "Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization", "Primary Colors": "Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety", "Secondary Colors": "Story section color coding, emotional state colors (calm, excitement, success), transitional gradients", "Effects & Animation": "Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative", "Best For": "Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational", "Do Not Use For": "Technical/complex products (unless narrative-driven), traditional enterprise software", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Moderate (animations)", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "scroll-snap sections, Intersection Observer for reveals, parallax backgrounds, section transitions, timeline CSS, narrative typography (varied sizes), image-text alternating", "Implementation Checklist": "☐ Story flows naturally, ☐ Scroll reveals smooth, ☐ Sections timed well, ☐ Emotional hooks present, ☐ Mobile story readable, ☐ Skip option available", "Design System Variables": "--section-min-height: 100vh, --reveal-duration: 600ms, --narrative-font: serif, --chapter-spacing: 8rem, --timeline-color: accent, --parallax-speed: 0.5" }, { "No": "28", "Style Category": "Data-Dense Dashboard", "Type": "BI/Analytics", "Keywords": "Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility", "Primary Colors": "Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333", "Secondary Colors": "Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)", "Effects & Animation": "Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners", "Best For": "Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing", "Do Not Use For": "Marketing dashboards, consumer-facing analytics, simple reporting", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✗ Not applicable", "Framework Compatibility": "Recharts 9/10, Chart.js 9/10, D3.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Grid layout 12 columns, ☐ KPI cards responsive, ☐ Tables sortable, ☐ Filters functional, ☐ Loading states for data, ☐ Export functionality", "Design System Variables": "--grid-gap: 8px, --card-padding: 12px, --font-size-small: 12px, --table-row-height: 36px, --sidebar-width: 240px, --header-height: 56px" }, { "No": "29", "Style Category": "Heat Map & Heatmap Style", "Type": "BI/Analytics", "Keywords": "Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring", "Primary Colors": "Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)", "Secondary Colors": "Support gradients: Light (cool blue) to dark (warm red), divergent for positive/negative data, monochromatic options", "Effects & Animation": "Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation", "Best For": "Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data", "Do Not Use For": "Linear data representation, categorical comparisons (use bar charts), small datasets", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full (with adjustments)", "Performance": "⚡ Excellent", "Accessibility": "⚠ Colorblind considerations", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✗ Not applicable", "Framework Compatibility": "Recharts 9/10, Chart.js 9/10, D3.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "display: grid, background: linear-gradient for legend, cell hover states, tooltip positioning, color scale (blue→white→red), SVG for geographic, canvas for large datasets", "Implementation Checklist": "☐ Color scale clear, ☐ Legend visible, ☐ Tooltips informative, ☐ Colorblind alternatives, ☐ Zoom/pan for geo, ☐ Performance for large data", "Design System Variables": "--heatmap-cool: #0080FF, --heatmap-neutral: #FFFFFF, --heatmap-hot: #FF0000, --cell-size: 24px, --legend-width: 200px, --tooltip-bg: rgba(0,0,0,0.9)" }, { "No": "30", "Style Category": "Executive Dashboard", "Type": "BI/Analytics", "Keywords": "High-level KPIs, large key metrics, minimal detail, summary view, trend indicators, at-a-glance insights, executive summary", "Primary Colors": "Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns", "Secondary Colors": "KPI highlight colors: positive (green), negative (red), neutral (grey), trend arrow colors", "Effects & Animation": "KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect", "Best For": "C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views", "Do Not Use For": "Detailed analyst dashboards, technical deep-dives, operational monitoring", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✗ Low (not mobile-optimized)", "Conversion-Focused": "✗ Not applicable", "Framework Compatibility": "Recharts 9/10, Chart.js 9/10, D3.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ KPIs 4-6 maximum, ☐ Trends visible, ☐ Status colors clear, ☐ One-page view, ☐ Mobile simplified, ☐ Print-friendly layout", "Design System Variables": "--kpi-font-size: 48px, --sparkline-height: 32px, --status-green: #22C55E, --status-yellow: #F59E0B, --status-red: #EF4444, --card-min-width: 280px" }, { "No": "31", "Style Category": "Real-Time Monitoring", "Type": "BI/Analytics", "Keywords": "Live data updates, status indicators, alert notifications, streaming data visualization, active monitoring, streaming charts", "Primary Colors": "Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)", "Secondary Colors": "Status indicator colors, chart line colors varying by metric, streaming data highlight colors", "Effects & Animation": "Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect", "Best For": "System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking", "Do Not Use For": "Historical analysis, long-term trend reports, archived data dashboards", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Good (real-time load)", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✗ Not applicable", "Framework Compatibility": "Recharts 9/10, Chart.js 9/10, D3.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "animation: pulse for live, WebSocket for streaming, position: fixed for alerts, status-dot with animation, chart real-time updates, notification toast, connection indicator", "Implementation Checklist": "☐ Live updates working, ☐ Alert sounds optional, ☐ Connection status shown, ☐ Auto-refresh indicated, ☐ Critical alerts prominent, ☐ Offline fallback", "Design System Variables": "--pulse-animation: pulse 2s infinite, --alert-z-index: 1000, --live-indicator: #22C55E, --critical-color: #DC2626, --update-interval: 5s, --toast-duration: 5s" }, { "No": "32", "Style Category": "Drill-Down Analytics", "Type": "BI/Analytics", "Keywords": "Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation", "Primary Colors": "Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors", "Secondary Colors": "Drill-down path indicator colors, level-specific colors, highlight colors for selected level, transition colors", "Effects & Animation": "Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation", "Best For": "Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence", "Do Not Use For": "Simple linear data, single-metric dashboards, streaming real-time dashboards", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Good", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✗ Not applicable", "Framework Compatibility": "Recharts 9/10, Chart.js 9/10, D3.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "breadcrumb nav with separators, details/summary for expand, transition for drill animation, position: sticky breadcrumb, nested grid layouts, smooth scroll to detail", "Implementation Checklist": "☐ Breadcrumbs clear, ☐ Back navigation easy, ☐ Expand animation smooth, ☐ Context preserved, ☐ Mobile drill works, ☐ Deep links supported", "Design System Variables": "--breadcrumb-separator: /, --expand-duration: 300ms, --level-indent: 24px, --back-button-size: 40px, --context-bar-height: 48px, --drill-transition: 300ms ease" }, { "No": "33", "Style Category": "Comparative Analysis Dashboard", "Type": "BI/Analytics", "Keywords": "Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks", "Primary Colors": "Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)", "Secondary Colors": "Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors", "Effects & Animation": "Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare", "Best For": "Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance", "Do Not Use For": "Single metric dashboards, future projections (use forecasting), real-time only (no historical)", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✗ Not applicable", "Framework Compatibility": "Recharts 9/10, Chart.js 9/10, D3.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "display: flex for side-by-side, gap for comparison spacing, color coding (green up, red down), arrow indicators, diff highlighting, comparison table zebra striping", "Implementation Checklist": "☐ Period selector works, ☐ Deltas calculated, ☐ Colors meaningful, ☐ Benchmarks shown, ☐ Mobile stacks properly, ☐ Export comparison", "Design System Variables": "--positive-color: #22C55E, --negative-color: #EF4444, --neutral-color: #6B7280, --comparison-gap: 2rem, --arrow-size: 16px, --badge-padding: 4px 8px" }, { "No": "34", "Style Category": "Predictive Analytics", "Type": "BI/Analytics", "Keywords": "Forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insights, anomaly detection visualization", "Primary Colors": "Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors", "Secondary Colors": "High confidence (dark color), low confidence (light color), anomaly colors (red/orange), normal trend (green/blue)", "Effects & Animation": "Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations", "Best For": "Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning", "Do Not Use For": "Historical-only dashboards, simple reporting, real-time operational dashboards", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Good (computation)", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✗ Not applicable", "Framework Compatibility": "Recharts 9/10, Chart.js 9/10, D3.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "stroke-dasharray for forecast lines, fill-opacity for confidence bands, anomaly markers (circles), tooltip for predictions, toggle switches for scenarios, gradient for probability", "Implementation Checklist": "☐ Forecast line distinct, ☐ Confidence bands visible, ☐ Anomalies highlighted, ☐ Scenarios switchable, ☐ Predictions dated, ☐ Accuracy shown", "Design System Variables": "--forecast-dash: 5 5, --confidence-opacity: 0.2, --anomaly-color: #F59E0B, --prediction-color: #8B5CF6, --scenario-toggle-width: 48px, --ai-accent: #6366F1" }, { "No": "35", "Style Category": "User Behavior Analytics", "Type": "BI/Analytics", "Keywords": "Funnel visualization, user flow diagrams, conversion tracking, engagement metrics, user journey mapping, cohort analysis", "Primary Colors": "Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)", "Secondary Colors": "Stage completion colors (success), abandonment colors (warning), engagement levels (gradient), cohort colors", "Effects & Animation": "Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill", "Best For": "Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking", "Do Not Use For": "Real-time operational metrics, technical system monitoring, financial transactions", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Good", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✗ Not applicable", "Framework Compatibility": "Recharts 9/10, Chart.js 9/10, D3.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "SVG funnel with gradients, Sankey diagram library, percentage labels, cohort grid cells, retention chart (line/area), click heatmap overlay, session timeline", "Implementation Checklist": "☐ Funnel stages clear, ☐ Flow diagram readable, ☐ Conversions calculated, ☐ Cohorts comparable, ☐ Retention trends visible, ☐ Privacy compliant", "Design System Variables": "--funnel-width: 100%, --stage-colors: gradient, --flow-opacity: 0.6, --cohort-cell-size: 40px, --retention-line-color: #3B82F6, --engagement-scale: 5 levels" }, { "No": "36", "Style Category": "Financial Dashboard", "Type": "BI/Analytics", "Keywords": "Revenue metrics, profit/loss visualization, budget tracking, financial ratios, portfolio performance, cash flow, audit trail", "Primary Colors": "Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)", "Secondary Colors": "Revenue highlight (green), expenses (red), budget variance (orange/red), balance (grey), accuracy (blue)", "Effects & Animation": "Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions", "Best For": "Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics", "Do Not Use For": "Simple business dashboards, entertainment/social metrics, non-financial data", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✗ Low", "Conversion-Focused": "✗ Not applicable", "Framework Compatibility": "Recharts 9/10, Chart.js 9/10, D3.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "number formatting (Intl.NumberFormat), waterfall chart (positive/negative bars), variance coloring, table with totals row, sparkline for trends, sticky column headers", "Implementation Checklist": "☐ Currency formatted, ☐ Decimals consistent, ☐ P&L clear, ☐ Budget variance shown, ☐ Audit trail complete, ☐ Export to Excel", "Design System Variables": "--currency-symbol: $, --decimal-places: 2, --profit-color: #22C55E, --loss-color: #EF4444, --variance-threshold: 10%, --table-header-bg: #F3F4F6" }, { "No": "37", "Style Category": "Sales Intelligence Dashboard", "Type": "BI/Analytics", "Keywords": "Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy", "Primary Colors": "Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)", "Secondary Colors": "Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors", "Effects & Animation": "Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights", "Best For": "CRM dashboards, sales management, opportunity tracking, performance management, quota planning", "Do Not Use For": "Marketing analytics, customer support metrics, HR dashboards", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Good", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✗ Not applicable", "Framework Compatibility": "Recharts 9/10, Chart.js 9/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "kanban columns (flex), gauge chart (SVG arc), leaderboard ranking styles, map integration (Mapbox/Google), timeline vertical, deal card with status border", "Implementation Checklist": "☐ Pipeline stages shown, ☐ Deals draggable, ☐ Quotas visualized, ☐ Rankings updated, ☐ Territory clickable, ☐ CRM integration", "Design System Variables": "--pipeline-colors: stage gradient, --gauge-track: #E5E7EB, --gauge-fill: primary, --rank-1-color: #FFD700, --rank-2-color: #C0C0C0, --rank-3-color: #CD7F32" }, { "No": "38", "Style Category": "Neubrutalism", "Type": "General", "Keywords": "Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z", "Primary Colors": "#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)", "Secondary Colors": "Limited accent colors, high contrast combinations, no gradients allowed", "Effects & Animation": "box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography", "Best For": "Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs", "Do Not Use For": "Luxury brands, finance, healthcare, conservative industries (too playful)", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 8/10", "Era/Origin": "2020s Modern", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients", "Implementation Checklist": "☐ Hard borders (2-4px), ☐ Hard offset shadows, ☐ High saturation colors, ☐ Bold typography, ☐ No blurs/gradients, ☐ Distinctive 'ugly-cute' look", "Design System Variables": "--border-width: 3px, --shadow-offset: 4px, --shadow-color: #000, --colors: high saturation, --font: bold sans" }, { "No": "39", "Style Category": "Bento Box Grid", "Type": "General", "Keywords": "Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards", "Primary Colors": "Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary", "Secondary Colors": "Subtle gradients, shadow variations, accent highlights for interactive cards", "Effects & Animation": "grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions", "Best For": "Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS", "Do Not Use For": "Dense data tables, text-heavy content, real-time monitoring", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, CSS Grid 10/10", "Era/Origin": "2020s Apple", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "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)", "Implementation Checklist": "☐ Grid responsive (4→2→1 cols), ☐ Card spans varied, ☐ Rounded corners consistent, ☐ Shadows subtle, ☐ Content fits cards, ☐ Hover scale (1.02)", "Design System Variables": "--grid-gap: 16px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: 0 4px 6px rgba(0,0,0,0.05), --hover-scale: 1.02" }, { "No": "40", "Style Category": "Y2K Aesthetic", "Type": "General", "Keywords": "Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia", "Primary Colors": "#FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple)", "Secondary Colors": "Metallic gradients, glossy overlays, iridescent effects, chrome textures", "Effects & Animation": "linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes", "Best For": "Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused", "Do Not Use For": "B2B enterprise, healthcare, finance, conservative industries, elderly users", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "◐ Partial", "Performance": "⚠ Good", "Accessibility": "⚠ Check contrast", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 8/10, CSS-in-JS 9/10", "Era/Origin": "Y2K 2000s", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Neon colors balanced, ☐ Chrome effects visible, ☐ Glossy buttons styled, ☐ Bubble shapes decorative, ☐ Sparkle animations, ☐ Retro fonts loaded", "Design System Variables": "--neon-pink: #FF69B4, --neon-cyan: #00FFFF, --chrome-silver: #C0C0C0, --glossy-gradient: linear-gradient(180deg, white 0%, transparent 50%), --glow-blur: 10px" }, { "No": "41", "Style Category": "Cyberpunk UI", "Type": "General", "Keywords": "Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir", "Primary Colors": "#00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)", "Secondary Colors": "Neon gradients, scanline overlays, glitch colors, terminal green accents", "Effects & Animation": "Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts", "Best For": "Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment", "Do Not Use For": "Corporate enterprise, healthcare, family apps, conservative brands, elderly users", "Light Mode ✓": "✗ No", "Dark Mode ✓": "✓ Only", "Performance": "⚠ Moderate", "Accessibility": "⚠ Limited (dark+neon)", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "◐ Medium", "Framework Compatibility": "Tailwind 8/10, Custom CSS 10/10", "Era/Origin": "2020s Cyberpunk", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "background: #0D0D0D, color: #00FF00 or #FF00FF, font-family: monospace, text-shadow: 0 0 10px neon, animation: glitch (transform skew), ::before scanlines (repeating-linear-gradient)", "Implementation Checklist": "☐ Dark background only, ☐ Neon accents visible, ☐ Glitch effect subtle, ☐ Scanlines optional, ☐ Monospace font, ☐ Terminal aesthetic", "Design System Variables": "--bg-dark: #0D0D0D, --neon-green: #00FF00, --neon-magenta: #FF00FF, --neon-cyan: #00FFFF, --scanline-opacity: 0.1, --glitch-duration: 0.3s" }, { "No": "42", "Style Category": "Organic Biophilic", "Type": "General", "Keywords": "Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures", "Primary Colors": "#228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)", "Secondary Colors": "Natural gradients, earth tones, sky blues, organic textures, wood/stone colors", "Effects & Animation": "Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes", "Best For": "Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands", "Do Not Use For": "Tech-focused products, gaming, industrial, urban brands", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, CSS 10/10", "Era/Origin": "2020s Sustainable", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "border-radius: 16-24px (varied), background: earth tones, SVG organic shapes (blob), box-shadow: natural soft, color: #228B22 #8B4513 #87CEEB, texture overlays (subtle)", "Implementation Checklist": "☐ Earth tones dominant, ☐ Organic curves present, ☐ Natural textures subtle, ☐ Green accents, ☐ Rounded everywhere, ☐ Calming feel", "Design System Variables": "--forest-green: #228B22, --earth-brown: #8B4513, --sky-blue: #87CEEB, --cream-bg: #F5F5DC, --organic-radius: 24px, --shadow-soft: 0 8px 32px rgba(0,0,0,0.08)" }, { "No": "43", "Style Category": "AI-Native UI", "Type": "General", "Keywords": "Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions", "Primary Colors": "Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)", "Secondary Colors": "Status indicators, streaming highlights, context card colors, subtle accent variations", "Effects & Animation": "Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals", "Best For": "AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces", "Do Not Use For": "Traditional forms, data-heavy dashboards, print-first content", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, React 10/10", "Era/Origin": "2020s AI-Era", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Chat layout responsive, ☐ Typing indicator smooth, ☐ Input always visible, ☐ Context cards styled, ☐ AI responses distinct, ☐ User messages aligned right", "Design System Variables": "--ai-accent: #6366F1, --user-bubble-bg: #E0E7FF, --ai-bubble-bg: #F9FAFB, --input-height: 48px, --typing-dot-size: 8px, --message-gap: 16px" }, { "No": "44", "Style Category": "Memphis Design", "Type": "General", "Keywords": "80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold", "Primary Colors": "#FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple)", "Secondary Colors": "Complementary geometric colors, pattern fills, contrasting accent shapes", "Effects & Animation": "transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes", "Best For": "Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment", "Do Not Use For": "Corporate finance, healthcare, legal, elderly users, conservative brands", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "⚠ Check contrast", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "◐ Medium", "Framework Compatibility": "Tailwind 9/10, CSS 10/10", "Era/Origin": "1980s Postmodern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Geometric shapes visible, ☐ Colors bold/clashing, ☐ Patterns present, ☐ Layout asymmetric, ☐ Playful decorations, ☐ 80s vibe achieved", "Design System Variables": "--memphis-pink: #FF71CE, --memphis-yellow: #FFCE5C, --memphis-teal: #86CCCA, --memphis-purple: #6A7BB4, --pattern-size: 20px, --shape-rotation: 15deg" }, { "No": "45", "Style Category": "Vaporwave", "Type": "General", "Keywords": "Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic", "Primary Colors": "#FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)", "Secondary Colors": "Sunset gradients, glitch overlays, VHS effects, neon accents, pastel variations", "Effects & Animation": "text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines", "Best For": "Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects", "Do Not Use For": "Business apps, e-commerce, education, healthcare, enterprise software", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Dark focused", "Performance": "⚠ Moderate", "Accessibility": "⚠ Poor (motion)", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "◐ Medium", "Framework Compatibility": "Tailwind 8/10, CSS-in-JS 9/10", "Era/Origin": "1980s-90s Retro", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "background: linear-gradient(180deg, #FF71CE, #01CDFE, #B967FF), filter: hue-rotate(), text-shadow: neon glow, retro grid (perspective + linear-gradient), VHS scanlines", "Implementation Checklist": "☐ Sunset gradient present, ☐ Neon glow applied, ☐ Retro grid visible, ☐ Glitch effects subtle, ☐ Dreamy atmosphere, ☐ 80s-90s aesthetic", "Design System Variables": "--vapor-pink: #FF71CE, --vapor-cyan: #01CDFE, --vapor-mint: #05FFA1, --vapor-purple: #B967FF, --grid-color: rgba(255,255,255,0.1), --glow-intensity: 15px" }, { "No": "46", "Style Category": "Dimensional Layering", "Type": "General", "Keywords": "Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy", "Primary Colors": "Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements", "Secondary Colors": "Shadow variations (sm/md/lg/xl), elevation colors, highlight colors for top layers", "Effects & Animation": "z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax", "Best For": "Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces", "Do Not Use For": "Print-style layouts, simple blogs, low-end devices, flat design requirements", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Good", "Accessibility": "⚠ Moderate (SR issues)", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, MUI 10/10, Chakra 10/10", "Era/Origin": "2020s Modern", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Layers clearly defined, ☐ Shadows show depth, ☐ Overlaps intentional, ☐ Hierarchy clear, ☐ Performance optimized, ☐ Mobile depth maintained", "Design System Variables": "--elevation-1: 0 1px 3px rgba(0,0,0,0.1), --elevation-2: 0 4px 6px rgba(0,0,0,0.1), --elevation-3: 0 10px 20px rgba(0,0,0,0.1), --elevation-4: 0 20px 40px rgba(0,0,0,0.15), --blur-amount: 8px" }, { "No": "47", "Style Category": "Exaggerated Minimalism", "Type": "General", "Keywords": "Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design", "Primary Colors": "#000000 (Black), #FFFFFF (White), single vibrant accent only", "Secondary Colors": "Minimal - single accent color, no secondary colors, extreme restraint", "Effects & Animation": "font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace", "Best For": "Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial", "Do Not Use For": "E-commerce catalogs, dashboards, forms, data-heavy, elderly users, complex apps", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Typography.js 10/10", "Era/Origin": "2020s Modern", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "font-size: clamp(3rem, 10vw, 12rem), font-weight: 900, letter-spacing: -0.05em, color: #000 or #FFF, padding: 8rem+, single accent, no decorations", "Implementation Checklist": "☐ Typography oversized, ☐ White space extreme, ☐ Black/white dominant, ☐ Single accent only, ☐ Elements minimal, ☐ Statement clear", "Design System Variables": "--type-giant: clamp(3rem, 10vw, 12rem), --type-weight: 900, --spacing-huge: 8rem, --color-primary: #000000, --color-bg: #FFFFFF, --accent: single color only" }, { "No": "48", "Style Category": "Kinetic Typography", "Type": "General", "Keywords": "Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text", "Primary Colors": "Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette", "Secondary Colors": "Accent colors for emphasis, transition colors, gradient text fills", "Effects & Animation": "@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text", "Best For": "Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages", "Do Not Use For": "Long-form content, accessibility-critical, data interfaces, forms, elderly users", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Moderate", "Accessibility": "❌ Poor (motion)", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ Very High", "Framework Compatibility": "GSAP 10/10, Framer Motion 10/10", "Era/Origin": "2020s Modern", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "@keyframes for text animation, background-clip: text, GSAP SplitText, typing effect (steps()), transform on letters, scroll-triggered (Intersection Observer), variable fonts for morphing", "Implementation Checklist": "☐ Text animations smooth, ☐ Prefers-reduced-motion respected, ☐ Fallback for no-JS, ☐ Mobile performance ok, ☐ Typing effect timed, ☐ Scroll triggers work", "Design System Variables": "--text-animation-duration: 1s, --letter-delay: 0.05s, --typing-speed: 100ms, --gradient-text: linear-gradient(90deg, #color1, #color2), --morph-duration: 0.5s" }, { "No": "49", "Style Category": "Parallax Storytelling", "Type": "General", "Keywords": "Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered", "Primary Colors": "Story-dependent, often gradients and natural colors, section-specific palettes", "Secondary Colors": "Section transition colors, depth layer colors, narrative mood colors", "Effects & Animation": "transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations", "Best For": "Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns", "Do Not Use For": "E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "❌ Poor", "Accessibility": "❌ Poor (motion)", "Mobile-Friendly": "✗ Low", "Conversion-Focused": "✓ High", "Framework Compatibility": "GSAP ScrollTrigger 10/10, Locomotive Scroll 10/10", "Era/Origin": "2020s Modern", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "position: fixed/sticky, transform: translateY(calc()), perspective: 1px, z-index layering, scroll-snap-type, Intersection Observer for triggers, will-change: transform", "Implementation Checklist": "☐ Layers parallax smoothly, ☐ Story flows naturally, ☐ Mobile alternative provided, ☐ Performance optimized, ☐ Skip option available, ☐ Reduced motion fallback", "Design System Variables": "--parallax-speed-bg: 0.3, --parallax-speed-mid: 0.6, --parallax-speed-fg: 1, --section-height: 100vh, --transition-duration: 600ms, --perspective: 1px" }, { "No": "50", "Style Category": "Swiss Modernism 2.0", "Type": "General", "Keywords": "Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing", "Primary Colors": "#000000, #FFFFFF, #F5F5F5, single vibrant accent only", "Secondary Colors": "Minimal secondary, accent for emphasis only, no gradients", "Effects & Animation": "display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy", "Best For": "Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation", "Do Not Use For": "Playful brands, children's sites, entertainment, gaming, emotional storytelling", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, Bootstrap 9/10, Foundation 10/10", "Era/Origin": "1950s Swiss + 2020s", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ 12-column grid strict, ☐ Spacing mathematical, ☐ Typography hierarchy clear, ☐ Single accent only, ☐ No decorations, ☐ High contrast verified", "Design System Variables": "--grid-columns: 12, --grid-gap: 1rem, --base-unit: 8px, --font-primary: Inter, --color-text: #000000, --color-bg: #FFFFFF, --accent: single vibrant" }, { "No": "51", "Style Category": "HUD / Sci-Fi FUI", "Type": "General", "Keywords": "Futuristic, technical, wireframe, neon, data, transparency, iron man, sci-fi, interface", "Primary Colors": "Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000", "Secondary Colors": "Transparent Black, Grid Lines #333333", "Effects & Animation": "Glow effects, scanning animations, ticker text, blinking markers, fine line drawing", "Best For": "Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards", "Do Not Use For": "Standard corporate, reading heavy content, accessible public services", "Light Mode ✓": "✓ Low", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Moderate (renders)", "Accessibility": "⚠ Poor (thin lines)", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✗ Low", "Framework Compatibility": "React 9/10, Canvas 10/10", "Era/Origin": "2010s Sci-Fi", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Fine lines 1px, ☐ Neon glow text/borders, ☐ Monospaced font, ☐ Dark/Transparent BG, ☐ Decorative tech markers, ☐ Holographic feel", "Design System Variables": "--hud-color: #00FFFF, --bg-color: rgba(0,10,20,0.9), --line-width: 1px, --glow: 0 0 5px, --font: monospace" }, { "No": "52", "Style Category": "Pixel Art", "Type": "General", "Keywords": "Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade", "Primary Colors": "Primary colors (NES Palette), brights, limited palette", "Secondary Colors": "Black outlines, shading via dithering or block colors", "Effects & Animation": "Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text", "Best For": "Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT", "Do Not Use For": "Professional corporate, modern SaaS, high-res photography sites", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ Good (if contrast ok)", "Mobile-Friendly": "✓ High", "Conversion-Focused": "◐ Medium", "Framework Compatibility": "CSS (box-shadow) 8/10, Canvas 10/10", "Era/Origin": "1980s Arcade", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "font-family: 'Press Start 2P', image-rendering: pixelated, box-shadow: 4px 0 0 #000 (pixel border), no anti-aliasing", "Implementation Checklist": "☐ Pixelated fonts loaded, ☐ Images sharp (no blur), ☐ CSS box-shadow for pixel borders, ☐ Retro palette, ☐ Blocky layout", "Design System Variables": "--pixel-size: 4px, --font: pixel font, --border-style: pixel-shadow, --anti-alias: none" }, { "No": "53", "Style Category": "Bento Grids", "Type": "General", "Keywords": "Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft", "Primary Colors": "Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F", "Secondary Colors": "Subtle accents, soft shadows, blurred backdrops", "Effects & Animation": "Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal", "Best For": "Product features, dashboards, personal sites, marketing summaries, galleries", "Do Not Use For": "Long-form reading, data tables, complex forms", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "CSS Grid 10/10, Tailwind 10/10", "Era/Origin": "2020s Apple/Linear", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle", "Implementation Checklist": "☐ Grid layout (CSS Grid), ☐ Rounded corners 16-24px, ☐ Varied card spans, ☐ Content fits card size, ☐ Responsive re-flow, ☐ Apple-like aesthetic", "Design System Variables": "--grid-gap: 20px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: soft" }, { "No": "55", "Style Category": "Spatial UI (VisionOS)", "Type": "General", "Keywords": "Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro", "Primary Colors": "Frosted Glass #FFFFFF (15-30% opacity), System White", "Secondary Colors": "Vibrant system colors for active states, deep shadows for depth", "Effects & Animation": "Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus", "Best For": "Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards", "Do Not Use For": "Text-heavy documents, high-contrast requirements, non-3D capable devices", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Moderate (blur cost)", "Accessibility": "⚠ Contrast risks", "Mobile-Friendly": "✓ High (if adapted)", "Conversion-Focused": "✓ High", "Framework Compatibility": "SwiftUI, React (Three.js/Fiber)", "Era/Origin": "2024 Spatial Era", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Glass effect visible, ☐ Depth layers clear, ☐ Hover states defined, ☐ Colors vibrant on active, ☐ Floating feel achieved, ☐ Contrast maintained", "Design System Variables": "--glass-bg: rgba(255,255,255,0.2), --glass-blur: 40px, --glass-saturate: 180%, --window-radius: 24px, --depth-shadow: 0 8px 32px rgba(0,0,0,0.1), --focus-scale: 1.02" }, { "No": "56", "Style Category": "E-Ink / Paper", "Type": "General", "Keywords": "Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome", "Primary Colors": "Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A", "Secondary Colors": "Pencil Grey #4A4A4A, Highlighter Yellow #FFFF00 (accent)", "Effects & Animation": "No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)", "Best For": "Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands", "Do Not Use For": "Gaming, video platforms, high-energy marketing, dark mode dependent apps", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✗ Low (inverted only)", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ Medium", "Framework Compatibility": "Tailwind 10/10, CSS 10/10", "Era/Origin": "2020s Digital Well-being", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "background: #FDFBF7 (paper white), color: #1A1A1A, transition: none, font-family: serif for reading, no gradients, border: 1px solid #E0E0E0, texture overlay (noise)", "Implementation Checklist": "☐ Paper background color, ☐ High contrast text, ☐ No animations, ☐ Reading optimized, ☐ Distraction-free, ☐ Print-friendly", "Design System Variables": "--paper-bg: #FDFBF7, --ink-color: #1A1A1A, --pencil-grey: #4A4A4A, --border-color: #E0E0E0, --font-reading: Georgia, --transition: none" }, { "No": "57", "Style Category": "Gen Z Chaos / Maximalism", "Type": "General", "Keywords": "Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic", "Primary Colors": "Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF", "Secondary Colors": "Gradients, rainbow, glitch, noise, heavily saturated mix", "Effects & Animation": "Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop", "Best For": "Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion", "Do Not Use For": "Corporate, government, healthcare, banking, serious tools", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Poor (heavy assets)", "Accessibility": "❌ Poor", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✓ High (Viral)", "Framework Compatibility": "CSS-in-JS 8/10", "Era/Origin": "2023+ Internet Core", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "mix-blend-mode: multiply/screen, transform: rotate(random), animation: jitter, marquee text, position: absolute for scattered elements, filter: saturate(150%), z-index chaos", "Implementation Checklist": "☐ Colors clash intentionally, ☐ Stickers/overlays present, ☐ Layout chaotic but usable, ☐ GIFs optimized, ☐ Mobile scrollable, ☐ Performance acceptable", "Design System Variables": "--chaos-pink: #FF00FF, --chaos-green: #00FF00, --chaos-yellow: #FFFF00, --chaos-blue: #0000FF, --jitter-amount: 5deg, --saturate: 150%" }, { "No": "58", "Style Category": "Biomimetic / Organic 2.0", "Type": "General", "Keywords": "Nature-inspired, cellular, fluid, breathing, generative, algorithms, life-like", "Primary Colors": "Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue", "Secondary Colors": "Deep Ocean #001E3C, Coral #FF7F50, Organic gradients", "Effects & Animation": "Breathing animations, fluid morphing, generative growth, physics-based movement", "Best For": "Sustainability tech, biotech, advanced health, meditation, generative art platforms", "Do Not Use For": "Standard SaaS, data grids, strict corporate, accounting", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Moderate", "Accessibility": "✓ Good", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ High", "Framework Compatibility": "Canvas 10/10, WebGL 10/10", "Era/Origin": "2024+ Generative", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Organic shapes present, ☐ Animations feel alive, ☐ Generative elements, ☐ Performance monitored, ☐ Mobile fallback, ☐ Accessibility alt content", "Design System Variables": "--cellular-pink: #FF9999, --chlorophyll: #00FF41, --bioluminescent: #00FFFF, --breathing-duration: 4s, --morph-ease: cubic-bezier(0.4, 0, 0.2, 1), --organic-blur: 20px" }, { "No": "59", "Style Category": "Anti-Polish / Raw Aesthetic", "Type": "General", "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 & Animation": "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", "Do Not Use For": "Corporate enterprise, fintech, healthcare, government, polished SaaS", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "CSS 10/10, SVG 10/10", "Era/Origin": "2025+ Anti-Digital", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "background: url(paper-texture.png), filter: grayscale() contrast(), border: hand-drawn SVG, transform: rotate(small random), no smooth transitions, sketch-style fonts, opacity variations", "Implementation Checklist": "☐ Textures loaded, ☐ Hand-drawn elements present, ☐ Imperfections intentional, ☐ Authentic feel achieved, ☐ Performance ok with textures, ☐ Accessibility maintained", "Design System Variables": "--paper-bg: #FAFAF8, --pencil-color: #4A4A4A, --marker-black: #1A1A1A, --kraft-brown: #C4A77D, --sketch-rotation: random(-3deg, 3deg), --texture-opacity: 0.3" }, { "No": "60", "Style Category": "Tactile Digital / Deformable UI", "Type": "General", "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 & Animation": "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", "Do Not Use For": "Enterprise software, data dashboards, accessibility-critical, professional tools", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Good", "Accessibility": "⚠ Motion sensitive", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ Very High", "Framework Compatibility": "Framer Motion 10/10, React Spring 10/10, GSAP 10/10", "Era/Origin": "2025+ Tactile Era", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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)", "Implementation Checklist": "☐ Press effect visible, ☐ Bounce-back smooth, ☐ Material feels tactile, ☐ Spring physics tuned, ☐ Mobile touch responsive, ☐ Reduced motion option", "Design System Variables": "--press-scale: 0.95, --bounce-duration: 400ms, --spring-stiffness: 300, --spring-damping: 20, --material-glossy: linear-gradient(135deg, white 0%, transparent 60%), --depth-shadow: 0 10px 30px rgba(0,0,0,0.2)" }, { "No": "61", "Style Category": "Nature Distilled", "Type": "General", "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 & Animation": "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", "Do Not Use For": "Tech startups, gaming, nightlife, corporate finance, high-energy brands", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "◐ Partial", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Tailwind 10/10, CSS 10/10", "Era/Origin": "2025+ Handmade Warmth", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "background: warm earth tones, color: #C67B5C #D4C4A8 #6B7B3C, border-radius: organic (varied), box-shadow: soft natural, texture overlays (grain), font: humanist sans-serif", "Implementation Checklist": "☐ Earth tones dominant, ☐ Warm feel achieved, ☐ Textures subtle, ☐ Handmade quality, ☐ Sustainable messaging, ☐ Calming aesthetic", "Design System Variables": "--terracotta: #C67B5C, --sand-beige: #D4C4A8, --warm-clay: #B5651D, --soft-cream: #F5F0E1, --olive-green: #6B7B3C, --grain-opacity: 0.1" }, { "No": "62", "Style Category": "Interactive Cursor Design", "Type": "General", "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 & Animation": "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", "Do Not Use For": "Mobile-first (no cursor), accessibility-critical, data-heavy dashboards, forms", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Good", "Accessibility": "⚠ Not for touch/SR", "Mobile-Friendly": "✗ No cursor", "Conversion-Focused": "✓ High", "Framework Compatibility": "GSAP 10/10, Framer Motion 10/10, Custom JS 10/10", "Era/Origin": "2025+ Interactive", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Custom cursor works, ☐ Hover morph smooth, ☐ Magnetic pull subtle, ☐ Trail performance ok, ☐ Click feedback visible, ☐ Touch fallback provided", "Design System Variables": "--cursor-size: 20px, --cursor-hover-scale: 1.5, --magnetic-distance: 100px, --trail-length: 10, --trail-fade: 0.1, --blend-mode: difference" }, { "No": "63", "Style Category": "Voice-First Multimodal", "Type": "General", "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 & Animation": "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", "Do Not Use For": "Visual-heavy content, data entry, complex forms, noisy environments", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ Excellent", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "Web Speech API 10/10, React 10/10", "Era/Origin": "2025+ Voice Era", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Voice recognition works, ☐ Visual feedback clear, ☐ Listening state obvious, ☐ Speaking animation smooth, ☐ Fallback UI provided, ☐ Accessibility excellent", "Design System Variables": "--listening-color: #6B8FAF, --speaking-color: #22C55E, --waveform-height: 60px, --pulse-duration: 1.5s, --indicator-size: 24px, --voice-accent: #9B8FBB" }, { "No": "64", "Style Category": "3D Product Preview", "Type": "General", "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 & Animation": "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", "Do Not Use For": "Content-heavy sites, blogs, dashboards, low-bandwidth, accessibility-critical", "Light Mode ✓": "◐ Partial", "Dark Mode ✓": "◐ Partial", "Performance": "❌ Poor (3D rendering)", "Accessibility": "⚠ Alt content needed", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✓ Very High", "Framework Compatibility": "Three.js 10/10, model-viewer 10/10, Spline 9/10", "Era/Origin": "2025+ E-commerce 3D", "Complexity": "High", "AI Prompt Keywords": "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/Technical Keywords": "Three.js or model-viewer, OrbitControls, touch events for rotation, WebXR for AR, canvas with WebGL, loading placeholder, LOD for performance, environment lighting", "Implementation Checklist": "☐ 3D model loads fast, ☐ Rotation smooth, ☐ Zoom works (pinch/scroll), ☐ AR button functional, ☐ Colors switchable, ☐ Mobile touch works", "Design System Variables": "--canvas-bg: #F5F5F5, --hotspot-color: #3B82F6, --loading-spinner: primary, --rotation-speed: 0.5, --zoom-min: 0.5, --zoom-max: 2" }, { "No": "65", "Style Category": "Gradient Mesh / Aurora Evolved", "Type": "General", "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 & Animation": "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", "Do Not Use For": "Data interfaces, text-heavy content, accessibility-critical, conservative brands", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚠ Good", "Accessibility": "⚠ Text contrast", "Mobile-Friendly": "✓ Good", "Conversion-Focused": "✓ High", "Framework Compatibility": "CSS 8/10, SVG 10/10, Canvas 10/10", "Era/Origin": "2025+ Gradient Evolution", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Mesh gradient visible, ☐ Colors flow smoothly, ☐ Aurora effect achieved, ☐ Performance acceptable, ☐ Text remains readable, ☐ Mobile renders ok", "Design System Variables": "--mesh-color-1: #00FFFF, --mesh-color-2: #FF00FF, --mesh-color-3: #FFFF00, --mesh-color-4: #00FF66, --flow-duration: 10s, --shimmer-intensity: 0.3" }, { "No": "66", "Style Category": "Editorial Grid / Magazine", "Type": "General", "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 & Animation": "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", "Do Not Use For": "Dashboards, apps, e-commerce catalogs, real-time data, short-form content", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Full", "Performance": "⚡ Excellent", "Accessibility": "✓ WCAG AAA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ Medium", "Framework Compatibility": "CSS Grid 10/10, Tailwind 10/10", "Era/Origin": "2020s Editorial Digital", "Complexity": "Low", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Grid asymmetric, ☐ Typography editorial, ☐ Pull quotes styled, ☐ Drop caps present, ☐ Images large/impactful, ☐ Mobile reflows well", "Design System Variables": "--grid-cols: asymmetric, --body-font: Georgia/Merriweather, --heading-font: bold sans, --drop-cap-size: 4em, --pull-quote-size: 1.5em, --column-gap: 2rem" }, { "No": "67", "Style Category": "Chromatic Aberration / RGB Split", "Type": "General", "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 & Animation": "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", "Do Not Use For": "Corporate, healthcare, finance, accessibility-critical, elderly users", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "✓ Dark preferred", "Performance": "⚠ Good", "Accessibility": "⚠ Can cause strain", "Mobile-Friendly": "◐ Medium", "Conversion-Focused": "✓ High", "Framework Compatibility": "CSS filters 10/10, GSAP 10/10", "Era/Origin": "2020s Retro-Tech", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ RGB split visible, ☐ Glitch effect controlled, ☐ Scan lines subtle, ☐ Performance ok, ☐ Readability maintained, ☐ Reduced motion option", "Design System Variables": "--rgb-offset: 2px, --red-channel: #FF0000, --green-channel: #00FF00, --blue-channel: #0000FF, --glitch-duration: 0.3s, --scanline-opacity: 0.1" }, { "No": "68", "Style Category": "Vintage Analog / Retro Film", "Type": "General", "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 & Animation": "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", "Do Not Use For": "Modern tech, SaaS, healthcare, children's apps, corporate enterprise", "Light Mode ✓": "✓ Full", "Dark Mode ✓": "◐ Partial", "Performance": "⚡ Good", "Accessibility": "✓ WCAG AA", "Mobile-Friendly": "✓ High", "Conversion-Focused": "✓ High", "Framework Compatibility": "CSS filters 10/10, Canvas 9/10", "Era/Origin": "1970s-90s Analog Revival", "Complexity": "Medium", "AI Prompt Keywords": "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/Technical Keywords": "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", "Implementation Checklist": "☐ Film grain visible, ☐ Colors faded/warm, ☐ Light leaks present, ☐ Nostalgic feel achieved, ☐ Performance with filters, ☐ Images look vintage", "Design System Variables": "--sepia-amount: 20%, --contrast: 1.1, --saturation: 0.8, --grain-opacity: 0.15, --light-leak-color: rgba(255,200,100,0.2), --warm-tint: #F5E6C8" } ]