# Anton's Critique — Notion Brand Brief Page
**Date:** 2026-03-20  
**Page:** https://staging.curiousendeavor.com/notion-brief-test/brief.html  
**Verdict:** NOT ready to show a client.

---

## CRITICAL ISSUES (fix immediately)

### C1 — Client Identity Leak in Back Navigation
**Location:** Top nav bar, both back-bar links + footer  
**Problem:** Both "← Competition Hub" links go to `../../etoro-portal/`. This is a Notion brand brief. The navigation exposes that CE is doing competitive intelligence work for **eToro** — a fintech trading platform that has nothing to do with Notion. Any Notion contact, agency partner, or prospect visiting this staging URL can see that CE's client in this category is eToro.  
**Severity:** CRITICAL  
**Fix:** Change `href="../../etoro-portal/"` to a neutral placeholder (`href="#"` or `/competition-hub/`) until the eToro association is either intentional and approved, or removed.

---

### C2 — CSS Source Code Branded for eToro
**Location:** `assets/brief-page.css`, line 3–4  
**Problem:** The shared stylesheet opens with: *"Shared stylesheet for the eToro Competition Brief view format."* It also has example comments citing "Cash App" as the brand model. This is visible to anyone who opens browser dev tools. A thorough client, agency contact, or journalist can see this in 5 seconds.  
**Severity:** CRITICAL  
**Fix:** Strip the CSS comment header. Replace with a generic description: *"Brief page shared stylesheet. Set CSS custom properties per brand."* Remove all client-name references from comments.

---

### C3 — Wrong Image: §12 Audience Card Shows Production Deck Screengrab
**Location:** §12 Audience, card image  
**Problem:** `instrument-fylw-02.jpg` is being used with alt text "Notion — live campaign photography, real person using Notion." It is NOT live campaign photography. It is a **multi-slide production deck screenshot** showing storyboards, Temescal/Oakland location scouting notes, prop lists (toddler plates, Montessori toys, "World's best dad" mug), and furniture specifications. At card scale this reads as a beige rectangle of illegible text. Critically, the content is from an internal production document — it should not be visible in a client-facing deliverable.  
**Severity:** CRITICAL  
**Fix:** Replace with `instrument-fylw-07.png` (NYC subway "For Your Life's Work" ad — perfect editorial quality, 5/5 impact) or `instrument-fylw-04.png` (creative director on location — readable portrait that communicates "real person").

---

### C4 — `[Client]` Placeholder Text Showing on Page
**Location:** §08 Strategic Verdict card title & body; §13 card title & body; §07 Assessment body; TL;DR verdict  
**Problem:** The literal strings `[Client]` appear throughout — in a card title ("Notion vs [Client]"), in the strategic verdict bullet copy ("→ [Client] wins with opinionated defaults"), in the Borrow/Watch/Reject section ("what it means for [Client]"). These are visible when cards are expanded. If this page is shown to any external party — a prospect, an agency partner, a Notion contact — it immediately signals that this is a generic template that hasn't been filled in for a specific client.  
**Severity:** CRITICAL  
**Fix:** Either (a) replace `[Client]` with the actual client name throughout, or (b) replace with an obvious editorial label like `Your Brand` or `[etoro]` (whatever the client is) before any external sharing.

---

## MAJOR ISSUES (significant quality impact)

### M1 — §04–05 Color & Typography: Wrong Image for the Section
**Location:** §04-05 Color & Typography card image  
**Problem:** `buck-vi-10.png` shows **character design pencil sketches** — six figures in rough graphite, with no color, no type specimen, no palette. This is the image for a section specifically about Notion's color system and typography. The mismatch is jarring. The image contradicts the section content. A client expanding this card would see rough pencil sketches and then read about cobalt blue, golden yellow, and Inter vs. Signifier.  
**Severity:** MAJOR  
**Fix:** Replace with one of the brand palette spreads. `buck-vi-06.png` (OOH with bold cobalt + yellow) is available and shows the color system in deployment. Alternatively, find or create a simple flat swatch + type specimen card.

---

### M2 — §07 Assessment: Rough Doodle Used as Editorial Anchor
**Location:** §07 Assessment card image  
**Problem:** `buck-vi-16.png` is a black-and-white line drawing — a rough, draft-quality sketch of abstract tools/objects in a cloud shape. The lines are inconsistent, resolution is low, and the composition has no focal point. At card height (180px), it becomes an unreadable blob. The Assessment section carries the most analytical weight on the right column — the image should command attention and signal authority. This signals "we couldn't find a real image."  
**Severity:** MAJOR  
**Fix:** Replace with `notion-blog-11.jpg` — a Paris street-level Notion OOH ad (5/5 editorial quality: atmospheric, cinematic, shows global scale). Or use `instrument-fylw-07.png` if not already used elsewhere.

---

### M3 — §08 Strategic Verdict: Character Sheet with Production Annotations
**Location:** §08 Strategic Verdict card image  
**Problem:** `buck-vi-11.png` is a **character design reference sheet** — six illustrated characters in horizontal lineup, with visible pink guideline rules and point-size annotations ("19pt," "30pt"). These production file artifacts are visible. It's meant to be a brand output but reads as an internal file. The Strategic Verdict is the highest-stakes analytical section — it should have the strongest visual gravitas. A character lineup sheet with measurement guides is the wrong register entirely.  
**Severity:** MAJOR  
**Fix:** Replace with a single strong OOH image — `notion-blog-11.jpg` (Paris Notion ad) or a clean, isolated illustration from the BUCK system. The image should communicate *resolution* and *scale*, not *process*.

---

### M4 — §13 vs [Client]: Off-Brand "Selfie with Cartoon Faces" Image
**Location:** §13 Notion vs [Client] card image  
**Problem:** `buck-faces-15.png` is a group selfie photo in front of an Indian temple where each person's face has been replaced with a Notion-style illustrated cartoon face, wrapped in a green border with balloon doodles. This reads as social media fan content or internal team fun. It has no relationship to competitive analysis. The green border's design language doesn't match the Notion brand system. It looks casual and rough.  
**Severity:** MAJOR  
**Fix:** Replace with `buck-vi-21.png` — wait, check this first (it appears to be non-Notion content). Better option: `ooh-01.jpg` cropped tightly to the Notion gate takeover, or a clean brand identity asset. The card is about structural vulnerabilities and competitive positioning — it needs a clean, assertive image.

---

### M5 — Hero Image Crops Badly at Most Viewport Sizes
**Location:** Hero block, `buck-vi-03.jpg`  
**Problem:** The London Underground ticket gate photo is busy: departure boards, red walls, ceiling tiles, fluorescent lighting, and the repeated gate wraps all compete. At 520px fixed height on a wide viewport, the center crops to an area of visual noise with no clear focal point. The Notion branding on the gates becomes illegible at most reading distances. It's a fine photo at 1920px but weak as a hero at standard responsive widths.  
**Severity:** MAJOR  
**Fix:** Swap to the OOH billboard photo (`notion-blog-05.png`) as hero — it has a clean sky, single focal point, and the billboard readable copy creates instant brand communication. The tube gates are better served as a card image inside §11 Campaigns where context explains the takeover scale.

---

### M6 — Critical Images Skipped: instrument-fylw-07.png and notion-blog-11.jpg
**Location:** Image library — not used anywhere in the HTML  
**Problem:** Two of the strongest images in the entire library are completely unused:
- `instrument-fylw-07.png` — NYC subway "For Your Life's Work" ad in situ. A beautiful editorial photograph showing the 2022 Instrument campaign in a real NYC subway car. Clean serif type, Notion product UI floating on cream, real environmental context. This is 5/5 card-quality material.
- `notion-blog-11.jpg` — Paris street-level "Outil centralisé" OOH ad. Cinematic, atmospheric, motion blur on passing car, Haussmann architecture. Signals international scale and local nuance simultaneously. Also 5/5.

Both are stronger than multiple images currently used. Both have been left out entirely.  
**Severity:** MAJOR  
**Fix:** `instrument-fylw-07.png` → use for §12 Audience (replace the production deck disaster) or §03 Brand Evolution (shows 2022 campaign in world). `notion-blog-11.jpg` → use for §07 Assessment (replace the doodle) or §11 Campaigns (replace the repetitive OOH crop).

---

### M7 — Typography Section Fakes Notion's Display Typeface
**Location:** §04-05 Color & Typography, Typography subsection  
**Problem:** The HTML renders "Think it. Make it." in `font-family: Georgia, serif` — a placeholder fallback. Notion's actual campaign typeface is **Signifier** (or a similar high-contrast optical serif). Georgia is a screen font with zero relationship to Notion's brand. A client will look at this, see Georgia, and form a completely inaccurate impression of Notion's typographic identity. The brief explicitly states "Signifier or similar display typeface" — and then demonstrates Georgia. This is contradictory and misleading.  
**Severity:** MAJOR  
**Fix:** Either (a) load Signifier via a licensed CDN or self-host it in the brief assets, or (b) use the closest Google Fonts alternative with acknowledged caveat text (*"Display face approximated — Notion uses licensed Signifier"*), or (c) show a screenshot of actual Notion campaign headlines from assets rather than trying to render it in-browser. Option (c) is cleanest if licensing is an issue.

---

### M8 — §10 Social Strategy YouTube Handle Likely Wrong
**Location:** §10 Social Strategy, YouTube section  
**Problem:** The section attributes YouTube to `@TheNotionWay` — which is a community/fan channel, not Notion's official YouTube. Notion's official channel is `@Notion`. The links in the social section correctly point to `https://www.youtube.com/@TheNotionWay` which does exist, but it should be labeled as "Community Channel" not as Notion's primary YouTube presence. The official `@Notion` channel should be the primary listing.  
**Severity:** MAJOR  
**Fix:** Audit Notion's actual official YouTube. Update label and href to the primary official channel. If `@TheNotionWay` is included, label it clearly as a secondary community channel.

---

### M9 — Instagram Grid Missing Posts 04–12 from Available Library
**Location:** §10 Social Strategy, Instagram grid (3-up)  
**Problem:** The grid shows only `web-ig-post-01.jpg`, `02.jpg`, `03.jpg`. The library has `web-ig-post-04.jpg` and `08.jpg` through `12.jpg` available — 7 additional posts. The current 3-up selection may not be the strongest 3 editorial posts. The grid communicates Notion's social content quality — it should feature the most visually distinctive posts, not just the first 3 grabbed.  
**Severity:** MAJOR  
**Fix:** Review all available IG posts (01–04, 07–12). Select the 3 that best illustrate the range of Notion's social strategy (one campaign illustration, one product feature, one community/culture post). Replace the current default selection.

---

## MINOR ISSUES (polish)

### m1 — §02 Positioning Alt Text is Wrong
**Location:** §02 Positioning card, `<img>` alt text  
**Problem:** Alt text reads "London Underground OOH takeover, cultural saturation at scale." The image `buck-vi-06.png` is an editorial illustration of a Notion horizontal scene — not the Underground takeover. The Underground takeover is `buck-vi-03.jpg` (the hero). Alt text mismatch creates accessibility issues and shows lack of editorial review.  
**Fix:** Update alt to accurately describe `buck-vi-06.png`'s actual content.

---

### m2 — YouTube Play Button Wrong Design
**Location:** §10 Social Strategy, YouTube thumbnail mock  
**Problem:** The play button is a red rounded-rectangle `background:red; border-radius:4px`. YouTube's actual logo/play button is a more specific shape. Minor but signals "we approximated" rather than "we know the brand system."  
**Fix:** Use an SVG of the actual YouTube play button mark, or use a CSS approach that matches the brand.

---

### m3 — "§10 Social Strategy" Stats Subtitle Inconsistent  
**Location:** §10 Social Strategy card subtitle  
**Problem:** Subtitle reads "@notionhq 430K · r/Notion 500K · Editorial, not promotional." This is fine, but the section heavily covers YouTube and TikTok too. The subtitle undersells the scope.  
**Fix:** "@notionhq 430K+ · r/Notion 500K+ · 4 platforms · Editorial-first strategy"

---

### m4 — Section Numbering Exposed Without Context
**Location:** All cards, `<span class="m-num">§02</span>` etc.  
**Problem:** The sections are labeled §01–§13 but are displayed in non-sequential order across the two columns. A viewer reading left column then right column sees: §02, §03, §04-05, §11, §01 / §09, §06, §10, §07, §08, §12, §13. The section numbers suggest a logical sequence that the mosaic layout actively breaks. This doesn't matter if the numbers are just identity labels — but it's confusing if a reader tries to navigate by number.  
**Fix:** Either make the mosaic order match the numerical sequence (rearrange cards), or drop the `§` numbering system and use purely named sections. The current hybrid is the worst of both.

---

### m5 — `buck-vi-21.png` and `buck-vi-22.png` May Be Wrong-Brand Assets
**Location:** Image library  
**Problem:** Visual analysis of `buck-vi-21.png` shows what appears to be a **fintech debit card product shot** on a green pillow — not a Notion asset. `buck-vi-22.png` shows what appears to be an **Eventbrite Instagram Story** on a phone. If these are BUCK agency portfolio assets from other clients that accidentally landed in the Notion library, they must be flagged and removed before they end up in any brief.  
**Severity:** MINOR (they're not currently used in HTML — but they're in the library being served from this directory)  
**Fix:** Audit both files visually. If confirmed non-Notion, move to `/assets/archive/wrong-brand/` and remove from the served directory.

---

### m6 — Scroll Progress Bar Covers Page Content on Mobile
**Location:** `.scroll-bar` (position: fixed; top: 0; height: 2px)  
**Problem:** Minor but on very small viewports the fixed top bar can overlap the back navigation. Low priority but worth a look at 375px width.  
**Fix:** Add `margin-top: 2px` to the back-bar container, or use `top: 2px` on the back-bar.

---

### m7 — `ooh-01.jpg` is Times Square, Not Notion OOH
**Location:** §11 Campaigns card image  
**Problem:** The image used as the card-level thumbnail for §11 Campaigns is `ooh-01.jpg` — which shows **Times Square at dusk** with generic brand signage (Swatch, LG, etc.) and no visible Notion branding. Some text appears mirrored (possible flipped image). It's a stock-tier NYC street photo with no editorial connection to Notion's OOH work. Wasted card hero real estate.  
**Fix:** Replace with `notion-blog-11.jpg` (Paris Notion ad, 5/5) or the London Underground gate crop from the hero image. The card needs to scream Notion campaign, not generic city advertising.

---

## IMAGE AUDIT

| Section | Current Image | Verdict | If Replace: Use |
|---------|--------------|---------|-----------------|
| Hero | `buck-vi-03.jpg` (London Underground gates) | REPLACE | `notion-blog-05.png` — billboard with sky, single focal point, clear brand text |
| §02 Positioning | `buck-vi-06.png` (illustration, horizontal) | KEEP with reservations | Works if cropped/contained; alt text needs fixing |
| §03 Brand Evolution | `notion-blog-05.png` (billboard OOH) | REPLACE (now used as hero) | `instrument-fylw-07.png` — NYC "For Your Life's Work" subway ad |
| §04-05 Color & Typography | `buck-vi-10.png` (pencil character sketches) | REPLACE IMMEDIATELY | Any image showing the BUCK campaign with cobalt/yellow/orange — `buck-vi-06.png` or `buck-vi-09.png` (if §02 gets a different image) |
| §11 Campaigns (card) | `ooh-01.jpg` (Times Square, no Notion branding) | REPLACE IMMEDIATELY | `notion-blog-11.jpg` (Paris Notion ad) |
| §01 Quick Facts | `web-product.png` (product UI screenshot) | KEEP | Appropriate for the section |
| §09 Brand Personality | `buck-vi-01.png` (character illustration pair) | KEEP | Solid, on-brand, works at card scale |
| §06 Layout & UX | `web-homepage.png` (homepage screenshot) | KEEP | Exactly right for this section |
| §10 Social | `web-ig-post-07.jpg` | KEEP | Strong IG post, editorial quality |
| §07 Assessment | `buck-vi-16.png` (rough doodle) | REPLACE IMMEDIATELY | `notion-blog-11.jpg` or `instrument-fylw-05.png` (BTS production monitors showing ARRI camera quality — signals brand ambition) |
| §08 Strategic Verdict | `buck-vi-11.png` (character sheet with guide rulers) | REPLACE | `buck-vi-02.png` (London Underground subway ad in situ) — already strong, was analyzed as best in set |
| §12 Audience | `instrument-fylw-02.jpg` (PRODUCTION DECK SCREENGRAB) | REPLACE IMMEDIATELY | `instrument-fylw-07.png` (NYC subway "For Your Life's Work" — real person context) |
| §13 vs [Client] | `buck-faces-15.png` (temple selfie with cartoon faces) | REPLACE | A clean, authoritative brand image. `ooh-02.jpg` cropped to just the core poster, or a direct comparison visual |
| Brand in Practice (preview) | `buck-vi-02.png`, `04.png`, `08.png` | KEEP | The 3-up preview works |

---

## MOTION OPPORTUNITIES MISSED

The library has a `/motion/` folder — it's **empty** (or unavailable). This is the biggest missed opportunity on the page. Notion's brand is built around *making* things — a static brief page for Notion specifically is a credibility gap.

**Where motion would change the page:**

1. **Hero block** — A short looping video (5–8 seconds, silent) of the BUCK animated characters building/creating would elevate this from "image of a tube station" to "the brand moving." BUCK's animated work is core to the 2024 campaign identity.

2. **§11 Campaigns card** — If a clip from the "Think it. Make it." brand film exists, autoplay muted in the card would demonstrate campaign craft in a way no screenshot can. The brand film is referenced in text but never shown.

3. **§09 Brand Personality** — Looping character animation (from BUCK's full campaign) would bring the brand's "playful rigor" to life in a way a static illustration doesn't.

4. **Brand in Practice section** — This would be ideal for a carousel or scroll-through of the full BUCK illustration system with subtle animation, rather than a static 3-up preview that expands to a grid.

**What to source:** Check BUCK's portfolio at buck.tv for the "Think it. Make it." brand film. The campaign video is publicly available on Notion's YouTube. Pull a 6-second loop from the opening sequence. The entire brief's visual argument — that Notion is a "creative act platform" — is undercut by a page with no motion whatsoever.

---

## TYPOGRAPHY VERDICT

**Does the typography reflect Notion's brand character? No.**

The page uses **Inter exclusively** — Notion's product/UI typeface. This is the right choice for body text and labels, and it's consistent. But it's half the brand picture. Notion's campaign identity is defined by the *contrast* between Inter (product) and a high-contrast display serif (Signifier) for headlines. That contrast — the serif/sans split that mirrors the two-palette strategy — is the entire typographic point of the brand.

**Specific failures:**

1. **Signifier never loads.** The page doesn't attempt to load it. `--font-display: 'Larken', Georgia` in the shared CSS is a different serif entirely — and Larken isn't loaded either. The display stack falls back to Georgia, which is wrong for Inter companion, wrong for Notion's brand, and wrong for the design brief as an argument.

2. **The typography demo in §04-05 shows Georgia.** The headline "Think it. Make it." renders in Georgia. This is specifically described in the section as demonstrating Notion's headline typeface. It doesn't. It demonstrates a web fallback from 1996.

3. **No weight contrast.** The page is entirely Inter 400/500/600. Notion's campaign uses dramatic weight differentials — thin light text next to very heavy display. The brief page feels tonally flat as a result.

4. **The brief's own headers should embody the brand.** The section name labels, the hero title, the TL;DR stat numbers — these should demonstrate typographic sophistication, not just competent use of a default sans-serif.

**What to fix:**
- Self-host or license Signifier for the typography demo section. If that's not possible, use a screenshot of actual Notion campaign headlines for that section's demo.
- Load **Playfair Display** or **Libre Baskerville** as a temporary visual substitute (with a note) — they're structurally closer to Signifier than Georgia.
- Apply the display serif to the hero H1 "Notion" and the section-level headers to demonstrate the campaign typographic system in practice.

---

## OVERALL VERDICT

This page is **not ready to show a client.** It has four critical issues that need to be fixed before any external sharing: the eToro identity leak in navigation and CSS comments, `[Client]` placeholder text showing throughout, and the §12 Audience card using a production deck screengrab as campaign photography. Beyond the critical issues, the image selection has serious problems — a rough doodle on the Assessment card, a character reference sheet with ruler annotations on the Strategic Verdict card, a Times Square stock photo for Campaigns, and two of the best images in the entire library (`instrument-fylw-07.png` and `notion-blog-11.jpg`) sitting unused while weaker assets fill the cards. The typography section actively misinforms about Notion's brand by rendering their campaign headline in Georgia. Fix the four critical issues first, then do the image swap pass (eight cards need new images), then address the typography demo. After that, it's defensible. Right now, it's not.