79 lines
3.0 KiB
Markdown
79 lines
3.0 KiB
Markdown
# 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
|