Give TV cards roomy spacing and edge-straddling focus rings

wolfskin-design/tokens.json

@@ -1,5 +1,5 @@
 {
- "$description": "Wolfskin TV design tokens, extracted by script from the locked prototype (data/tv-v2/opus-final-2026-11-05/index.html, sha256 ee8844fc...). Values are CSS px on the 1920x1080 stage; the box renders 1920x1080 at 320 dpi = density 2.0, so dp/sp = px / 2. Format follows the W3C design-tokens draft ($type/$value); extra keys: px, dp|sp, source (page file:line), usedBy, page (the page value where q1 consolidated it).",
+ "$description": "Wolfskin TV design tokens, extracted by script from the locked prototype (originally data/tv-v2/opus-final-2026-11-05/index.html, sha256 ee8844fc...; now amended in data/tv-v2/spacing-2026-11-06/index.html, sha256 fcc5d879...). Values are CSS px on the 1920x1080 stage; the box renders 1920x1080 at 320 dpi = density 2.0, so dp/sp = px / 2. Format follows the W3C design-tokens draft ($type/$value); extra keys: px, dp|sp, source (page file:line), usedBy, page (the page value where q1 consolidated it). Amended 2026-11-06 (spec revision 3, Level 2 spacing + card ring; data/tv-card-spacing/answers.md): card, layout.row*/gridRowGap and focus.ringCard changed; every other token is as extracted. The prototype source line numbers in `source` fields predate the amendment and drift by a few lines after index.html:8.",
  "meta": {
   "density": 2.0,
   "stagePx": [
@@ -10,8 +10,8 @@
    960,
    540
   ],
-  "source": "data/tv-v2/opus-final-2026-11-05/index.html",
-  "sourceSha256": "ee8844fc6d0237a3727de0d9454db8e5cf3bb14083fb7877d7bb0f4233c6e23d",
+  "source": "data/tv-v2/spacing-2026-11-06/index.html",
+  "sourceSha256": "fcc5d879c34da868b817f8d9d306193743d3933db3096da605bda659d8e633b2",
   "generator": "data/tv-spec-lane/scratch/extract.py + build_tokens.py"
  },
  "color": {
@@ -773,27 +773,27 @@
   },
   "rowHeadingBand": {
    "$type": "dimension",
-   "$value": "30dp",
-   "px": 60,
-   "dp": 30.0,
+   "$value": "42dp",
+   "px": 84,
+   "dp": 42.0,
    "source": "index.html:1018",
-   "usedBy": "shelf row: heading band (44 px heading at top 0) before the cards start at y + 60"
+   "usedBy": "shelf row: heading band (44 px heading at top 0, then 40 px) before the cards start at y + 84 (HEAD_OFF)"
   },
   "rowGapAfter": {
+   "$type": "dimension",
+   "$value": "34dp",
+   "px": 68,
+   "dp": 34.0,
+   "source": "index.html:1018",
+   "usedBy": "shelf row: space after cards (+ caption band) before the next row; shelf row height = 84 + card h + caption + 68"
+  },
+  "gridRowGap": {
    "$type": "dimension",
    "$value": "22dp",
    "px": 44,
    "dp": 22.0,
-   "source": "index.html:1018",
-   "usedBy": "shelf row: space after cards (+ caption band) before the next row; shelf row height = 60 + card h + caption + 44"
-  },
-  "gridRowGap": {
-   "$type": "dimension",
-   "$value": "14dp",
-   "px": 28,
-   "dp": 14.0,
    "source": "index.html:1019",
-   "usedBy": "grid row height = 384 + 76 + 28 = 488 (library, See all, person)"
+   "usedBy": "grid row height = 384 + 96 + 44 = 524 (library, See all, person)"
   },
   "row_hero": {
    "$type": "dimension",
@@ -825,7 +825,7 @@
    "px": 104,
    "dp": 52.0,
    "source": "index.html:1021",
-   "usedBy": "chip row (Discover filters, library toolbar, See all/service type chips, seasons)"
+   "usedBy": "chip row above shelves (Discover filters, service type chips, seasons); 104 px"
   },
   "row_note": {
    "$type": "dimension",
@@ -1041,10 +1041,10 @@
   },
   "captionOffset": {
    "$type": "dimension",
-   "px": 18,
-   "dp": 9,
+   "px": 38,
+   "dp": 19,
    "source": "index.html:1242",
-   "usedBy": "caption under a focused poster starts 18 px below the card bottom (capHtml top = headH + h + 18); width 640"
+   "usedBy": "caption under a focused poster starts 38 px below the card bottom (capHtml top = headH + h + CAP_OFF; was 18, amended 2026-11-06); width 640"
   },
   "plateInset": {
    "$type": "dimension",
@@ -1171,6 +1171,14 @@
    },
    "source": "index.html:204",
    "usedBy": "letter rail (only for destinations with >= 200 titles)"
+  },
+  "row_chipsGrid": {
+   "$type": "dimension",
+   "$value": "68dp",
+   "px": 136,
+   "dp": 68.0,
+   "source": "index.html:rowH",
+   "usedBy": "chip row directly above a grid (library toolbar, See all type chips): 136 px, so 52 px from the chips to the first card row (was 104 / 20 px)"
   }
  },
  "card": {
@@ -1179,16 +1187,16 @@
    "px": {
     "w": 256,
     "h": 384,
-    "gap": 24,
-    "pitch": 280,
-    "captionBand": 76
+    "gap": 40,
+    "pitch": 296,
+    "captionBand": 96
    },
    "dp": {
     "w": 128.0,
     "h": 192.0,
-    "gap": 12.0,
-    "pitch": 140.0,
-    "captionBand": 38.0
+    "gap": 20.0,
+    "pitch": 148.0,
+    "captionBand": 48.0
    },
    "ratio": "2:3",
    "fullSlotsPerRow": 6,
@@ -1198,16 +1206,16 @@
   "tile": {
    "$type": "card",
    "px": {
-    "w": 416,
-    "h": 234,
-    "gap": 24,
+    "w": 400,
+    "h": 225,
+    "gap": 40,
     "pitch": 440,
     "captionBand": 0
    },
    "dp": {
-    "w": 208.0,
-    "h": 117.0,
-    "gap": 12.0,
+    "w": 200.0,
+    "h": 112.5,
+    "gap": 20.0,
     "pitch": 220.0,
     "captionBand": 0.0
    },
@@ -1219,16 +1227,16 @@
   "wide": {
    "$type": "card",
    "px": {
-    "w": 560,
-    "h": 315,
-    "gap": 24,
+    "w": 544,
+    "h": 306,
+    "gap": 40,
     "pitch": 584,
     "captionBand": 0
    },
    "dp": {
-    "w": 280.0,
-    "h": 157.5,
-    "gap": 12.0,
+    "w": 272.0,
+    "h": 153.0,
+    "gap": 20.0,
     "pitch": 292.0,
     "captionBand": 0.0
    },
@@ -1242,15 +1250,15 @@
    "px": {
     "w": 256,
     "h": 144,
-    "gap": 24,
-    "pitch": 280,
+    "gap": 40,
+    "pitch": 296,
     "captionBand": 0
    },
    "dp": {
     "w": 128.0,
     "h": 72.0,
-    "gap": 12.0,
-    "pitch": 140.0,
+    "gap": 20.0,
+    "pitch": 148.0,
     "captionBand": 0.0
    },
    "ratio": "16:9",
@@ -1262,22 +1270,22 @@
    "$type": "card",
    "px": {
     "w": 200,
-    "h": 290,
-    "gap": 28,
-    "pitch": 228,
+    "h": 310,
+    "gap": 44,
+    "pitch": 244,
     "captionBand": 0
    },
    "dp": {
     "w": 100.0,
-    "h": 145.0,
-    "gap": 14.0,
-    "pitch": 114.0,
+    "h": 155.0,
+    "gap": 22.0,
+    "pitch": 122.0,
     "captionBand": 0.0
    },
    "ratio": "1:1 circle",
    "fullSlotsPerRow": 7,
    "source": "index.html:660",
-   "usedBy": "Cast row: 200 px circle + name + character, 290 px tall"
+   "usedBy": "Cast row: 200 px circle + name + character, 310 tall (name starts 236 below the top)"
   }
  },
  "focus": {
@@ -1318,16 +1326,17 @@
   },
   "ringCard": {
    "$type": "shadow",
-   "$value": "0 0 0 4px var(--bg),0 0 0 8px var(--accent),0 18px 50px rgb(0 0 0 / .65)",
-   "gapPx": 4,
+   "$value": "0 0 0 2px var(--accent), inset 0 0 0 2px var(--accent) (drawn above the art), 0 18px 50px rgb(0 0 0 / .65)",
+   "gapPx": 0,
    "ringPx": 4,
-   "gapDp": 2,
+   "gapDp": 0,
    "ringDp": 2,
-   "gapColor": "color.bg",
    "ringColor": "color.accent",
    "liftShadow": "0 18px 50px rgb(0 0 0 / .65)",
    "source": "index.html:134",
-   "usedBy": "focused card: a 4 px bg-coloured gap then a 4 px lilac ring OUTSIDE the art (never covers it), plus a lift shadow; drawn on the circle for cast cards"
+   "usedBy": "focused card (poster, tile, wide, entry) and cast circle: one 4 px lilac ring centred on the art edge, 2 px outside and 2 px over the art, no gap, plus a lift shadow (Justin 2026-11-06: \"2px inset, 4px ring\")",
+   "outsidePx": 2,
+   "insidePx": 2
   },
   "ringButton": {
    "$type": "shadow",
@@ -1589,4 +1598,4 @@
    "usedBy": "Coming-in sheet shows 5 rows (4 while one is expanded), window follows focus"
   }
  }
-}
+}