feat(web): self-host IBM Plex fonts and premium motion polish

[madara88645]

What

Small, layout-preserving UI polish for the web app — only fonts and motion changed. Layout, colors, component structure, and behavior are untouched.

Fonts

• Self-host IBM Plex Sans (400/500/600/700) + IBM Plex Mono (400/500) as local woff2 under web/public/fonts/, wired via @font-face. No remote/CDN fetch, so the app stays offline-deterministic.
• IBM Plex is primary; the previous Segoe UI / Cascadia Code stacks remain as fallbacks.

Motion

• Enrich the shared animations with a premium easing curve (cubic-bezier(.22, 1, .36, 1)) and soften the springy keyframes.
• Add motion where it was missing: tab-panel fades, readiness-banner slide-in, policy-badge fade, security-modal scale-in, sidebar active-rail slide, and a typewriter entrance for the "try an example" prompt (~0.65s, length-independent, cancels on manual edit).
• Add a prefers-reduced-motion guard so all of the above is disabled for users who ask for reduced motion.

Test

• Update the font guard test to assert self-hosted fonts (no remote fetch) with IBM Plex primary and local fallbacks. The offline guarantee is preserved and strengthened.

Verification

• npm run build ✓ (27 routes compiled)
• npm run test ✓ (152 vitest) + font guard ✓ (3 node:test)

Not touched

Layout, colors, component structure/behavior, dependencies / package-lock, .env.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
compiler	Ready	Preview, Comment	Jul 2, 2026 5:33pm

[cursor]

PR Risk Assessment — Low

Decision: Approve (no additional reviewers required)

---

Evidence-based scope (from diff only)

Area	Finding
Files	14 changed — all under web/ plus a .gitignore entry for .superpowers/
Backend / API	None
Auth / billing / permissions	None
Infra / deploy config	None
Dependencies	No package.json or lockfile changes
Data / schema	None

What changed

1. Fonts — Self-hosted IBM Plex Sans/Mono via local @font-face rules and six woff2 assets under web/public/fonts/. Font stacks updated in globals.css; existing system fallbacks retained. Font guard tests updated to assert no remote/CDN fetch.
2. Motion — CSS easing/animation tuning, new utility classes (animate-scale-in), and animation class additions on a handful of components (PolicyBadge, ReadinessBanner, SecurityAlert, Sidebar, tab panels). Global prefers-reduced-motion: reduce guard added.
3. Example prompt UX — Small typewriter effect on the "try an example" button in page.tsx with interval cleanup, manual-edit cancellation, and reduced-motion fallback.

Risk rationale

• Blast radius: Limited to frontend presentation; compile logic, API calls, and security flows are untouched.
• Complexity: Straightforward CSS + one isolated client-side animation helper; easy to reason about and rollback.
• User impact: Cosmetic polish on an existing surface; no layout or structural changes observed in the diff.
• Operational risk: Low — binary font assets are static public files; GitGuardian check passed.

This does not meet Medium thresholds (shared services, auth, cross-system behavioral changes, or significant primary-journey UX overhaul).

Reviewer assignment

• Reviewers requested: 0 (not required at Low risk)
• CODEOWNERS: None configured in this repository
• Existing reviewer count: 0 (< 2)

Approval

Approved per policy: Low risk PRs may be self-approved. No prior approval on this PR; no re-approval conflict.

---

  

_{Sent by Cursor Automation: Assign PR reviewers}