Parent : [[INDEX-WEB-UIUX]]
UI UX Pro Max — Catalogue de référence
Ce document est un catalogue synthétique des données UI UX Pro Max. Pour la méthodologie d'utilisation, voir
KNOW-PAT-190. Les fichiers CSV sources complets sont dans le reposrc/ui-ux-pro-max/data/.
1. Styles UI (84+)
Styles généraux (49)
| Style | Usage typique | Notes clés |
|---|---|---|
| Minimalism & Swiss Style | Enterprise, dashboards, docs | Grid, white space, sans-serif, high contrast |
| Neumorphism | Health, wellness, meditation | Pastels, rounded 12-16px, soft shadows |
| Glassmorphism | SaaS, fintech, modals | Backdrop blur 10-20px, translucent white |
| Brutalism | Portfolios, artistiques | Couleurs primaires pures, angles 0px, bold 700+ |
| 3D & Hyperrealism | Gaming, e-commerce immersif | WebGL, Three.js, parallax 3-5 couches |
| Vibrant & Block-based | Startups, agences, gaming | Couleurs néon, grands gaps, scroll-snap |
| Dark Mode (OLED) | Night-mode, code platforms | Fonds #000, contrastes élevés |
| Claymorphism | Apps enfants, éducatif | Formes douces, ombres flottantes |
| Aurora UI | SaaS modernes, agences | Gradients fluides, backgrounds animés |
| Bento Box Grid | Dashboards, produits, portfolios | Grilles modulaires, cartes carrées |
| AI-Native UI | Chatbots, copilots | Minimal chrome, streaming text, purple neutre |
| Cyberpunk UI | Gaming, crypto, tech | Dark + néon, accents violets/rose |
| Soft UI Evolution | Enterprise, SaaS premium | Ombres douces, transitions 200-300ms |
| Neubrutalism | Gen Z, startups | Figma-style, bordures noires, couleurs vives |
| Liquid Glass | Premium SaaS, e-commerce luxe | Reflets, transparence haut de gamme |
| Motion-Driven | Portfolios, storytelling | Animations narratives, scroll-triggered |
| Micro-interactions | Mobile, touch UIs | Feedback immédiat, 150ms |
| Inclusive Design | Services publics, éducation, santé | WCAG AAA, haut contraste |
| Spatial UI (VisionOS) | VR/AR, spatial computing | Depth, layers, focus environnement |
| Editorial Grid / Magazine | News, blogs, magazines | Grilles éditoriales, typographie serif |
Styles landing page (8)
- Hero-Centric Design
- Conversion-Optimized
- Feature-Rich Showcase
- Minimal & Direct
- Social Proof-Focused
- Interactive Product Demo
- Trust & Authority
- Storytelling-Driven
Styles dashboard BI/Analytics (10)
- Data-Dense Dashboard
- Heat Map & Heatmap Style
- Executive Dashboard
- Real-Time Monitoring
- Drill-Down Analytics
- Comparative Analysis Dashboard
- Predictive Analytics
- User Behavior Analytics
- Financial Dashboard
- Sales Intelligence Dashboard
2. Palettes couleurs par type de produit (161)
Chaque palette fournit : Primary, On Primary, Secondary, On Secondary, Accent, On Accent, Background, Foreground, Card, Card Foreground, Muted, Muted Foreground, Border, Destructive, On Destructive, Ring, Notes.
| Type de produit | Primary | Accent | Background | Notes |
|---|---|---|---|---|
| SaaS (General) | #2563EB | #EA580C | #F8FAFC | Trust blue + CTA contrast |
| Micro SaaS | #6366F1 | #059669 | #F5F3FF | Indigo + emerald |
| E-commerce | #059669 | #EA580C | #ECFDF5 | Green + urgency orange |
| E-commerce Luxury | #1C1917 | #A16207 | #FAFAF9 | Premium dark + gold |
| Fintech/Crypto | #F59E0B | #8B5CF6 | #0F172A | Gold trust + purple tech |
| Gaming | #7C3AED | #F43F5E | #0F0F23 | Neon purple + rose action |
| Healthcare App | #0891B2 | #059669 | #ECFEFF | Calm cyan + health green |
| Educational App | #4F46E5 | #EA580C | #EEF2FF | Indigo + orange |
| Creative Agency | #EC4899 | #0891B2 | #FDF2F8 | Pink + cyan |
| Portfolio/Personal | #18181B | #2563EB | #FAFAFA | Monochrome + blue |
| Productivity Tool | #0D9488 | #EA580C | #F0FDFA | Teal + action orange |
| AI/Chatbot Platform | #7C3AED | #0891B2 | #FAF5FF | AI purple + cyan |
| NFT/Web3 Platform | #8B5CF6 | #FBBF24 | #0F0F23 | Purple tech + gold |
| Social Media App | #E11D48 | #2563EB | #FFF1F2 | Rose + engagement blue |
| Banking/Traditional Finance | #0F172A | #A16207 | #F8FAFC | Trust navy + gold |
| Restaurant/Food Service | #DC2626 | #A16207 | #FEF2F2 | Appetizing red + gold |
| Beauty/Spa/Wellness | #EC4899 | #8B5CF6 | #FDF2F8 | Soft pink + lavender |
| Luxury/Premium Brand | #1C1917 | #A16207 | #FAFAF9 | Premium black + gold |
| Travel/Tourism Agency | #0EA5E9 | #EA580C | #F0F9FF | Sky blue + adventure orange |
| Hotel/Hospitality | #1E3A8A | #A16207 | #F8FAFC | Luxury navy + gold |
| Legal Services | #1E3A8A | #B45309 | #F8FAFC | Authority navy + trust gold |
| Insurance Platform | #0369A1 | #16A34A | #F0F9FF | Security blue + protected green |
| Podcast Platform | #1E1B4B | #F97316 | #0F0F23 | Dark audio + warm accent |
| Dating App | #E11D48 | #EA580C | #FFF1F2 | Romantic rose + warm orange |
| Subscription Box Service | #D946EF | #EA580C | #FDF4FF | Excitement purple + urgency orange |
Note : Les ajustements WCAG sont indiqués dans la colonne Notes du CSV source. Les accents orange sont souvent ajustés de
#F97316à#EA580Cpour atteindre le ratio 3:1.
3. Pairings typographiques (73+)
| Nom | Heading | Body | Mood | Best For |
|---|---|---|---|---|
| Classic Elegant | Playfair Display | Inter | Elegant, luxury, premium | Luxe, fashion, spa, beauty |
| Modern Professional | Poppins | Open Sans | Corporate, friendly | SaaS, startups, services |
| Tech Startup | Space Grotesk | DM Sans | Tech, bold, innovative | Startups, devtools, AI |
| Editorial Classic | Cormorant Garamond | Libre Baskerville | Literary, refined | Publishing, blogs, news |
| Minimal Swiss | Inter | Inter | Neutral, functional | Dashboards, enterprise, docs |
| Playful Creative | Fredoka | Nunito | Friendly, fun | Children, education, gaming |
| Bold Statement | Bebas Neue | Source Sans 3 | Bold, dramatic | Marketing, portfolios, events |
| Wellness Calm | Lora | Raleway | Calm, organic | Health, wellness, spa, yoga |
| Developer Mono | JetBrains Mono | IBM Plex Sans | Technical, precise | DevTools, docs, CLI apps |
| Retro Vintage | Abril Fatface | Merriweather | Retro, nostalgic | Vintage brands, restaurants |
| Geometric Modern | Outfit | Work Sans | Clean, contemporary | General purpose, agencies |
| Luxury Serif | Cormorant | Montserrat | Luxury, refined | Fashion, jewelry, high-end |
| Friendly SaaS | Plus Jakarta Sans | Plus Jakarta Sans | Approachable, modern | SaaS, B2B, productivity |
| News Editorial | Newsreader | Roboto | Trustworthy, readable | News, magazines, content |
4. Landing page patterns (24)
| Pattern | Structure | Stratégie CTA |
|---|---|---|
| Hero + Features + CTA | Hero → Value prop → Features → CTA → Footer | CTA sticky + CTA final, contraste 7:1 |
| Hero + Testimonials + CTA | Hero → Problem → Solution → Testimonials → CTA | CTA après social proof |
| Product Demo + Features | Hero → Product mockup → Features → Comparison → CTA | Vidéo centrée + CTA |
| Minimal Single Column | Headline → Description → 3 benefits → CTA | CTA unique, large, mobile-first |
| Funnel (3-Step Conversion) | Problem → Process → Solution → CTA | Progression par étapes |
| Comparison Table + CTA | Hero → Table → Pricing → CTA | Ligne produit surlignée |
| Lead Magnet + Form | Hero → Lead magnet → Form → Submit | ≤ 3 champs |
| Pricing Page + CTA | Hero → Pricing cards → FAQ → CTA | Plan populaire pré-sélectionné |
| Video-First Hero | Vidéo background → Features → CTA | Autoplay muted, overlay 60% |
| Scroll-Triggered Storytelling | Chapitres narratifs → Climax CTA | Progress indicator |
| AI Personalization Landing | Hero dynamique → Features → CTA | Segmentation + fallback |
| Waitlist/Coming Soon | Countdown → Teaser → Email → Social proof | Urgence + exclusivité |
| App Store Style Landing | Device mockup → Screenshots → Reviews → Download | App Store + Play Store CTAs |
| FAQ/Documentation Landing | Search → Categories → FAQ → Contact | Réduction support tickets |
5. UX Guidelines essentielles (99)
Navigation
- Smooth scroll sur les ancres
- Sticky nav avec padding compensatoire
- Active state visible
- Deep linking / URL reflétant l'état
- Breadcrumbs pour sites ≥ 3 niveaux
Animation
- 1-2 éléments animés par vue maximum
- 150-300ms pour micro-interactions
- Respect
prefers-reduced-motion - Skeleton/spinner pendant chargement
- Utiliser
transform/opacitypour performance ease-outpour entrées,ease-inpour sorties
Layout
- Échelle z-index définie (10, 20, 30, 50)
overflow-hiddentesté- Éviter
100vhsur mobile (préférerdvh) max-widthpour texte (65-75ch)
Touch / Mobile
- Touch target ≥ 44x44px
- Espacement ≥ 8px entre cibles tactiles
touch-action: manipulationoverscroll-behavior: containsi nécessaire
Interaction
- Focus rings visibles
- Hover states sur desktop
- Active states immédiats
- Disabled states explicites
- Loading buttons
- Feedback erreur/succès
- Dialogues de confirmation avant destruction
Accessibilité
- Contraste 4.5:1 minimum
- Ne pas utiliser la couleur seule pour transmettre l'info
- Alt text descriptif
- Hiérarchie de headings cohérente
aria-labelsur les boutons icônes- Navigation clavier complète
- HTML sémantique
- Labels de formulaires associés
- Messages d'erreur annoncés (
aria-live/role=alert)
6. Stacks supportés (22+)
React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform.
Références
- Méthodologie d'utilisation :
KNOW-PAT-190 - 21st.dev (composants réels) :
KNOW-PAT-191 - Fichiers CSV source : https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/src/ui-ux-pro-max/data
- Site : https://uupm.cc