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