UI/UX Pro Max — Design Intelligence

Key principle: Bold maximalism and refined minimalism both work — the key is intentionality, not intensity. Execute the vision with precision.

Generic AI Aesthetics to Actively Avoid

NEVER converge on these overused defaults:

• Fonts: Inter, Roboto, Arial, Space Grotesk as the headline font — choose characterful, distinctive display fonts paired with a refined body font
• Color: Purple gradients on white or dark backgrounds — this is the single most clichéd AI aesthetic
• Layouts: Predictable hero → feature grid → CTA section → footer patterns without any spatial surprise
• Visual language: Generic glassmorphism blur cards with purple/indigo gradients and white sans-serif text
• Backgrounds: Solid colors everywhere — create atmosphere with gradient meshes, noise textures, geometric patterns, layered transparencies

Vary between light and dark themes, fonts, and aesthetics. No two designs should look the same.

Spatial Composition

Move beyond safe rectangular grid layouts:

• Asymmetry and controlled tension in layout
• Overlapping elements to create depth
• Diagonal flow and off-grid placements
• Generous negative space or controlled density — commit to one
• Grid-breaking accent elements for visual interest

Design System Generation Workflow

Step 1 — Analyze Requirements

Extract from the user request:

• Product type: Entertainment (social, video, music, gaming) / Tool (scanner, editor, converter) / Productivity (task manager, notes, calendar) / hybrid
• Target audience: Consumer vs B2B, age group, usage context
• Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive
• Platform stack: Web / iOS / Android / React Native / Flutter / SwiftUI

Step 2 — Generate Design System

Match product type to the right design system using these lookup tables.

Product → Recommended Pattern:

Step 3 — Pick UI Style

67 Available Styles — Top Selection:

Step 4 — Color Palette

Industry Color Palettes (161 — Key Examples):

Step 5 — Typography

57 Curated Font Pairings (Google Fonts):

Typography rule: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter as display/heading fonts; opt for distinctive, characterful choices that elevate aesthetics. Pair a distinctive display font with a refined body font.

Rule Categories by Priority

Quick Reference Rules

1. Accessibility (CRITICAL)

• color-contrast — Minimum 4.5:1 for normal text, 3:1 for large text
• focus-states — Visible focus rings (2–4px) on all interactive elements
• alt-text — Descriptive alt text for meaningful images
• aria-labels — aria-label for icon-only buttons; accessibilityLabel in native
• keyboard-nav — Tab order matches visual order; full keyboard support
• reduced-motion — Respect prefers-reduced-motion; disable/reduce animations when requested
• dynamic-type — Support system text scaling; avoid truncation as text grows
• color-not-only — Don't convey info by color alone (add icon/text)
• skip-links — "Skip to main content" for keyboard users
• heading-hierarchy — Sequential h1→h6, no level skip

2. Touch & Interaction (CRITICAL)

• touch-target-size — Min 44×44pt (Apple) / 48×48dp (Material); extend hit area if needed
• touch-spacing — Minimum 8px gap between touch targets
• hover-vs-tap — Use click/tap for primary interactions; don't rely on hover alone
• loading-buttons — Disable button during async operations; show spinner
• cursor-pointer — Add cursor-pointer to all clickable elements (Web)
• tap-delay — Use touch-action: manipulation to reduce 300ms delay (Web)
• haptic-feedback — Use haptic for confirmations; avoid overuse (iOS)
• safe-area-awareness — Keep touch targets away from notch, Dynamic Island, gesture bar

3. Performance (HIGH)

• image-optimization — Use WebP/AVIF, responsive images (srcset/sizes), lazy load
• image-dimension — Declare width/height or use aspect-ratio to prevent CLS
• font-loading — Use font-display: swap to avoid FOIT
• lazy-loading — Lazy load below-fold components and images
• virtualize-lists — Virtualize lists with 50+ items
• progressive-loading — Use skeleton screens instead of long spinners for >1s operations

4. Style Selection (HIGH)

• style-match — Match style to product type (use the lookup tables above)
• consistency — Same style across all pages; no mixing flat + skeuomorphic
• no-emoji-icons — Use SVG icons (SF Symbols, Heroicons, Lucide), not emojis
• color-palette-from-product — Choose palette from product/industry lookup above
• effects-match-style — Shadows, blur, radius aligned with chosen style
• icon-style-consistent — One icon set across the product (consistent stroke, corner)
• dark-mode-pairing — Design light/dark variants together

5. Layout & Responsive (HIGH)

• viewport-meta — width=device-width initial-scale=1; never disable zoom
• mobile-first — Design mobile-first, scale up to tablet and desktop
• breakpoint-consistency — Systematic breakpoints: 375 / 768 / 1024 / 1440
• readable-font-size — Minimum 16px body text on mobile (avoids iOS auto-zoom)
• line-length-control — Mobile 35–60 chars/line; desktop 60–75 chars
• horizontal-scroll — No horizontal scroll on mobile
• spacing-scale — Use 4pt/8dp incremental spacing system
• container-width — Consistent max-width on desktop (max-w-6xl / 7xl)
• viewport-units — Prefer min-h-dvh over 100vh on mobile

6. Typography & Color (MEDIUM)

• line-height — 1.5–1.75 for body text
• font-scale — Consistent type scale: 12 14 16 18 24 32
• font-pairing — Match heading/body font personalities (see pairings table above)
• color-semantic — Define semantic color tokens; don't use raw hex in components
• color-dark-mode — Dark mode uses desaturated/lighter tonal variants, not inverted
• color-accessible-pairs — All text/background pairs must meet 4.5:1 (AA) or 7:1 (AAA)
• weight-hierarchy — Bold headings (600–700), Regular body (400), Medium labels (500)

7. Animation (MEDIUM)

• duration-timing — 150–300ms for micro-interactions; complex transitions ≤400ms
• transform-performance — Use transform/opacity only; avoid animating width/height/top/left
• loading-states — Skeleton or progress indicator when loading >300ms
• easing — ease-out for entering; ease-in for exiting; avoid linear for UI transitions
• spring-physics — Prefer spring/physics curves for natural feel (Apple HIG)
• exit-faster-than-enter — Exit animations at ~60–70% of enter duration
• interruptible — All animations must be cancellable by user tap/gesture
• modal-motion — Modals animate from trigger source (scale+fade or slide-in)

8. Forms & Feedback (MEDIUM)

• input-labels — Visible label per input (not placeholder-only)
• error-placement — Show error below the related field
• submit-feedback — Loading → success/error state on submit
• inline-validation — Validate on blur, not keystroke
• input-type-keyboard — Use semantic input types (email, tel, number) for correct keyboard
• password-toggle — Show/hide toggle for password fields
• empty-states — Helpful message + action when no content
• confirmation-dialogs — Confirm before destructive actions
• undo-support — Allow undo for destructive/bulk actions ("Undo delete" toast)

9. Navigation Patterns (HIGH)

• bottom-nav-limit — Bottom nav max 5 items with labels + icons
• back-behavior — Predictable and consistent back navigation; preserve scroll/state
• modal-escape — Modals must offer clear close/dismiss; swipe-down on mobile
• deep-linking — All key screens reachable via deep link / URL
• nav-state-active — Current location visually highlighted (color, weight, indicator)
• adaptive-navigation — Large screens (≥1024px) prefer sidebar; small screens use bottom/top nav
• tab-badge — Use badges on nav items sparingly; clear after user visits

10. Charts & Data (LOW)

• chart-type — Match chart type to data: trend → line, comparison → bar, proportion → pie/donut
• color-guidance — Accessible palettes; avoid red/green only (colorblind users)
• legend-visible — Always show legend near chart
• tooltip-on-interact — Tooltips on hover (Web) or tap (mobile) with exact values
• responsive-chart — Charts reflow on small screens
• no-pie-overuse — Avoid pie/donut for >5 categories; use bar instead
• empty-data-state — Meaningful empty state ("No data yet" + guidance)

Pre-Delivery Checklist

Visual Quality

• No emojis used as icons (use SVG/SF Symbols instead)
• All icons from a consistent icon family and style
• Official brand assets used with correct proportions
• Semantic theme tokens used (no hardcoded hex in components)
• Primary text contrast ≥4.5:1 in both light and dark mode

Interaction

• All tappable elements provide clear pressed feedback (ripple/opacity/elevation)
• Touch targets ≥44×44pt (iOS) / 48×48dp (Android)
• Micro-interaction timing in 150–300ms with native-feeling easing
• Disabled states visually clear and non-interactive
• Screen reader focus order matches visual order

Layout

• Safe areas respected for headers, tab bars, and bottom CTA bars
• Scroll content not hidden behind fixed/sticky bars
• Verified on small phone, large phone, and tablet (portrait + landscape)
• 4/8dp spacing rhythm maintained across component, section, page levels
• Horizontal insets/gutters adapt by device size

Accessibility

• All meaningful images/icons have accessibility labels
• Form fields have labels, hints, and clear error messages
• Color is not the only indicator
• Reduced motion and dynamic text size supported
• Keyboard navigation fully functional (Web)

Anti-Patterns to Avoid

Stack-Specific Notes

SwiftUI (iOS)

• Use SF Symbols for all icons (matches system style)
• Follow Apple HIG spacing: 8, 16, 20, 44pt grid
• Prefer .sheet, .fullScreenCover over custom modal implementations
• Use @ScaledMetric for Dynamic Type support
• Respect .safeAreaInset() for bottom bars
• Use Color(.systemBackground) and semantic colors for automatic dark mode

Web / Tailwind

• Use touch-action: manipulation to remove 300ms tap delay
• Prefer dvh units over vh on mobile
• Use focus-visible: for keyboard-only focus rings
• Implement prefers-reduced-motion media query
• Lazy load with loading="lazy" and Intersection Observer

React Native

• Use hitSlop to extend touch areas on small icons
• Implement useReducedMotion() from react-native-reanimated
• Respect useSafeAreaInsets() for notch/gesture bar
• Use FlatList with getItemLayout for virtualization
• Test on both iOS and Android physical devices