# Restyle notes — what was wrong, and what was repaired Companion to `README.md`. This is the honest record of the transformation: how it was done, what the v1 prototype actually got wrong (as opposed to merely got old), and where v2 still falls short of the benchmark. --- ## How the transformation was run 1. **Tokens were measured, not estimated.** The HubSpot palette, type scale, control geometry and table anatomy were pulled from the *computed styles* of the live captures in `packages/data-sync/docs/hubspot-benchmark/brand-reference/`, driven through headless Chrome — not read off screenshots. 2. **The frame was unified first.** v1 carried three different page frames. `assets/shell.js` replaces all three with one dark top bar + 236px left navigation, built once and injected into every page. 3. **The shared class vocabulary was re-expressed, not replaced.** `assets/foxie-hs.css` keeps v1's class names (`.card`, `.kpi`, `.clients`, `.pill`, `.btn`, `.tab`, `.status-pill-tbl`, …) so page markup survived; only their values changed. 4. **Codemods did the mechanical work.** Palette mapping, grey-snapping onto the neutral ramp, font normalisation, weight and radius snapping, uppercase removal — applied across the set so that 57 pages could not drift apart by hand. 5. **Every page was verified by rendering it and looking at it.** No page was signed off on the basis of reading its code. Pages were screenshotted in real Chrome at 1680×1050 and reviewed as images, then iterated on. 6. **An independent reviewer scored the result against the benchmark** and its findings were applied centrally (`foxie-hs.css` §31). --- ## Defects in the v1 prototype These are places where v1 was **broken or unfinished**, not merely dated. They were repaired rather than faithfully reproduced. ### Structural - **11 pages were headless HTML fragments** — no ``, `` or `` (`experts.html`, all six `customers/*`, `owners/owner`, all three `experts/*`). They loaded no fonts and no shared stylesheet, so they rendered in the browser's default face. → wrapped in real documents. - **Three incompatible page frames** — a 56px icon rail, a 220px light sidebar, and a bare centred `.page`. Pages in different families could not share a navigation. - **`review.html` was a `position:fixed; inset:14px` overlay** over a `#45433e` body. As a navigation destination it covered the entire viewport, top bar and left nav included. - **`quick-launch.html` was a fixed dark scrim and a floating panel over a fake skeleton "Automations" screen** — which carried its own duplicate 160px sidebar and brand block. - **`launch-redesign.html` painted a fake host page** (top bar + grey skeleton blocks) behind its dialog — double chrome once a real shell exists. - **`crm.html` had a nested scroll trap** (`.app { height:100vh; overflow:hidden }` with an inner `overflow-y:auto`), so the page could not scroll inside the shell. - **`my-clients.html` redeclared the entire legacy `:root` token set**, silently overriding the shared stylesheet for that page alone. - **`emails-*.html` set their own body background and padding**, double-padding inside the content plate. - **All 8 wireframes put their `