Design bundle: Price Triplet (ACT 01) + Offseason/Intelligence + 83 glyphs
Drops the updated claude.ai/design bundle into specs/design-reference/ as the build reference. New since the Jul-18 export: Vyndr Price Triplet.dc.html (the reality-corrected ACT 01 — five honesty states incl. EDGE-NOT-TAKEABLE, and the projection-then-price read-card hierarchy), Vyndr Offseason.dc.html, Vyndr Intelligence.dc.html, PNG export masters, and 83 archetype glyphs (74 display + 9 classifier-legacy). Reference material only. No product code touched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VCNgGSt5qvcLxaeQqa7Zpj
This commit is contained in:
@@ -1,10 +1,23 @@
|
||||
# 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 74 archetype marks as individual SVGs (`currentColor`, 24-grid) + `MANIFEST.md` (name → hex → file). Generated from `glyphDefs()`; wire these into `archetypes.js`.
|
||||
- `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.
|
||||
@@ -13,8 +26,6 @@ Two design components, both open directly in a browser. All styling is inline (n
|
||||
|
||||
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.
|
||||
@@ -41,5 +52,5 @@ Desktop /u profile also carries the TIER RECORD calibration strip (matches mobil
|
||||
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.
|
||||
- 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.
|
||||
|
||||
Reference in New Issue
Block a user