vyndr/specs/design-reference/HANDOFF.md

VYNDR VISUAL SYSTEM — CODE HANDOFF

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.