paulh
/
recipe-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
recipe-manager/docs/visual-audit/photo-first-assets.md

3.1 KiB
Raw Permalink Blame History

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