# Brandwatch Partnership Page — Full Style Audit
**File:** `/root/.openclaw/workspace/public/brandwatch-v2/index.html`
**Audited against:** CE Styleguide (curiousendeavor.com/styleguide.html)
**Reviewers:** Jessica (Art Direction), Anton (Critic), Ogilvy (Copy)
**Date:** 2026-03-10

---

## 🔴 CRITICAL (breaks the brand)

### 1. Buttons use wrong font-size and are not uppercase
**Rule:** Buttons: 12px uppercase, 0.08em letter-spacing
**Violation:** `.btn` uses `font-size: var(--size-body-sm)` which is **14px**, not 12px. No `text-transform: uppercase`. No `letter-spacing: 0.08em`.
**Lines:** ~95-99 (`.btn` definition)
**Fix:**
```css
.btn {
  font-size: 12px;          /* was 14px via --size-body-sm */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
```

### 2. Section labels use wrong font-size (10px instead of 11px)
**Rule:** Section labels: 11px, uppercase, 0.1em letter-spacing, red, weight 500
**Violation:** `.section-label` uses `font-size: var(--size-label)` which is **10px**. Styleguide says **11px**.
**Lines:** ~107 (`.section-label`), also `--size-label: 10px` in `:root`
**Fix:**
```css
--size-label: 11px;   /* was 10px */
```
This also affects `.bridge-label`, `.poc-label`, `.pillar-eyebrow`, `.ce-eyebrow`, `.team-name`, `.before-compact-label` — all inherit from `--size-label`.

### 3. Brandwatch blue (#3b82f6) is an off-palette color used extensively
**Rule:** Color palette is strictly: #CC0000, #1A1A1A, #666666, #999999, #FFFFFF, #FAFAFA, #EEEEEE. No other colors.
**Violation:** `--bw-blue: #3b82f6`, `--bw-bg: #f6f8ff`, `--bw-border: #d6e0f5` — used in `.pillar` background, `.pillar-eyebrow` color, `.pillar-items li::before` bullets, `.before-compact-node .check` color. These introduce a Brandwatch-branded blue that isn't in the CE palette.
**Lines:** ~11-13 (`:root` vars), ~176-199 (`.pillar-*`), ~149 (`.before-compact-node .check`)
**Fix:** Replace Brandwatch blue with CE palette equivalents:
```css
/* Remove --bw-blue, --bw-bg, --bw-border entirely */
.pillar {
  background: #fafafa;        /* was --bw-bg (#f6f8ff) */
  border: 1px solid #eee;     /* was --bw-border (#d6e0f5) */
}
.pillar-eyebrow {
  color: #999;                /* was --bw-blue — use --light for tertiary labels */
}
.pillar-items li::before {
  background: #999;           /* was --bw-blue */
}
.before-compact-node .check {
  color: #999;                /* was --bw-blue */
}
```

### 4. Green color (#1a7a3a) used in bridge status — off palette
**Rule:** No colors outside the defined palette.
**Violation:** `.bridge-status` uses `color: #1a7a3a` (green). This color doesn't exist in the CE palette.
**Lines:** ~237-243 (`.bridge-status`)
**Fix:**
```css
.bridge-status {
  color: var(--black);        /* was #1a7a3a — use primary text */
}
```

### 5. Broken/grey custom colors off palette
**Rule:** Palette is fixed. No ad-hoc greys.
**Violation:** `--broken-border: #d0d0d0` and `--broken-text: #b0b0b0` are custom greys not in the styleguide. The palette greys are #666666, #999999, #EEEEEE.
**Lines:** ~14-15 (`:root`)
**Fix:**
```css
/* Replace with nearest palette equivalents */
--broken-border: #eee;       /* was #d0d0d0 — use --border */
--broken-text: #999;         /* was #b0b0b0 — use --light */
```

### 6. Linear gradient used in flow-track animation
**Rule:** NO gradients.
**Violation:** `.flow-track::after` uses `background: linear-gradient(90deg, transparent, rgba(204, 0, 0, 0.2), transparent)`.
**Lines:** ~253-256 (`.flow-track::after`)
**Fix:** Remove the gradient animation entirely. Use a simple solid line or remove `.flow-track` altogether — it's decorative, which violates "DON'T add unnecessary decoration."
```css
.flow-track { display: none; }
```

### 7. Nav CTA button uses `!important` and is styled differently from `.btn`
**Rule:** Buttons: 12px uppercase, 0.08em letter-spacing.
**Violation:** `.nav-cta` has `font-size: var(--size-small)` (12px — correct size) but no `text-transform: uppercase`, no `letter-spacing: 0.08em`. Also uses `!important` on color.
**Lines:** ~55-58 (`.nav-cta`)
**Fix:**
```css
.nav-cta {
  padding: 10px 24px;
  background: var(--red);
  color: #fff;                 /* remove !important */
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
```

---

## 🟡 SIGNIFICANT (looks off)

### 8. `.ce-card::before` uses a 3px red top bar — unnecessary decoration
**Rule:** DON'T add unnecessary decoration. Red is accent ONLY.
**Violation:** `.ce-card` has a `::before` pseudo-element creating a 3px solid red bar across the top. This is decorative emphasis that violates the minimal aesthetic.
**Lines:** ~221-228 (`.ce-card::before`)
**Fix:**
```css
.ce-card::before { display: none; }
```

### 9. `.ce-card` has a full red border — excessive red usage
**Rule:** DON'T overuse red. Red is accent ONLY.
**Violation:** `.ce-card` has `border: 1px solid var(--red)` — a full red border around the entire card. Combined with red eyebrow text, red bullets, and red top bar, this section is red-heavy.
**Lines:** ~215 (`.ce-card`)
**Fix:**
```css
.ce-card {
  border: 1px solid var(--border);   /* was var(--red) — use standard border */
}
```

### 10. Section divider uses a decorative red line before the label
**Rule:** DON'T add unnecessary decoration.
**Violation:** `.section-divider::before` creates a 40px red horizontal line before every section label. This is a decorative flourish not in the styleguide.
**Lines:** ~108-115 (`.section-divider::before`)
**Fix:** Remove the decorative line:
```css
.section-divider::before { display: none; }
```
Or keep it minimal with border color:
```css
.section-divider::before {
  background: var(--border);   /* was var(--red) — use neutral border */
}
```

### 11. Body line-height inconsistency
**Rule:** Inter body: line-height 1.6-1.7
**Violation:** `body` has `line-height: 1.6` (OK), but `.engine-body` uses `line-height: 1.8` — outside the 1.6-1.7 range. `.ce-items` uses `line-height: 1.9` — way outside range. `.bridge-explainer p` uses `line-height: 1.75` — slightly outside.
**Lines:** ~303 (`.engine-body`), ~232 (`.ce-items`), ~248 (`.bridge-explainer p`)
**Fix:**
```css
.engine-body { line-height: 1.7; }      /* was 1.8 */
.ce-items { line-height: 1.7; }          /* was 1.9 */
.bridge-explainer p { line-height: 1.7; } /* was 1.75 */
```

### 12. `.bw-outcome` uses italic — not in the type system
**Rule:** The styleguide doesn't define italic usage. Editorial tone = confident, not decorative.
**Violation:** `.bw-outcome` uses `font-style: italic` for red callout text within deliverable cards. Italic + red + small = visually noisy.
**Lines:** ~62-67 (`.bw-outcome`)
**Fix:**
```css
.bw-outcome {
  color: var(--light);          /* was var(--red) — too much red */
  font-size: var(--size-small);
  font-style: normal;           /* was italic */
  display: block;
  margin-top: 10px;
  font-weight: 400;
}
```

### 13. Photos use border-radius: 50% (circles) — exceeds 4px max
**Rule:** No border-radius > 4px.
**Violation:** `.bio .photo` and `.team-avatar` both use `border-radius: 50%`. This creates circular images, which dramatically exceeds the 4px maximum.
**Lines:** ~266 (`.bio .photo`), ~318 (`.team-avatar`)
**Fix:**
```css
.bio .photo { border-radius: 4px; }     /* was 50% */
.team-avatar { border-radius: 4px; }     /* was 50% */
```

### 14. `.pillar-title` and `.ce-title` use font-weight: 500 on non-Inter heading
**Rule:** Larken: Headlines & Display ONLY. Weight 400. Inter body weights: 300/400/500.
**Violation:** `.pillar-title` and `.ce-title` use `font-weight: 500` at `18px` size. These aren't using Larken (which would need weight 400), they're using Inter at heading size. Weight 500 for Inter is specified for labels only.
**Lines:** ~190-195 (`.pillar-title`), ~235-239 (`.ce-title`)
**Fix:** Either use Larken at 400 for these headings, or keep Inter at 400:
```css
.pillar-title { font-weight: 400; }
.ce-title { font-weight: 400; }
```

### 15. `.deliverable-card h3` uses font-weight: 500 at 18px
**Rule:** Inter weight 500 is for labels. Headings should be Larken 400.
**Violation:** `.deliverable-card h3` is `font-size: 18px; font-weight: 500` — this is a heading using Inter bold-ish.
**Lines:** ~292-296 (`.deliverable-card h3`)
**Fix:**
```css
.deliverable-card h3 {
  font-family: 'larken', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}
```

### 16. `.business-value-title` is 18px Inter weight 500 — same issue as above
**Lines:** ~342-346 (`.business-value-title`)
**Fix:**
```css
.business-value-title {
  font-family: 'larken', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}
```

### 17. `.hero-badge` and `.nav-brand-mark` use border-radius: 4px (OK), but `.mobile-cta` also uses border-radius: 4px — verify all radius values
**Rule:** No border-radius > 4px.
**Status:** All non-photo border-radius values are 4px or less. ✅ Pass — but flag the photo circles noted in #13.

### 18. Connector arrows are decorative SVG-like shapes built with CSS borders
**Rule:** DON'T add unnecessary decoration.
**Violation:** `.connector-line::after` creates triangular arrowheads via CSS border tricks. The connectors + arrows + animation pulse create a complex diagram that feels more like a SaaS product page than an editorial partnership page.
**Lines:** ~207-214 (`.connector-line::after`)
**Fix:** Simplify to just the line, remove arrowheads:
```css
.connector-line::after { display: none; }
```

### 19. Before-compact gap uses "???" as decorative text at 18px
**Rule:** DON'T add unnecessary decoration. Show, don't tell.
**Violation:** `.before-compact-gap` displays "???" in JetBrains Mono at 18px with wide letter-spacing. This is a theatrical decoration — heavy-handed storytelling rather than confident editorial.
**Lines:** ~143-148 (`.before-compact-gap`), HTML around line 422
**Fix:** Replace "???" with a simple em-dash or "gap" in lowercase:
```html
<span class="before-compact-gap">—</span>
```
```css
.before-compact-gap {
  font-size: var(--size-body-sm);
  color: var(--light);
  letter-spacing: normal;
}
```

### 20. `.poc-title` uses font-weight: 500 at 18px — should be Larken 400
**Lines:** ~73-77 (`.poc-title`)
**Fix:**
```css
.poc-title {
  font-family: 'larken', serif;
  font-size: var(--size-h3);
  font-weight: 400;
  letter-spacing: -0.02em;
}
```

---

## 🟢 MINOR (polish)

### 21. `--size-display: 48px` feels large for the editorial aesthetic
**Note:** Not strictly a violation, but 48px Larken headlines are on the large side. The styleguide doesn't cap display size, but the overall effect should feel "confident, not loud."
**Consider:** Reducing to 42px for a more restrained feel.

### 22. `.hero-badge-text` uses font-weight: 500 — should be 400
**Rule:** Inter 500 is for labels (uppercase). Badge text is not uppercase, so 400 is more appropriate.
**Lines:** ~84 (`.hero-badge-text`)
**Fix:**
```css
.hero-badge-text { font-weight: 400; }
```

### 23. `.nav-brand-text` uses font-weight: 500 — reasonable for a nav brand, but technically labels spec
**Lines:** ~49 (`.nav-brand-text`)
**Status:** Acceptable. Brand text in nav at 500 is defensible. Minor note only.

### 24. `section h2` uses `--size-h1` (28px) — naming confusion
**Note:** The CSS variable `--size-h1: 28px` is used for `section h2` elements. While not a visual violation, it's confusing naming that could lead to maintenance issues.
**Fix:** Rename to `--size-section-heading` or similar.

### 25. `.before-compact` uses `opacity: 0.6` — creates a washed-out look
**Rule:** Confident, not loud. But also not faded and uncertain.
**Lines:** ~137 (`.before-compact`)
**Fix:**
```css
.before-compact { opacity: 0.8; }   /* was 0.6 — too faded */
```

### 26. `.hero h1 em` removes italic but keeps default `<em>` semantics
**Lines:** ~87 (`.hero h1 em`)
**Status:** `font-style: normal; color: var(--red)` — functional. Minor semantic note: `<span class="accent">` would be more appropriate than `<em>`.

### 27. `body` font-weight not explicitly set
**Rule:** Inter body weight: 300 (body)
**Violation:** `body` doesn't set `font-weight: 300`. It defaults to 400.
**Lines:** ~26-31 (body rule)
**Fix:**
```css
body { font-weight: 300; }   /* styleguide says body text = 300 */
```

### 28. `.team-role` uses font-weight: 500 but is not uppercase — inconsistent with label spec
**Lines:** ~323 (`.team-role`)
**Fix:**
```css
.team-role {
  font-weight: 400;   /* or make uppercase with 500 per label spec */
}
```

### 29. `.faq-question` uses font-weight: 500 at 14px — slightly heavy
**Rule:** DON'T use heavy font weights. Inter 500 for labels.
**Lines:** ~350 (`.faq-question`)
**Status:** 500 at 14px is defensible as a label/heading. Minor.

### 30. `var(--grey)` is `#666` instead of `#666666`
**Note:** Shorthand `#666` is equivalent to `#666666`. No visual difference. Minor cleanliness note.

---

## 📝 COPY ISSUES (Ogilvy)

### 1. Hero headline is strong, but sub-copy is too long and promotional
**Issue:** "CE turns your clients' Brandwatch data into finished campaigns — making your platform the only tool they need from insight to published content. Higher adoption, stronger renewals, new revenue."
**Problem:** "Higher adoption, stronger renewals, new revenue" is a bullet-point sales pitch crammed into prose. Reads like a features list.
**Fix:** "CE turns your clients' Brandwatch data into finished campaigns — closing the loop between intelligence and published content."

### 2. Problem section: "goldmines they can't mine" is a cliché
**Issue:** "Your clients sit on goldmines they can't mine"
**Problem:** Overused metaphor. Doesn't match the editorial tone.
**Fix:** "Your clients have the intelligence. They don't have the output." — mirrors the hero structure.

### 3. Problem section body copy is WAY too long
**Issue:** The paragraph starting "Your clients pull audience sentiment..." is 86 words. For a section that should punch, this meanders.
**Fix:** Cut to ~50 words: "Your clients track sentiment, map share of voice, segment audiences. Then they export a PDF and brief an agency. Three months later, the campaign doesn't reference a single data point from your platform. Publish sits idle. Advertise goes unused."

### 4. Deliverable descriptions are too long and promotional
**Issue:** Each deliverable card has 60-80 word descriptions plus an italic red outcome line. That's 5 dense paragraphs in a card grid.
**Problem:** Card grids should be scannable. These read like proposal paragraphs.
**Fix:** Cut each description to 30-40 words max. Move outcome lines to a separate "Why it matters to Brandwatch" section, or remove entirely — the business case section already covers this.

### 5. "The Engine" section reads like an internal memo
**Issue:** Three paragraphs of dense copy about competitive positioning (Canva, Jasper, ChatGPT). Too argumentative.
**Problem:** Reads like we're defending against objections nobody raised yet. Defensive ≠ editorial.
**Fix:** Cut to ONE paragraph. The strongest one: the third paragraph about closing the loop. Let the work speak.

### 6. POC box description is 100+ words — wall of text
**Issue:** The proof-of-concept description lists every metric, every output, every detail. It reads like a data dump.
**Fix:** "We ran actual Brandwatch Consumer Research data through CE — 78K mentions, sentiment analysis, competitive benchmarking. The system produced a complete Dove campaign: positioning strategy, social content, display ads, email sequence, localized into three languages. Hours, not months." (Link for details.)

### 7. FAQ answers are too long and repetitive
**Issue:** Several FAQ answers repeat the same value props (platform stickiness, renewal rates) already stated elsewhere. The "Why partner?" answer is 76 words.
**Fix:** FAQ answers should be 2-3 sentences max. One answer, one point. No re-selling.

### 8. CTA sub-copy: "No commitment, no risk" is sales language
**Rule:** Editorial, not promotional.
**Issue:** "No commitment, no risk" is infomercial-tier copy.
**Fix:** "One client. One market. 30 days. We'll show you what the system produces."

### 9. Overuse of em-dashes throughout
**Issue:** Nearly every paragraph uses 1-2 em-dashes. It's a writing tic that makes everything feel breathless.
**Fix:** Replace 50% of em-dashes with periods or commas. Let sentences land.

### 10. Team member descriptions are too clever
**Issue:** "Ships what others say can't be built" / "Finds what competitors missed" — these read like LinkedIn bios.
**Problem:** Trying too hard to be pithy. The styleguide says "confident, not loud."
**Fix:** Be direct: "Frontend engineering and production" / "Competitive intelligence and research"

---

## 🎨 LAYOUT ISSUES (Jessica)

### 1. Bridge visualization is the most complex element on the page — too heavy
**Issue:** The bridge section has: a broken-state diagram, an elaborate 5-column grid with pillars/connectors/arrows, a pulse animation, a status line with green text, AND an explainer paragraph. This single section has more visual complexity than the rest of the page combined.
**Fix:** Simplify dramatically. Three columns max. No animation. No "before" state — just show the complete picture. Remove the flow-track animation entirely.

### 2. Deliverable cards are text-heavy — no visual breathing room
**Issue:** Each card has: icon, h3, 60-80 word paragraph, italic red outcome line. At 3 columns, this creates a dense wall.
**Fix:** Either: (a) reduce text per card to 30 words + remove outcome lines, or (b) switch to 2-column layout with more padding. Cards need `padding: 40px 28px 36px` minimum (currently 32px 24px 28px).

### 3. Team grid: 4 columns creates small, cramped cards
**Issue:** 8 team cards in a 4×2 grid. Cards have `padding: 32px 20px` — the 20px side padding is tight.
**Fix:** Switch to 4 columns but increase padding, or consider showing 4 key roles and a "+4 more" expansion.
```css
.team-card { padding: 32px 28px; }
```

### 4. Operators section: 80px gap between bios is correct but photos feel disconnected
**Issue:** 120px circular photos (which should be squared per audit) floating above text. The grayscale filter is good, but the size creates a portrait-page feel rather than a professional bio section.
**Fix:** Reduce photo size to 80px. With 4px border-radius (after fixing circle issue), this will feel more editorial:
```css
.bio .photo {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}
```

### 5. Section spacing is 100px uniform — should alternate with content density
**Issue:** Every section uses `padding: 100px 0`. Some sections (problem, engine) have very little content — 100px top + bottom makes them feel hollow. Others (deliverables, FAQ) are dense and need the space.
**Fix:** Lighter content sections: `padding: 80px 0`. Dense sections: keep `padding: 100px 0`.

### 6. The POC box feels like an afterthought tacked below the Figma embed
**Issue:** `style="margin-top: 32px; padding: 24px; border: 1px solid var(--border);"` — inline styles, minimal spacing, reads like a bolt-on.
**Fix:** Give it proper spacing and structure:
```css
.poc-box {
  margin-top: 48px;
  padding: 32px;
  border: 1px solid var(--border);
}
```
Move inline styles to CSS class.

### 7. Figma embed at 700px height feels like a black box
**Issue:** A 700px iframe in the middle of an otherwise clean editorial page is jarring. If it loads slowly or the Figma is complex, the user sees a blank white box.
**Fix:** Add a loading state or background color. Consider reducing height to 560px. Add a subtle label above it.

### 8. CTA section is visually identical to the hero — lazy
**Issue:** Same display-size Larken heading, same red `<em>`, same button pair. The page bookends feel copy-pasted.
**Fix:** CTA should be smaller and more intimate. Use `--size-h1` (28px) instead of `--size-display` (48px). Single button, not two.

### 9. No visual rhythm between alternating sections
**Rule:** #FAFAFA Off-white for alternating sections.
**Issue:** Every section has `background: var(--bg)` (white). No alternating off-white backgrounds. The page is one continuous white scroll with no visual rhythm or section differentiation.
**Fix:** Alternate sections with `background: #fafafa`:
```css
.problem { background: #fafafa; }
.team { background: #fafafa; }
.faq { background: #fafafa; }
```

### 10. Footer is minimal to a fault
**Issue:** Footer has brand text and copyright. No links, no contact info. For a partnership page that's trying to close a deal, the footer should reinforce the CTA.
**Fix:** Add: email link, Calendly link, and "Lisbon / Berlin" location text.

---

## 📊 SEVERITY SUMMARY

| Severity | Count | Impact |
|----------|-------|--------|
| 🔴 Critical | 7 | Brand-breaking: off-palette colors, wrong button spec, gradients, wrong label size |
| 🟡 Significant | 13 | Visually off: decorative elements, excessive red, circular photos, wrong font weights |
| 🟢 Minor | 10 | Polish: opacity, naming, body weight, semantic HTML |
| 📝 Copy | 10 | Promotional tone, too-long copy, clichés, repetition |
| 🎨 Layout | 10 | No alternating backgrounds, dense cards, complex bridge, CTA laziness |

**Total violations: 50**

### Top 5 "hurting eyes" culprits (what Assaf is probably reacting to):
1. **No alternating section backgrounds** — endless white scroll, no rhythm (Layout #9)
2. **Bridge section visual overload** — too complex, too many colors, animation (Layout #1, Critical #3, #4, #6)
3. **Deliverable cards too text-heavy** — wall of words in a card grid (Layout #2, Copy #4)
4. **Off-palette colors everywhere** — blue, green, custom greys breaking the brand (Critical #3, #4, #5)
5. **Circular photos** — at 120px they dominate and break the angular brand aesthetic (Significant #13)