88 lines
3.1 KiB
Markdown
88 lines
3.1 KiB
Markdown
# Photo-First Asset Strategy (Correction Wave)
|
||
|
||
Date: 2026-03-27
|
||
Scope: Art direction + asset structure only (no page redesign)
|
||
|
||
## 1) Decision
|
||
|
||
Move Recipe Manager from **illustration-first** to **photo-first** for food storytelling.
|
||
|
||
- Primary storytelling media: real food photography
|
||
- Secondary/support media: restrained UI icons
|
||
- Legacy custom illustrations: fallback/decorative only
|
||
|
||
## 2) Deprecation matrix (from T03)
|
||
|
||
### Deprecate as primary visuals
|
||
- `/assets/hero/hero-kitchen-light.svg`
|
||
- `/assets/hero/hero-fresh-produce.svg`
|
||
- `/assets/food/curated/*`
|
||
- `/assets/category/illustrations/*`
|
||
|
||
These are visually clean but feel stylized/childlike relative to modern recipe products.
|
||
|
||
### Retain
|
||
- `/assets/category/icon-*.svg` (small utility icons)
|
||
- `/assets/food/placeholder-recipe*.svg` (safe local fallback)
|
||
- `/assets/empty-state/*.svg` (temporary until photo-backed empty states are added)
|
||
|
||
## 3) Page-level photo strategy
|
||
|
||
### Homepage
|
||
- Use one high-quality hero photo (landscape, 16:9 or 3:2) with warm food context.
|
||
- Optional supporting strip of 2–3 photos for social proof/variety.
|
||
- Avoid illustrated hero artwork for main CTA section.
|
||
|
||
### Recipe list/grid
|
||
- Recipe cards should show photo thumbnails (4:3 preferred).
|
||
- If recipe has no image, use deterministic placeholder fallback.
|
||
- Keep overlays minimal (chip badges + subtle gradient for text legibility).
|
||
|
||
### Recipe detail
|
||
- Hero image near top (16:9 preferred) with metadata chips.
|
||
- Support additional gallery images only if available; do not require for MVP.
|
||
- Fallback to placeholder for legacy/imported entries without images.
|
||
|
||
## 4) Asset architecture
|
||
|
||
New canonical path for photo-first pipeline:
|
||
- `frontend/public/assets/photos/manifest.json`
|
||
- `frontend/public/assets/photos/{hero,list,detail,category,empty-state,credits}/`
|
||
|
||
Manifest-first model:
|
||
- UI consumes slots by semantic keys, not hardcoded filenames.
|
||
- Each slot can specify:
|
||
- `localPath` (vendored file in repo)
|
||
- `remoteCandidate` (approved source candidate)
|
||
- `license`
|
||
- `attributionRequired`
|
||
- `status`
|
||
|
||
## 5) Sourcing and licensing policy
|
||
|
||
Recommended source order:
|
||
1. **Pexels** (free commercial use, attribution generally not required)
|
||
2. **Unsplash** (free use under Unsplash License; attribution recommended)
|
||
3. **Owned/internal photos** (best legal clarity)
|
||
|
||
Guardrails:
|
||
- Validate license terms at download time and record snapshot metadata.
|
||
- Avoid editorial-only assets and recognizable private persons unless releases are clear.
|
||
- Keep a source record in manifest and, when required, add attribution notes in `assets/photos/credits/`.
|
||
|
||
## 6) Icon direction (explicit)
|
||
|
||
- Standardize on `lucide-react` for UI actions/navigation.
|
||
- Icon role: functional affordance only (filter, search, timer, servings, favorite).
|
||
- Style: 18–20px for controls, 24px section accents, stroke 1.75–2.0, no emoji, no decorative food doodles.
|
||
|
||
## 7) Implementation readiness
|
||
|
||
This correction wave is implementation-ready for Wave 2.5 UI workers because:
|
||
- deprecations are explicit,
|
||
- photo slots are defined via manifest,
|
||
- legal/source workflow is documented,
|
||
- fallback behavior is preserved.
|
||
|
||
Ready-for-implementation: **YES**
|