# Brand Review Light — Image Rules

## Known Blockers (from live testing on Notion, 2026-03-20)

These sources fail headlessly — flag to human, don't silently skip:

| Source | Issue | Workaround |
|--------|-------|-----------|
| Brand's own press/newsroom/guidelines | 401 auth required | Treat as bonus; don't count on it as a primary source |
| YouTube brand films | Bot detection blocks yt-dlp | `yt-dlp --cookies-from-browser chrome` on desktop with logged-in session |
| Mux video on agency sites | HLS stream — yt-dlp can't download | Browser screen capture only; flag to human |
| JS carousel frames (BUCK, Instrument, etc.) | Scroll-triggered — only first frame loads headlessly | Use Playwright scroll loop; may still miss some slides |
| Ads of the World | Requires JS + login | Skip unless login available |

## Known Sourcing Patterns (from live testing)

| Source type | Visual register | Best sections |
|-------------|----------------|--------------|
| Agency illustration system (BUCK) | Brand identity, color, character design | Hero, §09 Personality, §04–05 Color+Type, Brand in Practice |
| Agency live photography (Instrument) | Human stories, cinematic production | §11 Campaigns, §12 Audience, Brand in Practice |
| Brand blog (process imagery) | Sketch-to-final creative arc | §03 Brand Evolution |
| OOH in-context photography (Evolve OOH) | Brand at scale in the real world | §11 Campaigns expanded, Brand in Practice |
| Design press (It's Nice That) | Editorial quality brand coverage | §09 Personality, §03 Evolution |
| Brand's YouTube channel | Campaigns films, brand world | §11 Campaigns (poster + Watch film button) |

## Table of Contents
- [Sourcing Priority Stack](#sourcing-priority-stack)
- [Quality Bar](#quality-bar--reject-if)
- [Hero Image Decision Tree](#hero-image-decision-tree)
- [§02 Positioning — Special Rules](#02-positioning--special-rules)
- [Fallback Tier System](#fallback-tier-system)
- [Image Uniqueness Rule](#image-uniqueness-rule)
- [Quick Reference Table](#quick-reference-table)
- [Technical Notes](#technical-notes)

---

## Sourcing Priority Stack

Work through sources in order. Stop when you have enough high-quality images for all sections.

### 1. Agency Portfolio
The highest-quality source. Agency work = editorial quality, brand-authorized, no rights issues.

- Search: `"[Brand]" site:behance.net`, `"[Brand] brand identity"`, `"[Brand] brand guidelines"`, `"[Brand] Pentagram"` / `"[Brand] Wolff Olins"` / `"[Brand] Buck"` (try known fintech/consumer agencies)
- Check the credits section of the brand's own website (often links to agency or design credits)
- Check annual report design credits
- Download at maximum resolution. Rename with agency prefix: `buck-vi-*.jpg`, `wolff-*.jpg`

### 2. Brand Press Kit / Newsroom
Official brand assets, high resolution, cleared for press use.

- Try: `press.[brand].com`, `newsroom.[brand].com`, `[brand].com/press`, `[brand].com/newsroom`
- Download: logo package, product images, lifestyle photography, campaign assets
- Rename with `press-*` prefix

### 3. Web Screenshot (Playwright)
Use `/usr/bin/playwright` for homepage, product pages, campaign landing pages.

**Works on**: Most marketing sites, X/Twitter profiles
**Blocked by**: TikTok (captcha), YouTube (cookie wall after accept), Reddit (network security)
**Lazy-load fix**: Scroll full page before capturing — `loading="lazy"` images won't render otherwise
**Rename with**: `product-*` prefix for UI screenshots, `web-*` for general web captures

### 4. Social Scrape
- **Instagram**: Playwright or direct image scrape from grid
- **X/Twitter**: Playwright screenshot of profile or individual post
- **YouTube thumbnails**: `img.youtube.com/vi/{VIDEO_ID}/maxresdefault.jpg` — publicly accessible, no authentication needed
- **TikTok**: Platform blocks all automated capture. Use styled stats card instead.
- Rename with `web-ig-*`, `web-x-*`, `social-yt-*` prefixes

### 5. Styled Fallback Card (last resort)
Only when no real image is available AND the CSS fallback tiers won't cut it.
Prefer Tier 3 (`.fallback.color`) over a styled card that looks designed-not-real.

---

## Quality Bar — Reject If:

- **Below 800px wide** — too low-res for card thumbnails
- **Baked-in rounded corners** on the image file itself — cannot be fixed with CSS. Must find a replacement file with square corners.
- **Subject cut off or unrecognizable** at card width (~400px display width)
- **JPEG artifacts visible** at 400px view size
- **Browser chrome or UI elements** visible in screenshot (browser bar, scroll indicators, OS chrome)

**Note on campaign/talent photography**: Do NOT disqualify — it's the wrong section, not a bad image. Move to §11 Campaigns. A celebrity campaign image rejected from the hero belongs in Campaigns.

---

## Hero Image Decision Tree

Work through in order. First match wins.

1. **Iconic physical product artifact** — an object that IS the brand (a card, a device, a physical product). → Use it.
2. **Brand identity / visual system spread** — guidelines overview, identity system at full scale, design system spread. → Use it.
3. **Logo / wordmark on a strong brand color field** — clean, high-res, on brand. → Use it.
4. **None of the above exist** → use the strongest available image that feels systemic (representing the full brand) rather than moment-specific (representing one campaign). Visual judgment call.

**Rule**: Never use campaign photography in the hero if a brand identity image is available. If the brand identity image IS campaign-derived but feels completely systemic (e.g., a color system used across all campaigns), it can qualify.

---

## §02 Positioning — Special Rules

§02 is the LARGEST card (top of left column, ~360px height). It carries the most visual weight. The image must show the brand's strategic territory.

**What "strategic territory" means**: The world the brand inhabits, the cultural context they've claimed, or their market position — without making a specific person the primary subject.

✅ GOOD:
- Multi-product positioning overview showing the full brand ecosystem
- Brand cultural atmosphere — a world, not a moment
- Campaign-derived image that feels systemic (the brand's consistent visual universe)

❌ REJECT for §02 (move to §11 Campaigns if valid campaign image):
- App UI or interface screenshot
- Campaign copy text overlaid directly on image
- Talent or celebrity as the primary subject (even culturally aligned)
- A single ad moment that reads as advertising, not identity

**Practical test**: Remove the brand name from the image. Can you still feel the brand's strategic position? If yes → §02. If it just reads as "an ad" → §11.

---

## Fallback Tier System

Use in order. Never skip to Tier 4 if Tier 3 is available.

| Tier | CSS Class | When to Use |
|------|-----------|-------------|
| 1 | `.m-img` | Real agency/press photography — always preferred |
| 2 | `.m-img` | Clean product screenshot (no device borders, no browser chrome) |
| 3 | `.m-img.fallback.color` | Brand primary color fill + section label. **A confident color field always beats a mediocre crop.** |
| 4 | `.m-img.fallback` | Dark fill + ghost section number. Last resort only. |

**Rule**: Never leave a blank white box. If no Tier 1/2 image is available, assign Tier 3 immediately. Do not ship a page with empty image slots.

### `.m-img.natural` Class
Use when the image should display at its native aspect ratio (not forced to a fixed height):
- Agency spreads and panoramas
- Website screenshots
- Typography specimens
- Design system overviews

Add `.portrait` modifier for very tall portrait images: `.m-img.natural.portrait` (caps at max-height: 400px).

Do NOT use `.natural` for: portrait photos of people in social context, social post screenshots. Use fixed height + `object-position` instead.

---

## Image Uniqueness Rule

Before assigning any image to a section, audit all current assignments. The same filename must NEVER appear twice on one page — not even cropped differently, not even at different sizes.

This applies across: hero, all 13 section cards, Brand in Practice grid.

Keep a running assignment list as you fill sections:
```
Hero: filename.jpg
§01: filename.jpg
§02: filename.jpg
...
Brand in Practice: filename1.jpg, filename2.jpg, ...
```

If you find a conflict, find an alternative. Never compromise the uniqueness rule.

---

## Quick Reference Table

| Section | Preferred Image Type | Never |
|---------|---------------------|-------|
| Hero | Brand identity, product artifact, brand system spread | Campaign/talent if brand identity available; thumbnail grid |
| §02 Positioning | Brand atmosphere, cultural/strategic context | App UI, interface, talent as primary subject, copy overlay |
| §03 Brand Evolution | Panoramic spread, system overview (`.natural`) | Dense thumbnail grid |
| §04–05 Color+Type | Brand identity / guidelines spread | Brand pillars, product screenshots |
| §06 Layout+UX | Website homepage screenshot (`.natural`) | App screenshot as card thumbnail |
| §07 Assessment | Design principles / strategy visual | — |
| §08 Verdict | Iconic brand object (`.natural`) | Generic product screenshot |
| §09 Personality | Brand world / 3D artifacts on brand color | Direct product photo |
| §10 Social | Social-native, viral content | Press imagery, generic icons |
| §11 Campaigns | Cinematic campaign hero (`.natural`) | — (this section IS for campaign work) |
| §12 Audience | Documentary lifestyle, real people | Generic stock that could be any brand |
| §13 vs [Client] | Campaign or cultural atmosphere | Reuse of hero or §02 image |
| Brand in Practice | Visual library — anything NOT already on cards | Any image already used anywhere on the page |

---

## Technical Notes

**Image naming conventions** (adopt for any brand):
- `buck-vi-*` — Visual identity spreads from agency
- `buck-eg-*` — Evergreen/system examples from agency
- `web-ig-*` — Scraped from Instagram
- `web-x-*` — Scraped from X/Twitter
- `social-yt-*` — YouTube thumbnails
- `press-*` — Press kit / newsroom downloads
- `product-*` — Product/UI screenshots
- `lifestyle-*` — Curated lifestyle photography
- `qa-*` — QA artifacts — EXCLUDE from all brand directories

**Playwright lazy-load**: Use `loading="eager"` on brief/competition page images to prevent grey boxes in screenshots.

**YouTube CDN**: `img.youtube.com/vi/{VIDEO_ID}/maxresdefault.jpg` — no authentication, no auth headers needed.

**Playwright-stealth**: Works on most marketing sites and X/Twitter. Blocked by TikTok (captcha loop), YouTube (cookie wall), Reddit (network security block).