# Brand Review Light — Section Specifications

## Table of Contents
- [Mosaic Architecture](#mosaic-architecture)
- [§01 Quick Facts](#01--quick-facts)
- [§02 Positioning](#02--positioning)
- [§03 Brand Evolution](#03--brand-evolution)
- [§04–05 Color & Typography](#0405--color--typography)
- [§06 Layout & UX](#06--layout--ux)
- [§07 Assessment](#07--assessment)
- [§08 Strategic Verdict](#08--strategic-verdict)
- [§09 Brand Personality](#09--brand-personality)
- [§10 Social Strategy](#10--social-strategy)
- [§11 Campaigns](#11--campaigns)
- [§12 Audience](#12--audience)
- [§13 vs Client](#13--vs-client)
- [Brand in Practice](#brand-in-practice)

---

## Motion Assets

When a brand's identity is primarily expressed through motion (animation, film, interactive systems), use `.m-img.motion` card variant instead of a static image.

**Use motion for:**
- §09 Personality — brand world animations, character animations (e.g. Notion AI Rive character)
- §11 Campaigns — 6–12s autoplay loop from a hero brand film
- §10 Social — platform-native video content loop
- §03 Brand Evolution — motion timeline or animated brand history

**Rules:**
- Autoplay loops: max 12 seconds, compressed to <3MB webm (primary) + mp4 (fallback)
- No audio — always `muted`. Never force the user to unmute.
- Always include a `poster` still frame for slow connections
- Always show the `motion-badge` ("▶ motion") so the card reads as intentionally moving
- For full-length films (>30s): show still thumbnail + `→ Watch film` button below card (same pattern as social platform buttons)
- GIFs: treated as static images — no `.motion` class needed, just `<img src="...gif">`

**Processing pipeline for captured video:**
```bash
# 1. Download (yt-dlp — YouTube or Vimeo)
yt-dlp --format "mp4[height<=720][ext=mp4]" [URL] -o "assets/motion/[name].mp4"

# 2. Find best 10s loop (scrub to interesting moment, adjust -ss)
ffmpeg -i input.mp4 -ss 00:00:03 -t 10 -vf "scale=800:-1" -c:v libvpx-vp9 -b:v 0 -crf 33 -an output.webm
ffmpeg -i input.mp4 -ss 00:00:03 -t 10 -vf "scale=800:-1" -c:v libx264 -crf 26 -an output.mp4

# 3. Extract poster frame
ffmpeg -i input.mp4 -ss 00:00:03 -frames:v 1 poster.jpg
```

## Mosaic Architecture

```
LEFT COLUMN (creative/identity arc)     RIGHT COLUMN (analytical arc)
────────────────────────────────────    ─────────────────────────────────
§02 Positioning        LARGE ~360px     §09 Brand Personality      ~220px
§03 Brand Evolution          ~240px     §06 Layout & UX            ~200px
§04–05 Color+Type            ~250px     §10 Social Strategy        ~180px
§11 Campaigns         ANCHOR ~320px     §07 Assessment             ~180px
§01 Quick Facts       BOTTOM ~200px     §08 Strategic Verdict      ~200px
                                        §12 Audience               ~200px
                                        §13 vs [Client]            ~200px
────────────────────────────────────────────────────────────────────────
        BRAND IN PRACTICE — full-width below both columns
                      12–16 unique images
```

Heights are intentional and varied to create diagonal rhythm. Left col = large-first, right col = small-first. NOT a uniform-height grid.

---

### §01 — Quick Facts

**Column**: Left (bottom anchor — reference, not opener)
**Card height**: ~200px
**Image type**: Product/press identity — primary product or press-ready identity shot
**Image rules**:
- ✅ Clean product shot, press photo of the brand's core product
- ✅ Wordmark/logo on brand color
- ❌ People as primary subject
- ❌ Campaign photography
**Expanded content**:
- Financial stats (revenue, users, valuation, market position)
- Key dates (founded, major milestones, IPO/acquisition)
- Geographic footprint
**Fallback**: `.fallback.color` (brand primary fill)

---

### §02 — Positioning

**Column**: Left (TOP, LARGEST card)
**Card height**: ~360px
**Image type**: Brand atmosphere — shows the brand's world, cultural territory, or strategic context
**Image rules**:
- ✅ Multi-product strategic overview
- ✅ Brand cultural context and atmosphere (without making a person the subject)
- ✅ Campaign-derived if it feels systemic, not moment-specific
- ❌ App UI or interface screenshots
- ❌ Campaign copy overlaid on image
- ❌ Talent/celebrity as primary subject (even if culturally aligned)
- ❌ Moment-specific ad or campaign image
**Expanded content**:
- `callout` block with key positioning statement or direct brand voice quote
- 2–3 paragraphs of positioning analysis
- Subtitle: tagline · key claim · target demographic
- Must answer "why this brand wins" not just "what they say about themselves"
**Fallback**: `.fallback.color` — this is the largest card; a confident color field beats any mediocre image

---

### §03 — Brand Evolution

**Column**: Left, second card
**Card height**: ~240px
**Image type**: Panoramic timeline spread or brand system overview
**Image rules**:
- ✅ Full brand system overview at natural ratio (panoramic)
- ✅ Design system spread showing evolution over time
- Use `.m-img.natural` — display at native aspect ratio
- ❌ Dense grid of document thumbnails (20+ small thumbnails = filing cabinet look)
**Expanded content**:
- Timeline (`.timeline` > `.t-item` pattern)
- Each entry: year + milestone name + what it meant for the brand (not just the fact)
- Final item has class `.now`
**Fallback**: `.fallback.color`

---

### §04–05 — Color & Typography *(merged card)*

**Column**: Left, third card
**Card height**: ~250px
**Image type**: Brand identity / design system overview
**Image rules**:
- Use `.m-img.natural.dark` (dark background matches brand guidelines aesthetic)
- ✅ Brand guidelines spread, design system overview with typography featured
- ❌ Brand pillars or values visual (that's §09 territory)
- ❌ Product screenshots
**Expanded content** — THREE required sub-sections, none optional:
1. `<h4>Logo</h4>` — wordmark on brand color + logo construction/spacing guidelines image
2. `<h4>Color Palette</h4>` — CSS swatches (`.swatches` > `.sw` with `.sw-block`, `.sw-name`, `.sw-hex`) + color strategy note
3. `<h4>Typography</h4>` — type specimen image + 1 sentence on typeface and usage strategy

If any of the three sub-sections is missing, the card is incomplete.
**Fallback**: `.fallback.color`

---

### §06 — Layout & UX (Digital Experience)

**Column**: Right, second card
**Card height**: ~200px
**Image type**: Website homepage screenshot (not app screenshot)
**Image rules**:
- Use `.m-img.natural`
- ✅ Full website homepage — shows complete design intent
- ❌ App screenshot as card thumbnail (save for expanded content)
**Expanded content**:
- Full-bleed images at natural ratio: `margin: 16px -20px 0` to break container padding
- Minimum 3 screens: homepage → core product UI → secondary feature
- 2-up grid for pairs, full-width for hero screens
- Analysis of what UX signals about brand values and trust model
**Fallback**: `.fallback.color`

---

### §07 — Assessment

**Column**: Right, fourth card
**Card height**: ~180px
**Image type**: Design principles / strategy visual
**Expanded content**:
- Strengths + Vulnerabilities grid
- Every vulnerability must name a **specific strategic opening for [Client]** — not a generic quality issue
- User psychology: love patterns / rage patterns sourced from reviews, Reddit, App Store
- Sources must be explicit
**Fallback**: `.fallback.color`

---

### §08 — Strategic Verdict

**Column**: Right, fifth card
**Card height**: ~200px
**Image type**: Iconic brand object — the most elemental artifact of what this brand IS
**Image rules**:
- Use `.m-img.natural`
- Must be THE brand object — not a generic product screenshot
**Expanded content**:
- Borrow / Watch / Reject framework
- Each item MUST include "because for [Client]" clause — specific reasoning tied to [Client]'s audience or positioning
- No item without a clause. Observations without [Client]-specific reasoning are incomplete.
**Fallback**: `.fallback.color`

---

### §09 — Brand Personality

**Column**: Right (TOP, first card)
**Card height**: ~220px
**Image type**: Brand world / lifestyle objects / 3D brand artifacts on brand-color background
**Image rules**:
- ✅ 3D product renders on brand-color background
- ✅ Lifestyle objects that evoke brand tone
- ✅ Abstract brand world imagery
- ❌ Direct product photo (that's §08)
**Expanded content**:
- Brand archetype(s)
- Tone descriptors (3–5 words)
- Target audience — must be specific enough to fail the swap test: if you swap the brand name and it still reads true, it's too generic
- How the brand makes users feel
**Fallback**: `.fallback.color`

---

### §10 — Social Strategy

**Column**: Right, third card
**Card height**: ~180px
**Image type**: Social-native content — most culturally specific, viral-feeling image available
**Image rules**:
- Must feel like it came from the platform, not a press release
- ✅ Real post screenshots (Instagram grid, X/Twitter post)
- ✅ YouTube thumbnails via CDN
- ❌ Portrait crops of celebrities from social posts
- ❌ Generic social icons or mockups
**Expanded content**:
- Per-platform breakdown as applicable: Instagram, X/Twitter, YouTube, TikTok, Reddit
- Each platform: real post examples OR explicit "No active presence" text
- Content types + strategic rationale for each
- What social reveals about how the brand recruits from [Client]'s target demographic
**Social sourcing rules**:
- Real screenshot = always preferred
- YouTube: `img.youtube.com/vi/{VIDEO_ID}/maxresdefault.jpg` (public, no auth needed)
- TikTok: styled stats card acceptable — platform blocks all automated capture
- Instagram/X: Playwright screenshot or scraped image
**Link rule**: `→ Go to Instagram`, `→ Go to X` etc. as explicit text buttons. Never `<a>` wrapping `<img>`. Buttons inside card toggles need `onclick="event.stopPropagation()"`.
**Fallback**: `.fallback.color`

---

### §11 — Campaigns

**Column**: Left, fourth card (large visual anchor)
**Card height**: ~320px
**Image type**: Cinematic campaign hero — most arresting agency/campaign image available
**Image rules**:
- This is the ONE section where campaign photography belongs
- Use `.m-img.natural` for full agency spreads
**Expanded content**:
- `.campaign` pattern: campaign hero (height: 360px) + meta (year / agency / channel) + name + description
- 3-up supporting grid (aspect-ratio: 16/9, object-fit: cover)
- Multiple campaigns can be included
**Fallback**: `.fallback.color`

---

### §12 — Audience

**Column**: Right, sixth card
**Card height**: ~200px
**Image type**: Documentary / lifestyle photography — real people, real contexts
**Image rules**:
- ✅ Real people in authentic brand-adjacent contexts
- ❌ Generic stock photography that could apply to any brand
**Expanded content**:
- Age range + geography
- Psychographic profile
- Retention driver: what psychological job does staying with this brand serve?
- What makes switching feel like loss (switching cost framing)
**Fallback**: `.fallback.color`

---

### §13 — vs [Client]

**Column**: Right, last card
**Card height**: ~200px
**Image type**: Campaign or cultural atmosphere image — strong and distinctive
**Image rules**:
- ❌ Reuse of hero image
- ❌ Reuse of §02 image (uniqueness rule)
- Must differ from every other image on the page
**Expanded content**:
- Comparison table: [Brand] feature/quality vs [Client] equivalent
- Strategic call: specific, testable insight about where [Client] should swing and why
- [Client] implication at section level
**Fallback**: `.fallback.color`

---

## Brand in Practice

**Not a numbered section.**
**Position**: Full-width below both mosaic columns.
**Image type**: Broad visual library — 12–16 images, none duplicated from any section card on the page.
**Sources**:
- Alternate agency deliverables
- 3D brand objects and product variants
- Collab/limited edition product photography
- Motion/animation stills
- Illustration system samples
- Brand guidelines spreads not used elsewhere

**Format**: 3 preview images visible on load, rest in expandable grid.
- Preview: natural ratio, side by side
- Grid: `aspect-ratio: 1`, `object-fit: cover`

**Rule**: Must feel like the brand's complete visual library, not a repeat of the card images. If an image appears on any section card, it cannot appear here.