# Brand context — the Core Asset Protocol > **This is the single biggest lever between a 65-point design and a 90-point design.** When the task touches a specific brand — the user names a product, company, or client ("make a launch video for DJI Pocket 4", "design a pitch deck for Stripe", "mock up a Linear-style dashboard") — you must follow this 5-step protocol. Do not skip steps. A brand-context shortcut is the number-one cause of generic-looking output. ## The philosophy: assets > specifications A brand is recognized by the things that make it look like itself. Ranked by identification contribution: | Asset type | Identification weight | When mandatory | |---|---|---| | **Logo** | Highest — any brand is identifiable the moment its logo appears | **Any brand, always** | | **Product renders / photography** | Very high — the subject of a physical-product design IS the product | **Any physical product (hardware, packaging, consumer goods)** | | **UI screenshots** | Very high — the subject of a digital-product design IS its interface | **Any digital product (app, website, SaaS)** | | **Color values** | Medium — auxiliary; without the above, colors alone often collide | Supporting | | **Fonts** | Low — needs the above to build recognition | Supporting | | **Vibe keywords** | Low — useful for self-checks | Supporting | **Translated into execution rules:** - Only grabbing colors and fonts, skipping logo / product shots / UI → **violation** - Using CSS silhouettes or SVG drawings as a substitute for real product shots → **violation** (you're producing "generic tech animation" that looks the same for every brand) - Missing assets and not telling the user, and not AI-generating them → **violation** - Better to stop and ask the user for assets than to fill in with generic material ## Prerequisite: have you already done Fact Verification? Before running this protocol, confirm via [fact-verification.md](fact-verification.md) that the brand/product exists, its release status, current version, and key specs. If you're uncertain about any of these, go back and search first. Asset-hunting on a phantom product wastes everyone's time. ## Step 1 — Ask (the full asset checklist, one round) Don't ask the overly-broad "do you have brand guidelines?" — users don't know what counts. Ask item-by-item: ``` For , which of these do you have? Listed by priority: 1. Logo (SVG or high-res PNG) — required for any brand 2. Product photography / renders — required for physical products (e.g., a DJI Pocket 4 product photo) 3. UI screenshots / interface images — required for digital products (e.g., main screens of the app) 4. Color palette (HEX / RGB / brand color list) 5. Typeface list (Display / Body) 6. Brand guidelines PDF / Figma design system / brand microsite URL Send whatever you have. For what you don't have, I'll search, scrape, or generate — but I'll tell you what I fell back to. ``` ## Step 2 — Search official channels (by asset type) | Asset | Search path | |---|---| | **Logo** | `.com/brand` · `.com/press` · `.com/press-kit` · `brand..com` · inline SVG in the official site header | | **Product shots / renders** | `.com/` product detail page hero + gallery · official YouTube launch film frames · press release images | | **UI screenshots** | App Store / Google Play product page screenshots · screenshots section on official site · frames from official demo videos | | **Color values** | Inline CSS on the official site · Tailwind config · brand guidelines PDF | | **Fonts** | `` tags on the official site · Google Fonts referrer traces · brand guidelines | Fallback WebSearch queries: - Can't find logo → ` logo download SVG`, ` press kit` - Can't find product shots → ` official renders`, ` product photography` - Can't find UI → ` app screenshots`, ` dashboard UI` ## Step 3 — Download assets (three fallback paths per asset type) ### 3.1 Logo (required for any brand) In decreasing order of success: 1. **Standalone SVG / PNG file** (ideal): ```bash curl -o assets/-brand/logo.svg https://.com/logo.svg curl -o assets/-brand/logo-white.svg https://.com/logo-white.svg ``` 2. **Extract inline SVG from the official homepage** (the 80% case): ```bash curl -A "Mozilla/5.0" -L https://.com -o assets/-brand/homepage.html # Then grep ... to locate the logo node ``` 3. **Official social-media avatar** (last resort): GitHub / Twitter / LinkedIn company avatars are usually 400×400 or 800×800 transparent PNG. ### 3.2 Product shots / renders (required for physical products) By priority: 1. **Official product page hero image** (highest priority) — right-click → copy image address, or use `curl`. Typically 2000px+. 2. **Official press kit** — `.com/press` often has downloadable high-res product shots. 3. **Official launch video frames** — use `yt-dlp` to pull the YouTube video, `ffmpeg` to extract clean frames. 4. **Wikimedia Commons** — public-domain assets are surprisingly common for well-known products. 5. **AI-generated fallback** (e.g., via an image model) — pass the real product photo as reference and generate a scene-appropriate variant. **Do NOT substitute with CSS/SVG hand-drawing.** ```bash # Example: download the product hero from an official site curl -A "Mozilla/5.0" -L "" -o assets/-brand/product-hero.png ``` ### 3.3 UI screenshots (required for digital products) - App Store / Google Play product page screenshots (watch out: some are mockups, not real UI — cross-check) - Official site "screenshots" section - Frames from official demo videos - Official Twitter/X launch posts (often the freshest) - If the user has access, screenshot the actual product UI ### 3.4 The "5-10-2-8" quality threshold (for everything except logo) Logo follows a different rule: if it exists, use it; if it doesn't, stop and ask. For all other assets (product shots, UI, reference images, supporting imagery), apply the 5-10-2-8 rule: | Dimension | Standard | Anti-pattern | |---|---|---| | **5 rounds of searching** | Multi-channel cross-search (official site / press kit / official social / YouTube frames / Wikimedia / user account screenshots) — don't stop at the first page | First Google result, ship it | | **10 candidates** | Accumulate at least 10 options before you start filtering | Grab 2, no choice | | **Select 2 good ones** | Pick the top 2 from your 10 | Use all of them = visual overload, taste dilution | | **Each ≥ 8/10** | Not good enough? **Don't use it.** Use an honest placeholder (gray box + label) or AI-generate from the official reference | Settle for a 7/10 to "complete the task" | **8/10 scoring rubric** (record this in `brand-spec.md` for traceability): 1. **Resolution** — ≥ 2000px (≥ 3000px for print / large-screen contexts) 2. **Copyright clarity** — official source > public domain > free stock > suspicious reuse (suspicious = 0 points, don't use) 3. **Fit with the brand's vibe** — aligns with the vibe keywords in `brand-spec.md` 4. **Lighting / composition / stylistic coherence** — two assets side-by-side shouldn't clash 5. **Narrative self-sufficiency** — each asset can tell its own story (not decoration) Why this is a hard rule: mediocre assets make the whole artifact look mediocre. A 7/10 product shot next to a 9/10 logo makes the logo look worse. Every visual element on screen is either adding points or subtracting points — a 7-pointer is subtracting. ## Step 4 — Verify and extract (not just grepping colors) | Asset | Verification action | |---|---| | **Logo** | File exists + SVG/PNG opens cleanly + at least two versions (for dark and light backgrounds) + transparent background | | **Product shots** | At least one ≥ 2000px version + clean/removed background + multiple angles (hero, detail, context) | | **UI screenshots** | Real resolution (1x / 2x) + current version (not an old one) + no user-data leakage | | **Color values** | `grep -hoE '#[0-9A-Fa-f]{6}' assets/-brand/*.{svg,html,css} \| sort \| uniq -c \| sort -rn \| head -20` — then filter out black/white/gray neutrals | **Guard against "demo brand" contamination:** product screenshots often contain *a third party's* brand colors (e.g., a design tool's marketing screenshot showing a fictional client's red). That red is not the tool's color. When two strong colors appear together, distinguish carefully. **Brands have multiple facets:** the same brand often uses different palettes for marketing vs. product UI (e.g., one color system on the marketing site, a different one inside the app). **Both are real.** Pick the facet that matches the deliverable (marketing video → marketing palette; product mockup → product palette). ## Step 5 — Freeze the findings into `brand-spec.md` Un-frozen knowledge evaporates. Write what you found to disk so the next turn of the conversation doesn't re-derive it. Use this template: ```markdown # · Brand Spec > Captured: YYYY-MM-DD > Source: > Completeness: ## 🎯 Core assets (first-class citizens) ### Logo - Primary: `assets/-brand/logo.svg` - Reversed (for dark backgrounds): `assets/-brand/logo-white.svg` - Intended uses: - Forbidden manipulations: ### Product photography (required for physical products) - Hero: `assets/-brand/product-hero.png` (2000×1500) - Detail: `assets/-brand/product-detail-1.png`, `product-detail-2.png` - Context: `assets/-brand/product-scene.png` - Intended uses: ### UI screenshots (required for digital products) - Home: `assets/-brand/ui-home.png` - Core feature: `assets/-brand/ui-feature-.png` - Intended uses: ## 🎨 Auxiliary assets ### Color palette - Primary: `#XXXXXX` - Background: `#XXXXXX` - Ink: `#XXXXXX` - Accent: `#XXXXXX` - Forbidden: ### Typography - Display: - Body: - Mono (for data HUDs): ### Vibe keywords (for self-check) - <3–5 keywords that capture the brand's essence> - Use these to sanity-check each design decision ## 📝 Completeness notes - - ``` **Why write this file:** - The next agent turn reads the spec instead of re-deriving it (saves context + avoids inconsistency). - Forces you to be explicit about gaps ("couldn't find a clean product shot — used an AI-generated placeholder based on the launch video frame"). - Gives the user a single document to review and correct. ## Summary — the 5-step checklist - [ ] **Step 0 prereq:** Fact verification complete (brand/product exists, status known) - [ ] **Step 1:** Asked the user for all 6 asset types with the full checklist - [ ] **Step 2:** Searched official channels by asset type - [ ] **Step 3:** Downloaded assets via the three-path fallbacks; applied 5-10-2-8 to non-logo assets - [ ] **Step 4:** Verified assets and extracted color values from real files - [ ] **Step 5:** Wrote `brand-spec.md` with logo paths, product shot paths, UI screenshot paths, colors, fonts, and completeness notes Skipping any step silently produces a generic design. If you don't have time or resources for a step, say so out loud to the user and offer the honest alternative (placeholder, AI-generated, or "let's pause and get this").