ui-ux-pro-max-skill/cli/assets/data/styles.csv

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	Style ID	Aliases	Status	Parent Style ID	Replacement Domain	Replacement ID	Preferred Mode
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	◐ Medium	tailwind|bootstrap|mui	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, ☐ text contrast measured against the chosen project target, ☐ Mobile responsive grid	--spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only	minimalism-and-swiss-style	Minimal|Minimalism|Minimalism (Frame)	active				auto
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	supported	conditional	cost:low|drivers:none	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	◐ Medium	tailwind|css-in-js	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	neumorphism		active				auto
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	supported	supported	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|mui|chakra	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	glassmorphism		active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✗ Low	tailwind|bootstrap	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	brutalism		active				auto
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	conditional	conditional	cost:high|drivers:animation,large-images	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	not-recommended	◐ Medium	threejs|react-three-fiber|custom	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	3d-and-hyperrealism		active				auto
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	supported	supported	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|chakra|styled-components	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+	vibrant-and-block-based	Vibrant & Block	active				auto
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	not-recommended	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	◐ Low	tailwind|mui|chakra	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	dark-mode-oled	Dark Mode	active				auto
9	8	Accessible & Ethical	General	Accessible, inclusive interface, high contrast, large text (16px+), keyboard navigation, screen reader friendly, accessibility standards aware, focus state, semantic	Measured high-contrast pairs (4.5:1 normal-text baseline; 7:1 enhanced target), 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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	css	Universal	Low	Design toward enhanced accessibility criteria; verify complete-page conformance. 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	☐ complete-page conformance tested against the chosen target, ☐ 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-target: enhanced, --keyboard-accessible: true, --sr-test-required: true	accessible-and-ethical		active				auto
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	supported	conditional	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|css-in-js	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	claymorphism	Claymorphism (for patients)	active				auto
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	supported	supported	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|css-in-js	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	aurora-ui		active				auto
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	supported	supported	cost:moderate|drivers:animation,blur	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	◐ Medium	tailwind|css-in-js	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	retro-futurism		active				dark
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|bootstrap|mui	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	flat-design		active				auto
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)	conditional	conditional	cost:high|drivers:animation,large-images	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	not-recommended	◐ Medium	css-in-js|custom	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	skeuomorphism		active				auto
15	14	Liquid Glass	Platform/Material	dynamic material, optical glass, translucency, lensing, refraction, fluid morphing, system navigation	Adaptive translucent material derived from surrounding content; use color judiciously	Semantic content and system tint colors; preserve legibility and hierarchy	Lensing and refraction, adaptive translucency, and fluid morph transitions aligned to Apple platform behavior	Apple-platform navigation, controls, and system-aligned app chrome	content layers, dense reading surfaces, or custom effects without accessibility fallbacks	supported	supported	cost:moderate|drivers:animation,blur	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	◐ Medium	swiftui|uikit|appkit	Apple platforms, 2025	High	Apply Apple Liquid Glass sparingly to navigation and controls. Use dynamic translucent material, lensing, and fluid transitions while keeping content clear. Respect reduced transparency and reduced motion settings.	platform material, adaptive translucency, lensing, refraction, reduced transparency, reduced motion	☐ Use for navigation and controls, ☐ Keep content on a separate layer, ☐ Apply color judiciously, ☐ Test reduced transparency, ☐ Test reduced motion, ☐ Verify text and control contrast	--material-role: navigation-controls, --translucency: adaptive, --tint: semantic, --reduced-transparency-fallback: opaque, --motion: platform-aligned	liquid-glass	Apple Liquid Glass	active				auto
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	supported	supported	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	gsap|framer-motion	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	motion-driven		active				auto
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)	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	framer-motion|react-spring	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	micro-interactions		active				auto
18	17	Inclusive Design	General	Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, enhanced contrast targets, universal	Measured contrast pairs targeting 7:1 for normal text, 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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	css	Universal	Low	Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, enhanced accessibility criteria with complete-page verification, 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	☐ complete-page conformance tested against the chosen target, ☐ 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-test-required: true, --wcag-target: enhanced, --color-symbols: true, --haptic: enabled	inclusive-design		active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|custom	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	zero-interface		active				auto
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, measured contrast targets	Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid	Extreme minimalism, critical performance, systems without modern OS	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|mui|chakra	2020s Modern	Medium	Design evolved neumorphism with improved contrast (measured contrast targets), 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+	☐ Contrast measured against the chosen project target, ☐ 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-target: project-defined	soft-ui-evolution		active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ Very High	tailwind|bootstrap	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)	hero-centric-design		deprecated		landing	hero-centric-design	auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ Very High	tailwind|bootstrap	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	conversion-optimized		deprecated		landing	funnel-3-step-conversion	auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|bootstrap	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)	feature-rich-showcase	Feature-Rich	deprecated		landing	feature-rich-showcase	auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	tailwind|bootstrap	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	minimal-and-direct		deprecated		landing	minimal-single-column	auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	tailwind|bootstrap	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	social-proof-focused		deprecated		landing	hero-testimonials-cta	auto
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	supported	supported	cost:moderate|drivers:animation,blur	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ Very High	tailwind|bootstrap	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	interactive-product-demo		deprecated		landing	product-demo-features	auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	tailwind|bootstrap	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	trust-and-authority		deprecated		landing	trust-authority-conversion	auto
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	supported	supported	cost:moderate|drivers:animation,blur	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|bootstrap	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	storytelling-driven		deprecated		landing	scroll-triggered-storytelling	auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✗ Not applicable	recharts|chartjs|d3	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	data-dense-dashboard	Data-Dense	active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✗ Not applicable	recharts|chartjs|d3	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)	heat-map-and-heatmap-style	Heat Map|Heat Map & Heatmap	supplemental	data-dense-dashboard			auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	not-recommended	✗ Not applicable	recharts|chartjs|d3	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	executive-dashboard		supplemental	data-dense-dashboard			auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✗ Not applicable	recharts|chartjs|d3	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	real-time-monitoring	Real-Time|Real-Time Monitor	supplemental	data-dense-dashboard			auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✗ Not applicable	recharts|chartjs|d3	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	drill-down-analytics		supplemental	data-dense-dashboard			auto
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)	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✗ Not applicable	recharts|chartjs|d3	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	comparative-analysis-dashboard		supplemental	data-dense-dashboard			auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✗ Not applicable	recharts|chartjs|d3	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	predictive-analytics		supplemental	data-dense-dashboard			auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✗ Not applicable	recharts|chartjs|d3	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	user-behavior-analytics		supplemental	data-dense-dashboard			auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	not-recommended	✗ Not applicable	recharts|chartjs|d3	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	financial-dashboard		supplemental	data-dense-dashboard			auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✗ Not applicable	recharts|chartjs	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	sales-intelligence-dashboard		supplemental	data-dense-dashboard			auto
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)	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|bootstrap	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	neubrutalism		active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|css-grid	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	bento-box-grid	Bento Grids|Masonry Grid	active				auto
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	supported	conditional	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|css-in-js	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	y2k-aesthetic		active				auto
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	not-recommended	supported	cost:moderate|drivers:animation,blur	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	◐ Medium	tailwind|css	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	cyberpunk-ui		active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|css	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)	organic-biophilic		active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|react	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	ai-native-ui		active				auto
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	supported	supported	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	◐ Medium	tailwind|css	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	memphis-design		active				auto
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	supported	supported	cost:moderate|drivers:animation,blur	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	◐ Medium	tailwind|css-in-js	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	vaporwave		supplemental	retro-futurism			dark
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	supported	supported	cost:low|drivers:none	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|mui|chakra	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	dimensional-layering		active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|custom	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	exaggerated-minimalism		active				auto
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	supported	supported	cost:moderate|drivers:animation,blur	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ Very High	gsap|framer-motion	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	kinetic-typography		active				auto
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	supported	supported	cost:high|drivers:animation,large-images	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	not-recommended	✓ High	custom|locomotive-scroll	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	parallax-storytelling	Parallax	active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|bootstrap|foundation	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	swiss-modernism-2-0	Swiss Modernism	supplemental	minimalism-and-swiss-style			auto
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	supported	supported	cost:moderate|drivers:animation,blur	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✗ Low	react|canvas	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	hud-sci-fi-fui	HUD|FUI|Sci-Fi HUD|HUD/Sci-Fi FUI|Holographic / HUD|Holographic/HUD	active				auto
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	supported	supported	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	◐ Medium	custom|canvas	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	pixel-art		active				auto
54	53	Bento Grids (Legacy)	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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	css-grid|tailwind	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	bento-grids		deprecated		style	bento-box-grid	auto
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	supported	supported	cost:moderate|drivers:animation,blur	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	swiftui|custom	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	spatial-ui-visionos	Spatial UI	active				auto
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	supported	not-recommended	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ Medium	tailwind|css	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	e-ink-paper	E-Ink Paper|E-Ink/Paper	active				auto
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	supported	supported	cost:high|drivers:animation,large-images	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✓ High (Viral)	css-in-js	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%	gen-z-chaos-maximalism	Gen Z Chaos	active				auto
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	supported	supported	cost:moderate|drivers:animation,blur	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	canvas|webgl	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	biomimetic-organic-2-0	Biomimetic/Organic 2.0	active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	css|svg	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	anti-polish-raw-aesthetic	Anti-Polish Raw	active				auto
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	supported	supported	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ Very High	framer-motion|react-spring|gsap	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)	tactile-digital-deformable-ui		active				auto
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	supported	conditional	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	tailwind|css	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	nature-distilled		active				auto
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	supported	supported	cost:low|drivers:none	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	not-recommended	✓ High	gsap|framer-motion|custom	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	interactive-cursor-design		active				auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	web-speech-api|react	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	voice-first-multimodal		active				auto
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	conditional	conditional	cost:high|drivers:animation,large-images	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✓ Very High	threejs|model-viewer|spline	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	3d-product-preview		active				auto
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	supported	supported	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	css|svg|canvas	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	gradient-mesh-aurora-evolved		supplemental	aurora-ui			auto
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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ Medium	css-grid|tailwind	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	editorial-grid-magazine	Editorial Grid	active				auto
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	supported	supported	cost:low|drivers:none	risk:high|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	✓ High	custom|gsap	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	chromatic-aberration-rgb-split		supplemental	retro-futurism			dark
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	supported	conditional	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	✓ High	custom|canvas	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	vintage-analog-retro-film		active				auto
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	supported	conditional	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	◐ Medium	react-native|expo|swiftui|flutter|tailwind	1919 Bauhaus Movement	Medium	Design a Bauhaus (包豪斯) mobile interface using bauhaus, geometric, constructivist, primary colors, hard shadow, bold, tactile, functional. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	bauhaus		active				auto
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	supported	conditional	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	◐ Medium	react-native|expo|swiftui|tailwind	2020s Editorial Mobile	Medium	Design a Minimalist Monochrome mobile interface using monochrome, black white, editorial, austere, typographic, sharp, zero radius, high contrast. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	minimalist-monochrome		supplemental	minimalism-and-swiss-style			auto
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	supported	supported	cost:moderate|drivers:animation,blur	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	◐ Medium	react-native|expo|react-native-skia|swiftui	2020s Cinematic Mobile	High	Design a Modern Dark (Cinema Mobile) mobile interface using dark mode, cinematic, ambient light, glassmorphism, deep black, indigo, glow, blur. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	modern-dark-cinema-mobile		supplemental	dark-mode-oled			dark
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	supported	conditional	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	react-native|expo|nativewind|swiftui|flutter	2020s SaaS Mobile	Medium	Design a SaaS Mobile (High-Tech Boutique) mobile interface using saas, electric blue, gradient, fintech, spring animation, dual font, glassmorphism, boutique. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	saas-mobile-high-tech-boutique		supplemental	soft-ui-evolution			auto
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	not-recommended	supported	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✗ Low	react-native|expo|nativewind	Retro-Future 1980s–2020s	Medium	Design a Terminal CLI (Mobile) mobile interface using terminal, cli, matrix green, monospace, hacker, ascii, command line, developer. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	terminal-cli-mobile		supplemental	hud-sci-fi-fui			dark
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	supported	conditional	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High energy	react-native|expo|react-native-reanimated|nativewind	2020s Mobile Brutalism	High	Design a Kinetic Brutalism (Mobile) mobile interface using kinetic, brutalism, motion, marquee, acid yellow, uppercase, oversized, aggressive typography. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	kinetic-brutalism-mobile		supplemental	brutalism			dark
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	supported	conditional	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	react-native|expo|nativewind|flutter|swiftui	2010s–2020s Flat Mobile	Low	Design a Flat Design Mobile (Touch-First) mobile interface using flat, 2D, no shadow, color blocking, geometric, bold, poster, icon. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	flat-design-mobile-touch-first		supplemental	flat-design			auto
76	76	Material 3 Expressive (Mobile)	Mobile	material 3 expressive, vibrant color, spring motion, adaptive components, flexible typography, contrasting shapes, android	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, Wear OS, and Pixel-aligned products using Material 3 components	Ultra-minimal brutalist brands, terminal/hacker aesthetics, monochrome editorial apps	supported	supported	cost:moderate|drivers:animation,blur	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	material-3|jetpack-compose|android-views|flutter	Google Material Design 3	Medium	Design a Material 3 Expressive mobile interface with vibrant semantic color, contrasting shapes, flexible typography, adaptive components, spring motion, and reduced-motion alternatives.	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)	material-you-md3-mobile	Material You|Material You (MD3 Mobile)|MD3 Mobile|M3 Expressive|Material Design 3 Expressive	active				auto
77	77	Neo Brutalism (Mobile)	Mobile	neo brutalism, pop art, stickers, thick borders, cream background, hot red, vivid yellow, soft violet, hard offset shadow, mechanical press, collage	Cream #FFFDF5, Hot Red #FF6B6B, Vivid Yellow #FFD93D	Soft Violet #C4B5FD, Pure Black #000000, White #FFFFFF	Thick 4px black borders on all major elements, hard offset shadows (4–8px, no blur), mechanical press: translateX/Y equal to shadow offset, slightly rotated cards/badges (-2deg/2deg), high-saturation color blocking, spring/linear animations only	Creative tools, collab platforms, Gen Z marketing & e-commerce, portfolio sites, sticker-book style content apps	Serious enterprise apps, conservative industries, sober fintech, accessibility-first contexts (must tune contrast)	supported	not-recommended	cost:moderate|drivers:animation,blur	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	react-native|expo|nativewind	2020s Neo-Brutalism	High	Design a Neo Brutalism (Mobile) mobile interface using neo brutalism, pop art, stickers, thick borders, cream background, hot red, vivid yellow, soft violet. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	borderWidth: 4 (primary), 2 (secondary), borderRadius: 0 or 999 (badges only), backgroundColor: '#FFFDF5', shadow implemented as offset View, transform: [{translateX:4},{translateY:4}] on PressIn, fontFamily: 'SpaceGrotesk-Bold', fontWeight: '700/900', transform: [{ rotate: '-1deg' }] on cards, padding: 20	☐ 4px borders on major elements, ☐ Hard offset shadow implemented via extra View, ☐ Mechanical press hides shadow, ☐ Cream canvas background, ☐ Pop-art color palette used, ☐ Cards/badges slightly rotated, ☐ No gradients or soft shadows, ☐ Only bold/black type weights, ☐ Badges slapped with absolute positioning, ☐ Anti-patterns (no subtle gray, no blur) avoided	--bg: #FFFDF5, --ink: #000000, --accent-primary: #FF6B6B, --accent-secondary: #FFD93D, --accent-muted: #C4B5FD, --white: #FFFFFF, --border-primary: 4px solid #000000, --shadow-offset-small: 4px, --shadow-offset-medium: 8px, --radius: 0px, --radius-pill: 999px, --font: Space Grotesk	neo-brutalism-mobile		supplemental	neubrutalism			auto
78	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	supported	conditional	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	react-native|expo	Editorial 2020s	Medium	Design a Bold Typography (Mobile Poster) mobile interface using bold typography, editorial, poster, broadsheet, vermillion, negative space, edge-to-edge type, underline CTA. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	bold-typography-mobile-poster		supplemental	exaggerated-minimalism			dark
79	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	supported	conditional	cost:moderate|drivers:animation,blur	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	conditional	◐ Medium	react-native|expo	Timeless Scholarly	High	Design a Academia (Scholarly Mobile) mobile interface using academia, library, mahogany, parchment, brass, crimson, serif, drop cap. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	academia-scholarly-mobile		supplemental	editorial-grid-magazine			dark
80	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	not-recommended	supported	cost:high|drivers:animation,large-images	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	react-native|custom|expo	Cyber-Noir	High	Design a Cyberpunk Mobile HUD mobile interface using cyberpunk, neon, glitch, chamfered, orbitron, jetbrains, scanlines, crt. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	cyberpunk-mobile-hud		supplemental	hud-sci-fi-fui			dark
81	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	not-recommended	supported	cost:moderate|drivers:animation,blur	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	react-native|expo|react-native-reanimated	Fintech/Web3	High	Design a Bitcoin DeFi (Mobile) mobile interface using web3, bitcoin, defi, digital gold, fintech, wallet, orange, glassmorphism. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	bitcoin-defi-mobile		supplemental	dark-mode-oled			dark
82	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	supported	supported	cost:high|drivers:animation,large-images	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	react-native|react-native-reanimated|expo	Consumer/Education	High	Design a Claymorphism (Mobile) mobile interface using claymorphism, clay, 3d, soft, bubbly, candy, playful, rounded. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	claymorphism-mobile		supplemental	claymorphism			auto
83	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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✓ High	react-native|react-native-reanimated|nativewind	Enterprise/SaaS	High	Design a Enterprise SaaS (Mobile) mobile interface using enterprise, saas, b2b, professional, indigo, violet, gradient, polished. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	enterprise-saas-mobile		supplemental	soft-ui-evolution			auto
84	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	supported	supported	cost:low|drivers:none	risk:low|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✗ Low-Conversion	react-native|react-native-reanimated|expo	Creative/Education	Medium	Design a Sketch Hand-Drawn (Mobile) mobile interface using sketch, hand-drawn, handwriting, wobbly, imperfect, paper, kalam, organic. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	sketch-hand-drawn-mobile	Sketch Hand-Drawn	supplemental	anti-polish-raw-aesthetic			auto
85	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	supported	not-recommended	cost:low|drivers:none	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	native	✗ Low-Conversion	react-native|react-native-shadow-2|react-native-reanimated	Tools/Lifestyle	Medium	Design a Neumorphism (Mobile) mobile interface using neumorphism, soft ui, dual shadow, extruded, inset, clay surface, monochromatic, cool grey. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.	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	neumorphism-mobile		supplemental	neumorphism			auto
86	86	Fluent 2	Platform/System	fluent 2, microsoft, enterprise, calm, rounded, tokenized, cross-platform, copilot	Fluent neutral palette with brand and status tokens	System semantic tokens; product brand accents	Subtle depth, calm transitions, platform-adaptive motion	Microsoft 365, Windows, Copilot, and enterprise line-of-business tools	Products that should not inherit Microsoft platform conventions	supported	supported	cost:moderate|drivers:animation,blur	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	◐ Medium	custom	Microsoft Fluent 2, current	Medium	Design a Fluent 2 product surface using calm hierarchy, standardized corners, semantic tokens, subtle depth, and platform-aware components. Preserve Microsoft interaction patterns and accessible focus states.	design tokens, semantic color, component states, focus-visible, reduced motion	Use official tokens and components; preserve platform conventions; test keyboard, contrast, zoom, motion preferences, and responsive behavior	--color-primary, --color-surface, --color-on-surface, --radius-control, --motion-duration, --focus-ring	fluent-2	Fluent UI|Microsoft Fluent 2	active				auto
87	87	Shopify Polaris	Platform/System	shopify polaris, merchant admin, commerce, checkout, web components, app home	Shopify admin semantic tokens and merchant brand accents	System semantic tokens; product brand accents	Purposeful admin feedback and restrained transitions	Shopify admin apps, merchant tools, checkout, customer accounts, POS, and extensions	Generic marketing sites or products outside Shopify surfaces	supported	supported	cost:moderate|drivers:animation,blur	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	◐ Medium	custom	Shopify Polaris, current	Medium	Design a Shopify Polaris merchant workflow using official web components, admin-native hierarchy, clear actions, semantic status feedback, and consistent commerce patterns. Keep scope tied to Shopify surfaces.	design tokens, semantic color, component states, focus-visible, reduced motion	Use official tokens and components; preserve platform conventions; test keyboard, contrast, zoom, motion preferences, and responsive behavior	--color-primary, --color-surface, --color-on-surface, --radius-control, --motion-duration, --focus-ring	shopify-polaris	Polaris|Polaris Web Components	active				auto
88	88	Adobe Spectrum	Platform/System	adobe spectrum, creative tools, enterprise, content creation, tokenized, cross-platform	Spectrum semantic colors with product-specific accents	System semantic tokens; product brand accents	Layered depth and restrained professional motion	Creative tools, media workflows, document products, and Adobe-adjacent enterprise software	Consumer brands that do not need dense professional-tool conventions	supported	supported	cost:moderate|drivers:animation,blur	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	◐ Medium	spectrum-web-components|react-spectrum	Adobe Spectrum	Medium	Design an Adobe Spectrum professional tool with tokenized color, precise hierarchy, dense but legible controls, strong focus states, and cross-platform component consistency.	design tokens, semantic color, component states, focus-visible, reduced motion	Use official tokens and components; preserve platform conventions; test keyboard, contrast, zoom, motion preferences, and responsive behavior	--color-primary, --color-surface, --color-on-surface, --radius-control, --motion-duration, --focus-ring	spectrum-design-system	Spectrum|Adobe Spectrum Design System	active				auto
89	89	Spectrum 2	Platform/System	spectrum 2, adobe, expressive, approachable, adaptive, inclusive, creative tools	Spectrum 2 semantic themes with updated contrast and personalization	System semantic tokens; product brand accents	Updated depth, expressive illustration, adaptive motion	New Adobe-style creative and document surfaces adopting Spectrum 2	Products not aligned with Adobe professional workflows	supported	supported	cost:moderate|drivers:animation,blur	risk:conditional|requires:contrast-text-4.5,keyboard,visible-focus,reduced-motion	adaptable	◐ Medium	custom|spectrum-web-components	Adobe Spectrum 2, 2023+	Medium	Design a Spectrum 2 professional surface with updated typography, approachable icons, layered depth, adaptive themes, and expressive but controlled visuals. Follow official Spectrum 2 tokens and component guidance.	design tokens, semantic color, component states, focus-visible, reduced motion	Use official tokens and components; preserve platform conventions; test keyboard, contrast, zoom, motion preferences, and responsive behavior	--color-primary, --color-surface, --color-on-surface, --radius-control, --motion-duration, --focus-ring	spectrum-2	Adobe Spectrum 2|S2	supplemental	spectrum-design-system			auto