# 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.

---

# T04 Homepage Redesign (After)

Date: 2026-03-26  
Task: T04 — Homepage Redesign  
Owner: agent-core-ui

## What changed

- Introduced a stronger home hero with clear action hierarchy:
  - primary CTA: **Start a Recipe**
  - secondary CTA: **Browse Library**
  - responsive image panel with safe fallback chain (`hero.png` → `/images/hero-fallback.svg`)
- Added feature-highlight blocks using T03 asset icons:
  - `/assets/category/icon-dinner.svg`
  - `/assets/category/icon-lunch.svg`
  - `/assets/category/icon-breakfast.svg`
- Improved visual hierarchy and spacing for the recipe discovery area:
  - renamed section to **Recipe Library**
  - improved search input and action sizing for touch targets
  - retained filter behavior with clearer card grouping
- Polished footer structure in app shell:
  - multi-column footer content
  - quick links and stronger brand/utility hierarchy
- Empty state now uses T03 illustration (`/assets/empty-state/no-recipes.svg`) for better visual clarity.

## Token alignment note (T02 dependency)

- T02 token outputs are available (`frontend/src/theme.ts` + CSS custom properties in `frontend/src/index.css`).
- T04 consumed existing token-friendly values (radius + CSS vars via global styles) and avoided introducing breaking token assumptions.
- If T02 token contracts evolve, align CTA/card semantic classes first before changing component behavior.

## After screenshots

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

- `home-desktop.png`
- `home-mobile.png`