139 KiB
139 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 |
| 69 | 69 | Bauhaus (包豪斯) | Mobile | bauhaus, geometric, constructivist, primary colors, hard shadow, bold, tactile, functional, poster, mechanical, architectural | Primary Red #D02020, Primary Blue #1040C0, Primary Yellow #F0C020 | Background #F0F0F0 (Off-white), Foreground #121212 (Stark Black), Muted #E0E0E0 | Hard offset shadows (4px 4px 0px black), mechanical press active:translate, no smooth hover — instant 0ms transitions, dot grid pattern on sections, slide-over transitions | Mobile-first apps needing high personality, onboarding flows, branding-forward product screens, artisan/design brands, editorial mobile experiences | Enterprise dashboards, accessibility-critical contexts (requires extra a11y work), data-heavy screens, conservative industries | ✓ Full | ◐ Partial (primary palette only) | ⚡ Excellent | ⚠ WCAG AA (high contrast primaries; verify yellow text separately) | ✓ Mobile-First | ◐ Medium | React Native 10/10, Expo 10/10, SwiftUI 9/10, Flutter 9/10, Tailwind 9/10 | 1919 Bauhaus Movement | Medium | Design a Bauhaus mobile app. Use strict geometric shapes (circles and squares only), primary color blocking (Red #D02020, Blue #1040C0, Yellow #F0C020), hard 4px offset black shadows, OFF-WHITE canvas (#F0F0F0), massive bold uppercase headlines (Outfit Black 900), rectangular full-width buttons with mechanical press animation. No gradients. No rounded cards. No soft transitions. | border-radius: 0px (cards/inputs) or 9999px (buttons/FAB), box-shadow: 4px 4px 0px 0px #121212, active:translate-x-[2px] active:translate-y-[2px] active:shadow-none, border: 2px solid #121212, font-family: Outfit, font-weight: 900 uppercase tracking-tighter (headlines) | ☐ Geometric shapes only (circle/square), ☐ Primary color blocking applied, ☐ Hard offset shadows 4px, ☐ border-2 border-black on all elements, ☐ Mechanical press active state, ☐ Outfit Black 900 uppercase headlines, ☐ Safe area (pt-safe pb-safe) respected, ☐ Thumb-friendly h-12/h-14 touch targets, ☐ No hover states (mobile-only), ☐ Vertical rhythm single-column stack | --color-red: #D02020, --color-blue: #1040C0, --color-yellow: #F0C020, --color-bg: #F0F0F0, --color-fg: #121212, --border-width: 2px, --shadow-hard: 4px 4px 0px 0px #121212, --radius-block: 0px, --radius-pill: 9999px, --font-display: Outfit, --font-weight-hero: 900 |
| 70 | 70 | Minimalist Monochrome | Mobile | monochrome, black white, editorial, austere, typographic, sharp, zero radius, high contrast, brutalist, pocket editorial, serif, mechanical | Pure Black #000000, Pure White #FFFFFF | Muted #F5F5F5, Dark Gray #525252, Border Light #E5E5E5 | Instant inversion active state (tap → bg-black text-white, zero transition-none), no shadows (strictly 2D), full-bleed horizontal rules (4px black section dividers), subtle paper noise texture (opacity: 0.03), slide-in page transitions with hard edge | Luxury fashion e-commerce mobile, editorial publications, high-end portfolio apps, experimental/avant-garde brands, digital exhibitions | Entertainment, colorful brands, friendly consumer apps, anything requiring visual warmth or gradient | ✓ Full (Light Mode Enforced) | ◐ Dark by section only (inverted sections) | ⚡ Excellent | ✓ WCAG AAA (pure black/white) | ✓ Mobile-First | ◐ Medium | React Native 10/10, Expo 10/10, SwiftUI 9/10, Tailwind 9/10 | 2020s Editorial Mobile | Medium | Design a minimalist monochrome mobile app. Use ONLY black (#000000) and white (#FFFFFF). Zero border-radius on every element. No shadows — depth is created by 1–4px black borders and color inversion only. Typography is the primary visual: Playfair Display for heroes (text-5xl–text-6xl, tracking-tighter, leading-[0.9]), Source Serif 4 for body, JetBrains Mono for labels/tags. Tap states instantly invert (bg-black text-white). Full-width horizontal rules separate sections. Use the word 'MENU' instead of hamburger icon. | border-radius: 0px (ALL elements including modals), box-shadow: none, active:bg-black active:text-white transition-none, border-b-4 border-black (section dividers), divide-y divide-black (lists), font-family: Playfair Display (headers) + Source Serif 4 (body) + JetBrains Mono (labels), background-image: noise SVG opacity-[0.03] | ☐ 0px border-radius on ALL elements, ☐ No shadows anywhere, ☐ Instant inversion on every tap (transition-none), ☐ 4px black line separates hero from content, ☐ Safe area respected (pt-safe pb-safe), ☐ h-14 touch targets, ☐ Sticky section headers with border-b, ☐ Typography hero: word spans full screen width, ☐ Paper noise texture on backgrounds, ☐ Menu word-label instead of icon | --color-bg: #FFFFFF, --color-fg: #000000, --color-muted: #F5F5F5, --color-muted-fg: #525252, --color-border: #000000, --color-border-light: #E5E5E5, --radius: 0px, --shadow: none, --border-hairline: 1px solid #E5E5E5, --border-thin: 1px solid #000000, --border-thick: 2px solid #000000, --border-heavy: 4px solid #000000, --font-display: Playfair Display, --font-body: Source Serif 4, --font-mono: JetBrains Mono |
| 71 | 71 | Modern Dark (Cinema Mobile) | Mobile | dark mode, cinematic, ambient light, glassmorphism, deep black, indigo, glow, blur, atmospheric, reanimated, haptic, premium, layered, frosted glass, linear gradient | Deep #020203, Base #050506, Elevated #0a0a0c, Accent #5E6AD2 | Foreground #EDEDEF, Muted #8A8F98, Accent Glow rgba(94 106 210/0.2), Border rgba(255 255 255/0.08), Surface rgba(255 255 255/0.05) | Expo.out Bezier(0.16,1,0.3,1) easing; spring modals (damping:20 stiffness:90); haptic-linked press (Impact Light/Medium); animated ambient light blobs (Reanimated translateX/Y slow oscillation); BlurView glassmorphism headers/nav (intensity 20); scale press 0.97 → 1.0; avoid pure #000000 (OLED smear) | Developer tools, pro productivity apps, fintech/trading dashboards, media/streaming platforms, AI tool interfaces, high-end gaming companion apps | Consumer apps needing warmth, children's apps, health/medical contexts where dark feels harsh, high-accessibility contexts needing maximum contrast | ✓ Light mode only as exception | ✓ Dark Mode Primary | ⚠ Good (blur effects require native driver) | ⚠ WCAG AA (requires careful accent contrast check) | ✓ Mobile-First | ◐ Medium | React Native 10/10, Expo 10/10, react-native-skia 9/10, SwiftUI 8/10 | 2020s Cinematic Mobile | High | Design a cinematic dark mobile app. Background: LinearGradient from #0a0a0f (top) to #020203 (bottom). Add 2–3 absolute animated 'blob' views: circular, blurRadius 30–50, opacity 0.08–0.12, slow Reanimated oscillation. Cards: borderRadius 16, border rgba(255,255,255,0.08) hairline, subtle top-edge shine gradient. Primary button: #5E6AD2, scale press 0.97, haptic on press. BlurView (intensity 20, tint dark) for tab bar and headers. Typography: Inter 700 for headers, 400 for body. Never use pure #000000. Accent glow: rgba(94,106,210,0.2) behind primary actions. | borderRadius: 16 (cards/buttons), background: LinearGradient #0a0a0f→#020203, border: StyleSheet.hairlineWidth rgba(255,255,255,0.08), BlurView intensity={20} tint='dark', useAnimatedStyle + withRepeat (blob oscillation), Easing.bezier(0.16,1,0.3,1), withSpring damping:20 stiffness:90, Haptics.impactAsync(ImpactFeedbackStyle.Light), scale: 0.97 press | ☐ No pure #000000 backgrounds, ☐ LinearGradient base screen, ☐ Animated ambient blobs (Reanimated, native driver), ☐ BlurView on tab bar and headers, ☐ borderRadius 16 on all cards, ☐ Haptic feedback on every Pressable, ☐ Bezier(0.16,1,0.3,1) easing used, ☐ Accent glow behind primary button, ☐ No solid grey borders (rgba only), ☐ Bottom sheets replace all modals | --bg-deep: #020203, --bg-base: #050506, --bg-elevated: #0a0a0c, --surface: rgba(255 255 255/0.05), --foreground: #EDEDEF, --foreground-muted: #8A8F98, --accent: #5E6AD2, --accent-glow: rgba(94 106 210/0.2), --border: rgba(255 255 255/0.08), --radius: 16px, --easing: cubic-bezier(0.16 1 0.3 1), --font: Inter |
| 72 | 72 | SaaS Mobile (High-Tech Boutique) | Mobile | saas, electric blue, gradient, fintech, spring animation, dual font, glassmorphism, boutique, premium, calistoga, inter, mono, tactile, haptic, bento | Electric Blue #0052FF, Gradient End #4D7CFF | Background #FAFAFA, Foreground #0F172A, Muted #F1F5F9, Card #FFFFFF, Border #E2E8F0 | Spring animations (mass:1 damping:15 stiffness:120); gradient buttons (0052FF→4D7CFF); scale press 0.96→1.0 with haptics; floating FAB with gentle bobbing (Reanimated); glassmorphism BlurView navigation bars; staggered fade-in entrance (Y:20→0 + opacity:0→1); pulsing status dot on section badges; layout transitions (LayoutAnimation or Reanimated entering) | B2B SaaS mobile dashboards, fintech apps, developer tool mobile companions, marketing analytics apps, HR/operations apps, modern business productivity | Pure consumer entertainment, children's apps, highly decorative lifestyle apps, contexts where Electric Blue feels too corporate | ✓ Full | ◐ Partial | ⚡ Excellent | ✓ WCAG AA | ✓ Mobile-First | ✓ High | React Native 10/10, Expo 10/10, NativeWind 10/10, SwiftUI 8/10, Flutter 9/10 | 2020s SaaS Mobile | Medium | Design a high-tech boutique SaaS mobile app. Primary canvas: #FAFAFA (warm off-white). Cards: #FFFFFF with 1pt Slate-200 border, iOS shadow (shadowOpacity:0.1, shadowRadius:10, offset y:4), Android elevation:4, padding 24px, borderRadius 16. Buttons: LinearGradient #0052FF→#4D7CFF, height 56px, borderRadius 16, scale press 0.96 + haptic. Section badges: rounded pill with rgba(0,82,255,0.05) bg and rgba(0,82,255,0.2) border + PulseDot + JetBrains Mono text. Typography: Calistoga for heroes (36–42pt), Inter for body (16–18pt), JetBrains Mono for data labels. All screen transitions: spring (mass:1 damping:15 stiffness:120). Always include SafeAreaView. | borderRadius: 16 (buttons/cards), LinearGradient colors={['#0052FF','#4D7CFF']}, shadowOpacity: 0.1, shadowRadius: 10, elevation: 4, Haptics.impactAsync(ImpactFeedbackStyle.Light) on press, withSpring({mass:1, damping:15, stiffness:120}), withTiming Y:20→0 opacity:0→1 staggered entrance, LayoutAnimation.configureNext for list updates, BlurView on nav bars | ☐ SafeAreaView wraps all screens, ☐ All touch targets ≥ 44×44px, ☐ Spring config used for all transitions, ☐ Gradient buttons (not flat), ☐ Haptic on every Pressable, ☐ Section badges with PulseDot, ☐ Staggered entrance animation on screen mount, ☐ JetBrains Mono for data labels, ☐ Calistoga for hero headlines, ☐ Elevation/shadow on cards | --bg: #FAFAFA, --fg: #0F172A, --muted: #F1F5F9, --accent: #0052FF, --accent-sec: #4D7CFF, --card: #FFFFFF, --border: #E2E8F0, --radius: 16px, --shadow: shadowOpacity 0.1 shadowRadius 10, --spring: mass 1 damping 15 stiffness 120, --font-display: Calistoga, --font-body: Inter, --font-mono: JetBrains Mono |
| 73 | 73 | Terminal CLI (Mobile) | Mobile | terminal, cli, matrix green, monospace, hacker, ascii, command line, developer, web3, crypto, sci-fi, OLED, retro-future, field operative | Matrix Green #33FF00, OLED Black #050505 | Amber #FFB000, Muted Green #1A3D1A, Error Red #FF3333, Border Green #33FF00 | Blinking cursor (500ms opacity loop), typewriter text reveal hook, scanline overlay (repeating lines 0.05 opacity), ASCII art headers, instant color inversion on press (bg-green text-black), haptic on every keystroke, boot sequence splash on launch | Developer tools, Web3/blockchain apps, geek-culture apps, ARG games, sci-fi/noir gaming companions, hacker/security tools, creative studio portfolios | Consumer products, health apps, anything requiring approachability or warmth, children's apps, standard enterprise contexts | ✗ No | ✓ OLED Dark Only | ⚡ Excellent | ✓ High contrast (green on black ≫4.5:1 ratio) | ✓ Mobile-First (OLED optimized) | ✗ Low | React Native 10/10, Expo 10/10, NativeWind 9/10 | Retro-Future 1980s–2020s | Medium | Design a Mobile Terminal CLI app. Background: #050505 OLED black. ALL text in Matrix Green #33FF00. Font: JetBrains Mono or SpaceMono ONLY — zero border-radius everywhere. ASCII borders using +, -, |, * characters instead of standard containers. Buttons displayed as [ EXECUTE ] or > PROCEED. On press: instantly inverts to green bg + black text + haptic. Cursor: blinking View opacity 0→1 at 500ms. Show boot sequence on launch (fake log scroll). Progress bars as [#####-----] text. Status bar footer: [BATTERY:88%] [NET:CONNECTED]. Scanline overlay: absolute View with repeating 1px horizontal lines at opacity 0.05. Typewriter effect on new data. | borderRadius: 0 (ALL elements), borderWidth: 1, borderColor: '#33FF00', backgroundColor: '#050505', color: '#33FF00', fontFamily: 'SpaceMono-Regular' or JetBrains Mono, fontSize: 12 or 14 or 16 only, lineHeight: 1.2x fontSize, Haptics.impactAsync(Light) on every press, useAnimatedValue blink 500ms, hitSlop: 12px all sides for bracketed buttons | ☐ 0px border-radius everywhere, ☐ ASCII-style borders on cards, ☐ Boot sequence on launch, ☐ Blinking cursor component, ☐ Typewriter hook for new content, ☐ Scanline overlay (0.05 opacity), ☐ Haptic on every button press, ☐ Footer status bar component, ☐ hitSlop on all bracketed buttons (44×44dp), ☐ Reduced motion respected | --bg: #050505, --fg-primary: #33FF00, --fg-amber: #FFB000, --fg-muted: #1A3D1A, --fg-error: #FF3333, --border: #33FF00, --radius: 0px, --font: SpaceMono-Regular or JetBrains Mono, --font-sizes: 12 14 16 only, --blink-duration: 500ms, --scanline-opacity: 0.05 |
| 74 | 74 | Kinetic Brutalism (Mobile) | Mobile | kinetic, brutalism, motion, marquee, acid yellow, uppercase, oversized, aggressive typography, street, zine, high contrast, scroll-driven, haptic, reanimated | Acid Yellow #DFE104, Rich Black #09090B | Off-white #FAFAFA, Dark Gray #27272A, Zinc #A1A1AA, Border Zinc #3F3F46 | Infinite marquee (Reanimated, Linear easing, 5s loop, hard clip), hero parallax (scale 1.0→1.3 + fade), sticky section header push, card flood inversion on press (bg→#DFE104, text→#000000), haptic Medium on every press, scroll-triggered interpolate transforms, 0px radius, 2px borders, 100ms color transitions | Immersive storytelling apps, brand flagship mobile, music/culture platforms, sports apps, underground zines, limited-edition product drops, performance dashboards | Calm informational apps, healthcare, finance contexts needing trust, children's, any context where aggressive typography feels inappropriate | ✓ Dark Primary | ◐ Dark only (inverted sections) | ⚡ Excellent (native driver required) | ⚠ WCAG AA (verify zinc body text on dark bg) | ✓ Mobile-First | ✓ High energy | React Native 10/10, Expo 10/10, Reanimated 10/10, NativeWind 9/10 | 2020s Mobile Brutalism | High | Design a Kinetic Brutalism mobile app. Canvas: #09090B. Primary accent: Acid Yellow #DFE104 (text: #000000). Typography: Space Grotesk BOLD. Display text: 60–120pt, uppercase, letterSpacing -1, lineHeight 0.9–1.1x. Body: 18–20pt. Labels: 12pt uppercase letterSpacing +2. Add infinite marquee rows (Reanimated, no easing, hard edge clip). Hero text parallax on scroll (Interpolate: scale 1.0→1.3, opacity 1→0). Card press: instantly flood to #DFE104 + flip text to #000. Haptic Medium on every press. 0px radius. 2px solid borders. NO shadows. No gradients. Scale all fonts by (windowWidth / 375 * size) for responsiveness. | borderRadius: 0, borderWidth: 2, borderColor: '#3F3F46', backgroundColor: '#09090B', color: '#FAFAFA', fontWeight: '800 or 900', letterSpacing: -1 (large) or 2 (labels), lineHeight: 0.9–1.1 * fontSize, Reanimated withRepeat marquee timing 5000ms Easing.linear, Interpolate scroll→scale + opacity, Haptics.impactAsync(Medium), scale press: 0.95, 100ms color transitions | ☐ Infinite marquee rows (Reanimated, no fade edges), ☐ Hero parallax scroll (scale+opacity Interpolate), ☐ All display text uppercase, ☐ 0px border-radius, ☐ 2px borders, ☐ Acid yellow card flood on press, ☐ Haptic Medium on every interaction, ☐ Font scale helper (windowWidth/375*size), ☐ Safe area for massive headers, ☐ Reduced motion stops marquees | --bg: #09090B, --fg: #FAFAFA, --muted: #27272A, --muted-fg: #A1A1AA, --accent: #DFE104, --accent-fg: #000000, --border: #3F3F46, --radius: 0px, --border-width: 2px, --shadow: none, --marquee-speed: 5000ms, --press-duration: 100ms, --font: Space Grotesk or Inter |
| 75 | 75 | Flat Design Mobile (Touch-First) | Mobile | flat, 2D, no shadow, color blocking, geometric, bold, poster, icon, touch-first, minimal, clean, tailored, cross-platform | Blue #3B82F6, Emerald #10B981 | Background #FFFFFF, Surface #F3F4F6, Text #111827, Amber #F59E0B, Border #E5E7EB | Immediate press feedback (scale 0.97, no delay), color section blocking (full-width contrasting View), zero elevation/shadow, solid icon containers (colored squares/circles), geometric low-opacity shape overlays, bottom tabs solid fill (no floating) | Cross-platform apps (iOS+Android parity), information-dense dashboards, system UI, brand illustration, onboarding flows, marketing pages, icon design | Ultra-premium contexts needing depth/shadow, dark-mode-first products, contexts where flat design reads as unfinished or sterile | ✓ Full | ◐ Partial (Dark mode via color swap only) | ⚡ Excellent (no GPU effects) | ✓ WCAG AA (large bold type helps) | ✓ Mobile-First | ✓ High | React Native 10/10, Expo 10/10, NativeWind 10/10, Flutter 9/10, SwiftUI 9/10 | 2010s–2020s Flat Mobile | Low | Design a Flat Mobile app. NO shadows (shadowOpacity: 0, elevation: 0). Color creates all hierarchy. Sections: full-width View blocks alternating contrasting bg colors (Blue Hero → White Content → Gray Block). Buttons: solid #3B82F6, borderRadius 8, height 56. Cards: backgroundColor #FFFFFF (on gray bg) or #DBEAFE (blue tint) — no shadow. Text: fontWeight 800 letterSpacing -0.5 (heads), 600 (sub), 400 (body). Inputs: #F3F4F6 bg, focused: borderWidth 2 borderColor #3B82F6. Icons: Lucide strokeWidth 2.5 inside solid colored square/circle. Press feedback: scale 0.97 Pressable. Use position absolute low-opacity geometric shapes (circles, rotated squares) as background decoration. | shadowOpacity: 0, elevation: 0, borderRadius: 6/12/999, height: 48 minimum touch targets, spacing: 4/8/16/24/32/48 system, backgroundColor (section blocking), Pressable scale: pressed ? 0.97 : 1, fontWeight: '800' heads / '600' sub / '400' body, letterSpacing: -0.5 heads / 1 labels, textTransform: 'uppercase' labels, strokeWidth={2.5} icons, borderWidth: 3/4 for featured CTAs | ☐ Zero elevation AND shadowOpacity on all elements, ☐ Color-blocking sections (not borders), ☐ All touch targets ≥ 48×48, ☐ No gradients on flat elements, ☐ Icons inside solid colored containers, ☐ Pressable scale feedback, ☐ Geometric shapes as bg decoration, ☐ Bold flat bottom tabs (no floating), ☐ Primary headlines much larger than body, ☐ 4pt spacing system throughout | --bg: #FFFFFF, --surface: #F3F4F6, --fg: #111827, --primary: #3B82F6, --secondary: #10B981, --accent: #F59E0B, --border: #E5E7EB, --radius-sm: 6px, --radius-md: 12px, --radius-pill: 999px, --shadow: none, --elevation: 0, --touch-target: 48px, --spacing: 4 8 16 24 32 48 |
| 76 | 76 | Material You (MD3 Mobile) | Mobile | material design 3, md3, tonal surfaces, pills, soft curves, android, md3 easing, state layers, haptic, fab, google | Primary Violet #6750A4, Secondary Container #E8DEF8, Tertiary #7D5260 | Surface #FFFBFE, On Surface #1C1B1F, Surface Container #F3EDF7, Outline #79747E | Tonal elevation (overlay colors instead of strong shadows), pill-shaped buttons and chips (borderRadius 999), emphasized easing Easing.bezier(0.2,0,0,1), state layers (pressed overlays 10–15% opacity), Reanimated-filled label float for inputs, HapticFeedback on FAB/toggles | Android ecosystem apps, cross-platform productivity tools, MD3-based admin panels, data-heavy back-office UI with Material UI | Ultra-minimal brutalist brands, terminal/hacker aesthetics, monochrome editorial apps | ✓ Full | ✓ Full | ⚠ Good (requires gradients and overlays) | ✓ WCAG AA (with MD3 token checks) | ✓ Mobile-First | ✓ High | React Native 9/10, Expo 10/10, React Native Paper 9/10 | Material Design 3 | Medium | Design a Material You (MD3) mobile app. Use #FFFBFE background, #6750A4 primary, #E8DEF8 secondary container, #F3EDF7 surface container. All interactive elements are pill-shaped (borderRadius: 999). Buttons use Pressable with scale: 0.95 on press and state-layer overlays (black 10% or primary 12%). Inputs use filled M3 style: background #E7E0EC with floating label animation on focus. Elevation is tonal (layering containers) plus light shadow/elevation on Android. Animations use emphasized easing (0.2,0,0,1) at 100–400ms. FABs are tertiary-colored rounded squares/circles with level 3 elevation. | borderRadius: 999 (buttons/chips), containerRadius: 16–28, backgroundColor: '#FFFBFE', colorPrimary: '#6750A4', colorSecondaryContainer: '#E8DEF8', colorSurfaceContainer: '#F3EDF7', outlineColor: '#79747E', Pressable state-layer overlay (opacity 0.1–0.15), Easing.bezier(0.2,0,0,1), HapticFeedback.impactMedium on FAB, floating label using Reanimated translateY/scale | ☐ MD3 color tokens applied (background/surface/container), ☐ All CTAs are pill-shaped, ☐ State-layer overlays instead of opacity 0.5 hacks, ☐ Emphasized easing used for all animations, ☐ Floating label inputs implemented, ☐ FAB uses tertiary color with correct elevation, ☐ Safe areas respected for organic shapes, ☐ No pure white background, ☐ No harsh box-shadows (ambient only) | --md3-bg: #FFFBFE, --md3-on-surface: #1C1B1F, --md3-primary: #6750A4, --md3-on-primary: #FFFFFF, --md3-secondary-container: #E8DEF8, --md3-on-secondary-container: #1D192B, --md3-tertiary: #7D5260, --md3-surface-container: #F3EDF7, --md3-outline: #79747E, --radius-pill: 999px, --easing-emphasized: cubic-bezier(0.2,0,0,1) |
| 77 | 78 | Bold Typography (Mobile Poster) | Mobile | bold typography, editorial, poster, broadsheet, vermillion, negative space, edge-to-edge type, underline CTA, near-black, warm white | Near Black #0A0A0A, Warm White #FAFAFA | Muted #1A1A1A, Secondary Text #737373, Accent Vermillion #FF3D00, Border #262626 | Hero headlines 48–72px (5:1 vs body size), tight tracking (-1.5px), edge-to-edge type, massive vertical spacing (60px+), underline CTAs (2–3px accent line), instant 200ms transitions (no bounce), strictly 0px radius containers, color shifts for active state instead of elevation | Creative brand heroes, reading-focused apps, event/exhibition pages, editorial mobile experiences, landing hero sections | Utility dashboards, kids apps, playful consumer products, contexts needing many icons or heavy imagery | ✓ Dark Mode Primary | ◐ Light sections optional | ⚡ Excellent | ✓ Contrast 18:1 achievable | ✓ Mobile-First | ✓ High | React Native 10/10, Expo 10/10 | Editorial 2020s | Medium | Design a Bold Typography mobile screen. Background #0A0A0A, text #FAFAFA, accent #FF3D00. Use Inter Tight/Inter 600+ for all type; JetBrains Mono for labels. Headline: 56–72px, tracking -1.5, lineHeight 1.1, full-bleed width with slight bleed off-screen. Body: 16–18px, leading 1.6. Buttons: underline CTA (accent text + 2px underline block), or inverted box with 0 radius. No shadows, no rounded corners. Layout: single column, paddingHorizontal 24, vertical gaps 64 between sections. Animation: 200ms, Easing.bezier(0.25,0,0,1), slight slide-up 10px + fade on mount. | backgroundColor: '#0A0A0A', color: '#FAFAFA', accent: '#FF3D00', borderColor: '#262626', borderRadius: 0, paddingHorizontal: 24, headline style: fontSize:56–72, fontWeight:'700/800', letterSpacing:-1.5, lineHeight:1.1*fontSize, body: fontSize:16–18, lineHeight:1.6*fontSize, underline CTA: 2–3px height View under text, transition: 200ms cubic-bezier(0.25,0,0,1) | ☐ H1 at least 4–5× body size, ☐ All containers 0 radius, ☐ Underline CTA pattern used, ☐ Large vertical gaps between sections, ☐ No shadows or soft corners, ☐ Accent used only for interaction, ☐ Text bleeds to/over screen edges, ☐ Animation timings 200ms, ☐ Accessible contrast ≥ 18:1, ☐ Body text never below 16px | --bg: #0A0A0A, --fg: #FAFAFA, --muted: #1A1A1A, --muted-fg: #737373, --accent: #FF3D00, --accent-fg: #0A0A0A, --border: #262626, --font-primary: Inter Tight, --font-display: Playfair Display Italic, --font-mono: JetBrains Mono |
| 78 | 79 | Academia (Scholarly Mobile) | Mobile | academia, library, mahogany, parchment, brass, crimson, serif, drop cap, arch-top, vignette, leather, scholarly, tactile | Mahogany #1C1714, Oak #251E19 | Parchment #E8DFD4, Worn Leather #3D332B, Faded Ink #9C8B7A, Brass #C9A962, Library Crimson #8B2635 | Deep mahogany backgrounds, oak surface cards, brass accented CTAs, arch-top hero/imagery, heavy vignette overlays, sepia-tinted images, drop caps with brass Cinzel, Roman numeral volume headings, slow timing-based animations (Easing.out poly(4)), zero neon or modern tech cues | Knowledge management apps, deep reading tools, ritual-heavy personal brands, lore-heavy RPG/roleplay apps, culture-specific community platforms | Hyper-modern tech dashboards, neon/glassmorphism, playful Gen Z branding | ✓ Dark Rich | ◐ Light parchment sections | ⚠ Moderate (vignette + shadows) | ✓ Legible (serif optimized) | ◐ Mobile-First | ◐ Medium | React Native 9/10, Expo 10/10 | Timeless Scholarly | High | Design a Scholarly Academia mobile app. Background #1C1714 (mahogany), alt surfaces #251E19 (oak), text #E8DFD4 (parchment). Accent brass #C9A962 for CTAs + borders; crimson #8B2635 for wax seals. Typography: Cormorant Garamond (headings), Crimson Pro (body), Cinzel (labels/overlines). Use arch-top hero containers (borderTopRadius 100). Cards: oak bg, 1px wood-grain border. Inputs: worn-leather background, brass focus border. Global vignette overlay and ornate brass dividers (Unicode glyph + gradient line). Animations: no spring, only Timing with Easing.out(Easing.poly(4)). | backgroundColor: '#1C1714', altSurface: '#251E19', textColor: '#E8DFD4', mutedBg: '#3D332B', borderColor: '#4A3F35', brass: '#C9A962', crimson: '#8B2635', borderRadius: 4 (default), archTopRadius: 100 for hero, shadowOpacity:0.4 shadowRadius:6 elevation:8 for cards, textShadow on headings, vignette overlay via LinearGradient | ☐ Mahogany/oak/parchment palette applied, ☐ Brass used on all tappable items, ☐ Arch-top imagery used in hero/cards, ☐ Drop caps & Roman numerals used, ☐ Vignette overlay present, ☐ No sans-serif body fonts, ☐ No neon/bright modern colors, ☐ Animations use non-spring timing, ☐ Inputs use worn-leather style, ☐ Wax seal badges implemented | --bg: #1C1714, --bg-alt: #251E19, --fg: #E8DFD4, --muted: #3D332B, --muted-fg: #9C8B7A, --border: #4A3F35, --accent-brass: #C9A962, --accent-crimson: #8B2635, --radius: 4px, --arch-radius: 100px, --shadow-card: 0 4px 6px rgba(0,0,0,0.4), --font-heading: Cormorant Garamond, --font-body: Crimson Pro, --font-label: Cinzel |
| 79 | 80 | Cyberpunk Mobile HUD | Mobile | cyberpunk, neon, glitch, chamfered, orbitron, jetbrains, scanlines, crt, hud, matrix, military, decker | Void #0A0A0F, Card #12121A | Neon Green #00FF88, Neon Magenta #FF00FF, Cyber Cyan #00D4FF, Neutral Text #E0E0E0, Alert Red #FF3366, Border #2A2A3A | Deep void background with neon radiance, chamfered 45° corners via SVG/Skia, scanline overlay, CRT flicker opacity oscillation, glitch animations (translateX ±2), neon pulses around buttons, HUD corner brackets, terminal prompt text inputs, heavy use of blurView holographic panels | Gaming dashboards, crypto/cyberpunk apps, sci-fi companion tools, hacker OS skins, data-heavy monitoring HUDs | Serious enterprise, health/finance requiring calm trust, minimal editorial apps | ✗ Light | ✓ Dark-only | ⚠ Moderate–Heavy (Skia/blur/animations) | ⚠ Requires careful reduced-motion handling | ✓ Mobile-First HUD | ✓ High | React Native 10/10, Skia 9/10, Expo 10/10 | Cyber-Noir | High | Design a Cyberpunk mobile HUD. Background #0A0A0F, card #12121A. Accents: #00FF88 (primary), #FF00FF, #00D4FF. Typography: Orbitron for headings, JetBrains Mono for data. All shapes use chamfered corners via SVG or Skia clipPath. Buttons: neon glow shadows, scale 0.98 + haptic on press, optional glitch jitter on active. Global scanline overlay (semi-transparent horizontal lines) and CRT flicker (root opacity 0.98–1). Inputs: prompt style with '>' in accent, custom blinking block cursor. HUD cards use corner brackets and subtle gradients. | backgroundColor: '#0A0A0F', cardBg: '#12121A', accent: '#00FF88', accent2: '#FF00FF', accent3: '#00D4FF', borderColor: '#2A2A3A', destructive: '#FF3366', borderRadius: 0, chamfer via SVG path, shadowColor accent with animated radius, scanline overlay View pointerEvents='none', withRepeat glitch translateX [-2,2,0], Easing.steps(2) | ☐ Chamfered corners used instead of radius, ☐ Scanline & CRT flicker implemented, ☐ Orbitron + JetBrains Mono typography, ☐ Neon glow shadows on primary buttons, ☐ Glitch animation on active states, ☐ Prompt-style inputs with custom cursor, ☐ HUD corner brackets implemented, ☐ Safe-area system status bar styled, ☐ Reduced motion disables glitch/flicker, ☐ Icons configured with Lucide accent color | --bg: #0A0A0F, --card: #12121A, --fg: #E0E0E0, --muted: #1C1C2E, --accent: #00FF88, --accent2: #FF00FF, --accent3: #00D4FF, --border: #2A2A3A, --destructive: #FF3366, --radius: 0px, --font-heading: Orbitron, --font-body: JetBrains Mono |
| 80 | 81 | Bitcoin DeFi (Mobile) | Mobile | web3, bitcoin, defi, digital gold, fintech, wallet, orange, glassmorphism, gradient, blur, holographic, trust, precision | Bitcoin Orange #F7931A, Burnt Orange #EA580C, Digital Gold #FFD600 | Void #030304, Dark Matter #0F1115, Pure Light #FFFFFF, Stardust #94A3B8, Border Dim rgba(30,41,59,0.2) | Deep void + dark matter surfaces, Bitcoin orange/gold gradients for CTAs, pill buttons with glowing shadows, glassmorphic BlurView nav, monospace data rows, gradient text balances + masked orange-gold, pulsing status indicators and vertical ledger timelines, ultra-thin borders, high-precision typography | DeFi dashboards, wallets, NFT marketplaces, Web3 social, metaverse utilities, high-tech fintech brands | Playful casual apps, low-tech brands, ultra-minimal editorial apps | ✗ Light | ✓ Dark-only | ⚠ Moderate (gradients+blur) | ✓ WCAG AA with care | ✓ Mobile-First | ✓ High | React Native 10/10, Expo 10/10, Reanimated 10/10 | Fintech/Web3 | High | Design a Bitcoin DeFi mobile app. Background #030304, cards #0F1115, text #FFFFFF, muted #94A3B8. Primary CTA: LinearGradient #EA580C→#F7931A with orange glow shadow. Typography: Space Grotesk Bold for headings, Inter for body, JetBrains Mono for prices/hashes. Use BlurView (intensity 20) for nav bars and floating panels. Cards as 'blocks' with hairline borders and light orange glow on active. Use grid background (low-opacity 50px grid). Gradient text for key balances via MaskedView and LinearGradient orange→gold. Status indicators pulse using Reanimated. Ledger timelines drawn as vertical gradient line with pulsing dots. | backgroundColor: '#030304', cardBg: '#0F1115', textColor: '#FFFFFF', mutedText: '#94A3B8', borderColor: 'rgba(30,41,59,0.2)', accentBitcoin: '#F7931A', accentBurnt: '#EA580C', accentGold: '#FFD600', borderRadius: 24 for cards, radiusPill: 999 for buttons, BlurView intensity 20, LinearGradient on CTAs, shadowColor '#F7931A' shadowRadius up to 10, JetBrains Mono for numeric text | ☐ Void/dark-matter palette applied, ☐ Bitcoin orange/gold gradient buttons, ☐ BlurView nav implemented, ☐ Monospace for numeric data, ☐ Hairline borders on blocks, ☐ Gradient text on balances, ☐ Pulsing network status indicators, ☐ Ledger vertical timeline, ☐ Haptics on money actions, ☐ SafeArea + FlashList for heavy lists | --bg-void: #030304, --bg-surface: #0F1115, --fg: #FFFFFF, --fg-muted: #94A3B8, --border-dim: rgba(30,41,59,0.2), --accent-bitcoin: #F7931A, --accent-burnt: #EA580C, --accent-gold: #FFD600, --radius-card: 24px, --radius-pill: 999px, --blur-intensity: 20, --font-heading: Space Grotesk, --font-body: Inter, --font-mono: JetBrains Mono |
| 81 | 82 | Claymorphism (Mobile) | Mobile | claymorphism, clay, 3d, soft, bubbly, candy, playful, rounded, squish, tactile, inflate, silicone, haptic, spring | Vivid Violet #7C3AED, Hot Pink #DB2777 | Canvas #F4F1FA, Soft Charcoal #332F3A, Emerald #10B981, Amber #F59E0B, Lavender-Gray #635F69 | Multi-layer shadow stacks (nested View) to simulate clay depth, LinearGradient #A78BFA→#7C3AED buttons, borderRadius 40–50 outer / 32 cards / 20 buttons, Reanimated spring squish (scale 0.92 on press), BlurView glass-clay hybrid cards, floating blobs with slow ±20px drift, Haptics Light on every press | Children education apps, teen social products, crypto gamification, creative tools, brand mascot-led apps | Serious enterprise, high-density data, editorial reading apps, fintech trust signals | ✓ Light | ⚠ Dark (adjusted) | ⚠ Moderate–Heavy (shadows+blur) | ✓ WCAG AA (careful) | ✓ Mobile-First (thumb zone) | ✓ High | React Native 10/10, Reanimated 10/10, Expo 10/10 | Consumer/Education | High | Design a high-fidelity Claymorphism mobile app. Background #F4F1FA (cool lavender-white, never pure white). Primary CTA: LinearGradient #A78BFA to #7C3AED, borderRadius 20, height 56. Cards: borderRadius 32, backgroundColor rgba(255,255,255,0.7) with BlurView. Multi-layer shadow: outer offset(12,12) rgba(160,150,180,0.2) + highlight offset(-8,-8) white. Typography: Nunito Black 900 for headings (48px hero, 32px section, 22px card), DM Sans Medium 500 for body 16px. Spring animations: scale 0.92 on press, spring back damping 10. Background blobs drift ±20px over 8–10s. Bento 2-column grid with hero card spanning full width. Haptics.impactAsync Light on every button press. | backgroundColor: '#F4F1FA', cardBg: 'rgba(255,255,255,0.7)', textPrimary: '#332F3A', textMuted: '#635F69', accentPrimary: '#7C3AED', accentSecondary: '#DB2777', success: '#10B981', warning: '#F59E0B', radiusOuter: 50, radiusCard: 32, radiusButton: 20, shadowStack: 'nested View', gradientButton: ['#A78BFA', '#7C3AED'], springDamping: 10 | ☐ Background uses #F4F1FA (no pure white), ☐ Multi-layer clay shadow stack applied, ☐ Cards use blurred glass-clay hybrid, ☐ Buttons squish to scale 0.92 on press, ☐ Spring physics on all interactions, ☐ Nunito Black for headings, ☐ Background blobs drifting, ☐ Haptics on every press, ☐ Nested border radius (card 32, inner 24), ☐ Bento layout with hero span | --bg: #F4F1FA, --card-bg: rgba(255,255,255,0.7), --text: #332F3A, --muted: #635F69, --accent: #7C3AED, --accent2: #DB2777, --success: #10B981, --warning: #F59E0B, --radius-outer: 50px, --radius-card: 32px, --radius-button: 20px, --font-heading: Nunito Black, --font-body: DM Sans |
| 82 | 83 | Enterprise SaaS (Mobile) | Mobile | enterprise, saas, b2b, professional, indigo, violet, gradient, polished, trustworthy, clean, approachable, spring, haptic | Indigo #4F46E5, Violet #7C3AED | Slate 50 #F8FAFC, White #FFFFFF, Slate 900 #0F172A, Slate 500 #64748B, Emerald #10B981, Slate 200 #E2E8F0 | Indigo→Violet gradient primary CTAs + active tab highlights, colored card shadows rgba(79,70,229,0.08), pill buttons or 12pt radius, full-width CTA at screen bottom, spring press scale 0.97, floating label inputs with animated focus border, skeletal loading pulses (Indigo/Slate tint), Bottom Sheets with drag dismiss, swipe-to-action list cards, scroll-linked title collapse | B2B backend management, productivity tools, government and finance mobile apps, SaaS companion apps, enterprise dashboards | Pure consumer entertainment, Gen-Z youth apps, gaming UI, ultra-minimal editorial | ✓ Light | ✓ Dark-ready (token inversion) | ✓ Performant | ✓ WCAG AA | ✓ Mobile-First (Safe Area strict) | ✓ High | React Native 10/10, Reanimated 10/10, NativeWind 9/10 | Enterprise/SaaS | High | Design a Modern Enterprise SaaS mobile app. Background #F8FAFC, surfaces #FFFFFF, primary #4F46E5 (Indigo), secondary #7C3AED (Violet). Typography: Plus Jakarta Sans, ExtraBold 800 for screen titles, Bold 700 for section headers, SemiBold 600 for buttons, Regular 400 for body. Line height 1.1–1.2 for titles, 1.4–1.5 for body. Primary button: full-width, LinearGradient Indigo→Violet, pill-shaped or radius 12, scale 0.95 on press with medium haptic. Cards: white bg, 16pt radius, hairline border, shadow rgba(79,70,229,0.08). Inputs: white bg, 8pt radius, floating label, Indigo border on focus. Bottom Tab Navigation (3–5 items), gradient active tab icon. Screen padding 16–20pt. Vertical rhythm 24pt between sections, 12pt between items. Shared Element Transition for hero cards opening to detail. | backgroundColor: '#F8FAFC', surfaceBg: '#FFFFFF', textPrimary: '#0F172A', textMuted: '#64748B', primary: '#4F46E5', secondary: '#7C3AED', success: '#10B981', border: '#E2E8F0', radiusCard: 16, radiusButton: 999, radiusInput: 8, shadowCard: 'rgba(79,70,229,0.08)', gradientPrimary: ['#4F46E5', '#7C3AED'], screenPadding: 20 | ☐ Background #F8FAFC applied, ☐ Indigo→Violet gradient on primary CTA, ☐ Colored card shadows (not gray), ☐ Plus Jakarta Sans typography, ☐ Floating label inputs with Indigo focus, ☐ Scale 0.97 press with haptic Medium, ☐ Bottom Tab Navigation implemented, ☐ Safe Area strict compliance, ☐ Skeletal loading placeholders, ☐ Reduced Motion fallback | --bg: #F8FAFC, --surface: #FFFFFF, --text: #0F172A, --muted: #64748B, --primary: #4F46E5, --secondary: #7C3AED, --success: #10B981, --border: #E2E8F0, --radius-card: 16px, --radius-pill: 999px, --radius-input: 8px, --shadow-card: rgba(79,70,229,0.08), --font: Plus Jakarta Sans |
| 83 | 84 | Sketch Hand-Drawn (Mobile) | Mobile | sketch, hand-drawn, handwriting, wobbly, imperfect, paper, kalam, organic, collage, post-it, tape, offset shadow, scribble | Red Marker #FF4D4D, Pencil Black #2D2D2D | Warm Paper #FDFBF7, Old Paper #E5E0D8, Blue Ballpoint #2D5DA1, Post-it Yellow #FFF9C4 | Wobbly borderRadius (unique per corner: 15/25/20/10), borderWidth 2–3 solid/dashed, hard offset shadow via rear View (4px,4px) #2D2D2D, Kalam Bold headings, PatrickHand Regular body, slight rotation (-1deg/1deg) on cards, absolute SVG scribble overlays (arrows/tape/tacks), jiggle -2deg↔2deg on error, LayoutAnimation spring on layout changes, Haptics on press, paper texture repeating background | Low-fidelity prototyping, creative brands, children/picturebook apps, education tools, journaling apps, gamified puzzles | Enterprise dashboards, high-density data tables, fintech precision tools, medical or legal apps | ✓ Light | ⚠ Dark (requires texture inversion) | ✓ Lightweight | ⚠ Moderate (small/muted text risk) | ✓ Mobile-First (wobbly touch targets 48x48) | ✗ Low-Conversion | React Native 10/10, Reanimated 9/10, Expo 9/10 | Creative/Education | Medium | Design a Hand-Drawn (Sketch) mobile app. Background #FDFBF7 (warm paper texture). Typography: Kalam Bold for headings (high weight, felt-tip style), PatrickHand Regular for body (human but legible). Colors: Pencil Black #2D2D2D for all text and borders, Red Marker #FF4D4D for accents, Blue Ballpoint #2D5DA1for input focus. Cards: white background, wobbly corner radii (e.g., 15/25/20/10), borderWidth 3, rotate -1deg or +1deg. Hard offset shadow implemented as a second View behind the card offset 4px right and 4px down. Buttons: Post-it yellow #FFF9C4 for primary CTA, press state shifts the button (translateX 4, translateY 4) to cover the shadow. Inputs: PatrickHand font, wobbly border, focus changes to Blue Ballpoint. Add absolute SVG tape and tack decorations. Error: jiggle animation -2deg to +2deg. All touch targets minimum 48x48. | backgroundColor: '#FDFBF7', cardBg: '#FFFFFF', textPrimary: '#2D2D2D', accentRed: '#FF4D4D', accentBlue: '#2D5DA1', accentYellow: '#FFF9C4', border: '#2D2D2D', shadowView: 'offset 4px 4px #2D2D2D', wobblyRadius: [15,25,20,10], fontHeading: 'Kalam-Bold', fontBody: 'PatrickHand-Regular' | ☐ Warm paper background texture applied, ☐ Kalam Bold headings, ☐ Wobbly corner radii on all cards, ☐ Hard offset shadow View (not blur), ☐ Cards slightly rotated, ☐ Button press shifts to cover shadow, ☐ SVG tape/tack decorations, ☐ PatrickHand for inputs, ☐ Jiggle error animation, ☐ Minimum 48x48 touch targets | --bg: #FDFBF7, --text: #2D2D2D, --accent-red: #FF4D4D, --accent-blue: #2D5DA1, --postit: #FFF9C4, --border-width: 3px, --shadow-offset: 4px 4px, --font-heading: Kalam Bold, --font-body: Patrick Hand, --rotation-card: -1deg to 1deg |
| 84 | 85 | Neumorphism (Mobile) | Mobile | neumorphism, soft ui, dual shadow, extruded, inset, clay surface, monochromatic, cool grey, haptic, ceramic, physical, depth | Accent Violet #6C63FF, Clay Base #E0E5EC | Text Dark #3D4852, Text Muted #6B7280, Shadow Light rgba(255,255,255,0.6), Shadow Dark rgba(163,177,198,0.7), Inset Background #D1D9E6 | Full-screen #E0E5EC base, dual-layer shadow via nested View (light top-left + dark bottom-right), extruded convex resting state, inset concave pressed/input state, Reanimated scale 0.97 on press, shadow opacity interpolates 1→0.4 on press, Haptics Light on every interaction, 8pt grid, no blur shadows (no shadowRadius blend), nested depth (extruded card contains inset icon slot) | Minimal hardware controls, smart home apps, aesthetic utility tools, health monitors, brand showcase pages | High-density data, bright multi-color apps, apps needing strong visual hierarchy via color, dark-mode-only products | ✓ Light-only | ✗ Dark (breaks material metaphor) | ✓ Lightweight | ⚠ Moderate (low-contrast risk) | ✓ Mobile-First | ✗ Low-Conversion | React Native 10/10, react-native-shadow-2 9/10, Reanimated 9/10 | Tools/Lifestyle | Medium | Design a Neumorphism (Soft UI) mobile app. Entire background is a single color #E0E5EC (Cool Clay). No other background colors. Dual shadows: outer dark shadowColor rgba(163,177,198,0.7) offset(6,6) radius 10 + outer light #FFFFFF offset(-6,-6) radius 10 using nested View or react-native-shadow-2. Extruded (convex) for resting buttons and cards. Inset (concave) for inputs and pressed states. Buttons: height 56, borderRadius 16, scale 0.97 on press with shadow opacity→0.4, Haptics.impactAsync Light. Cards: padding 24, borderRadius 32, nested inner icon container uses inset style. Inputs: height 50, borderRadius 16, backgroundColor #E0E5EC (NOT white), inset depth effect, focus borderColor #6C63FF width 1.5. Typography: Plus Jakarta Sans Bold or System. Heading 24–32pt, body 16pt, caption 12pt, letterSpacing -0.5 for headings. Animation: 250ms Bezier(0.4,0,0.2,1). No black shadows, no pure white backgrounds. | backgroundColor: '#E0E5EC', textPrimary: '#3D4852', textMuted: '#6B7280', accent: '#6C63FF', shadowLight: 'rgba(255,255,255,0.6)', shadowDark: 'rgba(163,177,198,0.7)', insetBg: '#D1D9E6', radiusCard: 32, radiusButton: 16, radiusPill: 999, shadowOffset: 6, shadowRadius: 10 | ☐ Single #E0E5EC base applied across all screens, ☐ Dual shadow (light+dark) implemented via nested View, ☐ Extruded resting state on cards/buttons, ☐ Inset concave state on inputs, ☐ Scale 0.97 press + shadow opacity interpolation, ☐ Haptics Light on all presses, ☐ No black shadows or white backgrounds, ☐ Nested depth pattern (extruded→inset), ☐ Accent #6C63FF on active/focus only, ☐ 8pt grid spacing | --bg: #E0E5EC, --text: #3D4852, --muted: #6B7280, --accent: #6C63FF, --shadow-light: rgba(255,255,255,0.6), --shadow-dark: rgba(163,177,198,0.7), --inset-bg: #D1D9E6, --radius-card: 32px, --radius-button: 16px, --font: Plus Jakarta Sans or System |