vyndr/specs/design-reference/MOBILE-SPEC.md

VYNDR MOBILE — Design's authoritative 390×844 spec

Distilled from Vyndr Mobile.dc.html (claude.ai/design project 370ba6df, "Vyndr Mobile.dc.html"). Design DREW mobile — build to THIS, don't infer from principles. The raw dc-runtime HTML lives in the design project (it needs React/support.js to render, so this faithful distillation is the buildable reference). Tokens unchanged (green #00D4A0, miss #FF4757, amber #FFB347, text #F0F0F0/#B8BCC8/#707080/#4a4a58, bg #06060B/#0A0A10/#0E0E14/#14141E).

Design's one line: "Same tokens, same ranked density, same earned motion — recomposed for thumbs. Tab bar owns navigation; one hero per screen survives the shrink."

GLOBAL MOBILE HEADER — an APP BAR, not the desktop header stack

The desktop Nav + Ticker + HeartbeatBar does NOT carry to mobile. Design replaces it with a compact app bar (one row):

• Left: 24px logo mark + VYND⟨R green⟩ wordmark (mono, 14px, .26em, glitch 6.5s).
• Right: a small green sync dot (pulse) + sync clock HH:MM:SS (mono, 10px, #B8BCC8).
• 10px vertical padding, border-bottom:1px solid #14141E. NO EKG, NO ticker, NO "SIGNAL LIVE · N graded · SYNC" here. The live "wire"/ticker is moved to the BOTTOM of the board (above the tab bar), and the market breadth is its own strip below the app bar. So the header is genuinely one clean line.

GLOBAL — BOTTOM TAB BAR (5 tabs)

Design's tabs: BOARD · STREAKS · BUILD · LEDGER · /u. Icons 20px, labels mono 7.5px .12em, active = green (#00D4A0), inactive = #707080. NOTE the delta vs the live app (Slate/Explore/Scan/Ledger/More): Design has no separate Scan tab or raised FAB — "BUILD" is the slip. This is a nav-structure decision to confirm with Kev before changing (Scan-5 is monetization-critical) — flagged, not auto-applied.

SCREEN 01 · TERMINAL (the board / dashboard-slate) — the anchor surface

Stack, top→bottom, full 390 width:

1. App bar (above).
2. Breadth strip: EDGES 14 · AVG CLV +2.8% · 47 GAMES — mono 9.5px labels (#707080), values bold (edges #F0F0F0, CLV green), GAMES pushed right (margin-left:auto). border-bottom.
3. EDGE BOARD header row: EDGE BOARD (mono 10px .24em bold) + sort chip EDGE ▼ (mono 8.5px #707080).
4. Ranked rows — THE core mobile grammar. Each row: [rank] [name + prop | sport·matchup] [grade chip] [edge%], padding:11px 16px, border-top:1px solid #101018:
   • rank: mono 10px, 16px wide; #1 is green, rest #707080.
   • identity: name 13px 700 + o27.5 PTS in #B8BCC8 500; sub-line mono 8px .1em #707080 = NBA · DEN @ MIN (green if LIVE, with a live-dot before the name).
   • grade chip: mono 10px 800, 17px tall, padding:0 6px, tier-colored (A+/A green tint+green border, B #14141E/#F0F0F0, D red tint+red border).
   • edge%: mono 12px 700, 48px right-aligned, green if +, #FF4757 if − (the one hero figure per row).
   • RANKING VISIBLE VIA OPACITY: rows fade down the list — 01/02 full, 03 (live), 04 .85, 05 .7, 06 .55. Top edges carry a green left inset border (box-shadow:inset 2px 0 0 rgba(0,212,160,.55) for #1, .4 for #3).
5. WIRE (the ticker, relocated to bottom): WIRE label (green 8px .22em 800) + one scrolling line (mono 9.5px #B8BCC8, ellipsis), on #08080D, border-top. Cycles STEAM/LIVE/FLAG/FADE every 6s.
6. Tab bar (above).

SCREEN 02 · GRADE REVEAL

Header: ◂ BOARD (11px #B8BCC8) + CLV-VERIFIED (9px .2em green). Body padding:22px 18px:

• DECLASSIFIED · TOP GRADE (mono 9.5px .26em #707080).
• Hero row: giant A+ (mono 74px, .82 line, green, text-shadow:0 0 30px rgba(0,212,160,.5)) + TIER label under it; beside it the identity block — team monogram chip (34px, team-gradient), Nikola Jokić 14.5px 700, C · DEN · CONFIRMED (mono 9px, CONFIRMED in #B8BCC8), Over 27.5 Points 14px, then DK -114 ▲ opened 25.5 (mono 10px, ▲ green).
• Line-movement sparkline: full-width SVG polyline (green, area fill), with OPEN 25.5 · STEAM ▲ · NOW 27.5 under it (8px, STEAM green).
• 3-col stat grid (1px gaps on #1E1E2A, radius 10): EDGE +8.4% (green), L10 HIT 8/10, PROJ 30.8 — labels mono 8.5px .16em #707080, values mono 17px 800.
• VYNDR INTELLIGENCE box (#0A0A10, border #14141E): dot + label (mono 8.5px .22em #B8BCC8), then a prose sentence 12px #B8BCC8 with mono/green emphasis on the numbers + archetype name.
• Buttons: SHARE THE READ (green fill, 46px, mono 11.5px 800) + ADD TO SLIP (outline #2A2A38, 44px).

SCREEN 03 · BUILD (parlay slip)

Header PARLAY SLIP + 2 LEGS. Body padding:14px 16px:

• Leg rows: green check chip (20px) + Jokić o27.5 PTS 13.5px + NBA · DEN @ MIN mono 8.5px + grade chip + american odds (+105). Card rgba(0,212,160,.05), border #1E1E2A, green left inset border, radius 12.
• SAME-GAME CORRELATION warning (amber): triangle icon + SAME-GAME CORRELATION (8.5px amber 700) + explanation (mono 9.5px #B8BCC8) on rgba(255,179,71,.08) border amber.
• 3-col: COMBINED +371 (#F0F0F0) · GRADE A- (amber) · STAKE 0.4u (amber).
• ADD FROM TONIGHT'S A/B READS: empty-checkbox rows (Skenes/Judge, #B8BCC8, odds).
• Footer button TRACK SLIP · 0.4u (green fill 46px).

SCREEN 04 · LOCK SCREEN · LIVE ACTIVITY (iOS-native concept — ASPIRATIONAL)

An iOS lock screen: dynamic-island pill (Edwards A ●), 76px clock, a Live Activity card (VYNDR + LIVE · Q3 4:12, 40px live A, Edwards o5.5 AST, 4 AST · pacing ▲ · usage +6%, a 6-seg progress bar 4 OF 6 · NEEDS 2 · 16 MIN LEFT), + a STEAM ALERT notification. Closing line THE TERMINAL WATCHES WHILE YOU DON'T. This is a native iOS Live Activity / push concept, NOT a web surface — treat as product-vision, not an M1b web build. The web analog is the in-app live tracker (already exists, StatStrip.LiveTracker); flag the Live Activity as a native/PWA-push future.

SCREEN 05 · /u RECORD (the shareable profile)

Body padding:18px:

• Identity: 54px green-gradient monogram EH + @edgehunter 17px 800 + CLV-VERIFIED badge (green, dot) + 412 graded (mono 9px #707080).
• 2×2 stat grid (1px gaps #14141E, radius 12, cells #0C0C12): HIT RATE 64.2% (green) · UNITS +38.6u (green) · ROI +11.4% (#F0F0F0) · AVG CLV +3.1% (#F0F0F0). Labels mono 8.5px .16em; values mono 24px 800 .9 line.
• GRADE HISTORY · L18 with HIT/MISS legend (green/red squares); a 6-col grid of grade cells (aspect-1, tinted by hit/miss, grade letter colored by tier).
• ARCHETYPE FINGERPRINT: labeled bars — TORCH 32% (#FF6B4A), BOMBER 24% (#FF9F45), ALPHA 18% (#7C5CFF) — name+% row over a 5px track with a colored fill.
• Footer SHARE MY RECORD (green fill 46px).

MOTION (mobile) — unchanged discipline

sync-dot pulse (1.4s), live-dot (1.5s) only on genuinely-live rows, wire cycles 6s, data-react values flash green-up/red-down on change (3s demo cadence). Glitch ONLY on the wordmark. Data never glitches.

RECONCILE NOTES vs M1a (2026-07-16)

• EKG hidden <768px → Design AGREES (no EKG on mobile). KEEP.
• .vbtn 44–46px tap target → Design AGREES (buttons are 44/46px). KEEP.
• M1a kept a collapsed heartbeat BAR on mobile → Design OVERRIDES: mobile has an app bar (logo + sync clock) + a separate breadth strip + a bottom wire, NOT the heartbeat bar. The full mobile-header recomposition is an M1b task (the board/shell surface).
• .m-hero generic clamp(28–56px) → Design uses CONTEXT-SPECIFIC hero sizes (74px grade tier, 40px live tier, 24px /u stats). The generic clamp doesn't match and nothing consumed it → REMOVE .m-hero; apply Design's specific sizes per surface in M1b.