svsmspcalc/CLAUDE-nextsteps.md

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."