mBR Logo Upgrade

Date: 2026-06-02 Repo: monorepo (ea90cfa) Status: Complete

What Changed

Transparent halo via SVG <mask> (white oval minus black cutout circle) — not a white <circle> stroke, which would show on non-white backgrounds
Gold dot: r=8 → r=6, center (94,17) flush at oval top-right corner
Glyph: 5% smaller — translate(32.41,-5.13) scale(1.0925) (was 1.15)
Pulse animation: scale(1.2) → scale(1.633) — dot expands to fill halo hole and touch oval edge at peak
Files: src/brand/mbr/logos/svg-paths-base/mbr-dollar-dot.svg (v3.0), mbr-dollar-dot-s.svg, packages/components/src/brand/BrandLogo.astro

Same mask/glyph/dot geometry as logo
favicon-16x16.svg: mask cutout r=9.8 → r=16 — at 16px display, 3.8-unit gap renders as 0.8px (sub-pixel invisible); r=16 gives 2.1px gap

Android / iPhone (180px): 60% scale on cream/white — dot top margin 114px (22.3%), matches SDC 22.5%
iPad Pro (167px) / iPad (152px): 72% scale — 17.4% / 17.1% margin; matches SDC’s per-iPad ratio

Added PWA_ICONS_MANAGED_EXTERNALLY = new Set(['mbr']) — pnpm favicon:mbr --site=mbr now skips android-chrome and apple-touch PNGs and prints reminder to run focus-icons script

docs/design/favicon.md: Android safe-zone math, per-platform scale table (Android/iPhone vs iPad), favicon-16x16 halo gap formula, SSOT warning
CLAUDE.md: deployment entry updated to web-deploy CLI

Decision	Choice	Reason
Halo implementation	SVG mask (transparent cutout)	White circle shows on non-white backgrounds
Dot size	r=6 (Panel C)	Balanced negative space; proportionally matches SDC
Glyph scale	1.0925 (5% smaller)	Maintains even negative space around halo
Android/iPhone PWA scale	60%	top_margin = 256 − 237.71s ≥ 87; max safe = 71%
iPad PWA scale	72%	iOS clips corners only; iPad renders larger on screen
SSOT fix	Remove PWA PNGs from favicon:mbr —site	Simpler/more robust than —skip-pwa flag

favicon-16x16 halo math: gap_px = (r_halo − r_dot) × (16 / viewBox_width). For mBR: 3.8 × 0.21 = 0.8px → sub-pixel. Use r=16 for the 16px favicon only.
Android safe zone hard limit for mBR: Never raise Android/iPhone scale above 71% — gold dot is flush at oval corner with only 3.57% SVG padding.
deploy.sh was missing execute permission in sites/mbr/ — fixed as part of this work.
Two scripts wrote the same PWA PNGs — fixed with PWA_ICONS_MANAGED_EXTERNALLY guard.