# T01 Baseline Visual Audit (Before Redesign)

Date: 2026-03-26  
Task: T01 — Baseline Visual Audit  
Owner: agent-ui-audit

## Baseline screenshots (captured)

Saved under `docs/visual-audit/before/`:

- `home-desktop.png`
- `home-mobile.png`
- `recipe-new-desktop.png`
- `recipe-new-mobile.png`
- `import-url-desktop.png`
- `import-url-mobile.png`
- `recipe-detail-desktop.png`
- `recipe-detail-mobile.png`

## Capture notes / blockers

- ✅ Frontend runs at `http://127.0.0.1:4173` and screenshots were captured.
- ⚠️ Backend dev server failed to start (`ERR_MODULE_NOT_FOUND` for `src/backend/db/database.js` from `src/backend/index.ts`).
- Impact: recipe list/detail/import states shown in screenshots are baseline UI without live backend data.

## Prioritized visual issues by page

Severity legend: **High** = materially harms UX/clarity, **Medium** = noticeable polish debt, **Low** = minor inconsistency.

### Global shell (header/footer)

1. **Medium** — Visual language is inconsistent (glassmorphism header + mixed flat cards/buttons across pages).
2. **Medium** — Emoji-heavy iconography reduces perceived product quality and visual cohesion.
3. **Low** — Footer hierarchy is weak; feels detached from page sections and brand system.

### Home / Recipe List (`/`)

1. **High** — Primary CTA competition (`Add Recipe` appears in hero and again in list section), reducing action clarity.
2. **High** — Hero occupies significant vertical space before core content (recipe discovery), especially on mobile.
3. **Medium** — Mixed color semantics (orange hero accent, blue actions, slate sections) without a clearly unified token system.
4. **Medium** — Search and filters appear visually secondary despite being primary list interactions.
5. **Low** — Spacing rhythm varies between hero, filter panel, and card grid (inconsistent section cadence).

### Recipe Detail / New (`/recipe/new`, `/recipe/:id`)

1. **High** — Detail view lacks true hero media treatment; page relies on gradients/emoji rather than appetizing imagery.
2. **High** — Action row density is high (edit/cook/delete) and becomes crowded on smaller widths.
3. **Medium** — Card styles differ across sections (ingredients/instructions/additional info) creating weak visual hierarchy.
4. **Medium** — Typography hierarchy can flatten in long content blocks (meta vs body text contrast not strong enough).
5. **Low** — Border/shadow intensity differs subtly between cards and wrappers, creating visual noise.

### Import URL (`/import/url`)

1. **Medium** — Progress UI is visually strong but dominates above-the-fold area relative to the core URL action.
2. **Medium** — Form field and button styles do not fully match recipe form/list control treatments.
3. **Low** — Mixed icon/emoji style in flow states leads to inconsistent product tone.

## Recommended redesign focus (P0 → P2)

- **P0**: Unify design tokens (color roles, typography scale, spacing/elevation) and normalize interaction hierarchy.
- **P0**: Rebalance home above-the-fold layout so search/discovery is surfaced earlier.
- **P1**: Introduce consistent, high-quality food imagery strategy (home + detail + cards).
- **P1**: Reduce action clutter in detail and establish one primary action per context.
- **P2**: Replace ad-hoc emoji iconography with a coherent icon system.