---
name: visual-competitive-analysis
description: Create visual competitive analysis pages that break down competitor brands by color palette, typography, layout patterns, positioning, and strategic threat level. Use when asked to analyze a competitor's visual identity, build a competitive landscape page, create brand DNA comparisons, or research competitor design systems. Triggers on "competitive analysis," "competitor research," "brand analysis," "visual research," "brand DNA," "competitive landscape," or "competition page." Produces CE-styleguide-compliant HTML pages with structured sections.
---

# Visual Competitive Analysis

Build structured, CE-styleguide-compliant competitive analysis pages that dissect competitor brands across visual identity, positioning, and strategic dimensions.

## Output Types

1. **Single brand deep-dive** — Full-page analysis of one competitor
2. **Index page** — Card grid showing all competitors at a glance, linking to individual pages

## Page Structure — Single Brand

Every brand page follows this 10-section structure. Include all sections when data is available; omit sections gracefully when data is insufficient.

| # | Section | Component | Content |
|---|---------|-----------|---------|
| 1 | Quick Facts | `facts-grid` (4-col, 4-8 cells) | Revenue, margin, users, AUM, avg balance, growth, founded |
| 2 | Positioning | Narrative + `callout` + `tags` | Market position, mission, recent pivots, key exec quotes |
| 3 | Brand Evolution | `timeline` | Chronological brand moments: founding → rebrands → crises → current |
| 4 | Color Palette | `palette-grid` (5-col) | 3-6 swatches: hex, role name, extracted from live CSS |
| 5 | Typography | `type-specimen` + `type-details` | Font family, weights, character, specimen in brand's actual typeface |
| 6 | Layout & UX | `two-col` (2 rows) | Density, theme posture, grid structure, interaction patterns |
| 7 | Assessment | `table` | What works / what doesn't across 5-7 dimensions |
| 8 | Strategic Verdict | `verdict-grid` (4-col) | Borrow / Reject / Watch / Threat Level |
| 9 | Brand Personality | `three-col` | Archetype, voice, target audience signal |
| 10 | vs Client | `table` + `callout` | Head-to-head comparison + strategic implication |

## CE Style Guide Compliance

Every page must pass the CE quality gate. Non-negotiable rules:

- **Background:** white (`#fff`) — never dark
- **Fonts:** Larken (display/headings), Inter (body), JetBrains Mono (data/code)
- **Larken:** Load via Typekit `https://use.typekit.net/ffj8sbd.css`
- **Colors:** Only 6 values — `--red: #cc0000`, `--black: #1a1a1a`, `--grey: #666`, `--light: #999`, `--border: #eee`, `--bg: #fff`
- **Container:** `max-width: 1100px` (index pages may use 1400px for card grids)
- **Section labels:** 10px, uppercase, 0.1em tracking, `--red`
- **Headings:** Larken, 400 weight, -0.02em letter-spacing
- **Max text width:** 680px for body paragraphs
- **Borders:** 1px solid `#eee` only — no thicker, no `#e5e5e5`
- **No:** gradients, box-shadows, bold (700), border-radius > 4px, emojis, stock photos

## Template

Start from `assets/brand-page-template.html`. It contains all CSS and component markup patterns. Replace `{{PLACEHOLDERS}}` with real content.

## Research Process

Read `references/research-methodology.md` for the full data collection checklist per brand. Summary:

1. **Existing project data first** — check the project's `brand/strategy/` folder and any prior research files before searching externally
2. **Live site inspection** — extract colors, fonts, layout patterns from actual CSS
3. **Financial data** — public filings, earnings, investor materials
4. **Recent brand moves** — `web_search` for rebrands, acquisitions, pivots in last 90 days
5. **Compile into sections** — fill each of the 10 sections with sourced data

## Index Page

When building the index/overview page with all competitors, read `references/index-page-structure.md` for card grid format and tier organization.

## Deployment

Place completed pages in the project's `visual-research/` folder:
```
visual-research/
├── index.html          ← All-brands index
├── robinhood/index.html
├── revolut/index.html
├── coinbase/index.html
└── ...
```

For staging deployment: copy to `public/{{project}}-competition/{{brand}}/index.html`, commit, push.

## Quality Checklist

Before delivering any page, verify:

- [ ] Typekit loaded (`ffj8sbd`)
- [ ] Only Larken / Inter / JetBrains Mono
- [ ] Only 6 CE colors used
- [ ] `grep -i "gradient"` → 0 results
- [ ] `grep "box-shadow"` → 0 results
- [ ] `grep "font-weight.*[6-9]00"` → 0 results
- [ ] Container max-width correct
- [ ] All 10 sections present (or explicitly omitted with reason)
- [ ] Responsive at 600px and 900px breakpoints
- [ ] Data sourced and current (note dates on financial figures)