recipe-manager/docs/visual-audit/assets.md

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