# Foxie UI prototype — version 2 (HubSpot-aligned) A second layout version of the account-intelligence prototype, restyled to match HubSpot's 2026 product UI. It is a **guideline artefact for the future Foxie UI**, not shipped code. - **Source of the structure:** `foxie-analysis-roadmap/prototype` (v1, untouched). - **Source of the style:** `packages/data-sync/docs/hubspot-benchmark/brand-reference` — 11 captures of HubSpot's redesigned product UI, portal 7559762, 2026-08-20. Open `index.html` for the gallery of all 57 pages. ## What changed, and what deliberately did not **Did not change.** Information architecture, page inventory, section order, the content of every screen. v2 is the same product, re-skinned. **Changed.** Everything visual, plus the frame: | v1 | v2 | |---|---| | Three different page frames (56px icon rail / 220px light sidebar / bare centred page) | One dark application shell — global top bar + 236px labelled left nav — injected by `assets/shell.js` | | Inter, warm cream canvas (`#FAFAF7`, `#f7f6f2`) | Lexend Deca (HubSpot Sans's own fallback), neutral `#f0f0f0` canvas | | Per-page CSS, ~500-line shared sheet, colours re-declared page by page | One token file, `assets/foxie-hs.css`, that the legacy class vocabulary now resolves through | | Mixed radii (4 / 5 / 7 / 8 / 12px), inconsistent shadows | 16px containers, 6px controls, pill buttons, one card shadow | | Uppercase letter-spaced micro-labels | Sentence-case 12px/500 grey labels | | ~380 text glyphs used as icons | Inline SVG, 1.6px stroke, `currentColor` | | Bare `` in a card | HubSpot list anatomy — in-card search, control row, checkbox and caret columns, pagination footer | | Bold 700 headings | 500 weight throughout, 20px page titles | | Colour doing two jobs (green as both "good" and "clickable") | Teal `#006162` reserved for interaction; a separate hue set for status | | 11 pages were headless HTML fragments with no `` | All pages are complete documents | ## Layout ``` prototype-v2/ ├── index.html # gallery / entry point ├── assets/ │ ├── foxie-hs.css # the design system — tokens + every component │ └── shell.js # the shared top bar + left navigation ├── dashboard/ # the application pages │ ├── customers/ # account records │ ├── owners/ # owner records │ └── experts/ # expert records └── wireframes/ # the earlier source-attribution studies ``` Pages are static and open straight from the filesystem — no build, no server. ## The design system `assets/foxie-hs.css` is the single place to change anything. Its tokens were read off the benchmark's **computed styles** rather than estimated from screenshots: ``` text #141414 / #333 / #666 / #8a8a8a border #cccccc, subtle #e6e6e6 surface #ffffff card, #f0f0f0 canvas, #333333 shell interaction #006162 link, #00494b primary button status good #009a71 · watch #d39913 · risk #d9002b · info #016de1 type body 14/400, card title 16/500, page title 20/500 card 1px #ccc, radius 16, shadow 0 1px 8px rgba(20,20,20,.08) button pill, h32, 12px, pad 0 16 table th 12/500 #666 · row 40px, padding 2px 24px · 1px #ccc separators · teal name column ``` The file keeps the v1 class names (`.card`, `.kpi`, `.clients`, `.pill`, `.btn`, `.tab`, …) and re-expresses them, so page markup carried over unchanged. ## Known scope Prototype defects found during the restyle — places where the v1 layout was broken or unfinished rather than merely dated — were repaired rather than faithfully reproduced. They are listed in `RESTYLE-NOTES.md`.