Supersedes the prior partial import. From claude.ai/design project 370ba6df:
- HANDOFF.md (the entry point — exact tokens, glyph library, liftable
behaviors, laws)
- vyndr-mobile.html (19 mobile screens — closes all 10 previously-uncovered
surfaces: landing/pricing/streaks/ledger×2/empty/scan/player/team/explore +
combat/pitcher/archetypes/correlation), vyndr-system.html (desktop terminal),
support.js
- assets/glyphs/ — all 74 archetype marks as real SVGs + MANIFEST, GENERATED
from the authoritative glyphDefs() in the desktop file (currentColor, 24-grid,
duotone) rather than 74 fetches. These replace the generic star/plus
placeholders (the archetype family was never rendering as a distinct 74-mark
system).
- removed my interim MOBILE-SPEC.md distillation (the real 19-screen file +
HANDOFF supersede it).
Landing (desktop marketing) captured in-context — it's M2/M3-desktop scope;
raw file stays in the design project until that wave.
RECONCILE + build (token alignment, glyph lift, M1b surfaces, M3) follow.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Design now provides mobile designs (Vyndr Mobile.dc.html, 5 screens at 390×844).
Captured as specs/design-reference/MOBILE-SPEC.md — the buildable distillation
(the raw dc-runtime HTML needs React to render; the design project holds the
verbatim source). I'm now IMPLEMENTING Design's mobile, not inferring it.
RECONCILE of the already-shipped M1a against Design's mobile:
- EKG hidden <768px — Design AGREES (mobile app bar carries no EKG). KEPT.
- .vbtn 44px tap target — Design AGREES (buttons are 44/46px). KEPT.
- .m-hero generic clamp — CONFLICT. Design uses CONTEXT-SPECIFIC hero sizes
(74px grade tier / 40px live tier / 24px /u stats), not one clamp, and
nothing consumed the class. REMOVED; the specific sizes land per-surface in M1b.
- Mobile HEADER shape — Design OVERRIDES: mobile is an app bar (logo + sync
clock) + a breadth strip + a bottom wire, NOT the collapsed heartbeat bar.
The EKG-drop is a compatible interim step; the full app-bar recomposition is
M1b (the board/shell surface). Flagged in the CSS + MOBILE-SPEC.
Built to Design's mobile spec, VISUALLY UNVERIFIED at 390px (Chrome audit is eyes).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
SETUP (required first step): overwrote specs/design-reference/ with the CURRENT
authoritative mockup ("Vyndr System.dc.html" from claude.ai/design, the version
with the combat card / pitcher identity / live grade-shift / correlation builder
/ FREE|PRO pricing / TRANSMISSION QUIET). 12 surfaces. Confirmed it has NO media
queries — desktop-only, so the 390px expression is a deliberate design decision,
not a shrink.
M1a — mobile foundation (built to spec, VISUALLY UNVERIFIED at 390px; WSL2↔Chrome
unreachable, the Chrome audit is the eyes):
- Header-zone collapse (the concrete audit finding: ticker + SIGNAL LIVE + STALE
stacking in ~110px). The decorative EKG is dropped <768px so the heartbeat
reads as ONE clean status line; signal pulse + ticker are the single animated
element (DESIGN-SPEC §4). LiveLayer gains .heartbeat-bar / .hb-ekg hooks.
- Primary CTA (.vbtn) meets the 44px touch target on mobile; dense `small`
buttons opt out (density is a feature).
- .m-hero mono-hero clamp for the one-figure-per-card grammar at 390px.
- M4 test-lock: vyndrParityQA asserts the header collapse, tap target, overflow
containment, and the honest "UNVERIFIED at 390px" label are all in source.
Per-surface stacking (M1b), billboards (M2), desktop parity (M3) continue.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
builtbykev