# Next Steps — SVS MSP Calculator **Updated:** 2026-03-18 **Purpose:** Resume guide for next session. --- ## Just Completed (2026-03-18, committed as 4c53af9) Sidebar UX polish pass: - Unified dividers → one `--sidebar-rule` token, dashed everywhere - Letter-spacing → `--text-spacing-money: 0.05em` token - Font floor → 11px minimum (6 locations bumped) - Contrast → muted colors darkened to 6.5:1+ on all themes - Opacity → removed from 9 double-muted text elements - Total line border → scoped to monthly breakdown only --- ## Next Session: Google Fonts + GUI Polish ### Step 1: Google Fonts Selection - **Approved:** up to 3 fonts (preferred), 4 hard cap - **Currently loaded:** Poppins (hero numbers), DM Mono (monospace values) - **Need:** A clean sans-serif for body text, labels, and UI copy - **Candidates to evaluate:** Inter, IBM Plex Sans, Source Sans 3, Outfit, or similar - **Approach:** Pick font → load from Google Fonts CDN → apply to body/labels → verify all 3 themes ### Step 2: GUI Polish List A - Contract Term pills — more vertical padding on unselected - Section card collapsed headers — slightly tight vertically - "MANAGED IT SERVICES (SECTIONS I, II, III)" label — low contrast - Insight carousel text — more line-height - "QUOTE NOTES" label spacing — inconsistent with other section labels ### Step 3: Typography Token Pass - Tokenize remaining hardcoded letter-spacing (~20 locations) - Tokenize hardcoded font-sizes - Move sidebar typography tokens from components.css → tokens.css - Phase 4: icon/button sizing tokens - Phase 6: responsive breakpoint font-sizes (optional) --- ## Tools Available — USE THEM | Tool | When | |------|------| | **Playwright MCP** | Visual verification across Dark/Light/Glass | | **accesslint** | Contrast checking on any color changes | | **superpowers** | Planning, parallel agents, TDD, debugging | | **context-mode** | Large output processing (>20 lines) | --- ## Resume Prompt Tell Claude: > "Read docs/SESSION-HANDOFF.md. Pick up at Google Fonts selection, then GUI polish list A."