Session 33: Design system Phase A+B — tokens, fonts, glitch CSS, shared components (1792 tests)

VYNDR 2.0 design-system conversion, foundation only (pages/mobile/systems are
Sessions 34+). Frontend-only; zero backend changes.

Phase A: §2 token set + token-wired typography + Inter/JetBrains Mono fonts +
§4 glitch keyframes (ported verbatim from the prototype's vyndr.css) + scanline
texture + §10 a11y data-* layer in globals.css. Legacy alias block kept.

Phase B: web/src/lib/vyndrTokens.js (CommonJS helpers) + 9 shared components
under web/src/components/vyndr/ (Wordmark, GradeBadge, SportBadge, TerminalInput,
SectionHead, VBtn, Card, Sparkline, Ticker).

74 new design-system tests. Backend 1718 -> 1792, 141 suites, zero regressions.
Web build clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

BUILD-STATE.md

@@ -4,8 +4,86 @@
 2026-06-15
 
 ## Current Phase
-SHIP BUILD v32.0 — Close audit gaps: grades pipeline + NFL/NHL wiring +
-rate limiting + test-artifact cleanup (Session 32)
+SHIP BUILD v33.0 — VYNDR 2.0 design system, Phase A+B: tokens + global CSS +
+fonts + glitch keyframes + shared components (Session 33)
+
+## Session 33 (2026-06-15) — SHIPPED
+
+First session of the multi-session VYNDR 2.0 design-system conversion. Fetched
+the design handoff bundle (claude.ai/design share → gzipped tar of the
+prototype: `vyndr.css` + ~35 `.jsx` + `VYNDR_HANDOFF.md`), read the README +
+handoff spec, and implemented **Phase A (foundation)** and **Phase B (shared
+components)** only — pages, mobile, and systems are Sessions 34+. Frontend-only;
+ZERO backend changes. Backend 1718 → **1792 tests** (+74), 141 suites, zero
+regressions. Web build clean (exit 0).
+
+### PHASE A — Tokens + global CSS + fonts + glitch keyframes
+- **Tokens (§2, exact):** added the canonical short-name token set to
+  `web/src/app/globals.css` `:root` — `--g-ap/--g-a/--g-b/--g-c/--g-d`,
+  `--s-nba/--s-mlb/--s-wnba/--s-soccer`, `--amber/--amber-glow`,
+  `--live/--hit/--miss`, `--scan-op: 0.04`, `--grade-hero`, `--sans` (Inter),
+  `--mono` (JetBrains Mono). Set `--glitch: 1` (§2 baseline, was 0.5). Kept the
+  full legacy alias block so every existing component still resolves during the
+  migration — additive, not a rip-out.
+- **Typography wired to tokens:** base `body` / `h1–h6` / `.mono` / `.num` /
+  `.lbl` now resolve `var(--sans)` / `var(--mono)` instead of hardcoding
+  Instrument Sans / IBM Plex Mono → the whole app picks up Inter + JetBrains
+  Mono from the foundation (the §2 monospace-for-data rule).
+- **Fonts (§2):** `layout.tsx` Google Fonts link now loads Inter (400–900) +
+  JetBrains Mono (400–800); IBM Plex Mono + Instrument Sans kept loaded so
+  un-converted pages don't lose their type before Sessions 34+.
+- **Glitch system (§4, ported verbatim from `vyndr.css`):** appended a
+  "VYNDR 2.0 DESIGN SYSTEM" block with every keyframe — `wm-tear`,
+  `glitch-shift-r/-b`, `wm-caret`, `head-tear`, `crt-sweep`, `crt-sweep-local`,
+  `phosphor-pulse`, `grade-reveal`, `ticker-scroll`, `live-pulse`,
+  `flash-up/-down`, `ekg-scroll`, `node-pulse`, `synapse-travel`, `count-tick`,
+  `factor-ignite`, `signal-in`, `proc-scan`, `data-blink`, `toast-in`,
+  `sheet-up`, `cmd-in`, `fade-in`, `scan-drift` — plus `.scanlines::after`
+  texture, `.intel-surface` (Level-3 "VYNDR is speaking" green), `.wm*`
+  wordmark, `.glitch-hover`, living-layer classes, and the §10 a11y `data-*`
+  layer (contrast/text/colorblind/readable-font/reduced-motion). Where
+  keyframe/class names collide with the legacy block, the new (appended)
+  definitions are authoritative (later-wins). **Entrance keyframes floor at the
+  visible state** (`fade-in` from opacity .6) per the §4 hard-won note.
+
+### PHASE B — Shared components (§5)
+- `web/src/lib/vyndrTokens.js` — plain CommonJS helpers (`GRADE_COLORS`,
+  `GRADE_HEX`, `SPORT`, `GRADE_BADGE_SIZES`, `gradeColor`, `gradeHex`,
+  `gradeBadgeSize`). CommonJS on purpose: the `.tsx` components import it
+  (allowJs) AND the Jest suite requires it directly (no TS/Babel transform in
+  the plain-JS test config) → the helper LOGIC is genuinely unit-tested, not
+  just text-asserted.
+- `web/src/components/vyndr/` — `Wordmark`, `GradeBadge`, `SportBadge`,
+  `TerminalInput`, `SectionHead`, `VBtn`, `Card`, `Sparkline`, `Ticker` +
+  barrel `index.ts`. Ported faithfully from `vyndr-core.jsx` → TS, token-only
+  colors. `'use client'` only where needed (`TerminalInput`, `VBtn`).
+  GradeBadge `hero` size maps to 100px (within the §5 80–120px rule).
+  NOTE: the existing root `components/Wordmark.tsx` (legacy `.wordmark` markup,
+  used by Nav) is untouched — the new one lives at `@/components/vyndr/Wordmark`
+  (`.wm` markup) and supersedes it as pages convert in Sessions 34+.
+
+### Files created
+- `web/src/lib/vyndrTokens.js`
+- `web/src/components/vyndr/{Wordmark,GradeBadge,SportBadge,TerminalInput,
+  SectionHead,VBtn,Card,Sparkline,Ticker}.tsx`, `web/src/components/vyndr/index.ts`
+- `tests/unit/vyndrDesignSystem.test.js` (74 tests via parameterized `it.each`:
+  token presence, exact §2 hex, font loading, all keyframes, scanline + a11y +
+  reduced-motion, helper logic, component contracts)
+
+### Files modified
+- `web/src/app/globals.css` (§2 tokens, token-wired typography, full §4 glitch
+  + §10 a11y block appended)
+- `web/src/app/layout.tsx` (Inter + JetBrains Mono font link)
+
+### Deliberately deferred (per the session spec — Sessions 34+)
+- A.7 hardcoded-hex sweep across the 40+ existing components is page-conversion
+  work (Sessions 34–37), NOT Phase A. New vyndr components are token-only.
+- Phases C–H: app shell/routing, core + remaining screens, mobile parity,
+  living layer / i18n / a11y wiring / PWA / paywall / parlay math, QA vs §13.
+- The prompt's RYAN MONTGOMERY note (sessionStorage auth → httpOnly cookies in
+  prod) is a systems concern for Phase G, not Phase A/B.
+
+---
 
 ## Session 32 (2026-06-15) — SHIPPED