@caoscompanybr/merlin 3.5.0

package/.merlin-core/skills/general/design-ux-patterns/references/landing-patterns.md

@@ -0,0 +1,199 @@
+# Complete Landing Page Pattern Catalog (30 Patterns)
+
+> Reference data for the design-ux-patterns skill. Full architectural breakdowns for each landing page pattern.
+
+## Conversion-Focused Patterns (1-10)
+
+### 1. Hero + Features + CTA
+
+**Best For:** SaaS, general products
+**Sections:** Hero (headline + subhead + CTA + visual), Feature grid (3-6 cards), How it works (3 steps), Pricing, Final CTA
+**Conversion:** Feature-driven persuasion. Logical flow from problem to solution to action.
+**Key Rule:** Single primary CTA repeated at top and bottom. Max 2 CTAs per viewport.
+
+### 2. Hero + Social Proof
+
+**Best For:** E-commerce, marketplaces, consumer products
+**Sections:** Hero (headline + CTA), Logo bar (trusted by), Testimonials (3-6), Feature highlights, Reviews, Final CTA
+**Conversion:** Trust-driven. Social proof reduces purchase anxiety.
+**Key Rule:** Real testimonials with names, photos, and specifics. No generic "Great product!" quotes.
+
+### 3. Feature-Rich Showcase
+
+**Best For:** Complex B2B, enterprise, multi-feature products
+**Sections:** Hero, Feature deep-dives (alternating image+text), Comparison table, Integration logos, Case study, Demo CTA
+**Conversion:** Detail-driven evaluation for informed buyers.
+**Key Rule:** Each feature section should address a specific pain point, not just list capabilities.
+
+### 4. Minimal Single Column
+
+**Best For:** Micro SaaS, simple tools, waitlists
+**Sections:** Hero (headline + single input/CTA), Brief value prop (3 bullets), Optional social proof
+**Conversion:** Friction-free. Remove all distractions for highest conversion rate.
+**Key Rule:** One CTA only. No navigation menu. No footer links. Pure focus.
+
+### 5. Interactive Product Demo
+
+**Best For:** AI tools, developer tools, creative tools
+**Sections:** Hero (headline + embedded demo), Feature callouts around demo, Testimonials, Pricing, CTA
+**Conversion:** Try-before-buy. Let the product sell itself.
+**Key Rule:** Demo must work without signup. Preload with realistic sample data.
+
+### 6. Trust & Authority
+
+**Best For:** Finance, healthcare, legal, enterprise
+**Sections:** Hero (authority headline), Credentials (certifications, awards, years), Case studies, Compliance badges, Team, CTA
+**Conversion:** Authority-driven trust for high-stakes decisions.
+**Key Rule:** Lead with credentials before features. "500+ banks trust us" before "AI-powered analytics".
+
+### 7. Storytelling-Driven
+
+**Best For:** Brand storytelling, travel, lifestyle, non-profit
+**Sections:** Full-width hero, Narrative sections (problem → journey → transformation), Emotional visuals, Testimonials, CTA
+**Conversion:** Emotion-driven narrative for brand affinity and long-term engagement.
+**Key Rule:** Show, don't tell. Use visuals and stories over bullet points.
+
+### 8. Video-First
+
+**Best For:** Media, entertainment, courses, products that demo well
+**Sections:** Hero video (autoplay muted), Video highlights, Written benefits, Testimonials, CTA
+**Conversion:** Visual-first engagement for products that are better seen than described.
+**Key Rule:** Video must be under 90 seconds. Include captions. Provide text fallback.
+
+### 9. Comparison Table
+
+**Best For:** B2B SaaS with competitors, tiered pricing
+**Sections:** Hero, Competitor comparison matrix, Differentiators, Testimonials, CTA
+**Conversion:** Comparison-driven decision for users actively evaluating alternatives.
+**Key Rule:** Be honest in comparisons. Highlight genuine advantages, not strawman weaknesses.
+
+### 10. Lead Magnet
+
+**Best For:** Newsletters, content businesses, courses
+**Sections:** Hero (value prop + email capture), Sample content preview, Social proof (subscriber count), Benefits of subscribing
+**Conversion:** Content-gated capture. Offer value before asking for email.
+**Key Rule:** Show a preview of what they'll get. "Free chapter" or "Sample issue" above the fold.
+
+## Specialized Patterns (11-20)
+
+### 11. Pricing Page
+
+**Best For:** SaaS, subscription services
+**Sections:** Plan cards (3 recommended), Feature comparison matrix, FAQ, Enterprise CTA, Money-back guarantee
+**Key Rule:** Highlight recommended plan. Show annual vs monthly toggle. Anchor with highest plan first.
+
+### 12. Waitlist / Coming Soon
+
+**Best For:** Pre-launch, beta products
+**Sections:** Hero (teaser headline + email capture), Feature previews, Countdown timer (optional), Early access benefits
+**Key Rule:** Create urgency without being manipulative. Show progress ("2,847 on the waitlist").
+
+### 13. App Store Style
+
+**Best For:** Mobile apps
+**Sections:** Hero with device mockup, Feature carousel, App screenshots, Ratings/reviews, Download buttons (iOS + Android)
+**Key Rule:** Show the app in context (phone mockup). Include real ratings. Deep-link to stores.
+
+### 14. Bento Grid Showcase
+
+**Best For:** Design-forward, Apple-style, Linear-style
+**Sections:** Hero headline, Bento grid cards (visual features), Minimal text, Subtle animations
+**Key Rule:** Each grid card should communicate one feature visually. Less text, more visual impact.
+
+### 15. Funnel 3-Step
+
+**Best For:** High-intent conversion, insurance, quotes, bookings
+**Sections:** Step 1 (hook + qualify), Step 2 (configure/select), Step 3 (convert/checkout)
+**Key Rule:** Show progress bar. Allow back navigation. Don't ask for payment info until final step.
+
+### 16. FAQ / Documentation
+
+**Best For:** Technical products, complex services
+**Sections:** Hero, Categorized FAQ accordion, Search, Related docs links, Support CTA
+**Key Rule:** Organize by user intent (Getting Started, Billing, Technical), not by internal taxonomy.
+
+### 17. Before-After Transformation
+
+**Best For:** Fitness, beauty, home improvement, design tools
+**Sections:** Hero, Before/after slider or comparison, Process explanation, Testimonials, CTA
+**Key Rule:** Use real results with consent. Interactive slider > side-by-side static images.
+
+### 18. Marketplace / Directory
+
+**Best For:** Marketplaces, aggregators, directories
+**Sections:** Hero + search bar, Category grid, Featured listings, Filters, Browse CTA
+**Key Rule:** Search must be prominent. Show category count. Filter by relevance, not just alphabetical.
+
+### 19. Newsletter Landing
+
+**Best For:** Content creators, writers, journalists
+**Sections:** Hero (what + why + email capture), Recent issues preview, Author bio, Subscriber count, Frequency info
+**Key Rule:** Show exactly what subscribers get. Link to archive. Set expectations on frequency.
+
+### 20. Webinar / Event Registration
+
+**Best For:** Events, webinars, conferences
+**Sections:** Hero (event name + date + register CTA), Speaker bios, Agenda, Social proof, Urgency (seats left)
+**Key Rule:** Date/time with timezone prominently displayed. Calendar add button after registration.
+
+## Advanced Patterns (21-30)
+
+### 21. Enterprise Gateway
+
+**Best For:** B2B enterprise, complex sales
+**Sections:** Hero, Solution categories, Industry-specific pages, Case studies, "Talk to Sales" CTA
+**Key Rule:** Segment by industry or use case. No self-serve pricing — route to sales.
+
+### 22. Portfolio Grid
+
+**Best For:** Agencies, designers, photographers
+**Sections:** Hero (minimal), Filterable project grid, Project detail modals, About/contact
+**Key Rule:** Let work speak for itself. High-quality visuals. Lazy load images with blur-up.
+
+### 23. Horizontal Scroll Journey
+
+**Best For:** Storytelling, timelines, product history
+**Sections:** Horizontal sections that scroll-snap, Narrative progression, Final CTA
+**Key Rule:** Clear scroll direction indicators. Keyboard arrow support. Mobile fallback to vertical.
+
+### 24. Interactive 3D Configurator
+
+**Best For:** Products with customization (cars, furniture, shoes)
+**Sections:** 3D model viewer, Customization panel, Price update, Add to cart
+**Key Rule:** Progressive loading with low-poly preview. Touch/drag rotation. Fallback to image gallery.
+
+### 25. AI-Driven Dynamic Landing
+
+**Best For:** Personalized experiences, A/B testing platforms
+**Sections:** Dynamic hero based on referral source, Personalized features, Context-aware CTA
+**Key Rule:** Graceful fallback for non-JS, cached versions. Don't flash different content (avoid CLS).
+
+### 26. Immersive / Interactive
+
+**Best For:** Games, experiences, creative agencies
+**Sections:** Full-screen interactive hero, Scroll-triggered reveals, Particle/3D effects, CTA
+**Key Rule:** Performance budget is critical. Provide reduced-motion alternative. Test on low-end devices.
+
+### 27. Event / Conference
+
+**Best For:** Conferences, summits, hackathons
+**Sections:** Hero (event branding + date + register), Speakers grid, Schedule, Venue info, Sponsors, CTA
+**Key Rule:** Schedule must be mobile-friendly. Speaker bios in modals. Link to past event videos.
+
+### 28. Scroll-Triggered Storytelling
+
+**Best For:** Data journalism, annual reports, impact reports
+**Sections:** Scroll-triggered animations, Data visualizations, Narrative text blocks, Sources/methodology
+**Key Rule:** Each scroll trigger should reveal exactly one new insight. Don't overwhelm with simultaneous animations.
+
+### 29. Product Hunt Style
+
+**Best For:** Product launches, indie products
+**Sections:** Hero (product name + tagline + upvote CTA), Quick demo GIF, Key features (3), Maker story, Launch special offer
+**Key Rule:** Tagline must be under 60 characters. Demo must be a GIF or 15-second video. Show the maker.
+
+### 30. App Onboarding / Tour
+
+**Best For:** In-app first experience, feature announcements
+**Sections:** Welcome modal, Feature highlights (tooltip tour), Sample data walkthrough, Completion celebration
+**Key Rule:** Maximum 5 steps. Allow skip at every step. Don't block core functionality.

package/.merlin-core/skills/general/design-ux-patterns/references/professional-ui-checklist.md

@@ -0,0 +1,56 @@
+# Professional UI Pre-Delivery Checklist
+
+> Expanded checklist for the design-ux-patterns skill. Use before delivering any UI work.
+> Complements the quick 8-item checklist in `design-system/SKILL.md`.
+> Source: Cherry-picked from ui-ux-pro-max (nextlevelbuilder, v2.2.1) — adapted for Merlin ecosystem.
+
+## Visual Quality
+
+- [ ] **No emoji icons** — use SVG icons only (Heroicons, Lucide, Phosphor, or project's chosen library)
+- [ ] **Consistent icon family** — all icons from the same set and visual style (don't mix Heroicons + FontAwesome)
+- [ ] **Stroke consistency** — same stroke width (1.5px or 2px) across all icons in the same visual layer
+- [ ] **Filled vs outline discipline** — one icon style per hierarchy level (e.g., filled for active nav, outline for inactive)
+- [ ] **Icon sizing tokens** — use defined sizes (`icon-sm` 16px, `icon-md` 20px, `icon-lg` 24px) not arbitrary values
+- [ ] **Official brand assets** — logos use correct proportions, clear space, and approved colors
+- [ ] **Stable press states** — pressed/hover effects use transform/opacity, never change layout bounds or cause jitter
+- [ ] **Semantic theme tokens** — no ad-hoc hardcoded colors; all values from design system tokens
+
+## Interaction
+
+- [ ] **Tap feedback** — all tappable elements provide clear pressed feedback (ripple, opacity change, or scale) within 150ms
+- [ ] **Touch targets** — minimum 44x44px interactive area on all buttons, links, and controls (48x48px on Android)
+- [ ] **Touch spacing** — minimum 8px gap between adjacent interactive elements
+- [ ] **Animation timing** — micro-interactions stay in the 150-300ms range with platform-appropriate easing
+- [ ] **Disabled state clarity** — disabled elements use reduced opacity (0.38-0.5), `cursor: not-allowed`, and semantic attribute
+- [ ] **Screen reader focus order** — tab/focus order matches visual layout order; all labels are descriptive
+- [ ] **Gesture conflict prevention** — no overlapping tap/swipe/drag regions; system gestures (back swipe) not overridden
+- [ ] **Semantic controls** — interactive elements use proper HTML elements (`<button>`, `<a>`, `<input>`) not styled `<div>`
+
+## Light/Dark Mode
+
+- [ ] **Primary text contrast** — ≥4.5:1 in BOTH light and dark mode (test separately)
+- [ ] **Secondary text contrast** — ≥3:1 in both modes
+- [ ] **Border/divider visibility** — separators and borders are visible in both themes (not just light mode)
+- [ ] **State contrast parity** — pressed/focused/disabled states are equally distinguishable in both modes
+- [ ] **Token-driven theming** — colors use semantic tokens that swap per theme, not per-component conditionals
+- [ ] **Scrim legibility** — modal/drawer scrim opacity is 40-60% black, enough to isolate foreground content
+- [ ] **Both themes tested** — visually verified in both light and dark mode before delivery
+
+## Layout
+
+- [ ] **Safe area compliance** — headers, tab bars, and bottom CTA bars respect OS safe areas (notch, gesture bar)
+- [ ] **Fixed element offset** — scroll content has proper padding so it's not hidden behind fixed/sticky bars
+- [ ] **Multi-device verified** — tested on small phone (375px), large phone (390px+), tablet, and landscape orientation
+- [ ] **Adaptive gutters** — horizontal insets increase on larger screens and in landscape mode
+- [ ] **Spacing rhythm** — consistent 4/8px spacing system maintained across components, sections, and pages
+- [ ] **Text measure** — long-form text stays readable on large devices (not edge-to-edge; max ~75 characters per line)
+
+## Accessibility
+
+- [ ] **Alt text** — all meaningful images and icons have accessibility labels; decorative images use `alt=""`
+- [ ] **Form labels** — every input has a visible label, helper text for complex fields, and clear error messages
+- [ ] **Color not sole indicator** — status, errors, and states use icon + text alongside color
+- [ ] **Reduced motion** — animations respect `prefers-reduced-motion` without breaking functionality
+- [ ] **Dynamic text** — layout doesn't break at larger system font sizes (test at 200% zoom / largest Dynamic Type)
+- [ ] **ARIA states** — interactive elements announce their state (selected, expanded, disabled) to assistive technology
+- [ ] **Heading hierarchy** — sequential h1→h6 structure, no skipped levels, one h1 per page

package/.merlin-core/skills/general/design-ux-patterns/references/style-catalog.md

@@ -0,0 +1,89 @@
+# Complete UI Style Catalog (67 Styles)
+
+> Reference data for the design-ux-patterns skill. Full properties for each style.
+
+## General Styles (1-19)
+
+| #   | Style                 | Era       | Complexity | Accessibility      | Performance | Mobile    | Best For                      | Key CSS/Effects                             |
+| --- | --------------------- | --------- | ---------- | ------------------ | ----------- | --------- | ----------------------------- | ------------------------------------------- |
+| 1   | Minimalism & Swiss    | 1950s+    | Low        | WCAG AAA           | Excellent   | Excellent | Corporate, SaaS, content      | Grid systems, whitespace, typography-first  |
+| 2   | Neumorphism           | 2020s     | Medium     | Low contrast risk  | Good        | Good      | Mobile, wellness, lifestyle   | box-shadow inset + outset, soft bg match    |
+| 3   | Glassmorphism         | 2020s     | Medium     | Ensure 4.5:1       | Medium      | Good      | SaaS, fintech, modern apps    | backdrop-filter: blur, rgba bg, border      |
+| 4   | Brutalism             | 1950s+    | Low        | WCAG AAA           | Excellent   | Good      | Portfolio, agencies, creative | Bold borders, raw typography, high contrast |
+| 5   | 3D & Hyperrealism     | 2020s     | High       | Not accessible     | Poor        | Poor      | Entertainment, showcase       | 3D transforms, WebGL, Spline embeds         |
+| 6   | Vibrant & Block-based | 2020s     | Medium     | WCAG AA            | Good        | Good      | Fitness, events, youth        | Solid color blocks, bold typography         |
+| 7   | Dark Mode (OLED)      | 2020s     | Low        | WCAG AAA           | Excellent   | Excellent | Dev tools, dashboards, media  | Near-black bg, elevated surfaces, contrast  |
+| 8   | Accessible & Ethical  | Universal | Low        | WCAG AAA           | Excellent   | Excellent | Healthcare, education, gov    | Semantic HTML, ARIA, high contrast          |
+| 9   | Claymorphism          | 2020s     | Medium     | Ensure contrast    | Good        | Good      | Children, casual, playful     | border-radius, multi-shadow, pastel bg      |
+| 10  | Aurora UI             | 2020s     | Medium     | Ensure 4.5:1       | Medium      | Good      | Creative, portfolios          | Gradient mesh, animated bg, glass layers    |
+| 11  | Retro-Futurism        | 1980s     | Medium     | Custom focus       | Medium      | Medium    | Entertainment, nostalgia      | Neon glows, grid lines, retro palettes      |
+| 12  | Flat Design           | 2010s     | Low        | WCAG AAA           | Excellent   | Excellent | E-commerce, mobile, utilities | No shadows, solid colors, simple icons      |
+| 13  | Skeuomorphism         | 2007-2012 | High       | Custom focus       | Medium      | Medium    | Food, luxury, tactile apps    | Realistic textures, gradients, shadows      |
+| 14  | Liquid Glass          | 2020s     | High       | Ensure contrast    | Medium      | Medium    | Luxury, premium, high-end     | backdrop-filter, transparency, reflections  |
+| 15  | Motion-Driven         | 2020s     | High       | Reduced-motion alt | Poor-Medium | Medium    | Portfolios, storytelling      | Scroll-triggered, GSAP, Framer Motion       |
+| 16  | Micro-interactions    | 2020s     | Medium     | Reduced-motion alt | Good        | Good      | SaaS, mobile, UX-forward      | Transform + opacity transitions, hover fx   |
+| 17  | Inclusive Design      | Universal | Low        | WCAG AAA           | Excellent   | Excellent | Gov, healthcare, public       | Semantic markup, adaptable, no barriers     |
+| 18  | Zero Interface        | 2020s AI  | Low        | WCAG AA            | Excellent   | Excellent | AI products, voice-first      | Minimal chrome, conversational, adaptive    |
+| 19  | Soft UI Evolution     | 2020s     | Medium     | Ensure 4.5:1       | Good        | Good      | Lifestyle, wellness, social   | Soft shadows, rounded, gentle gradients     |
+
+## Landing Page Styles (20-27)
+
+| #   | Style                    | Complexity | Best For                        | Key Pattern                               |
+| --- | ------------------------ | ---------- | ------------------------------- | ----------------------------------------- |
+| 20  | Hero-Centric             | Medium     | Product launches, hero products | Full-screen hero, scroll-down CTA         |
+| 21  | Conversion-Optimized     | Medium     | SaaS, e-commerce landing        | A/B tested layout, single focus CTA       |
+| 22  | Feature-Rich Showcase    | Medium     | Complex products, B2B           | Alternating feature sections, comparison  |
+| 23  | Minimal & Direct         | Low        | Simple tools, MVPs              | Single column, minimal distractions       |
+| 24  | Social Proof-Focused     | Medium     | Consumer products, marketplaces | Testimonials, reviews, user counts        |
+| 25  | Interactive Product Demo | High       | Dev tools, AI products          | Embedded demo, try-before-buy             |
+| 26  | Trust & Authority        | Medium     | Finance, healthcare, enterprise | Credentials, certifications, case studies |
+| 27  | Storytelling-Driven      | High       | Brands, travel, non-profit      | Narrative flow, emotional visuals         |
+
+## BI / Analytics Styles (28-37)
+
+| #   | Style                   | Complexity | Best For                       | Key Pattern                            |
+| --- | ----------------------- | ---------- | ------------------------------ | -------------------------------------- |
+| 28  | Data-Dense Dashboard    | Medium     | BI, analytics, monitoring      | Grid layout, multiple charts, filters  |
+| 29  | Heat Map Style          | Medium     | User behavior, geographic data | Color-coded intensity, tooltips        |
+| 30  | Executive Dashboard     | Low        | C-level reporting              | KPI cards, trend lines, clean layout   |
+| 31  | Real-Time Monitoring    | High       | DevOps, IoT, trading           | Live feeds, alerts, status indicators  |
+| 32  | Drill-Down Analytics    | High       | Deep analysis, exploration     | Hierarchical navigation, detail views  |
+| 33  | Comparative Analysis    | Medium     | Benchmarking, A/B testing      | Side-by-side charts, diff highlighting |
+| 34  | Predictive Analytics    | High       | Forecasting, ML products       | Confidence bands, trend projections    |
+| 35  | User Behavior Analytics | Medium     | Product analytics, engagement  | Funnels, cohorts, retention curves     |
+| 36  | Financial Dashboard     | High       | Trading, portfolio management  | Candlestick, P&L, risk indicators      |
+| 37  | Sales Intelligence      | Medium     | CRM, sales teams               | Pipeline, revenue charts, leaderboards |
+
+## Modern Styles (38-67)
+
+| #   | Style                     | Era          | Complexity | Accessibility      | Best For                | Key Effects                                 |
+| --- | ------------------------- | ------------ | ---------- | ------------------ | ----------------------- | ------------------------------------------- |
+| 38  | Neubrutalism              | 2020s        | Low        | WCAG AAA           | Startups, bold          | Thick borders, bright fills, offset shadows |
+| 39  | Bento Box Grid            | 2020s Apple  | Low        | WCAG AA            | Feature showcase        | CSS Grid, varied card sizes, clean gaps     |
+| 40  | Y2K Aesthetic             | 2000s        | Medium     | Custom             | Nostalgia, retro        | Chrome gradients, bubble fonts, bright      |
+| 41  | Cyberpunk UI              | 2020s        | Medium     | Custom focus       | Gaming, crypto          | Neon glows, scanlines, glitch effects       |
+| 42  | Organic Biophilic         | 2020s        | Low        | WCAG AA            | Sustainability, food    | Organic shapes, earth colors, textures      |
+| 43  | AI-Native UI              | 2020s AI     | Low        | WCAG AA            | AI products, chatbots   | Conversational, streaming, adaptive         |
+| 44  | Memphis Design            | 1980s        | Medium     | Custom             | Playful, bold           | Geometric shapes, primary colors, patterns  |
+| 45  | Vaporwave                 | 1980s-90s    | Medium     | Custom             | Entertainment, retro    | Purple/pink/cyan, grid, sunset gradients    |
+| 46  | Dimensional Layering      | 2020s        | Medium     | Ensure contrast    | Cards, dashboards       | Multi-level elevation, z-depth system       |
+| 47  | Exaggerated Minimalism    | 2020s        | Low        | WCAG AAA           | Typography-focused      | Oversized text, extreme whitespace          |
+| 48  | Kinetic Typography        | 2020s        | High       | Reduced-motion     | Experimental, creative  | Animated text, scroll-driven type           |
+| 49  | Parallax Storytelling     | 2020s        | High       | Reduced-motion alt | Travel, campaigns       | Scroll-parallax layers, depth illusion      |
+| 50  | Swiss Modernism 2.0       | 1950s+2020s  | Low        | WCAG AAA           | Corporate, legal        | Helvetica-era grid + modern type + color    |
+| 51  | HUD / Sci-Fi FUI          | 2010s Sci-Fi | High       | Custom             | Gaming, sci-fi          | Thin lines, brackets, animated data         |
+| 52  | Pixel Art                 | 1980s Arcade | Medium     | Custom             | Retro gaming, nostalgia | Pixel fonts, 8-bit colors, tile layouts     |
+| 53  | Bento Grids               | 2020s        | Low        | WCAG AA            | Apple/Linear style      | CSS Grid, asymmetric cards, clean           |
+| 55  | Spatial UI (VisionOS)     | 2024         | High       | Custom (gaze)      | Spatial computing       | Glass panels, depth, gaze-aware hover       |
+| 56  | E-Ink / Paper             | 2020s        | Low        | WCAG AAA           | Reading, well-being     | Grayscale, paper texture, serif type        |
+| 57  | Gen Z Chaos               | 2023+        | High       | Low                | Youth, meme culture     | Collage, mixed media, anti-design           |
+| 58  | Biomimetic / Organic 2.0  | 2024+        | High       | Custom             | Nature-tech, bio        | Generative shapes, growth animations        |
+| 59  | Anti-Polish / Raw         | 2025+        | Low        | WCAG AA            | Authentic brands        | Imperfect layout, hand-drawn elements       |
+| 60  | Tactile Digital           | 2025+        | Medium     | Custom             | Interactive, deformable | Cursor-reactive deformation, physics        |
+| 61  | Nature Distilled          | 2025+        | Low        | WCAG AA            | Handmade, craft         | Watercolor textures, natural palettes       |
+| 62  | Interactive Cursor        | 2025+        | Medium     | Reduced-motion alt | Portfolio, creative     | Custom cursors, trail effects, magnetic     |
+| 63  | Voice-First Multimodal    | 2025+        | Medium     | WCAG AA            | Voice products          | Waveform UI, transcript display             |
+| 64  | 3D Product Preview        | 2025+        | High       | Alt: image gallery | E-commerce 3D           | Three.js, model-viewer, drag-rotate         |
+| 65  | Gradient Mesh / Aurora    | 2025+        | Medium     | Ensure contrast    | Creative, premium       | Complex gradient meshes, animated           |
+| 66  | Editorial Grid / Magazine | 2020s        | Low        | WCAG AA            | Publishing, fashion     | CSS Grid, mixed media, editorial type       |
+| 67  | Chromatic Aberration      | 2020s        | Medium     | Custom             | Tech, experimental      | RGB channel split, glitch, retro-tech       |