Ui Ux Pro Max

---
name: ui-ux-pro-max
description: Design intelligence for marketing UI/UX with custom design system generation.
allowed-tools: Read, Glob, Grep
---

# UI/UX Pro Max - Marketing Design

> Design principles for high-converting marketing interfaces.

---

## 1. Design System Generation

When creating marketing sites or **professional reports**, generate a cohesive design system. If brand data is provided from a `browser_subagent` crawl, prioritize those values (Logo, Colors) over defaults.

### Color Palette

| Token | Light Mode | Dark Mode | Use |
|-------|------------|-----------|-----|
| **Primary** | Brand color | Adjusted | CTAs, links |
| **Secondary** | Accent | Adjusted | Highlights |
| **Background** | White/Light | Dark gray | Base |
| **Surface** | Light gray | Medium gray | Cards |
| **Text** | Dark gray | Light gray | Content |
| **Muted** | Medium gray | Medium gray | Secondary text |

### Typography Scale

| Level | Size | Weight | Use |
|-------|------|--------|-----|
| **Display** | 64-80px | Bold | Hero headlines |
| **H1** | 48-56px | Bold | Page titles |
| **H2** | 32-40px | Semibold | Section titles |
| **H3** | 24-28px | Semibold | Subsections |
| **Body** | 16-18px | Regular | Content |
| **Small** | 14px | Regular | Captions |

---

## 2. Marketing Page Structure

### Above the Fold

| Element | Priority |
|---------|----------|
| **Headline** | Clear value proposition |
| **Subheadline** | Supporting benefit |
| **CTA** | Primary action visible |
| **Social proof** | Trust indicators |
| **Visual** | Hero image/video |

### Page Flow

```
Hero → Social Proof → Problem → Solution → Features → Testimonials → Pricing → FAQ → CTA
```

---

## 3. Conversion Principles

### CTA Design

| Element | Best Practice |
|---------|---------------|
| **Color** | High contrast to background |
| **Size** | Large, not overwhelming |
| **Position** | Above fold, repeated |
| **Copy** | Action + benefit |
| **Whitespace** | Room to breathe |

### Trust Signals

| Type | Placement |
|------|-----------|
| **Logos** | Below hero |
| **Numbers** | Near CTAs |
| **Reviews** | Before pricing |
| **Guarantees** | Near CTAs |
| **Security** | Forms, checkout |

---

## 4. Visual Hierarchy

### Size Hierarchy

| Level | Relative Size |
|-------|---------------|
| Primary | 1.5-2x |
| Secondary | 1.25x |
| Body | 1x |
| Caption | 0.875x |

### Color Hierarchy

| Emphasis | Treatment |
|----------|-----------|
| **High** | Brand color, bold |
| **Medium** | Dark text |
| **Low** | Gray text |

---

## 5. Spacing System

### 8-Point Grid

| Token | Value | Use |
|-------|-------|-----|
| xs | 4px | Inline elements |
| sm | 8px | Related items |
| md | 16px | Section internal |
| lg | 24px | Card padding |
| xl | 32px | Between sections |
| 2xl | 48px | Section spacing |
| 3xl | 64px | Major sections |

---

## 6. Component Patterns

### Card Anatomy

```
┌─────────────────────────┐
│  Icon/Image             │
│                         │
│  Title                  │
│  Description            │
│                         │
│  [CTA Button]           │
└─────────────────────────┘
```

### Form Best Practices

| Element | Guidance |
|---------|----------|
| Labels | Above field, not inside |
| Fields | Full width on mobile |
| Errors | Below field, red text |
| Submit | Full width, prominent |

---

## 7. Animation Guidelines

### Timing

| Type | Duration |
|------|----------|
| Micro | 100-200ms |
| Standard | 200-300ms |
| Complex | 300-500ms |

### Easing

| Type | Use |
|------|-----|
| ease-out | Enter |
| ease-in | Exit |
| ease-in-out | Move |

### Scroll Animations

| Animation | When |
|-----------|------|
| Fade in | Content enters |
| Slide up | Cards, features |
| Scale | Images, icons |

---

## 8. Responsive Breakpoints

| Breakpoint | Target |
|------------|--------|
| Mobile | < 640px |
| Tablet | 640-1024px |
| Desktop | 1024-1280px |
| Wide | > 1280px |

### Mobile Considerations

| Element | Mobile Treatment |
|---------|------------------|
| Hero text | 40-50% smaller |
| Navigation | Hamburger menu |
| CTAs | Full width |
| Images | Stack vertically |
| Cards | Single column |

---

## 9. Accessibility

### Color Contrast

| Text Type | Minimum Ratio |
|-----------|---------------|
| Normal text | 4.5:1 |
| Large text | 3:1 |
| UI components | 3:1 |

### Interactive Elements

| Element | Requirements |
|---------|--------------|
| Links | Underline or distinct color |
| Buttons | Focus visible state |
| Forms | Labels, error messages |
| Images | Alt text |

---

## 10. Pre-Delivery Checklist

### Visual Quality
- [ ] Consistent spacing
- [ ] Aligned elements
- [ ] Color consistency
- [ ] Typography hierarchy

### Interaction
- [ ] Hover states
- [ ] Focus states
- [ ] Loading states
- [ ] Error states

### Responsive
- [ ] Mobile layout
- [ ] Tablet layout
- [ ] Desktop layout

### Accessibility
- [ ] Color contrast
- [ ] Alt text
- [ ] Keyboard navigation

---

> **Remember:** Great marketing design is invisible. It guides users to action without friction.