# Visual Design Critique — Brandwatch Partnership Page **Reviewer:** Jessica (Art Direction) **Date:** 2026-03-07 **URL:** https://www.curiousendeavor.com/brandwatch/ **Verdict:** Solid foundation. Good type system, correct brand palette. Several structural and rhythm issues hold it back from feeling like premium CE work. --- ## 1. Layout & Hierarchy ### What's working - Clear top-to-bottom narrative flow: Hero → Gap → Pipeline → Stats → Work → Principles → Regions → CTA. Logical progression. - The Gap section's two-column card layout with connector arrow is an effective visual metaphor. - Pipeline vertical timeline with step markers creates a strong left-edge anchor. ### What's broken **The page is too long and too uniform.** Every section follows the same pattern: red label → Larken heading → grey description → bordered card grid. By section 4, the rhythm is monotonous. The eye stops distinguishing sections because they all have identical visual weight. **The pipeline is presented TWICE.** The 5-step vertical timeline *and* the horizontal infographic below it say the same thing. This is a major hierarchy failure — it dilutes the impact of both and adds ~400px of redundant content. **Fix:** Kill the horizontal infographic entirely. The vertical timeline is stronger and more detailed. **No visual breathing room.** Section padding is only `40px` top and bottom. For a page this long (~10 sections), that's claustrophobic. The main CE site is practically zen — centered logo, massive whitespace. This page reads like a SaaS template by comparison. **Fix:** Increase section padding to `80px 0` minimum for major sections, `60px 0` for minor ones. The hero already uses `80px` top — match that energy throughout. **Stats section lacks prominence.** The impact numbers (14 days, 12+ markets, 3.2× lift) are buried mid-page with the same visual treatment as everything else. These should be a *moment*. **Fix:** Consider a full-width section with increased stat number size (`--size-data: 40px` → `56px`), or a subtle background tint to differentiate. --- ## 2. Typography ### What's working - **Correct font stack:** Larken (via Typekit `ffj8sbd`), Inter (Google Fonts), JetBrains Mono. All three CE standard fonts are loaded and used in the right contexts. - Larken on headings, Inter on body, JetBrains Mono on labels/phase numbers. Proper hierarchy. - Good use of font-weight range: 300 for body descriptions, 400 for headings, 500 for labels. - `letter-spacing: -0.02em` on headings gives Larken the tight, editorial feel it needs. - `font-smoothing` antialiased — correct. ### What's broken **Display size is undersized.** `--size-display: 48px` for the hero H1 and CTA H2 feels restrained for a partnership landing page meant to impress Brandwatch. The CE brand has confidence — the type should too. **Fix:** Bump to `56px` or `60px` for display headings. Consider `clamp(40px, 5vw, 64px)` for fluid scaling. **H2 at 28px and H3 at 20px are too close.** Only 8px difference. On screen they read as nearly the same level of hierarchy. **Fix:** H2 → `32px`, or increase the weight differential (H2 stays 400, H3 drops to 300 or gets a different treatment). **Body text at 14px is small for the generous container width (1100px).** At 14px on a 520px max-width paragraph, the line length is fine, but the text feels physically small against the 56px step markers and 40px stat numbers. **Fix:** Bump `--size-body` to `15px` (the hero-desc already uses 15px — unify). **The partners row uses plain `` elements at 16px.** These client names (eToro, Wix, monday.com) should feel like logos or at minimum be styled more distinctively. Right now they look like a text list. **Fix:** Either use actual logo SVGs (preferred) or add more weight — `font-weight: 600`, slightly larger size, `letter-spacing: -0.02em` to feel more like wordmarks. --- ## 3. Color Usage ### What's working - **CE red `#cc0000` is used correctly** — labels, CTAs, accent dots, hover states, step tags. It's the sole accent color. No competing hues. - **White background `#fff`** throughout. Clean. - **Grey hierarchy is well-structured:** `#1a1a1a` (near-black for headings), `#666` (body text), `#999` (tertiary text), `#eee` (borders). Four levels, clearly distinct. ### What's broken **Zero background variation across 10+ sections.** Every section is white with a `1px solid #eee` bottom border. On a page this long, this creates a "wall of white" that makes sections blur together visually. **Fix:** Introduce subtle background alternation. Not dramatic — just `#fafafa` or `#f8f8f8` on every other section, or on key sections like Stats and CTA. The CTA section especially deserves differentiation. **The red is used too uniformly.** Every section label, every step tag, every principle number — all `var(--red)`. When everything is accented, nothing is accented. **Fix:** Reserve red for CTAs and the most important labels (Hero, CTA section). Use `#666` or `#999` for secondary labels like pipeline step tags and principle numbers. Let red mark the *actions*, not the *structure*. **Hover states are weak.** Cards and stats only change `border-color` from `#eee` to `#666` on hover. That's barely perceptible. The nav CTA hover (`#b00`) is better but still subtle. **Fix:** Add a slight `box-shadow` or `translateY(-2px)` on card hover. Make interactivity feel tangible. --- ## 4. Spacing & Rhythm ### What's broken **Inconsistent section internal spacing.** The `section-label` has `margin-bottom: 40px`, but `h2` has only `margin-bottom: 16px`, and the `section-desc` has `margin-bottom: 40px`. So the visual rhythm goes: label → 40px gap → heading → 16px gap → description → 40px gap → content. That 16px between heading and description is too tight relative to the 40px above and below. **Fix:** Increase heading margin-bottom to `20px–24px` for better proportional rhythm. **Step cards have 40px bottom margin.** Combined with the section's own 40px padding, there's 80px between the last step and the infographic. But between step cards there's only 40px. The steps feel cramped relative to the breathing room between sections. **Fix:** Increase step margin-bottom to `48px` or `56px`. **The `gap-grid` uses `32px` gap but the cards have `40px` internal padding.** This means the space *between* cards is less than the space *inside* them, which creates an inverted spatial hierarchy. **Fix:** Increase gap to `40px` or reduce card padding to `32px` to match. **Container max-width (1100px) with 40px padding = 1020px content width.** This is fine for most sections, but the pipeline step cards (which are `grid-template-columns: 56px 1fr`) end up with step bodies at ~930px wide. That's very wide for cards with only 4–6 detail items. Feels stretched. **Fix:** Consider adding `max-width: 800px` on `.step-body` or reducing the overall container to `1000px`. --- ## 5. Component Quality ### Gap Cards ✅ (Mostly good) Clean, clear differentiation between "What" and "So What." The connector element is a nice touch. The `gap-card-brand` subtitle ("Social listening + social media management" / "Strategic action") adds useful context. **Issue:** The "So What" card has 5 items vs. the "What" card's 6. This means the cards don't align in height (no `align-items: stretch` effect is visible since both are `1fr`). On desktop they'll be slightly mismatched. Minor but noticeable. **Fix:** Either add a 6th item to the "So What" card or set `min-height` to equalize. ### Stats Grid ✅ (Good structure, weak presence) 4-column grid, centered text, Larken numbers. Functionally correct. But the `40px` number size and `40px 20px` padding make these feel small and boxed-in. They should be the most impressive visual element on the page. **Fix:** Increase number size to `56px`. Remove the border box — let the numbers breathe on an open grid without card frames. Or if keeping borders, increase padding to `48px 24px`. ### Work Cards ⚠️ (Risky) The first card spans full width (`grid-column: 1 / -1`) with a `21:9` image aspect ratio, while the two below are `16:9`. This is a solid layout pattern. **Risk:** Images are loaded from `assets/work-lobster.jpg`, `assets/work-whitespace.jpg`, `assets/work-phat.jpg`. If any of these are missing or broken, the section collapses. No `background-color` fallback on the image containers. **Fix:** Add a `background: #f5f5f5` on `.work-card` as a loading/fallback state. ### Pipeline Visualization ⚠️ (Redundant) As noted: two representations of the same 5-step pipeline. The vertical timeline is the stronger component — it has rich detail cards, hover interactions, and clear progression. The horizontal infographic below it is a simplified duplicate that adds length without adding information. **Kill the infographic.** It weakens the pipeline section. ### CTAs ✅ (Correct) Primary (red) and ghost (bordered) button pair. Proper sizing, proper hover states, arrow animation on hover. The button system matches CE standards. --- ## 6. Responsive Concerns ### Good - Three breakpoints: `1024px`, `768px`, `480px`. Covers tablet, mobile, small mobile. - Gap grid stacks to single column at 1024px with horizontal connector. - Pipeline steps stack to single column at 768px, pipeline line hidden. - Stats grid: 4 → 2 → 1 columns across breakpoints. - Nav links hidden at 768px (though no hamburger menu — could be intentional for a landing page). - `prefers-reduced-motion` respected — reveals disabled. ### Broken **No hamburger/mobile nav.** Nav links are `display: none` at 768px with no alternative. The "Get Started" CTA disappears on mobile. The user has to scroll to the bottom CTA to take action. **Fix:** At minimum, keep the nav CTA visible on mobile. Either a sticky mobile CTA bar or a simplified mobile nav. **Hero buttons stack to full-width at 480px.** `flex-direction: column` + `width: 100%`. This is fine for the primary CTA but the ghost "See the pipeline" button at full width looks oversized and creates a 100px+ button stack. **Fix:** Consider keeping ghost button as inline or reducing its padding on mobile. **Infographic phase items wrap awkwardly.** At 1024px: 3 per row (with arrows hidden). At 768px: 2 per row. At 480px: 1. The wrapping at 2-per-row creates an orphaned 5th item centered alone. **Fix:** Another reason to remove the infographic entirely. **Work card images have no `max-height` constraint.** On very wide tablets (1024px viewport, no breakpoint hit), the 21:9 hero image could be tall. Not critical but worth a `max-height: 400px` on `.work-card-img`. **Container padding drops to 24px on mobile.** This is tight for the amount of content. Consider `28px` or `32px` minimum. --- ## 7. Brand Consistency ### Does it feel like curiousendeavor.com? **Partially.** The typography, color, and overall restraint are CE-aligned. The fonts are correct. The red is correct. The white backgrounds are correct. But the *energy* is different. The CE main site is **minimal to the point of mystique** — a centered logo, hidden easter eggs, vast whitespace. It says "we don't need to explain ourselves." This Brandwatch page is a **dense, long-scroll SaaS partnership page** with 10+ sections, repeated messaging, client logos, stats grids, and dual pipeline visualizations. It's trying too hard. It reads more like a HubSpot partner page than a CE production. ### Specific inconsistencies: 1. **"Curious Value" branding in nav.** The nav brand says "Curious Value" with a red square mark, but CE uses a text logo ("curious endeavor." in lowercase Larken). This sub-brand doesn't appear anywhere on the main CE site. It creates brand confusion. **Fix:** Either use the CE logo/wordmark with "× Brandwatch" appended, or establish "Curious Value" more clearly as a named product line. 2. **Section borders.** Every section has `border-bottom: 1px solid #eee`. The CE site doesn't use horizontal rules between sections — it uses whitespace. These borders make the page feel segmented and template-y. **Fix:** Remove most section borders. Use whitespace and background color shifts to separate sections instead. 3. **The logo treatment.** The red square with "C" (`nav-brand-mark`) is not the CE logo. CE uses the lowercase text wordmark. Introducing a new mark for a sub-page creates fragmentation. **Fix:** Use the actual CE logo and append the partnership context. 4. **Footer says "Curious Value — A Curious Endeavor product."** This implies Curious Value is a separate entity. If it is, that needs to be established above the fold. If it isn't, this is confusing. **Fix:** Clarify the relationship in the first 5 seconds of the page. --- ## Summary — Priority Fixes | Priority | Issue | Fix | |----------|-------|-----| | 🔴 P0 | Duplicate pipeline visualization | Remove the horizontal infographic entirely | | 🔴 P0 | No mobile CTA access | Keep "Get Started" CTA visible on mobile nav | | 🟡 P1 | Monotonous section rhythm | Increase padding, alternate backgrounds, vary visual weight | | 🟡 P1 | Brand identity confusion (Curious Value vs CE) | Clarify sub-brand relationship or use CE identity | | 🟡 P1 | Display type too small | Bump hero/CTA headings to 56–60px | | 🟡 P1 | Stats section lacks impact | Larger numbers, remove card borders, differentiate background | | 🟡 P1 | Section borders create template feel | Replace with whitespace + subtle bg shifts | | 🟢 P2 | Red overused on labels | Reserve red for CTAs and primary labels only | | 🟢 P2 | Partner names as plain text | Use logo SVGs or style as wordmarks | | 🟢 P2 | Work card image fallback | Add background-color on card containers | | 🟢 P2 | Body text size inconsistency (14px vs 15px) | Unify to 15px | --- *The bones are good. The type system is correct, the color palette is CE, and the layout patterns are sound. But the page needs to breathe more, repeat less, and decide whether it's a CE page or a Curious Value page. Right now it's neither confidently enough.* — Jessica