ui-ux-pro-max-skill/skills/ui-ux-pro-max/data/styles.csv

1	STT	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
2	1	Minimalism & Swiss Style	General	Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential	Monochromatic, Black #000000, White #FFFFFF	Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent	Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading	Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools	Creative portfolios, entertainment, playful brands, artistic experiments	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AAA	✓ High	◐ Medium	Tailwind 10/10, Bootstrap 9/10, MUI 9/10	1950s Swiss	Low
3	2	Neumorphism	General	Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic	Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8	Tints/shades (±30%), gradient subtlety, color harmony	Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow	Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs	Complex apps, critical accessibility, data-heavy dashboards, high-contrast required	✓ Full	◐ Partial	⚡ Good	⚠ Low contrast	✓ Good	◐ Medium	Tailwind 8/10, CSS-in-JS 9/10	2020s Modern	Medium
4	3	Glassmorphism	General	Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer	Translucent white: rgba(255,255,255,0.1-0.3)	Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA	Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth	Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation	Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark	✓ Full	✓ Full	⚠ Good	⚠ Ensure 4.5:1	✓ Good	✓ High	Tailwind 9/10, MUI 8/10, Chakra 8/10	2020s Modern	Medium
5	4	Brutalism	General	Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design	Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF	Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary	No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks	Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs	Corporate environments, conservative industries, critical accessibility, customer-facing professional	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AAA	◐ Medium	✗ Low	Tailwind 10/10, Bootstrap 7/10	1950s Brutalist	Low
6	5	3D & Hyperrealism	General	Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive	Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0	Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)	WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)	Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR	Low-end mobile, performance-limited, critical accessibility, data tables/forms	◐ Partial	◐ Partial	❌ Poor	⚠ Not accessible	✗ Low	◐ Medium	Three.js 10/10, R3F 10/10, Babylon.js 10/10	2020s Modern	High
7	6	Vibrant & Block-based	General	Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic	Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00	Complementary: Orange #FF7F00, Shocking Pink #FF006E, Lime #CCFF00, triadic schemes	Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms	Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer	Financial institutions, healthcare, formal business, government, conservative, elderly	✓ Full	✓ Full	⚡ Good	◐ Ensure WCAG	✓ High	✓ High	Tailwind 10/10, Chakra 9/10, Styled 9/10	2020s Modern	Medium
8	7	Dark Mode (OLED)	General	Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient	Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27	Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF	Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus	Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light	Print-first content, high-brightness outdoor, color-accuracy-critical	✗ No	✓ Only	⚡ Excellent	✓ WCAG AAA	✓ High	◐ Low	Tailwind 10/10, MUI 10/10, Chakra 10/10	2020s Modern	Low
9	8	Accessible & Ethical	General	High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic	WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+)	Symbol-based colors (not color-only), supporting patterns, inclusive combinations	Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets	Government, healthcare, education, inclusive products, large audience, legal compliance, public	None - accessibility universal	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AAA	✓ High	✓ High	All frameworks 10/10	Universal	Low
10	9	Claymorphism	General	Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)	Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG	Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle	Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions	Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games	Formal corporate, professional services, data-critical, serious/medical, legal apps, finance	✓ Full	◐ Partial	⚡ Good	⚠ Ensure 4.5:1	✓ High	✓ High	Tailwind 9/10, CSS-in-JS 9/10	2020s Modern	Medium
11	10	Aurora UI	General	Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract	Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF	Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)	Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph	Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections	Data-heavy dashboards, critical accessibility, content-heavy where distraction issues	✓ Full	✓ Full	⚠ Good	⚠ Text contrast	✓ Good	✓ High	Tailwind 9/10, CSS-in-JS 10/10	2020s Modern	Medium
12	11	Retro-Futurism	General	Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave	Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0	Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents	CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)	Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk	Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance	✓ Full	✓ Dark focused	⚠ Moderate	⚠ High contrast/strain	◐ Medium	◐ Medium	Tailwind 8/10, CSS-in-JS 9/10	1980s Retro	Medium
13	12	Flat Design	General	2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy	Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)	Complementary colors, muted secondaries, high saturation, clean accents	No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons	Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate	Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AAA	✓ High	✓ High	Tailwind 10/10, Bootstrap 10/10, MUI 9/10	2010s Modern	Low
14	13	Skeuomorphism	General	Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material	Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects	Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors	Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)	Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education	Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)	◐ Partial	◐ Partial	❌ Poor	⚠ Textures reduce readability	✗ Low	◐ Medium	CSS-in-JS 7/10, Custom 8/10	2007-2012 iOS	High
15	14	Liquid Glass	General	Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration	Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity	Chromatic aberration (Red-Cyan), iridescent oil-spill, fluid gradient blends, holographic effects	Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions	Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios	Performance-limited, critical accessibility, complex data, budget projects	✓ Full	✓ Full	⚠ Moderate-Poor	⚠ Text contrast	◐ Medium	✓ High	Framer Motion 10/10, GSAP 10/10	2020s Modern	High
16	15	Motion-Driven	General	Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions	Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors	Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback	Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions	Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS	Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive	✓ Full	✓ Full	⚠ Good	⚠ Prefers-reduced-motion	✓ Good	✓ High	GSAP 10/10, Framer Motion 10/10	2020s Modern	High
17	16	Micro-interactions	General	Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive	Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B	Accent feedback, neutral supporting, clear action indicators	Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic	Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components	Desktop-only, critical performance, accessibility-first (alternatives needed)	✓ Full	✓ Full	⚡ Excellent	✓ Good	✓ High	✓ High	Framer Motion 10/10, React Spring 9/10	2020s Modern	Medium
18	17	Inclusive Design	General	Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal	WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary	Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators	Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic	Public services, education, healthcare, finance, government, accessible consumer, inclusive	None - accessibility universal	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AAA	✓ High	✓ High	All frameworks 10/10	Universal	Low
19	18	Zero Interface	General	Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient	Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8	Subtle feedback: light green, light red, minimal UI elements, soft accents	Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions	Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences	Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control	✓ Full	✓ Full	⚡ Excellent	✓ Excellent	✓ High	✓ High	Tailwind 10/10, Custom 10/10	2020s AI-Era	Low
20	19	Soft UI Evolution	General	Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid	Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy	Better combinations, accessible secondary, supporting with improved contrast, modern accents	Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA	Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid	Extreme minimalism, critical performance, systems without modern OS	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AA+	✓ High	✓ High	Tailwind 9/10, MUI 9/10, Chakra 9/10	2020s Modern	Medium
21	20	Hero-Centric Design	Landing Page	Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual	Brand primary color, white/light backgrounds for contrast, accent color for CTA	Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)	Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect	SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies	Complex navigation, multi-page experiences, data-heavy applications	✓ Full	✓ Full	⚡ Good	✓ WCAG AA	✓ Full	✓ Very High	Tailwind 10/10, Bootstrap 9/10	2020s Modern	Medium
22	37	Sales Intelligence Dashboard	BI/Analytics	Deal pipeline, sales metrics, territory performance, sales rep leaderboard, win-loss analysis, quota tracking, forecast accuracy	Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)	Pipeline stage colors, rep performance colors, quota achievement colors, forecast accuracy colors	Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights	CRM dashboards, sales management, opportunity tracking, performance management, quota planning	Marketing analytics, customer support metrics, HR dashboards	✓ Full	✓ Full	⚡ Good	✓ WCAG AA	◐ Medium	✗ Not applicable	Recharts 9/10, Chart.js 9/10	2020s Modern	Medium
23	38	Neubrutalism	General	Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z	#FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)	Limited accent colors, high contrast combinations, no gradients allowed	box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography	Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs	Luxury brands, finance, healthcare, conservative industries (too playful)	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AAA	✓ High	✓ High	Tailwind 10/10, Bootstrap 8/10	2020s Modern	Low
24	39	Bento Box Grid	General	Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards	Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary	Subtle gradients, shadow variations, accent highlights for interactive cards	grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions	Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS	Dense data tables, text-heavy content, real-time monitoring	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AA	✓ High	✓ High	Tailwind 10/10, CSS Grid 10/10	2020s Apple	Low
25	40	Y2K Aesthetic	General	Neon pink, chrome, metallic, bubblegum, iridescent, glossy, retro-futurism, 2000s, futuristic nostalgia	#FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple)	Metallic gradients, glossy overlays, iridescent effects, chrome textures	linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes	Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused	B2B enterprise, healthcare, finance, conservative industries, elderly users	✓ Full	◐ Partial	⚠ Good	⚠ Check contrast	✓ Good	✓ High	Tailwind 8/10, CSS-in-JS 9/10	Y2K 2000s	Medium
26	41	Cyberpunk UI	General	Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir	#00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)	Neon gradients, scanline overlays, glitch colors, terminal green accents	Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts	Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment	Corporate enterprise, healthcare, family apps, conservative brands, elderly users	✗ No	✓ Only	⚠ Moderate	⚠ Limited (dark+neon)	◐ Medium	◐ Medium	Tailwind 8/10, Custom CSS 10/10	2020s Cyberpunk	Medium
27	42	Organic Biophilic	General	Nature, organic shapes, green, sustainable, rounded, flowing, wellness, earthy, natural textures	#228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)	Natural gradients, earth tones, sky blues, organic textures, wood/stone colors	Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes	Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands	Tech-focused products, gaming, industrial, urban brands	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AA	✓ High	✓ High	Tailwind 10/10, CSS 10/10	2020s Sustainable	Low
28	43	AI-Native UI	General	Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions	Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)	Status indicators, streaming highlights, context card colors, subtle accent variations	Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals	AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces	Traditional forms, data-heavy dashboards, print-first content	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AA	✓ High	✓ High	Tailwind 10/10, React 10/10	2020s AI-Era	Low
29	44	Memphis Design	General	80s, geometric, playful, postmodern, shapes, patterns, squiggles, triangles, neon, abstract, bold	#FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple)	Complementary geometric colors, pattern fills, contrasting accent shapes	transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes	Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment	Corporate finance, healthcare, legal, elderly users, conservative brands	✓ Full	✓ Full	⚡ Excellent	⚠ Check contrast	✓ Good	◐ Medium	Tailwind 9/10, CSS 10/10	1980s Postmodern	Medium
30	45	Vaporwave	General	Synthwave, retro-futuristic, 80s-90s, neon, glitch, nostalgic, sunset gradient, dreamy, aesthetic	#FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)	Sunset gradients, glitch overlays, VHS effects, neon accents, pastel variations	text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines	Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects	Business apps, e-commerce, education, healthcare, enterprise software	✓ Full	✓ Dark focused	⚠ Moderate	⚠ Poor (motion)	◐ Medium	◐ Medium	Tailwind 8/10, CSS-in-JS 9/10	1980s-90s Retro	Medium
31	46	Dimensional Layering	General	Depth, overlapping, z-index, layers, 3D, shadows, elevation, floating, cards, spatial hierarchy	Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements	Shadow variations (sm/md/lg/xl), elevation colors, highlight colors for top layers	z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax	Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces	Print-style layouts, simple blogs, low-end devices, flat design requirements	✓ Full	✓ Full	⚠ Good	⚠ Moderate (SR issues)	✓ Good	✓ High	Tailwind 10/10, MUI 10/10, Chakra 10/10	2020s Modern	Medium
32	47	Exaggerated Minimalism	General	Bold minimalism, oversized typography, high contrast, negative space, loud minimal, statement design	#000000 (Black), #FFFFFF (White), single vibrant accent only	Minimal - single accent color, no secondary colors, extreme restraint	font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace	Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial	E-commerce catalogs, dashboards, forms, data-heavy, elderly users, complex apps	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AA	✓ High	✓ High	Tailwind 10/10, Typography.js 10/10	2020s Modern	Low
33	48	Kinetic Typography	General	Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text	Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette	Accent colors for emphasis, transition colors, gradient text fills	@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text	Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages	Long-form content, accessibility-critical, data interfaces, forms, elderly users	✓ Full	✓ Full	⚠ Moderate	❌ Poor (motion)	✓ Good	✓ Very High	GSAP 10/10, Framer Motion 10/10	2020s Modern	High
34	49	Parallax Storytelling	General	Scroll-driven, narrative, layered scrolling, immersive, progressive disclosure, cinematic, scroll-triggered	Story-dependent, often gradients and natural colors, section-specific palettes	Section transition colors, depth layer colors, narrative mood colors	transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations	Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns	E-commerce, dashboards, mobile-first, SEO-critical, accessibility-required	✓ Full	✓ Full	❌ Poor	❌ Poor (motion)	✗ Low	✓ High	GSAP ScrollTrigger 10/10, Locomotive Scroll 10/10	2020s Modern	High
35	50	Swiss Modernism 2.0	General	Grid system, Helvetica, modular, asymmetric, international style, rational, clean, mathematical spacing	#000000, #FFFFFF, #F5F5F5, single vibrant accent only	Minimal secondary, accent for emphasis only, no gradients	display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy	Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation	Playful brands, children's sites, entertainment, gaming, emotional storytelling	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AAA	✓ High	✓ High	Tailwind 10/10, Bootstrap 9/10, Foundation 10/10	1950s Swiss + 2020s	Low
36	51	HUD / Sci-Fi FUI	General	Futuristic, technical, wireframe, neon, data, transparency, iron man, sci-fi, interface	Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000	Transparent Black, Grid Lines #333333	Glow effects, scanning animations, ticker text, blinking markers, fine line drawing	Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards	Standard corporate, reading heavy content, accessible public services	✓ Low	✓ Full	⚠ Moderate (renders)	⚠ Poor (thin lines)	◐ Medium	✗ Low	React 9/10, Canvas 10/10	2010s Sci-Fi	High
37	52	Pixel Art	General	Retro, 8-bit, 16-bit, gaming, blocky, nostalgic, pixelated, arcade	Primary colors (NES Palette), brights, limited palette	Black outlines, shading via dithering or block colors	Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text	Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT	Professional corporate, modern SaaS, high-res photography sites	✓ Full	✓ Full	⚡ Excellent	✓ Good (if contrast ok)	✓ High	◐ Medium	CSS (box-shadow) 8/10, Canvas 10/10	1980s Arcade	Medium
38	53	Bento Grids	General	Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft	Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F	Subtle accents, soft shadows, blurred backdrops	Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal	Product features, dashboards, personal sites, marketing summaries, galleries	Long-form reading, data tables, complex forms	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AA	✓ High	✓ High	CSS Grid 10/10, Tailwind 10/10	2020s Apple/Linear	Low
39	54	Neubrutalism	General	Bold, ugly-cute, raw, high contrast, flat, hard shadows, distinct, playful, loud	Pop Yellow #FFDE59, Bright Red #FF5757, Black #000000	Lavender #CBA6F7, Mint #76E0C2	Hard hover shifts (4px), marquee scrolling, jitter animations, bold borders	Design tools, creative agencies, Gen Z brands, personal blogs, gumroad-style	Banking, legal, healthcare, serious enterprise, elderly users	✓ Full	✓ Full	⚡ Excellent	✓ WCAG AAA	✓ High	✓ High	Tailwind 10/10, Plain CSS 10/10	2020s Modern Retro	Low
40	55	Spatial UI (VisionOS)	General	Glass, depth, immersion, spatial, translucent, gaze, gesture, apple, vision-pro	Frosted Glass #FFFFFF (15-30% opacity), System White	Vibrant system colors for active states, deep shadows for depth	Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus	Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards	Text-heavy documents, high-contrast requirements, non-3D capable devices	✓ Full	✓ Full	⚠ Moderate (blur cost)	⚠ Contrast risks	✓ High (if adapted)	✓ High	SwiftUI, React (Three.js/Fiber)	2024 Spatial Era	High
41	56	E-Ink / Paper	General	Paper-like, matte, high contrast, texture, reading, calm, slow tech, monochrome	Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A	Pencil Grey #4A4A4A, Highlighter Yellow #FFFF00 (accent)	No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)	Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands	Gaming, video platforms, high-energy marketing, dark mode dependent apps	✓ Full	✗ Low (inverted only)	⚡ Excellent	✓ WCAG AAA	✓ High	✓ Medium	Tailwind 10/10, CSS 10/10	2020s Digital Well-being	Low
42	57	Gen Z Chaos / Maximalism	General	Chaos, clutter, stickers, raw, collage, mixed media, loud, internet culture, ironic	Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF	Gradients, rainbow, glitch, noise, heavily saturated mix	Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop	Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion	Corporate, government, healthcare, banking, serious tools	✓ Full	✓ Full	⚠ Poor (heavy assets)	❌ Poor	◐ Medium	✓ High (Viral)	CSS-in-JS 8/10	2023+ Internet Core	High
43	58	Biomimetic / Organic 2.0	General	Nature-inspired, cellular, fluid, breathing, generative, algorithms, life-like	Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue	Deep Ocean #001E3C, Coral #FF7F50, Organic gradients	Breathing animations, fluid morphing, generative growth, physics-based movement	Sustainability tech, biotech, advanced health, meditation, generative art platforms	Standard SaaS, data grids, strict corporate, accounting	✓ Full	✓ Full	⚠ Moderate	✓ Good	✓ Good	✓ High	Canvas 10/10, WebGL 10/10	2024+ Generative	High