UI/UX Pro Max — Design Intelligence

Comprehensive design guide covering 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines across 9 technology stacks.

Rule Priority Tiers

CRITICAL

Accessibility

• Minimum 4.5:1 contrast ratio for normal text, 3:1 for large text

• All interactive elements need visible focus states

• Never rely on color alone to convey meaning

• ARIA labels for icon-only buttons

Touch & Interaction

• Minimum touch target: 44×44px

• Tap targets must have 8px spacing between them

• Hover states must not be the only interactive feedback

HIGH

Performance

• Compress all images (WebP preferred)

• Respect prefers-reduced-motion for animations

• Lazy-load below-the-fold images

• Avoid layout shifts (CLS)

Typography

• Line height: 1.5–1.75 for body text

• Line length: 65–75 characters max

• Never use font-size below 14px for body

• Heading hierarchy must be logical (h1 → h2 → h3)

Spacing & Layout

• Use a consistent spacing scale (4px base)

• Breathing room around text blocks: minimum 24px padding

• Consistent alignment — pick a grid and stick to it

MEDIUM

Color Systems

• Define a primary, secondary, and neutral palette

• Reserve accent color for maximum 10–15% of UI

• Background variants: page bg, card bg, subtle bg (3 levels)

• Error, warning, success, info states always defined

Component Consistency

• Border radius should be consistent system-wide

• Shadow system: 3 levels (sm, md, lg)

• Button sizes: sm / md / lg with consistent padding ratios

Forms & Inputs

• Labels always visible (no placeholder-as-label)

• Error messages inline, below the field

• Success state confirmation after submission

• Disabled states visually distinct

LOW

Animation

• Entrance animations: 200–400ms, ease-out

• Exit animations: 150–250ms, ease-in

• Never animate more than transform + opacity simultaneously

• Page transitions: subtle, not distracting

Charts & Data

• Always include a text alternative for charts

• Color-blind safe palettes for data visualization

• Axes and labels always readable at mobile size

Design System Workflow

• Analyze requirements — product type, target audience, brand tone

• Define design tokens — colors, typography, spacing, shadows, radius

• Apply stack guidelines — Tailwind CSS utilities for each token

• Validate against checklist — accessibility, responsiveness, consistency

Pre-Delivery Checklist

Before any UI is considered done:

Visual Quality

• Font hierarchy is clear and consistent

• Color contrast passes WCAG AA

• Spacing is consistent (no magic numbers)

• Images are sharp on 2x displays

Interaction

• All buttons have hover + active states

• Focus states visible for keyboard navigation

• Loading states for async actions

Accessibility

• All images have alt text

• Color is not the only differentiator

• Touch targets ≥ 44px

Responsiveness

• Mobile (375px), tablet (768px), desktop (1280px) tested

• No horizontal scroll on mobile

• Font sizes readable without zoom on mobile

For This Project (WEISSHEIM)

Stack: React 18 + TypeScript + Tailwind CSS + shadcn/ui Tone: Premium, clean, trustworthy — German market Product colors to integrate: Himmelblau (#87CEEB range), Beige (#F5F0E8 range), Schwarz Conversion goal: Single CTA — Amazon purchase Key UX priority: Trust signals + friction reduction