diff --git a/docs/visual-audit/assets.md b/docs/visual-audit/assets.md new file mode 100644 index 0000000..d001f5f --- /dev/null +++ b/docs/visual-audit/assets.md @@ -0,0 +1,78 @@ +# 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//.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 diff --git a/frontend/public/assets/README.md b/frontend/public/assets/README.md new file mode 100644 index 0000000..4c32a3d --- /dev/null +++ b/frontend/public/assets/README.md @@ -0,0 +1,21 @@ +# Visual Asset Pack (T03) + +This directory contains **copyright-safe, generated-in-project assets** for the visual redesign. + +## Structure + +- `food/` — recipe/photo placeholders for cards, detail hero, and upload dropzone states +- `category/` — category icon SVGs (breakfast, lunch, dinner, dessert, snack) +- `empty-state/` — illustrations for no recipes, no favorites, and no search results +- `ui/` — reserved for additional decorative UI assets + +## Usage Notes + +- Reference from frontend as absolute public URLs, e.g. `/assets/food/placeholder-recipe.svg` +- Prefer SVG placeholders over external stock images until approved imagery is available +- Keep files lightweight and editable (plain SVG) + +## License Safety + +All assets in this folder were authored for this project and are safe for internal/commercial use under repository ownership. +No third-party copyrighted graphics are included. diff --git a/frontend/public/assets/category/icon-breakfast.svg b/frontend/public/assets/category/icon-breakfast.svg new file mode 100644 index 0000000..f82631d --- /dev/null +++ b/frontend/public/assets/category/icon-breakfast.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/public/assets/category/icon-dessert.svg b/frontend/public/assets/category/icon-dessert.svg new file mode 100644 index 0000000..d170e0c --- /dev/null +++ b/frontend/public/assets/category/icon-dessert.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/public/assets/category/icon-dinner.svg b/frontend/public/assets/category/icon-dinner.svg new file mode 100644 index 0000000..536694b --- /dev/null +++ b/frontend/public/assets/category/icon-dinner.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/public/assets/category/icon-lunch.svg b/frontend/public/assets/category/icon-lunch.svg new file mode 100644 index 0000000..ac1fae5 --- /dev/null +++ b/frontend/public/assets/category/icon-lunch.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/public/assets/category/icon-snack.svg b/frontend/public/assets/category/icon-snack.svg new file mode 100644 index 0000000..6959a74 --- /dev/null +++ b/frontend/public/assets/category/icon-snack.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/frontend/public/assets/empty-state/no-favorites.svg b/frontend/public/assets/empty-state/no-favorites.svg new file mode 100644 index 0000000..86d4514 --- /dev/null +++ b/frontend/public/assets/empty-state/no-favorites.svg @@ -0,0 +1,6 @@ + + + + + No favorites yet + diff --git a/frontend/public/assets/empty-state/no-recipes.svg b/frontend/public/assets/empty-state/no-recipes.svg new file mode 100644 index 0000000..6818616 --- /dev/null +++ b/frontend/public/assets/empty-state/no-recipes.svg @@ -0,0 +1,12 @@ + + No recipes found + Illustration of a cookbook and magnifier to show empty search results. + + + + + + + + No recipes match your filters + diff --git a/frontend/public/assets/empty-state/no-results-search.svg b/frontend/public/assets/empty-state/no-results-search.svg new file mode 100644 index 0000000..a0019c0 --- /dev/null +++ b/frontend/public/assets/empty-state/no-results-search.svg @@ -0,0 +1,10 @@ + + + + + + + + + Try a different keyword + diff --git a/frontend/public/assets/food/placeholder-recipe-1x1.svg b/frontend/public/assets/food/placeholder-recipe-1x1.svg new file mode 100644 index 0000000..5e78d03 --- /dev/null +++ b/frontend/public/assets/food/placeholder-recipe-1x1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + Recipe Image + diff --git a/frontend/public/assets/food/placeholder-recipe-4x3.svg b/frontend/public/assets/food/placeholder-recipe-4x3.svg new file mode 100644 index 0000000..63b7598 --- /dev/null +++ b/frontend/public/assets/food/placeholder-recipe-4x3.svg @@ -0,0 +1,10 @@ + + + + + + + + + No photo yet + diff --git a/frontend/public/assets/food/placeholder-recipe.svg b/frontend/public/assets/food/placeholder-recipe.svg new file mode 100644 index 0000000..6c1b99a --- /dev/null +++ b/frontend/public/assets/food/placeholder-recipe.svg @@ -0,0 +1,21 @@ + + Recipe image placeholder + Abstract food bowl illustration used as a safe placeholder image. + + + + + + + + + + + + + + + + Recipe Photo Placeholder + Generated in-project, copyright-safe + diff --git a/frontend/public/assets/food/placeholder-upload-dropzone.svg b/frontend/public/assets/food/placeholder-upload-dropzone.svg new file mode 100644 index 0000000..19a0fd2 --- /dev/null +++ b/frontend/public/assets/food/placeholder-upload-dropzone.svg @@ -0,0 +1,8 @@ + + + + + + Drop image or click to upload + JPG, PNG, WebP — placeholder graphic + diff --git a/frontend/public/assets/ui/soft-pattern.svg b/frontend/public/assets/ui/soft-pattern.svg new file mode 100644 index 0000000..582a9dd --- /dev/null +++ b/frontend/public/assets/ui/soft-pattern.svg @@ -0,0 +1,7 @@ + + + + + + +