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

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