# Plan: Align Onboarding Wizard User-Facing Pages with App Theme

## Files to Modify (6)

1. `templates/accounts/onboarding/welcome.html`
2. `templates/accounts/onboarding/step_content.html`
3. `templates/accounts/onboarding/step_checklist.html`
4. `templates/accounts/onboarding/step_activation.html`
5. `templates/accounts/onboarding/complete.html`
6. `templates/accounts/onboarding/activation_error.html`

## Design System Reference

The app theme uses:
- **Primary CTA**: `bg-navy text-white rounded-xl font-bold hover:bg-blue transition`
- **Page titles**: `text-2xl font-bold text-navy`
- **Subtitles**: `text-sm text-slate`
- **Cards**: `rounded-2xl` (not `rounded-3xl`)
- **Card backgrounds**: `bg-slate-50` with `border-2 border-slate-200`
- **Icon containers**: flat tinted bg (`bg-navy/10`, `bg-green-50`, `bg-blue-50`) — not gradients
- **Progress bars**: `bg-navy` solid
- **Alert boxes**: `bg-slate-50 border border-slate-200 rounded-xl` or themed (blue for info, green for success)
- **Form inputs**: `border-2 border-slate-200 rounded-xl focus:border-navy focus:ring-2 focus:ring-navy/20`
- **Form labels**: `text-sm font-bold text-slate mb-2`

## Changes Per File

### 1. welcome.html

| Line | Current | Replacement |
|------|---------|-------------|
| 11 | `rounded-3xl` | `rounded-2xl` |
| 14 | `bg-gradient-to-br from-blue to-orange-500` (icon) | `bg-navy` |
| 17 | `text-4xl md:text-5xl font-bold text-gray-800 mb-3` | `text-2xl md:text-3xl font-bold text-navy mb-1` |
| 20 | `text-xl text-gray-500` | `text-sm text-slate` |
| 26 | `bg-blue-50 border border-blue-200 rounded-2xl` | `bg-blue-50 border border-blue-200 rounded-xl` |
| 40 | `bg-gray-50 rounded-2xl border-2 border-gray-100 hover:border-blue-200` | `bg-slate-50 rounded-xl border-2 border-slate-200 hover:border-navy` |
| 41 | `bg-light rounded-xl` (Learn icon) | `bg-navy/10 rounded-xl` |
| 45 | `text-sm text-gray-600` | `text-sm text-slate` |
| 50 | `bg-gray-50 rounded-2xl border-2 border-gray-100 hover:border-green-200` | `bg-slate-50 rounded-xl border-2 border-slate-200 hover:border-green-400` |
| 51 | `bg-green-100` (Ack icon) | `bg-green-50` |
| 53 | `text-green-500` | `text-green-600` |
| 60 | `bg-gray-50 rounded-2xl border-2 border-gray-100 hover:border-orange-200` | `bg-slate-50 rounded-xl border-2 border-slate-200 hover:border-blue` |
| 61 | `bg-orange-100` (Sign icon) | `bg-blue-50` |
| 62 | `text-orange-500` | `text-blue-600` |
| 73 | `bg-gradient-to-r from-navy to-orange-500 ... rounded-2xl ... shadow-lg shadow-blue-200` | `bg-navy text-white ... rounded-xl ... shadow-lg` |
| 77 | `text-gray-400` | `text-slate` |

### 2. step_content.html

| Line | Current | Replacement |
|------|---------|-------------|
| 11 | `rounded-3xl` | `rounded-2xl` |
| 14 | `bg-gradient-to-br from-blue to-orange-500` (icon) | `bg-navy` |
| 17 | `text-3xl md:text-4xl font-bold text-gray-800 mb-3` | `text-xl md:text-2xl font-bold text-navy mb-1` |
| 20 | `text-gray-500` | `text-sm text-slate` |
| 32 | `bg-gradient-to-r from-navy to-orange-500` (progress bar) | `bg-navy` |
| 39 | `bg-gray-50 rounded-2xl p-6 border border-gray-100` | `bg-slate-50 rounded-xl p-6 border border-slate-200` |
| 56 | `rounded-xl` (confirmation box) | keep as-is (already `rounded-xl`) |
| 69 | `bg-gradient-to-r from-navy to-orange-500 ... shadow-lg shadow-blue-200` | `bg-navy text-white ... shadow-lg` |

### 3. step_checklist.html

| Line | Current | Replacement |
|------|---------|-------------|
| 11 | `rounded-3xl` | `rounded-2xl` |
| 14 | `bg-gradient-to-br from-blue to-orange-500` (icon) | `bg-navy` |
| 17 | `text-3xl md:text-4xl font-bold text-gray-800 mb-3` | `text-xl md:text-2xl font-bold text-navy mb-1` |
| 20 | `text-gray-500` | `text-sm text-slate` |
| 34 | `bg-gradient-to-r from-navy to-orange-500` (progress bar) | `bg-navy` |
| 99 | `rounded-3xl` (signature modal) | `rounded-2xl` |
| 117 | `bg-gradient-to-r from-navy to-orange-500 ... shadow-lg shadow-blue-200` (modal button) | `bg-navy text-white ... shadow-lg` |
| 125 | `bg-gradient-to-r from-navy to-orange-500 ... rounded-2xl ... shadow-lg shadow-blue-200` (continue button) | `bg-navy text-white ... rounded-xl ... shadow-lg` |

### 4. step_activation.html

| Line | Current | Replacement |
|------|---------|-------------|
| 11 | `rounded-3xl` | `rounded-2xl` |
| 14 | `bg-gradient-to-br from-blue to-orange-500` (icon) | `bg-navy` |
| 17 | `text-3xl md:text-4xl font-bold text-gray-800 mb-3` | `text-xl md:text-2xl font-bold text-navy mb-1` |
| 20 | `text-gray-500` | `text-sm text-slate` |
| 49, 57, 65, 74, 84, 92 | `text-gray-700 font-medium mb-2` (labels) | `text-sm font-bold text-slate mb-2` |
| 52, 61 | `border border-gray-200 rounded-xl` (readonly inputs) | `border-2 border-slate-200 rounded-xl` |
| 68, 78, 87, 96 | `border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent` | `border-2 border-slate-200 rounded-xl focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20 transition` |
| 101 | `bg-gradient-to-r from-navy to-orange-500 ... shadow-lg shadow-blue-200` | `bg-navy text-white ... shadow-lg` |

### 5. complete.html

| Line | Current | Replacement |
|------|---------|-------------|
| 11 | `rounded-3xl` | `rounded-2xl` |
| 17 | `text-4xl md:text-5xl font-bold text-gray-800 mb-3` | `text-2xl md:text-3xl font-bold text-navy mb-1` |
| 20 | `text-xl text-gray-500` | `text-sm text-slate` |
| 26 | `bg-green-50 border border-green-200 rounded-2xl` | `bg-green-50 border border-green-200 rounded-xl` |
| 40 | `text-xl font-bold text-gray-800` | `text-lg font-bold text-navy` |
| 45 | `bg-gray-50 rounded-xl border-2 border-gray-100 hover:border-green-400 hover:shadow-md` | `bg-slate-50 rounded-xl border-2 border-slate-200 hover:border-green-400 hover:shadow-md` |
| 56 | same as above | same fix |
| 71 | `bg-gradient-to-r from-green-500 to-emerald-500 ... rounded-2xl ... shadow-lg shadow-green-200` | `bg-emerald-500 text-white ... rounded-xl ... shadow-lg` |

### 6. activation_error.html

| Line | Current | Replacement |
|------|---------|-------------|
| 11 | `rounded-3xl` | `rounded-2xl` |
| 17 | `text-4xl md:text-5xl font-bold text-gray-800 mb-3` | `text-2xl md:text-3xl font-bold text-navy mb-1` |
| 20 | `text-xl text-gray-500` | `text-sm text-slate` |
| 26 | `bg-red-50 border border-red-200 rounded-2xl` | `bg-red-50 border border-red-200 rounded-xl` |
| 39 | `bg-blue-50 border border-blue-200 rounded-2xl` | `bg-blue-50 border border-blue-200 rounded-xl` |
| 64 | `bg-gradient-to-r from-gray-500 to-gray-600 ... rounded-2xl` | `border-2 border-slate-200 text-slate-700 rounded-xl hover:bg-slate-50 transition` |