builtbykev/vyndr
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Design train: unpack the complete authoritative package into design-reference

Browse Source 
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>
This commit is contained in:
Kev
2026-07-16 15:52:29 -04:00
parent 7c7ab24be5
commit 63511485ed
79 changed files with 1317 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
specs/design-reference/vyndr-system.html
+39 -8
View File
@@ -49,6 +49,10 @@
.rx-up{animation:vy-rxup .75s ease-out}
.rx-down{animation:vy-rxdown .75s ease-out}
.vy-scanwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
</style>
<script src="image-slot.js"></script>
<style>
image-slot::part(empty){opacity:0}
.vy-scanwrap::before{content:"";position:absolute;left:0;right:0;height:38%;background:linear-gradient(180deg,transparent,rgba(0,212,160,.07),transparent);animation:vy-scan 5.5s linear infinite}
</style>
</helmet>
@@ -431,7 +435,7 @@
<div style="border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:18px;display:flex;gap:15px;align-items:center">
<div style="position:relative;width:64px;height:64px;flex:none">
<div style="width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,#0E4DA4,#1a2f5a);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:22px;color:#8fb4ff;border:1px solid rgba(76,139,245,.4)">NJ</div>
<span style="position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.14em;color:#4a4a58">HEADSHOT SLOT</span>
<image-slot id="headshot-jokic" shape="rounded" radius="12" placeholder="" style="position:absolute;inset:0;width:64px;height:64px"></image-slot>
</div>
<div style="flex:1;min-width:0">
<div style="display:flex;align-items:center;gap:8px">
@@ -602,7 +606,10 @@
<div style="display:flex;flex-direction:column;gap:10px">
<!-- streak row 1 -->
<div style="display:flex;align-items:center;gap:20px;border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:16px 22px">
<div style="position:relative;width:52px;height:52px;flex:none;border-radius:11px;background:linear-gradient(135deg,#552583,#8b5cc7);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;color:#FDB927">LA</div>
<div style="position:relative;width:52px;height:52px;flex:none">
<div style="width:52px;height:52px;border-radius:11px;background:linear-gradient(135deg,#552583,#8b5cc7);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;color:#FDB927">LA</div>
<image-slot id="streak-luka" shape="rounded" radius="11" placeholder="" style="position:absolute;inset:0;width:52px;height:52px"></image-slot>
</div>
<div style="flex:1;min-width:0">
<div style="display:flex;align-items:center;gap:9px">
<span style="font-weight:700;font-size:16px">Luka Dončić</span>
@@ -623,7 +630,10 @@
</div>
<!-- streak row 2 (amber caution) -->
<div style="display:flex;align-items:center;gap:20px;border-radius:14px;background:#0E0E14;border:1px solid #1E1E2A;padding:16px 22px">
<div style="width:52px;height:52px;flex:none;border-radius:11px;background:linear-gradient(135deg,#134A8E,#3f7fd0);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;color:#fff">TOR</div>
<div style="position:relative;width:52px;height:52px;flex:none">
<div style="width:52px;height:52px;border-radius:11px;background:linear-gradient(135deg,#134A8E,#3f7fd0);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;color:#fff">TOR</div>
<image-slot id="streak-vladdy" shape="rounded" radius="11" placeholder="" style="position:absolute;inset:0;width:52px;height:52px"></image-slot>
</div>
<div style="flex:1;min-width:0">
<div style="display:flex;align-items:center;gap:9px">
<span style="font-weight:700;font-size:16px">Vladimir Guerrero Jr.</span>
@@ -767,6 +777,21 @@
</div>
</div>
</div>
<!-- tier record calibration -->
<div style="border-top:1px solid #14141E">
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 28px 4px">
<span class="mono" style="font-size:10px;letter-spacing:.2em;color:#B8BCC8">TIER RECORD · CALIBRATION</span>
<span class="mono" style="font-size:9px;letter-spacing:.14em;color:#707080">SEASON · ALL SPORTS</span>
</div>
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#14141E;margin-top:10px">
<div style="background:#0C0C12;padding:13px 18px"><div style="display:flex;align-items:baseline;gap:7px"><span class="mono" style="font-size:17px;font-weight:800;color:#00D4A0;text-shadow:0 0 12px rgba(0,212,160,.4)">A+</span><span class="mono" style="font-size:11px;color:#F0F0F0">24–6</span></div><div class="mono" style="font-size:9px;color:#00D4A0;font-weight:700;margin-top:4px">+31% ROI</div></div>
<div style="background:#0C0C12;padding:13px 18px"><div style="display:flex;align-items:baseline;gap:7px"><span class="mono" style="font-size:17px;font-weight:800;color:#00D4A0">A</span><span class="mono" style="font-size:11px;color:#F0F0F0">41–19</span></div><div class="mono" style="font-size:9px;color:#00D4A0;font-weight:700;margin-top:4px">+18% ROI</div></div>
<div style="background:#0C0C12;padding:13px 18px"><div style="display:flex;align-items:baseline;gap:7px"><span class="mono" style="font-size:17px;font-weight:800;color:#F0F0F0">B</span><span class="mono" style="font-size:11px;color:#B8BCC8">58–42</span></div><div class="mono" style="font-size:9px;color:#B8BCC8;margin-top:4px">+6% ROI</div></div>
<div style="background:#0C0C12;padding:13px 18px"><div style="display:flex;align-items:baseline;gap:7px"><span class="mono" style="font-size:17px;font-weight:800;color:#B8BCC8">C</span><span class="mono" style="font-size:11px;color:#707080">30–28</span></div><div class="mono" style="font-size:9px;color:#707080;margin-top:4px">+1% ROI</div></div>
<div style="background:#0C0C12;padding:13px 18px"><div style="display:flex;align-items:baseline;gap:7px"><span class="mono" style="font-size:17px;font-weight:800;color:#FF4757">D</span><span class="mono" style="font-size:11px;color:#707080">12–20</span></div><div class="mono" style="font-size:9px;color:#FF4757;font-weight:700;margin-top:4px">FADE ✓</div></div>
</div>
</div>
</div>
</div>
@@ -783,7 +808,7 @@
<!-- PORTRAIT 1080x1350 -->
<div>
<div class="mono" style="font-size:10px;letter-spacing:.16em;color:#707080;margin-bottom:10px;text-align:center">THE SETTLE · 1080 × 1350</div>
<div style="width:360px;height:450px;border-radius:14px;overflow:hidden;border:1px solid #2A2A38;box-shadow:0 24px 60px -24px rgba(0,0,0,.8)">
<div data-export="settle" style="width:360px;height:450px;border-radius:14px;overflow:hidden;border:1px solid #2A2A38;box-shadow:0 24px 60px -24px rgba(0,0,0,.8)">
<div style="width:1080px;height:1350px;transform:scale(.3333);transform-origin:top left;background:radial-gradient(700px 500px at 80% 0%,rgba(0,212,160,.09),transparent 60%),#06060B;color:#F0F0F0;padding:72px 68px;display:flex;flex-direction:column">
<div style="display:flex;align-items:center;justify-content:space-between">
<span style="display:flex;align-items:center;gap:16px">
@@ -828,7 +853,7 @@
<!-- OG 1200x630 -->
<div>
<div class="mono" style="font-size:10px;letter-spacing:.16em;color:#707080;margin-bottom:10px;text-align:center">GRADE REVEAL · 1200 × 630 OG</div>
<div style="width:540px;height:283px;border-radius:14px;overflow:hidden;border:1px solid #2A2A38;box-shadow:0 24px 60px -24px rgba(0,0,0,.8)">
<div data-export="og" style="width:540px;height:283px;border-radius:14px;overflow:hidden;border:1px solid #2A2A38;box-shadow:0 24px 60px -24px rgba(0,0,0,.8)">
<div style="width:1200px;height:630px;transform:scale(.45);transform-origin:top left;background:radial-gradient(700px 500px at 78% 0%,rgba(0,212,160,.1),transparent 60%),#06060B;color:#F0F0F0;padding:56px 60px;display:flex;flex-direction:column">
<div style="display:flex;align-items:center;justify-content:space-between">
<span style="display:flex;align-items:center;gap:14px">
@@ -883,7 +908,10 @@
<!-- FIGHTER A -->
<div style="padding:22px 22px 22px 24px">
<div style="display:flex;align-items:center;gap:13px;margin-bottom:16px">
<div style="width:52px;height:52px;flex:none;border-radius:12px;background:linear-gradient(135deg,#7C6CC0,#332a5a);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:16px;color:#d8ccff">IM</div>
<div style="position:relative;width:52px;height:52px;flex:none">
<div style="width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#7C6CC0,#332a5a);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:16px;color:#d8ccff">IM</div>
<image-slot id="fighter-islam" shape="rounded" radius="12" placeholder="" style="position:absolute;inset:0;width:52px;height:52px"></image-slot>
</div>
<div><div style="font-weight:700;font-size:16px">Islam M.</div><div class="mono" style="font-size:10px;color:#707080;margin-top:2px">26–1 · ORTHODOX · 70&quot; REACH</div></div>
</div>
<div style="margin-bottom:8px"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:5px"><span style="display:inline-flex;align-items:center;gap:6px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path fill="none" stroke="#7C6CC0" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M6 4v9M6 13l-3-3M6 13l3-3M18 20v-9M18 11l-3 3M18 11l3 3"/><path stroke="#7C6CC0" stroke-width="2.2" stroke-linecap="round" d="M9 12h6"/></svg><span class="mono" style="font-size:10px;color:#7C6CC0;font-weight:700;letter-spacing:.06em">GRAPPLER</span></span><span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">80%</span></div><div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden"><div style="width:80%;height:100%;background:#7C6CC0"></div></div></div>
@@ -905,7 +933,10 @@
<!-- FIGHTER B -->
<div style="padding:22px 24px 22px 22px;text-align:right">
<div style="display:flex;align-items:center;gap:13px;margin-bottom:16px;flex-direction:row-reverse">
<div style="width:52px;height:52px;flex:none;border-radius:12px;background:linear-gradient(135deg,#FF6B4A,#5a281c);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:16px;color:#ffd4c6">AV</div>
<div style="position:relative;width:52px;height:52px;flex:none">
<div style="width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#FF6B4A,#5a281c);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:16px;color:#ffd4c6">AV</div>
<image-slot id="fighter-volk" shape="rounded" radius="12" placeholder="" style="position:absolute;inset:0;width:52px;height:52px"></image-slot>
</div>
<div><div style="font-weight:700;font-size:16px">Alex V.</div><div class="mono" style="font-size:10px;color:#707080;margin-top:2px">26–3 · ORTHODOX · 71.5&quot; REACH</div></div>
</div>
<div style="margin-bottom:8px"><div style="display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;margin-bottom:5px"><span style="display:inline-flex;align-items:center;gap:6px;flex-direction:row-reverse"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path fill="none" stroke="#FF6B4A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" d="M3 8h9M3 12h9M3 16h9M9 6l4 6-4 6"/><path stroke="#FF6B4A" stroke-width="2.6" stroke-linecap="round" d="M18 4v16"/></svg><span class="mono" style="font-size:10px;color:#FF6B4A;font-weight:700;letter-spacing:.06em">PRESSURE</span></span><span class="mono" style="font-size:11px;color:#F0F0F0;font-weight:700">72%</span></div><div style="height:6px;border-radius:3px;background:#14141E;overflow:hidden;transform:scaleX(-1)"><div style="width:72%;height:100%;background:#FF6B4A"></div></div></div>
@@ -998,7 +1029,7 @@
<span class="mono" style="font-size:52px;font-weight:800;line-height:.85;color:#F0F0F0">$44.99</span>
<span class="mono" style="font-size:13px;color:#707080;padding-bottom:6px">/mo</span>
</div>
<p style="font-size:12.5px;line-height:1.5;color:#B8BCC8;margin-top:12px">Priced like a subscription. Performs like a $1M desk. <span style="color:#707080">Free gives you live scores + tonight's top 3 grades — Pro unlocks the whole board.</span></p>
<p style="font-size:12.5px;line-height:1.5;color:#B8BCC8;margin-top:12px">The whole engine — grades, CLV, the board. <span style="color:#707080">Free gives you live scores + tonight's top 3 grades — Pro unlocks the whole board.</span></p>
<div style="display:flex;flex-direction:column;gap:9px;margin-top:16px">
<span style="display:flex;align-items:center;gap:9px;font-size:12.5px;color:#F0F0F0"><span style="color:#00D4A0;font-weight:700">✓</span> Every graded read, every league, every night</span>
<span style="display:flex;align-items:center;gap:9px;font-size:12.5px;color:#F0F0F0"><span style="color:#00D4A0;font-weight:700">✓</span> CLV-verified public record + share cards</span>