# Visual Asset Audit — T03 (Asset Pack)

Date: 2026-03-26  
Task: T03 — Visual Asset Pack  
Owner: agent-assets

## Summary

Implemented a legal-safe asset pack under `frontend/public/assets/` to support the redesign with:

1. Food imagery placeholders
2. Category illustrations/icons
3. Empty-state graphics
4. Placeholder strategy for missing images

All new visual files are simple, in-repo SVG illustrations generated specifically for this project.
No copyrighted third-party photos or icons were imported.

## Asset Inventory

### Food placeholders
- `/assets/food/placeholder-recipe.svg` (wide hero fallback)
- `/assets/food/placeholder-recipe-4x3.svg` (list/card ratio fallback)
- `/assets/food/placeholder-recipe-1x1.svg` (square thumb fallback)
- `/assets/food/placeholder-upload-dropzone.svg` (upload UI placeholder)

### Category icons
- `/assets/category/icon-breakfast.svg`
- `/assets/category/icon-lunch.svg`
- `/assets/category/icon-dinner.svg`
- `/assets/category/icon-dessert.svg`
- `/assets/category/icon-snack.svg`

### Empty-state graphics
- `/assets/empty-state/no-recipes.svg`
- `/assets/empty-state/no-favorites.svg`
- `/assets/empty-state/no-results-search.svg`

## Source & Attribution Notes

- **Source:** Created in-house (manual SVG composition)
- **Attribution required:** None
- **Third-party dependencies:** None for these files
- **Legal status:** Safe to use and modify within this repository

## Icon Strategy

Current strategy for redesign wave:

- Use lightweight, project-owned SVG icons for category visuals and illustrative states
- Keep semantic UI icons in code (emoji/text) where already present to avoid functional churn during visual phase
- Optionally standardize on one icon library in a later task (e.g., Lucide React) if/when design system tokenization introduces centralized icon components

## Placeholder Strategy (Missing Images)

When recipe images are missing or fail to load:

1. **Primary display:** Use `/assets/food/placeholder-recipe-4x3.svg` for list cards
2. **Detail hero fallback:** Use `/assets/food/placeholder-recipe.svg`
3. **Square contexts (avatars/thumbs):** Use `/assets/food/placeholder-recipe-1x1.svg`
4. **Upload workflows:** Show `/assets/food/placeholder-upload-dropzone.svg` before image selection
5. **Error fallback:** On image load error, swap `src` to matching placeholder and set descriptive `alt` text (e.g., `"Recipe image placeholder"`)

Recommended accessibility behavior:
- Keep `alt` text contextual to the recipe title when available
- For decorative empty-state graphics, use empty alt (`alt=""`) plus nearby descriptive copy

## Usage Guidance

- Public URL pattern: `/assets/<group>/<file>.svg`
- Prefer SVG scaling with CSS `object-fit: cover` for card contexts
- Keep placeholders as deterministic defaults so UI is never image-empty

## Follow-up Suggestions

- Wire fallback logic in card/detail components (T04–T06)
- Add visual regression screenshots once integrated
- If future photography is required, only use assets with explicit commercial licenses and record attribution here