# Brand Coherence Audit — BRAND.md

Read-only judgment of whether Goal Prompts reads as **one deliberate thing**
across logo, favicon, OG cards, icons, illustration, and graphic DNA — judged
from what ships in `template.html`, `build.py`, `studio.html`, `vitals.html`,
`scripts/og.py`, and the asset dirs (`icons/`, `og/`), not from any brand deck.

**Headline:** the identity is genuinely coherent where it counts — a
developer-native, terminal-toned look with a real ownable signature (the
family-color **bar motif** and the **`→ REPORT.md`** deliverable glyph running
from logo → hero spectrum → card borders → OG cards). It drifts in the
mechanical seams: a corner-radius token that's **12px on the marketing pages
and 10px on the tools**, a logo that's **24px here / 22px there**, a **"GP" tab
icon that shares nothing with the bar logo**, and **OG cards rendered in DejaVu
instead of the site's Archivo/Plex**. Consistency beats beauty — these are
unify/define fixes, not redesigns.

> **Backlog reconciliation (2026-07-09).** Most of this audit was resolved by the
> brand redesign that followed it. Dispositions: **B1** (tab icon ≠ bar mark) —
> **DONE**: the favicon is now the 4-bar mark (same geometry as `BRAND_MARK`).
> **B2** (`--radius` 12 vs 10 split) — **DONE**: radius is one token in
> `tokens.css`, shared by all four surfaces. **B3** (OG cards in DejaVu) —
> **DONE**: `scripts/og.py` now renders in Schibsted Grotesk + IBM Plex.
> **B4** (radius sprawl) — **DONE**: a `--r-sm / --r-md / --r-pill` scale now
> exists. **B5** (logo 24 vs 22 drift) — **FIXED** this pass: the Studio/Vitals
> top-nav marks were bumped 22→24 to match nav/detail. **B6** (no chosen icon
> set) — **DEFERRED**: the Unicode-glyph language is documented in `CLAUDE.md`;
> blessing or replacing it is a design decision. See `FIXLOG.md`.

---

## 1 · The identity, as shipped (one honest paragraph)

Goal Prompts ships as a **dark, IDE-flavored catalog for developers**: an
ink-black surface (`--ink #14181E`), monospaced labels and filenames
(IBM Plex Mono), a four-bar equalizer mark whose colors are drawn straight from
a 17-family color taxonomy, and a recurring **`→ FILENAME.md`** motif that
literally renders the thing you get. The tone — severity chips, "evidence not
vibes," `curl | sh`, `.md` reports at your repo root — matches the copy's claim
("turn your agent into a *senior code auditor*") tightly: it looks technical,
rigorous, and command-line-native, and it means to. It reads as **one product**
about 90% of the time; the other 10% is small mechanical drift between the
marketing pages and the two standalone tools, and between the live site and its
generated share images.

---

## 2 · Asset census

| Asset | Where / count | Source | Drift |
|---|---|---|---|
| Wordmark + **bar mark** (4 rects, amber/green/blue/purple, `rx1.7`) | inline SVG on 4 surfaces (`BRAND_MARK` `build.py:300`; `template:326`, `studio:188`, `vitals:95`) | hand-authored SVG, `viewBox 0 0 24 24` | **24px** w/ `.mark` class on landing+detail vs **22px** without it on Studio+Vitals |
| **Favicon** — "GP" monogram, amber text on dark square (`rx13`) | data-URI SVG on all 4 surfaces (`FAVICON` `build.py:307`) | hand-authored | internally consistent, but **unrelated to the bar mark** |
| PWA icons | `icons/icon-192.png`, `icon-512.png` (raster) | raster | mark **unverifiable from source** — must be pinned to one canonical mark |
| Default OG | `og.png` (root); used by landing, Studio, playbooks | raster | one static card |
| Per-brief OG | generated by `scripts/og.py` → family-color left bar + big mono id + title + `FAMILY -> OUTPUT.md · domain` | Pillow | **renders in DejaVu Sans / DejaVu Mono, not Archivo/Plex** (`og.py:57–90`); uses ASCII `->` not the site's `→` |
| Search icon | one inline stroke SVG magnifier (`template:467`) | hand-authored | the **only** functional UI icon |
| UI "icons" | Unicode glyphs `→ ▸ ✓ × ↗` (`content:"→ "` ×5, `✓` ×2, chevrons) | system/mono font | render varies by OS/font; no chosen icon set |
| Hero illustration | `.art`/`.report` "BUGS.md" mockups (CSS/HTML) | in-code | on-brand — mirrors the real report shape |

---

## 3 · Findings (ranked by user-facing visibility)

### B1 — The tab/app icon and the logo are two different identities *(most-seen)*
Every header shows the **4-bar equalizer**; every browser tab shows a **"GP"
monogram** (`FAVICON`, `build.py:307`). They share a background color and
nothing else — no bars, no shape language. The favicon and PWA icons
(`icons/icon-192/512.png`) are the single most-viewed brand touchpoint
(tabs, bookmarks, installed-app, home screen), and they don't echo the mark
users see on the site. **Unify:** rebuild the favicon + PWA icons from the bar
mark (or a 1–2 bar reduction of it) so tab and header agree.

### B2 — `--radius` is 12px on marketing, 10px on tools *(systemic, whole-surface)*
`--radius:12px` (`template.html:32`, `build.py:323`) vs `--radius:10px`
(`studio.html:31`, `vitals.html:29`). Because nearly every card, button, panel,
and input uses `var(--radius)` (×23), **every rounded corner on Studio and
Vitals is 2px sharper** than the same component on the landing and detail
pages. It's invisible per-element and obvious side-by-side — the tools feel
subtly like a different product. **Unify:** one `--radius` value everywhere.

### B3 — OG cards render in the wrong typefaces
`scripts/og.py` draws share cards with `DejaVuSans-Bold` / `DejaVuSansMono`
(`og.py:63–90`) — PIL's bundled fonts — while the site ships **Archivo +
IBM Plex Mono**. So the first impression on Twitter/Slack/LinkedIn is set in
fonts the site never uses, and the same card swaps the brand's `→` for an ASCII
`->`. The card *composition* is beautifully on-brand (family bar, mono id,
`FAMILY -> OUTPUT.md`); only the fonts betray it. **Unify:** point `og.py` at
`fonts/archivo-latin-var.woff2`-equivalent TTFs and use `→`.

### B4 — Radius sprawl: ~12 distinct corner radii, buttons included
`3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16px` + `999px` + `50%`. Even the button
family disagrees: `.btn` `10px`, `.nav-cta` `9px`, `.copy`/`.iconbtn`/`.cc`
`8px`. There's no rounding *signature* — a look is partly a consistent radius,
and this one is a smear. **Unify:** a 3-step radius set (`sm 8` / `md 12` /
`pill 999` + `50%` for dots) mapped over all values.

### B5 — Logo size/markup drift (minor)
The mark is `24×24` with the `.mark` class (`flex:none`) on landing+detail but
`22×22` **without** `.mark` on Studio+Vitals (§2). Same geometry, inconsistent
render size and flex behavior. **Unify:** one `BRAND_MARK` include on all four
surfaces (Studio/Vitals currently hand-copy their own `<svg>`).

### B6 — No icon set was ever chosen (define gap)
One SVG icon (search) + Unicode glyphs (`→ ▸ ✓ × ↗`) carry the whole UI. For a
terminal-aesthetic dev tool this is *defensible* and even on-brand — but the
glyphs render differently across OS/fonts, and there's no defined set to grow
into. **Define:** either bless the Unicode set explicitly (document the exact
glyphs + a mono fallback) or adopt one lightweight stroke set matched to the
search icon's weight. Don't add a second icon style ad hoc.

### What's already coherent (protect it)
- **The bar motif is a real ownable through-line:** nav logo (4 bars) → hero
  `.spectrum` (17 bars, `template:347`) → every card's `border-left:3px`
  family color → OG card's left bar (`og.py:61`) → the 17-family palette. Swap
  the wordmark and this still identifies the product. **This is the brand's
  best asset — keep everything pointed at it.**
- **The `→ REPORT.md` motif** (`.out::before`, `.fname::before`, OG footer) is
  distinctive and states the value prop in one glyph. Ownable.
- **Shadow DNA is a single signature** — 3 shadows, all
  `0 20–30px 50–70px -30–40px rgba(0,0,0,.8–.9)`, used sparingly on report
  mockups; elevation is otherwise borders + surface tint. Coherent and
  restrained.
- **Gradient DNA** — subtle panel linears + accent-colored hero radial glows —
  is consistent across surfaces.
- **Personality match is strong:** dark/mono/terminal tone ↔ "senior code
  auditor / evidence not vibes" copy. No tonal whiplash.

---

## 4 · The coherence kit (the decisions that make it one thing)

1. **One mark, everywhere.** Rebuild favicon + `icons/*.png` from the bar mark
   so tab, home-screen, and header agree (B1). Retire the standalone "GP"
   monogram or make it a bar-derived lockup.
2. **One `--radius`.** Pick 12 (or 10) and set it in all four `:root`s (B2).
3. **A 3-step radius scale** (`--r-sm 8 / --r-md 12 / --r-pill 999` + `50%`),
   mapped over the ~12 current values (B4); align the button family to one.
4. **OG in brand fonts.** Ship Archivo + Plex TTFs to `og.py`; use `→` (B3).
5. **One `BRAND_MARK` include** consumed by Studio/Vitals too — kill the
   hand-copied `<svg>` variants and the 24/22 size split (B5).
6. **Bless the icon language** (B6): document the Unicode glyph set + mono
   fallback, or adopt one stroke set at the search icon's weight — pick one,
   write it down, don't mix.
7. **Codify the two ownable signatures** — the **family bar** and the
   **`→ FILE.md`** motif — as named, protected brand elements so future
   surfaces (emails, sponsored playbooks, partner lockups) inherit them instead
   of reinventing a look.

Ranked by surface area: **B1 (favicon/app icon)** and **B2 (radius)** touch the
most eyeballs for the least work; **B3 (OG fonts)** fixes every social preview;
the rest is consolidation.

---

*Report only — judged from shipped files, nothing edited. The two highest-
visibility, lowest-effort fixes are **B1** (make the tab icon echo the bar
logo) and **B2** (one `--radius` across all four surfaces). **Which fixes
should I make?***