Files
vyndr/specs/design-reference/HANDOFF.md
T
builtbykev ae3cff9dbd Item 7 — book roster: ESPN BET → theScore Bet (PENN)
ESPN BET is defunct — PENN/ESPN terminated the deal; PENN rebranded it to
theScore Bet (Dec 1 2025) and ESPN is now exclusive with DraftKings. Removed
the ESPN BET entries from the BookChip map (web/src/lib/books.js) and added
theScore Bet (mono TS, slug thescore) as the successor. Added 'thescore' to the
backend oddsNormalizer ALLOWED_BOOKS so the feed's lines are accepted; synced
the bookWordmark test list. The ESPN references in src/config/sports.js are
ESPN's STATS API (data provider, unrelated to the sportsbook) — left untouched.

Flagged in specs/design-reference/HANDOFF.md that the design mockups' BookChip
row still shows ESPN BET and needs the same one-swap on the next refresh.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-18 13:55:39 -04:00

4.6 KiB
Raw Blame History

VYNDR VISUAL SYSTEM — CODE HANDOFF

Two design components, both open directly in a browser. All styling is inline (no stylesheets to port); every value below is already in the markup.

Files

  • Vyndr Landing.dc.html — desktop marketing landing: hero + live board proof, TIER RECORD calibration band, feature triptych, FREE / THE DESK pricing (no trial), wire footer.
  • assets/glyphs/ — all 74 archetype marks as individual SVGs (currentColor, 24-grid) + MANIFEST.md (name → hex → file). Generated from glyphDefs(); wire these into archetypes.js.
  • exports/ — rasterized share cards: settle-1080x1350.png (exact) and grade-reveal-og.png (1080×566, same 1.9:1 ratio as 1200×630 OG).
  • image-slot.js + .image-slots.state.json — drag-and-drop real-asset targets (player headshot, streaks rows, combat fighters) layered over monogram fallbacks; empty chrome hidden via image-slot::part(empty){opacity:0}. Design-time tooling, not product code.
  • Vyndr System.dc.html — desktop terminal: components, 74 glyphs, edge board, /u profile, share cards, streaks, combat, pitcher, correlation builder, pricing, empty state, ⌘K, THE WIRE.
  • Vyndr Mobile.dc.html — 19 mobile screens in iOS frames (shell + BOARD, GRADE REVEAL, BUILD, LOCK SCREEN/LIVE ACTIVITY, /u, LANDING, PRICING, STREAKS, LEDGER×2 + TIER RECORD, EMPTY, SCAN, PLAYER, TEAM HUB, EXPLORE, COMBAT, PITCHER, ARCHETYPES, CORRELATION DETAIL).
  • ios-frame.jsx — device frame only; not product code.

Desktop /u profile also carries the TIER RECORD calibration strip (matches mobile screen 10 and the landing band).

BOOK ROSTER NOTE (2026-07, security follow-up item 7): ESPN BET is defunct — PENN rebranded it to theScore Bet (Dec 1 2025); ESPN is now exclusive with DraftKings. The product BookChip set (web/src/lib/books.js) was updated (ESPN BET removed, theScore Bet added). The design mockups' BookChip row still shows ESPN BET — it needs the same one-swap to theScore Bet (mono TS) whenever the design files are refreshed.

Tokens (exact)

  • Surfaces: #06060B void · #0E0E14 card · #14141E elevated · row hairline #101018 · deep panel #0A0A10
  • Signal green #00D4A0 — ONE meaning: edge / active / A-tier / primary CTA. Never decorative.
  • Amber #FFB347 caution/correlation only · Red #FF4757 miss/negative only. Edge/CLV colored by sign.
  • Text: #F0F0F0 / #B8BCC8 / #707080 (+ #4a4a58 micro-labels). Borders #1E1E2A / #2A2A38.
  • Fonts: Inter (UI) · JetBrains Mono (ALL data, tabular-nums).
  • Grades: A-tier green + glow (text-shadow: 0 0 Npx rgba(0,212,160,.4-.5)) — glow A-tier ONLY. B #F0F0F0, C #B8BCC8, D/F #FF4757.

Brand

  • Wordmark: VYND + green R, JetBrains Mono 800, tracking .26.32em, glitch keyframes vy-glitch (clip-path slices + red/green text-shadow split), blinking cursor block.
  • Logo mark: 32-grid rounded tile, "signal V" — left stroke white, right stroke #00D4A0 with dot terminal at (24,9). SVG inline in both files.

Glyph library

glyphDefs() in the desktop file's logic class: 74 marks keyed by archetype name — {c: hex, g: svg-inner-html}, 24-grid, duotone (fill-opacity .16.2 base + 22.6 stroke). Colors deduped off signal-green/amber/red. Lift directly into archetypes.js. Blend display: primary chip full color + supporting chip muted (opacity .7.85).

Behavior (all implemented in logic classes)

  • Reaction primitive: nudge(cell, up) — value updates, rx-up/rx-down background flash (.75s ease-out), edge recolors by sign. Fire on data events only, never idle loops.
  • Boot: rows stagger in (vy-rowin, 60ms steps), hero arrives last (vy-arrive), reactions gated ~1.5s.
  • THE WIRE: one timestamped entry, holds ~6s (vy-wirein), tag colored by meaning.
  • Parlay math: decimal product → American; same-game detection → amber warn, grade 1 tier, stake 1.0u/0.75u/0.4u.
  • ⌘K palette, row-hover rationale, IntersectionObserver reveal + rail highlight — all in Vyndr System.dc.html.

Laws

Alive = punctuated stillness (react to truth, then rest). Dense but RANKED — one bold mono hero figure among muted context; dim ranks progressively (1 / .86 / .64 / .48). One animated hero per zone. Real entities always (team-colored monograms until licensed assets drop in — headshot slots marked). No trial: free tier is the trial. Premium is produced, never claimed.

Rev 3 (Jul 16)

  • Matchup lines carry inline team chips (10-12px before each abbr) — swap for licensed TeamLogo imgs at the same size (resolver built).
  • 9 classifier-legacy marks added (BRUSH/WHIFF/CONNECTOR/DISTRIBUTOR/FASTBREAK/FLEX/HYBRID/SWITCH/SWITCHBOARD) — 83 total. Fallback renders, never user-facing names.