recipe-manager/docs/visual-audit

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.