vyndr/specs/design-reference/HANDOFF.md

VYNDR VISUAL SYSTEM — CODE HANDOFF

SESSION 3 (Jul 22) — Scanner surfaces S6 + S7

Vyndr Scanner States.dc.html — spec for the two scanner states Code flagged missing (converges at the scanner-nudge build order).

• S6 scan empty (marketless scan): read-card frame, ZERO market numbers (no empty triplet frame — it doesn't render), chip NO MARKET in the blue boundary channel (rgba(106,147,200,.12) bg / .34 border / text #8FB2DE — same tokens as PRICED OUT), dashed blue void box (refusal frame shape, blue not red: nothing failed), copy "no live market for this line" (never "coming soon"). Path forward built in: green primary CTA to tonight's board with live priced-prop count; player-specific path (HERBERT · 3 PRICED PROPS ▸) leads when the player is on the slate. Mobile 390: both paths 44px.
• S7 priced-line display (the nudge): strip under the scan field showing ONLY genuinely-priced lines per exact player+stat. Case A NONE PRICED is the DEFAULT/common case — quiet dashed blue box + "we price these for [player]" stat chips (with amber fair previews). Case B priced: 44px rows o 27.5 · BOOK −114 · ◆ FAIR −105 · OPEN READ ▸, one tap to the real triplet. Case C off-slate: text-tokens-only fact line, no blue, no chips, stops. Typed-line mismatch: query text preserved, o 30.5 ISN'T PRICED blue fact line (not an error), nearest priced line = same player+stat only.
• New color law: blue #8FB2DE = the boundary channel — the system being honest about what it can't hand you (edge priced out, no market, line not priced). Distinct from red REFUSAL (model decision) and amber QUARANTINE (model leg suppressed).

SESSION 2 (Jul 17) — Offseason & Intelligence expansion

Two new design files, same package format. System law unchanged (tokens, grade colors, glow-A-only, THE VERB IS "READ").

• Vyndr Offseason.dc.html — Surface 1. Hub home (NFL desktop + 390, NBA Summer-League variant with OUTLOOK ONLY / NOT GRADED honesty block), season-long board (open→NOW→VYNDR triplet — open #707080, now #F0F0F0 700, model #00D4A0 800; ladder grouping: player header row + nested market lines at padding-left:52px), season read reveal (news-annotated movement, NEWS-DRIVEN FACTORS, WHAT WOULD CHANGE THIS READ kill conditions), news/outlook feed + row anatomy + quiet-wire empty state. Sport state lives IN the sport tab (NFL · CAMP −5D), never a separate offseason tab. Kickoff countdown is computed live from the real date (Sep 10 2026) — ambient, top-right, never the hero. New mobile tab bar: SLATE · EXPLORE · READ-FAB (50px green circle, void-colored V, translateY(-14px), 6px void ring) · LEDGER · MORE.
• Vyndr Intelligence.dc.html — Surfaces 2–5 + M2.
  • S2 line shopping: MOVEMENT STRIP primitive defined once (row 86×20 silent / reveal full-width annotated / laws: steps not curves, green only when move favors the read, FLAT = hairline + FLAT · [N]D). Book comparison: 7 BookChips (24px tile, brand-color mono wordmark, image-slot overlay for licensed logos — DK #53D337, FD #1493FF, MGM #C4A45E, CZR #AD9660, B365 #FFE100, ESPN BET #D50A0A, Fanatics #2E6BFF), best number crowned (green inset bar + BEST NUMBER chip + row tint rgba(0,212,160,.04)), disagreement mark (dots on an axis around the VYNDR reference line; SPLIT chip amber when spread wide). Push-to-book: primary green deep-link + secondary book buttons, geo-gated (buttons never render disabled — they don't render), affiliate microcopy verbatim. Geo-empty honest state included.
  • S3 article media: hero template + 4 hero graphic archetypes (A line path · B distribution · C mark-at-scale · D matchup card — all generated data visuals, never stock), inline figures (stat callout triptych, comparison bars, pull quote — one max, caption law: every figure names its data), article card (thumb = hero graphic re-cropped), article OG 1200×630.
  • S4 CLV: per-read chip BEAT CLOSE +2.0 / MISSED CLOSE −1.0 — color follows CLV sign, never the result; aggregate joins record line (BEAT CLOSE 61% + AVG CLV); no-data state names the tracking start date + N≥100 threshold, never a fake 0%. Calibration curve: headline claim ("When we say 70%, it hits 68.2%"), dots vs dashed perfect line, dot size = sample, buckets under N 30 render hollow/unlabeled.
  • S5 The Report: hybrid email — dark billboard header + dark record band survive every client; light paper body (#F7F6F2 / ink #1A1A22 / green shifts to #00A57D on paper). 600px single column, system-font fallbacks, no images required to read. Signup module + /report archive (every issue shows its own day record).
  • M2 crops in-file at 50%: square 1080×1080, story 1080×1920 (recomposed — hero letter scales, dot strip replaces table; dashed safe zones are design-time only, strip on export), X 1200×675, NEW record billboard 1080×1350 (30D record + tier hit-rate bars, C-tier honestly under .500). Exact-size PNG masters in exports/ (square 1080×1080, story 1080×1920, X 1200×675, record 1080×1350, article OG 1200×630). Every S2–S5 surface also ships at 390 (Act 06 in the Intelligence file): market sheet (44px book rows, compact disagreement axis, sticky deep-link CTA), article view, ledger with per-read CLV chips + compact calibration card, /report signup + archive.
• Sample data is anchored to Jul 2026 reality; every number is a spec for what the live feed renders. Truth laws: no "tonight" off-slate, visible timestamps, honest empty states throughout.

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 83 archetype marks (74 display + 9 classifier-legacy) 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).

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 + 2–2.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 everywhere now carry inline team-gradient chips (10-12px, before each abbr) — recognition without weight; chips sit inside rows so the ranked opacity ramp dims them too. Pattern: <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,<c1>,<c2>);vertical-align:-1.5px;margin-right:3px"></span>ABR. Swap for licensed logo imgs at the same size when assets land.
• 9 classifier-legacy marks added to glyphDefs() + assets/glyphs/: BRUSH #E0B84A, WHIFF #E86A6A, CONNECTOR #9AB0C4, DISTRIBUTOR #7AB8D8, FASTBREAK #4AA0E8, FLEX #A08AC8, HYBRID #C88AB0, SWITCH #C0B08A, SWITCHBOARD #90A0E8. Same 24-grid duotone language; colors deduped off signal-green/amber/red.