@pepperui/tokens 1.2.0

package/dist/figma.json

@@ -0,0 +1,4503 @@
+{
+  "$comment": "GENERATED from tokens/*.json by npm run build. Imported by scripts/figma_import.mjs. Figma variables are COLOR / FLOAT / STRING / BOOLEAN only.",
+  "collections": {
+    "Primitives": {
+      "modes": [
+        "Value"
+      ],
+      "variables": [
+        {
+          "name": "color/neutral/0",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-neutral-0. Page surface."
+        },
+        {
+          "name": "color/neutral/100",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f2f2f2"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-neutral-100. NOT the card surface - see color.light-blue.100, a deliberately separate value (D5)."
+        },
+        {
+          "name": "color/neutral/200",
+          "type": "COLOR",
+          "values": {
+            "Value": "#dad9d9"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-neutral-200. Default border."
+        },
+        {
+          "name": "color/neutral/300",
+          "type": "COLOR",
+          "values": {
+            "Value": "#b5b3b3"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-neutral-300. Too pale to be a heading ink - Fedor 2026-08-05, which is why rule U12 uses 400."
+        },
+        {
+          "name": "color/neutral/400",
+          "type": "COLOR",
+          "values": {
+            "Value": "#858080"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-neutral-400. Every grey subheading in the system reads this ink (U12)."
+        },
+        {
+          "name": "color/neutral/500",
+          "type": "COLOR",
+          "values": {
+            "Value": "#6c6666"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "DERIVED, not quoted. OKLab midpoint of 400 and 600 - scripts/derive_neutrals.py. D4 asked for this step; no source file has it."
+        },
+        {
+          "name": "color/neutral/600",
+          "type": "COLOR",
+          "values": {
+            "Value": "#544d4d"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-neutral-600. Muted text."
+        },
+        {
+          "name": "color/neutral/700",
+          "type": "COLOR",
+          "values": {
+            "Value": "#3b3333"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "DERIVED, not quoted. OKLab midpoint of 600 and 800 - scripts/derive_neutrals.py. D4 asked for this step; no source file has it."
+        },
+        {
+          "name": "color/neutral/800",
+          "type": "COLOR",
+          "values": {
+            "Value": "#231b1b"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-neutral-800. Inverse surface; the multicolor table header (Fedor 2026-07-15)."
+        },
+        {
+          "name": "color/neutral/900",
+          "type": "COLOR",
+          "values": {
+            "Value": "#0b0202"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-neutral-darkest, S1 --ink. D4: this is text.default. It absorbs the two other blacks, #141414 (--mobupps-black) and #171717 (--color-btn-primary-bg), unless a visual test shows a difference worth its own token."
+        },
+        {
+          "name": "color/neutral/1000",
+          "type": "COLOR",
+          "values": {
+            "Value": "#000000"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-neutral-1000. D4 reserves pure black for masks and print. Not a text colour."
+        },
+        {
+          "name": "color/blue/100",
+          "type": "COLOR",
+          "values": {
+            "Value": "#e9e9fb"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-blue-100 / S1 --blue-bg. accent.bg in blue mode."
+        },
+        {
+          "name": "color/blue/200",
+          "type": "COLOR",
+          "values": {
+            "Value": "#d4d3f7"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-blue-200 / S1 --blue-lighter."
+        },
+        {
+          "name": "color/blue/300",
+          "type": "COLOR",
+          "values": {
+            "Value": "#6a66e4"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-blue-300 / S1 --blue-light. Subtitle ink and icon-list glyph ink in blue mode."
+        },
+        {
+          "name": "color/blue/400",
+          "type": "COLOR",
+          "values": {
+            "Value": "#2b25d9"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-blue-400 / S1 --persian-blue. Brand main."
+        },
+        {
+          "name": "color/blue/500",
+          "type": "COLOR",
+          "values": {
+            "Value": "#221dad"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-blue-500."
+        },
+        {
+          "name": "color/blue/600",
+          "type": "COLOR",
+          "values": {
+            "Value": "#110e56"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-blue-600 / S1 --blue-dark."
+        },
+        {
+          "name": "color/blue/700",
+          "type": "COLOR",
+          "values": {
+            "Value": "#0c0b41"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-blue-700 / S1 --blue-darkest. Table header bar in blue mode."
+        },
+        {
+          "name": "color/red/100",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fce9e8"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-red-100 / S1 --red-bg."
+        },
+        {
+          "name": "color/red/200",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f9d3d2"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-red-200 / S1 --red-lighter."
+        },
+        {
+          "name": "color/red/300",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ec6663"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-red-300 / S1 --red-light. Subtitle ink in red mode - scores 2.83 on the card surface against a 3.0 floor, accepted as an exception by D18, not a defect."
+        },
+        {
+          "name": "color/red/400",
+          "type": "COLOR",
+          "values": {
+            "Value": "#e42521"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-red-400 / S1 --crimson. Brand main, and the logo fill (D19 binds the mark to this so it cannot drift again)."
+        },
+        {
+          "name": "color/red/500",
+          "type": "COLOR",
+          "values": {
+            "Value": "#b61d1a"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-red-500."
+        },
+        {
+          "name": "color/red/600",
+          "type": "COLOR",
+          "values": {
+            "Value": "#5b0e0d"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-red-600 / S1 --red-dark."
+        },
+        {
+          "name": "color/red/700",
+          "type": "COLOR",
+          "values": {
+            "Value": "#440b09"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-red-700 / S1 --red-darkest. Table header bar in red mode."
+        },
+        {
+          "name": "color/yellow/100",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fef9e9"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-yellow-100 / S1 --yellow-bg."
+        },
+        {
+          "name": "color/yellow/200",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fdf3d3"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-yellow-200 / S1 --yellow-lighter."
+        },
+        {
+          "name": "color/yellow/300",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fad567"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-yellow-300 / S1 --yellow-light. Too pale for a 24px glyph, which is why the icon list keeps the main hue in yellow mode (Fedor 2026-08-10)."
+        },
+        {
+          "name": "color/yellow/400",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f9c426"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-yellow-400 / S1 --yellow. Brand main."
+        },
+        {
+          "name": "color/yellow/500",
+          "type": "COLOR",
+          "values": {
+            "Value": "#c79c1e"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-yellow-500. Dark enough to carry status.warning text."
+        },
+        {
+          "name": "color/yellow/600",
+          "type": "COLOR",
+          "values": {
+            "Value": "#634e0f"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-yellow-600 / S1 --yellow-dark."
+        },
+        {
+          "name": "color/yellow/700",
+          "type": "COLOR",
+          "values": {
+            "Value": "#4a3a0b"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-yellow-700 / S1 --yellow-darkest. Table header bar in yellow mode."
+        },
+        {
+          "name": "color/green/100",
+          "type": "COLOR",
+          "values": {
+            "Value": "#d4f2de"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S1 --green-bg. Success badge background (slide.css:287, app.css:96)."
+        },
+        {
+          "name": "color/green/400",
+          "type": "COLOR",
+          "values": {
+            "Value": "#74af36"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-status-green-light. The site's solid status green."
+        },
+        {
+          "name": "color/green/600",
+          "type": "COLOR",
+          "values": {
+            "Value": "#1a6b36"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S1 --green. Success badge text, read on green.100 (slide.css:287)."
+        },
+        {
+          "name": "color/status/danger",
+          "type": "COLOR",
+          "values": {
+            "Value": "#da4144"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-status-red-light. NOT color.red.400 (#e42521) - G2 flagged these as one name over two values, and they are two jobs: this is the error state, #e42521 is the brand mark. Both survive."
+        },
+        {
+          "name": "color/light-blue/50",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fbfbfd"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The illustrations' screen near-white (D120): the TV, phone and laptop screens, one step lighter and bluer than 100. Not white, because a screen has no outline of its own, so in white it takes the colour of the shell around it and its edge disappears; not 100, which reads visibly greyer. Its one role is illustration/screen."
+        },
+        {
+          "name": "color/light-blue/100",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f2f2f7"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-light-blue-100 / S1 --card-bg. The card surface."
+        },
+        {
+          "name": "color/gradient-stop/pink",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f24288"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S1 --grad-blue far stop."
+        },
+        {
+          "name": "color/gradient-stop/orchid",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ebb8fc"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S1 --grad-yellow near stop."
+        },
+        {
+          "name": "color/gradient-stop/magenta",
+          "type": "COLOR",
+          "values": {
+            "Value": "#d947d6"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S1 --grad-red far stop."
+        },
+        {
+          "name": "color/alpha/neutral-800-50",
+          "type": "COLOR",
+          "values": {
+            "Value": "#231b1b80"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "neutral.800 at 50%. Added 2026-09-07 for the Dialog scrim: Paggy uses ink at 45% (app.css .modal-scrim rgba(11,2,2,.45)), the site neutral-800 at 66% with a blur (home-popup.css .cookie-consent), shadcn black/50 - the middle value on the house dark."
+        },
+        {
+          "name": "color/alpha/white-8",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff14"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "White at 8% — the hover wash on a dark rail. Paggy app.css:563 .anav-item:hover background rgba(255,255,255,.08) and :1823 .mtr-secnav button:hover; the concept's 'Hover white 8%' (design-rules §B). Added 2026-09-07 for Sidebar."
+        },
+        {
+          "name": "color/alpha/white-16",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff29"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "White at 16% — the active wash on a dark rail and the glass of the user card. Paggy app.css:564 .anav-item.active rgba(255,255,255,.16) and :1688; the concept's 'Active white 16%'. Added 2026-09-07 for Sidebar."
+        },
+        {
+          "name": "color/alpha/black-7",
+          "type": "COLOR",
+          "values": {
+            "Value": "#00000012"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "Black at 7% — the chart grid line. Paggy charts.js:17 GRID rgba(0,0,0,0.07) (the light horizontal grid under every bar and line chart; DESIGN_SYSTEM.md §Chart rules). 0x12 = 18/255 = 7.06%. Added 2026-09-07 for Chart recipes."
+        },
+        {
+          "name": "color/alpha/grey-232-49",
+          "type": "COLOR",
+          "values": {
+            "Value": "#e8e8e87d"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "rgb(232,232,232) at 49% - the site's navigation-bar frost, global-2026.css:159 .main-nav background rgba(232,232,232,.49). 232 is not a ramp step; the site's value is kept exactly (D42, 2026-09-07)."
+        },
+        {
+          "name": "color/alpha/white-71",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffffb5"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "White at 71% - the site's products panel frost, global-2026.css:208 .nav-dropdown background rgba(255,255,255,.71) (D42, 2026-09-07)."
+        },
+        {
+          "name": "space/2",
+          "type": "FLOAT",
+          "values": {
+            "Value": 2
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "space/4",
+          "type": "FLOAT",
+          "values": {
+            "Value": 4
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "space/8",
+          "type": "FLOAT",
+          "values": {
+            "Value": 8
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "Locked: the bullet-list gap. A rule with a test behind it (G19)."
+        },
+        {
+          "name": "space/12",
+          "type": "FLOAT",
+          "values": {
+            "Value": 12
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --card-gap, between items inside a card."
+        },
+        {
+          "name": "space/16",
+          "type": "FLOAT",
+          "values": {
+            "Value": 16
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "space/20",
+          "type": "FLOAT",
+          "values": {
+            "Value": 20
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --card-pad, inside cards."
+        },
+        {
+          "name": "space/24",
+          "type": "FLOAT",
+          "values": {
+            "Value": 24
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "space/32",
+          "type": "FLOAT",
+          "values": {
+            "Value": 32
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --gap-section, between content sections."
+        },
+        {
+          "name": "space/40",
+          "type": "FLOAT",
+          "values": {
+            "Value": 40
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "space/48",
+          "type": "FLOAT",
+          "values": {
+            "Value": 48
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "space/64",
+          "type": "FLOAT",
+          "values": {
+            "Value": 64
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --margin and --gap-heading. The slide outer margin."
+        },
+        {
+          "name": "space/80",
+          "type": "FLOAT",
+          "values": {
+            "Value": 80
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "radius/4",
+          "type": "FLOAT",
+          "values": {
+            "Value": 4
+          },
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "description": "S5 --radius-xs."
+        },
+        {
+          "name": "radius/8",
+          "type": "FLOAT",
+          "values": {
+            "Value": 8
+          },
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "description": "S5 --radius-sm."
+        },
+        {
+          "name": "radius/16",
+          "type": "FLOAT",
+          "values": {
+            "Value": 16
+          },
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "description": "S5 --radius-md."
+        },
+        {
+          "name": "radius/32",
+          "type": "FLOAT",
+          "values": {
+            "Value": 32
+          },
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "description": "S5 --radius-lg."
+        },
+        {
+          "name": "radius/64",
+          "type": "FLOAT",
+          "values": {
+            "Value": 64
+          },
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "description": "S5 --radius-xl."
+        },
+        {
+          "name": "radius/full",
+          "type": "FLOAT",
+          "values": {
+            "Value": 9999
+          },
+          "scopes": [
+            "CORNER_RADIUS"
+          ],
+          "description": "Labels are pills, actions are squares. Chips take this; buttons never do."
+        },
+        {
+          "name": "font/family/poppins",
+          "type": "STRING",
+          "values": {
+            "Value": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "The Latin family. S5 sets it for all five type roles; S1 embeds it locally for offline PDF export. Poppins carries no Cyrillic (Finding 16) - RU text sets in font.family.cyrillic (D39)."
+        },
+        {
+          "name": "font/family/cyrillic",
+          "type": "STRING",
+          "values": {
+            "Value": "Onest"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "The Cyrillic companion to Poppins - Fedor, 2026-09-07 (D39): 'we use Onest for cyrillic'. Onest (Google Fonts, OFL) carries Cyrillic in the same weights the system uses (400 / 500 / 600). Every type role keeps Poppins; a text in Russian - :lang(ru), or a RU deck - takes this family at the same size and weight. Closes Finding 16."
+        },
+        {
+          "name": "font/weight/400",
+          "type": "FLOAT",
+          "values": {
+            "Value": 400
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "Regular. Body text and the small headline; on a slide, body/small is Medium."
+        },
+        {
+          "name": "font/weight/500",
+          "type": "FLOAT",
+          "values": {
+            "Value": 500
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "Medium. The small title and the web's label; on a slide, body/small and the medium headline. SemiBold is a display weight, not a reading weight."
+        },
+        {
+          "name": "font/weight/600",
+          "type": "FLOAT",
+          "values": {
+            "Value": 600
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "SemiBold. Display, the large headline, the web's medium headline, and the large and medium titles. Never body text."
+        },
+        {
+          "name": "font/weight/700",
+          "type": "FLOAT",
+          "values": {
+            "Value": 700
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "Bold. Rare; reserved for emphasis inside display type."
+        },
+        {
+          "name": "font/size/12",
+          "type": "FLOAT",
+          "values": {
+            "Value": 12
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/13",
+          "type": "FLOAT",
+          "values": {
+            "Value": 13
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "Paggy app.css:597 table.admin td 13px - the product table cell (D45, 2026-09-08). The one size between 12 and 14; added because the admin table is a source, not rounded away."
+        },
+        {
+          "name": "font/size/14",
+          "type": "FLOAT",
+          "values": {
+            "Value": 14
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/15",
+          "type": "FLOAT",
+          "values": {
+            "Value": 15
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "S1 --fs-caption. The chart minimum - nothing on a slide goes smaller."
+        },
+        {
+          "name": "font/size/16",
+          "type": "FLOAT",
+          "values": {
+            "Value": 16
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/18",
+          "type": "FLOAT",
+          "values": {
+            "Value": 18
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/20",
+          "type": "FLOAT",
+          "values": {
+            "Value": 20
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/22",
+          "type": "FLOAT",
+          "values": {
+            "Value": 22
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/24",
+          "type": "FLOAT",
+          "values": {
+            "Value": 24
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "Paggy slide.css:729 .ctbl__cell--head font-size 24px - the deck table header bar, Poppins Medium on the accent-dark bar (D45, 2026-09-08)."
+        },
+        {
+          "name": "font/size/25",
+          "type": "FLOAT",
+          "values": {
+            "Value": 25
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/26",
+          "type": "FLOAT",
+          "values": {
+            "Value": 26
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "S1 --fs-body, --fs-h2 and --fs-card-title all land here."
+        },
+        {
+          "name": "font/size/28",
+          "type": "FLOAT",
+          "values": {
+            "Value": 28
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/32",
+          "type": "FLOAT",
+          "values": {
+            "Value": 32
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/36",
+          "type": "FLOAT",
+          "values": {
+            "Value": 36
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/40",
+          "type": "FLOAT",
+          "values": {
+            "Value": 40
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/41",
+          "type": "FLOAT",
+          "values": {
+            "Value": 41
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "S1 slide.css:563 - the deck's 41 px takeaway line (.l17-insight__text, Figma 8042:47). A SLIDE step only (D110, 2026-09-17); the web's small headline is 40."
+        },
+        {
+          "name": "font/size/45",
+          "type": "FLOAT",
+          "values": {
+            "Value": 45
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/46",
+          "type": "FLOAT",
+          "values": {
+            "Value": 46
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "S1 slide.css:75 - Figma H2_46, the deck's second heading style. A SLIDE step only (D110, 2026-09-17); the web's medium headline is 45."
+        },
+        {
+          "name": "font/size/48",
+          "type": "FLOAT",
+          "values": {
+            "Value": 48
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/64",
+          "type": "FLOAT",
+          "values": {
+            "Value": 64
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "S1 --fs-kpi."
+        },
+        {
+          "name": "font/size/65",
+          "type": "FLOAT",
+          "values": {
+            "Value": 65
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "S5 --fs-headline-large. One px from S1's 66 - G5, and D9 makes the two the same token in different canvas modes rather than an unexplained discrepancy."
+        },
+        {
+          "name": "font/size/66",
+          "type": "FLOAT",
+          "values": {
+            "Value": 66
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "S1 --fs-h1."
+        },
+        {
+          "name": "font/size/92",
+          "type": "FLOAT",
+          "values": {
+            "Value": 92
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/117",
+          "type": "FLOAT",
+          "values": {
+            "Value": 117
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/size/148",
+          "type": "FLOAT",
+          "values": {
+            "Value": 148
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/line-height/tight",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1.2
+          },
+          "scopes": [],
+          "description": "Display and headline. S1 H1_66; S5 headline-small."
+        },
+        {
+          "name": "font/line-height/normal",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1.4
+          },
+          "scopes": [],
+          "description": "The browser's 'normal' for Poppins, pinned to a number so it cannot vary by engine. Verify against a render before Figma import."
+        },
+        {
+          "name": "font/line-height/relaxed",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1.5
+          },
+          "scopes": [],
+          "description": "S5 body-extra-small."
+        },
+        {
+          "name": "font/line-height/loose",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1.7
+          },
+          "scopes": [],
+          "description": "S5 body-extra-small in long-form blocks."
+        },
+        {
+          "name": "font/letter-spacing/normal",
+          "type": "FLOAT",
+          "values": {
+            "Value": 0
+          },
+          "scopes": [
+            "ALL_SCOPES"
+          ],
+          "description": ""
+        },
+        {
+          "name": "font/letter-spacing/tight",
+          "type": "FLOAT",
+          "values": {
+            "Value": -0.01
+          },
+          "scopes": [
+            "ALL_SCOPES"
+          ],
+          "description": "S1 H1_66 tracking -0.66px at 66px = -0.01em. — UNIT CORRECTED 2026-09-07 (G28): written as rem on 2026-09-04, but every source is em: styles.css:479 `letter-spacing: 0.06em`, :489 `0.1em`, and S1 H1_66 is -0.66px at 66px = -0.01em. In rem the value was measured against the 16px root, one sixth of what was quoted."
+        },
+        {
+          "name": "font/letter-spacing/wide",
+          "type": "FLOAT",
+          "values": {
+            "Value": 0.06
+          },
+          "scopes": [
+            "ALL_SCOPES"
+          ],
+          "description": "S5, on 22px uppercase-adjacent labels. — UNIT CORRECTED 2026-09-07 (G28): written as rem on 2026-09-04, but every source is em: styles.css:479 `letter-spacing: 0.06em`, :489 `0.1em`, and S1 H1_66 is -0.66px at 66px = -0.01em. In rem the value was measured against the 16px root, one sixth of what was quoted."
+        },
+        {
+          "name": "font/letter-spacing/wider",
+          "type": "FLOAT",
+          "values": {
+            "Value": 0.1
+          },
+          "scopes": [
+            "ALL_SCOPES"
+          ],
+          "description": "S5 .page-eyebrow. — UNIT CORRECTED 2026-09-07 (G28): written as rem on 2026-09-04, but every source is em: styles.css:479 `letter-spacing: 0.06em`, :489 `0.1em`, and S1 H1_66 is -0.66px at 66px = -0.01em. In rem the value was measured against the 16px root, one sixth of what was quoted."
+        },
+        {
+          "name": "duration/instant",
+          "type": "FLOAT",
+          "values": {
+            "Value": 50
+          },
+          "scopes": [],
+          "description": "Press feedback only - S5 uses it for transform on :active."
+        },
+        {
+          "name": "duration/fast",
+          "type": "FLOAT",
+          "values": {
+            "Value": 150
+          },
+          "scopes": [],
+          "description": "The most-used value in S5 (colour, background, border). Default for state changes."
+        },
+        {
+          "name": "duration/medium",
+          "type": "FLOAT",
+          "values": {
+            "Value": 200
+          },
+          "scopes": [],
+          "description": "S5 transform and opacity."
+        },
+        {
+          "name": "duration/slow",
+          "type": "FLOAT",
+          "values": {
+            "Value": 250
+          },
+          "scopes": [],
+          "description": "S5 the dropdown: max-height, margin-top, box-shadow."
+        },
+        {
+          "name": "duration/slower",
+          "type": "FLOAT",
+          "values": {
+            "Value": 300
+          },
+          "scopes": [],
+          "description": "S5, paired with the decelerate easing below."
+        },
+        {
+          "name": "easing/standard",
+          "type": "STRING",
+          "values": {
+            "Value": "cubic-bezier(0.25, 0.1, 0.25, 1)"
+          },
+          "scopes": [],
+          "description": "CSS 'ease'. What S5 uses almost everywhere; written out so the token is explicit rather than a keyword."
+        },
+        {
+          "name": "easing/decelerate",
+          "type": "STRING",
+          "values": {
+            "Value": "cubic-bezier(0.16, 1, 0.3, 1)"
+          },
+          "scopes": [],
+          "description": "S5, the one hand-tuned curve in the codebase - transform 0.3s. Fast out, long settle."
+        },
+        {
+          "name": "size/icon/16",
+          "type": "FLOAT",
+          "values": {
+            "Value": 16
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "size/icon/24",
+          "type": "FLOAT",
+          "values": {
+            "Value": 24
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": "The icon-list glyph size - the reason yellow.300 is too pale for it."
+        },
+        {
+          "name": "size/icon/32",
+          "type": "FLOAT",
+          "values": {
+            "Value": 32
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "size/icon/48",
+          "type": "FLOAT",
+          "values": {
+            "Value": 48
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "size/control/small",
+          "type": "FLOAT",
+          "values": {
+            "Value": 28
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": "The small control: Button small, Input small, the pills."
+        },
+        {
+          "name": "size/control/medium",
+          "type": "FLOAT",
+          "values": {
+            "Value": 36
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": "The medium control - the site and Paggy default (.btn min-height 36px)."
+        },
+        {
+          "name": "size/control/large",
+          "type": "FLOAT",
+          "values": {
+            "Value": 44
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": "The large control: Button large, Input large."
+        },
+        {
+          "name": "breakpoint/tablet",
+          "type": "FLOAT",
+          "values": {
+            "Value": 768
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": "Below this is web-mobile."
+        },
+        {
+          "name": "breakpoint/desktop",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1024
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": "At and above this is web-desktop."
+        },
+        {
+          "name": "container/web",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1320
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": "Site content width."
+        },
+        {
+          "name": "container/slide",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1792
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --content-w. 1920 minus two 64px margins."
+        },
+        {
+          "name": "canvas/slide-width",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1920
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "canvas/slide-height",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1080
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "canvas/slide-margin",
+          "type": "FLOAT",
+          "values": {
+            "Value": 64
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --margin."
+        },
+        {
+          "name": "canvas/slide-margin-top",
+          "type": "FLOAT",
+          "values": {
+            "Value": 42
+          },
+          "scopes": [
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --margin-top. The heading is anchored at y=42, not at the outer margin."
+        },
+        {
+          "name": "blur/nav",
+          "type": "FLOAT",
+          "values": {
+            "Value": 7.3
+          },
+          "scopes": [
+            "EFFECT_FLOAT"
+          ],
+          "description": "The site's navigation bar: backdrop-filter blur(7.3px) under surface.glass - global-2026.css:159 .main-nav."
+        },
+        {
+          "name": "blur/panel",
+          "type": "FLOAT",
+          "values": {
+            "Value": 14.6
+          },
+          "scopes": [
+            "EFFECT_FLOAT"
+          ],
+          "description": "The site's products panel: blur(14.6px) under surface.glass-strong - global-2026.css:208 .nav-dropdown."
+        },
+        {
+          "name": "blur/card",
+          "type": "FLOAT",
+          "values": {
+            "Value": 6.8
+          },
+          "scopes": [
+            "EFFECT_FLOAT"
+          ],
+          "description": "The deck's case-study card: a 6.8 background blur over the blob - Pepper Deck UI Kit Card/Case_Study/* (8006:3590)."
+        },
+        {
+          "name": "blur/blob",
+          "type": "FLOAT",
+          "values": {
+            "Value": 150
+          },
+          "scopes": [
+            "EFFECT_FLOAT"
+          ],
+          "description": "The Blob's layer blur - Pepper Deck UI Kit Decoration/Blob/* (8012:4118)."
+        }
+      ]
+    },
+    "Semantic": {
+      "modes": [
+        "Value"
+      ],
+      "variables": [
+        {
+          "name": "icon-list/ink",
+          "type": "COLOR",
+          "values": {
+            "Value": "#6a66e4"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "DEVIATION: reads accent.*.icon-ink, not accent.*.light. In yellow mode the glyph keeps the MAIN hue because #fad567 is too pale at 24px (Fedor 2026-08-10). Scoped deliberately - this is the only component whose ink changed, and no other component's colour moved with it. The value shown is the blue-mode default; the build emits one per accent mode.",
+          "aliases": {
+            "Value": "accent/blue/icon-ink"
+          }
+        },
+        {
+          "name": "insight/max-width",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1344
+          },
+          "scopes": [
+            "ALL_SCOPES"
+          ],
+          "description": "DEVIATION: not a layout token. 1344 is three quarters of the 1792px slide content width - an insight block that runs the full width stops reading as an insight and starts reading as a paragraph. Enforced by rules_test.py."
+        },
+        {
+          "name": "bullet-list/gap",
+          "type": "FLOAT",
+          "values": {
+            "Value": 8
+          },
+          "scopes": [
+            "ALL_SCOPES"
+          ],
+          "description": "LOCKED. 8px between bullets, and there is a test for it. It is here rather than in layout.* because it is a rule with a history: it was re-set by hand often enough to be worth pinning.",
+          "aliases": {
+            "Value": "space/8"
+          }
+        },
+        {
+          "name": "chip/radius",
+          "type": "FLOAT",
+          "values": {
+            "Value": 9999
+          },
+          "scopes": [
+            "ALL_SCOPES"
+          ],
+          "description": "DEVIATION from the radius scale: labels are pills, actions are squares. A chip is a label, so it is fully round; a button is an action, so it never is. The rule is the sentence, not the number.",
+          "aliases": {
+            "Value": "radius/full"
+          }
+        },
+        {
+          "name": "table/header/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#0c0b41"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "DEVIATION: the header bar is the only thing that reads accent.*.dark, which is why multicolor can safely map that slot to neutral.800 without touching anything else (Fedor 2026-07-15, matching the Figma grey SWOT variant). The value shown is the blue-mode default; the build emits one per accent mode.",
+          "aliases": {
+            "Value": "accent/blue/dark"
+          }
+        },
+        {
+          "name": "table/header/pill-tint",
+          "type": "COLOR",
+          "values": {
+            "Value": "#d4d3f7"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The header column's pill tint — an alias of accent.*.pill-tint, which carries the yellow (light) and multicolor (neutral-200) values per mode; the build emits one per accent mode. Until 2026-09-07 this aliased accent.*.lighter and described the multicolor override in prose only — the Figma variable then rendered red in multicolor (found by the Table build's SWOT example).",
+          "aliases": {
+            "Value": "accent/blue/pill-tint"
+          }
+        },
+        {
+          "name": "table/row/selected-bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#e9e9fb"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The wash of a selected row - an alias of accent.*.selected, which the build emits once per accent mode: the accent's palest tint in blue, red and yellow, and a NEUTRAL one step darker than the Table's own ground in multicolor (D110, 2026-09-17 - Fedor's pick on a rendered picture; until then the row read accent/bg, which is red/100 in multicolor, and a selected row on a dashboard was pink). Table ",
+          "aliases": {
+            "Value": "accent/blue/selected"
+          }
+        },
+        {
+          "name": "table/divider",
+          "type": "COLOR",
+          "values": {
+            "Value": "#dad9d9"
+          },
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "description": "DEVIATION, stated substitution: the deck table body divider is a 2 px #c9c9c9 that Paggy slide.css:723 itself calls token-less (.ctbl__cell--div - the quarter skill exact hairline, no matching design token). The nearest ramp step is neutral.200 #dad9d9; #c9c9c9 sits between 200 and 300 and would be a ramp exception with one consumer. The product size draws it 1 px (app.css:597 table.admin td borde",
+          "aliases": {
+            "Value": "color/neutral/200"
+          }
+        },
+        {
+          "name": "card/band",
+          "type": "COLOR",
+          "values": {
+            "Value": "#dad9d9"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "The Card subtitle band - Deck kit Card/Basic/Card with border 8011:5687 (Frame 291): #dad9d9 at radius 8, padding 12, the 20 px Regular line under the title. #dad9d9 is neutral.200 exactly; its own role because it is the only grey band on a card surface and neither border.default nor surface.sunken says what it is for (D45, 2026-09-08).",
+          "aliases": {
+            "Value": "color/neutral/200"
+          }
+        },
+        {
+          "name": "avatar/blue/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#d4d3f7"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "DEVIATION from tint.blue: the avatar initials tint is hue 200 on hue 600, not 200 on 300. Paggy app.css:1349-1351 .avatar--blue background #D4D3F7, color #110E56 - \"photo when uploaded; otherwise initials on the SECONDARY palette - visible but calm (Fedor: not too aggressive, not too weak)\". Added 2026-09-07 for the Figma Avatar.",
+          "aliases": {
+            "Value": "color/blue/200"
+          }
+        },
+        {
+          "name": "avatar/blue/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#110e56"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Avatar initials ink, blue. See avatar.blue.bg.",
+          "aliases": {
+            "Value": "color/blue/600"
+          }
+        },
+        {
+          "name": "avatar/red/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f9d3d2"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Paggy .avatar--red #F9D3D2 / #5B0E0D. See avatar.blue.bg.",
+          "aliases": {
+            "Value": "color/red/200"
+          }
+        },
+        {
+          "name": "avatar/red/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#5b0e0d"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Avatar initials ink, red.",
+          "aliases": {
+            "Value": "color/red/600"
+          }
+        },
+        {
+          "name": "avatar/yellow/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fdf3d3"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Paggy .avatar--yellow #FDF3D3 / #634E0F - yellow-200, one step lighter than tint.yellow.bg (300), because an avatar is calm and a label must read. See avatar.blue.bg.",
+          "aliases": {
+            "Value": "color/yellow/200"
+          }
+        },
+        {
+          "name": "avatar/yellow/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#634e0f"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Avatar initials ink, yellow.",
+          "aliases": {
+            "Value": "color/yellow/600"
+          }
+        },
+        {
+          "name": "toggle/on/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#544d4d"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Toggle on-state fill. Component token (tier 3): the site blog.css:284-286 .filter-pill.is-active background var(--color-neutral-600) #544d4d. Fedor 2026-09-07: \"use what the site uses - that way we combine our rules with the shadcn design system\" (shadcn: data-[state=on]:bg-accent). Shared by Toggle and Toggle - filled; replaces surface/inverse, which the first build used. Paggy's near-black #1414",
+          "aliases": {
+            "Value": "color/neutral/600"
+          }
+        },
+        {
+          "name": "toggle/on/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Toggle on-state ink. Component token (tier 3): the site blog.css:286 .filter-pill.is-active color var(--color-btn-primary-fg) #fafafa, carried as neutral/0 the way action.primary.fg is. Added 2026-09-07.",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "tabs/track",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f2f2f2"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "DEVIATION: the box of a segmented Tabs does not take the step every other grey surface takes on the product ground. On a white ground it is neutral.100 like the rest; on surface.card it is WHITE, not neutral.200 (Fedor 2026-09-17, D106 b and D107: 'can we make white background for menu. The rest is good'). It follows the ground by itself: the token names the page half and re-resolves to ground.car",
+          "aliases": {
+            "Value": "ground/page/track"
+          }
+        },
+        {
+          "name": "kpi/tone/blue/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#e9e9fb"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "KPI tile blue-team fill. Component token (tier 3): Paggy tokens.css:20 `--blue-bg` #E9E9FB (`.kpi-tile--blue`, slide.css) and the Deck kit's Card/Metric/color_card #e9e9fb; the site's echo-ai.css:452 `.stat-card.fintech` --persian-blue-lightest. A Tone axis rather than the Accent mode, because a KPI row shows every colour team on one canvas (Figma_product_dashboard_designer design-rules.md §0, Fed",
+          "aliases": {
+            "Value": "color/blue/100"
+          }
+        },
+        {
+          "name": "kpi/tone/red/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fce9e8"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "KPI tile red-team fill. Component token (tier 3): Paggy tokens.css:27 `--red-bg` (`.kpi-tile--red`) and the kit's color_card_input #fce9e8; the site's `.stat-card.edtech` --red-lightest. A Tone axis rather than the Accent mode, because a KPI row shows every colour team on one canvas (Figma_product_dashboard_designer design-rules.md §0, Fedor Aug 27 2026). Added 2026-09-07.",
+          "aliases": {
+            "Value": "color/red/100"
+          }
+        },
+        {
+          "name": "kpi/tone/yellow/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fef9e9"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "KPI tile yellow-team fill. Component token (tier 3): Paggy tokens.css:34 `--yellow-bg` (`.kpi-tile--yellow`); the site's `.stat-card.ecommerce` --yellow-lightest. A Tone axis rather than the Accent mode, because a KPI row shows every colour team on one canvas (Figma_product_dashboard_designer design-rules.md §0, Fedor Aug 27 2026). Added 2026-09-07.",
+          "aliases": {
+            "Value": "color/yellow/100"
+          }
+        },
+        {
+          "name": "kpi/tone/neutral/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f2f2f2"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "KPI tile neutral-team fill: it IS surface.sunken, so it follows the ground (D107, Fedor 2026-09-17) - neutral.100 #f2f2f2 on a white page (1.12 : 1), neutral.200 #dad9d9 on the product ground surface.card (1.26 : 1), where neutral.200 is the fill of the master Card/Metric/color_status_input (the site file 3928:8574) and the white detail slot inside it reads 1.41 : 1. HISTORY, kept: neutral.100 on ",
+          "aliases": {
+            "Value": "surface/sunken"
+          }
+        },
+        {
+          "name": "kpi/delta/ring",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "description": "DEVIATION: the only ring in the library, and the one border a Badge ever carries. It marks a STATUS DELTA and nothing else — green because the number went up, red because it went down (Fedor 2026-09-16, and the correction he made the same day: 'we are working only with green positive and red negative status badges — this is a different thing from coloured badges for cards, blue tints for blue card",
+          "aliases": {
+            "Value": "surface/slot"
+          }
+        },
+        {
+          "name": "nav/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#231b1b"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "The rail's fill. Component token (tier 3): Paggy app.css:552 .anav background var(--near-black) #171717 and the concept's neutral/1000 panel (design-rules §B) both say near-black; the ramp has no #171717 and D4 reserves neutral/1000 for masks, so the rail takes the house dark surface, neutral/800 (surface.inverse — the site's --color-neutral-darker, the segment tab, the icon chip). Stated substitu",
+          "aliases": {
+            "Value": "color/neutral/800"
+          }
+        },
+        {
+          "name": "nav/item/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#b5b3b3"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "A nav item's ink and glyph at rest — Paggy app.css:559 .anav-item color var(--n300); the concept: 'Default text/glyph neutral/300'. Added 2026-09-07.",
+          "aliases": {
+            "Value": "color/neutral/300"
+          }
+        },
+        {
+          "name": "nav/item/fg-active",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "A nav item's ink and glyph on hover and when active — Paggy .anav-item:hover / .active color #fff; the concept: 'Active white text/glyphs'. Added 2026-09-07.",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "nav/item/bg-hover",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff14"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The hover wash — Paggy .anav-item:hover rgba(255,255,255,.08); the concept's 'Hover white 8%'. Added 2026-09-07.",
+          "aliases": {
+            "Value": "color/alpha/white-8"
+          }
+        },
+        {
+          "name": "nav/item/bg-active",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff29"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The active wash — Paggy .anav-item.active rgba(255,255,255,.16); the concept's 'Active white 16%'. Also the user card's glass (Sidebar/MAFO: Bg rect 0.08 → the hover step is used there). Added 2026-09-07.",
+          "aliases": {
+            "Value": "color/alpha/white-16"
+          }
+        },
+        {
+          "name": "nav/section/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#858080"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "A nav section title's ink (WORKSPACE · INTELLIGENCE · ACCOUNT) — the concept: 'Medium 12 with +8% tracking, neutral/400'; also the chevron on a nav link (concept: 'chevron in neutral/400 so the two glyphs read as different things'). Added 2026-09-07.",
+          "aliases": {
+            "Value": "color/neutral/400"
+          }
+        },
+        {
+          "name": "illustration/shell",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [],
+          "description": "An object's body: white, with one thin dark outline (D117).",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "illustration/surface",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f2f2f7"
+          },
+          "scopes": [],
+          "description": "A soft surface on an object: bars, a window's top bar.",
+          "aliases": {
+            "Value": "color/light-blue/100"
+          }
+        },
+        {
+          "name": "illustration/detail",
+          "type": "COLOR",
+          "values": {
+            "Value": "#dad9d9"
+          },
+          "scopes": [],
+          "description": "A soft grey detail: keyboard keys, a phone's speaker.",
+          "aliases": {
+            "Value": "color/neutral/200"
+          }
+        },
+        {
+          "name": "illustration/screen",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fbfbfd"
+          },
+          "scopes": [],
+          "description": "The screen of a TV, phone or laptop (D120).",
+          "aliases": {
+            "Value": "color/light-blue/50"
+          }
+        },
+        {
+          "name": "illustration/deck",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [],
+          "description": "A laptop's keyboard deck: white, not the screen's near-white (D120).",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "illustration/text",
+          "type": "COLOR",
+          "values": {
+            "Value": "#0b0202"
+          },
+          "scopes": [],
+          "description": "A label's text on an object, Poppins SemiBold.",
+          "aliases": {
+            "Value": "color/neutral/900"
+          }
+        },
+        {
+          "name": "illustration/outline/color",
+          "type": "COLOR",
+          "values": {
+            "Value": "#0b0202"
+          },
+          "scopes": [],
+          "description": "The one thin dark outline every object carries (D117).",
+          "aliases": {
+            "Value": "color/neutral/900"
+          }
+        },
+        {
+          "name": "illustration/outline/opacity",
+          "type": "FLOAT",
+          "values": {
+            "Value": 85
+          },
+          "scopes": [],
+          "description": "The outline's opacity, so the outline reads dark without reading black."
+        },
+        {
+          "name": "illustration/outline/width",
+          "type": "FLOAT",
+          "values": {
+            "Value": 0.5
+          },
+          "scopes": [],
+          "description": "The outline width, in px of a still at its own size; at another size it scales with the picture (D119). The live version draws the same line, never under one device pixel."
+        },
+        {
+          "name": "illustration/connector/color",
+          "type": "COLOR",
+          "values": {
+            "Value": "#b5b3b3"
+          },
+          "scopes": [],
+          "description": "A connector: the ring, a rod.",
+          "aliases": {
+            "Value": "color/neutral/300"
+          }
+        },
+        {
+          "name": "illustration/connector/radius",
+          "type": "FLOAT",
+          "values": {
+            "Value": 0.028
+          },
+          "scopes": [],
+          "description": "A connector tube's radius in scene units, the space the objects are modelled in (D119)."
+        },
+        {
+          "name": "illustration/arrow/color",
+          "type": "COLOR",
+          "values": {
+            "Value": "#6c6666"
+          },
+          "scopes": [],
+          "description": "An arrow by default; another token colour only for emphasis (D122).",
+          "aliases": {
+            "Value": "color/neutral/500"
+          }
+        },
+        {
+          "name": "illustration/arrow/width",
+          "type": "FLOAT",
+          "values": {
+            "Value": 3
+          },
+          "scopes": [],
+          "description": "An arrow's stroke: the width of a line in a picture 1000 px wide; a still at another size scales it with the picture (D119, D122)."
+        },
+        {
+          "name": "illustration/arrow/head/length",
+          "type": "FLOAT",
+          "values": {
+            "Value": 5
+          },
+          "scopes": [],
+          "description": "The length of each arm of the open chevron head, in stroke widths (D122)."
+        },
+        {
+          "name": "illustration/arrow/head/angle",
+          "type": "FLOAT",
+          "values": {
+            "Value": 40
+          },
+          "scopes": [],
+          "description": "The angle between each arm of the head and the line, in degrees (D122)."
+        },
+        {
+          "name": "text/default",
+          "type": "COLOR",
+          "values": {
+            "Value": "#0b0202"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "D4. Body and headings on light surfaces.",
+          "aliases": {
+            "Value": "color/neutral/900"
+          }
+        },
+        {
+          "name": "text/muted",
+          "type": "COLOR",
+          "values": {
+            "Value": "#544d4d"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Secondary text.",
+          "aliases": {
+            "Value": "color/neutral/600"
+          }
+        },
+        {
+          "name": "text/subtle",
+          "type": "COLOR",
+          "values": {
+            "Value": "#858080"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Every grey subheading - U12 uses this step, not 300, because 300 is too pale to read as a heading (Fedor 2026-08-05). Since D43 (2026-09-07) NOT for captions: at caption size (15px and under) neutral.400 scores 3.89 against the 4.5 floor - captions, chart axes and small labels read text.caption.",
+          "aliases": {
+            "Value": "color/neutral/400"
+          }
+        },
+        {
+          "name": "text/on-accent",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Text on a filled accent surface.",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "text/on-inverse",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Text on surface.inverse.",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "text/link",
+          "type": "COLOR",
+          "values": {
+            "Value": "#2b25d9"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Brand blue, in every accent mode. A link does not follow the slide accent - it has to stay recognisable as a link.",
+          "aliases": {
+            "Value": "color/blue/400"
+          }
+        },
+        {
+          "name": "text/disabled",
+          "type": "COLOR",
+          "values": {
+            "Value": "#b5b3b3"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "The one place neutral.300 is correct: it is meant to be too pale to read as active.",
+          "aliases": {
+            "Value": "color/neutral/300"
+          }
+        },
+        {
+          "name": "text/error",
+          "type": "COLOR",
+          "values": {
+            "Value": "#e42521"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Error text under a form field. QUOTED from styles.css:732-739 .field__error: 14px Regular, line-height 1.3, color var(--color-red-400). It is the brand red, matching border.error, not status.danger.fg. Contrast 4.58:1 on surface.page (passes the 4.5 body floor by a hair) and about 4.3:1 on surface.card (under it) - the site only puts forms on white; a form on a card should use status.danger.fg for",
+          "aliases": {
+            "Value": "color/red/400"
+          }
+        },
+        {
+          "name": "text/caption",
+          "type": "COLOR",
+          "values": {
+            "Value": "#544d4d"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "D43 (Fedor, 2026-09-07, charter Q1 - 'split'): the caption ink. Chart axes, legend notes, small labels, placeholders - every grey text under 24px that used to read text.subtle (neutral.400, 3.89 on white). neutral.600 #544d4d scores about 7.5 on the page and 6.8 on the card. Subheadings keep text.subtle - U12 untouched.",
+          "aliases": {
+            "Value": "color/neutral/600"
+          }
+        },
+        {
+          "name": "surface/page",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "The default ground.",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "surface/card",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f2f2f7"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "D5. #f2f2f7, not neutral.100 #f2f2f2 - two colours, two jobs. Do not merge them.",
+          "aliases": {
+            "Value": "color/light-blue/100"
+          }
+        },
+        {
+          "name": "surface/sunken",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f2f2f2"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Wells and inset panels. This is where #f2f2f2 belongs - on the white ground. It FOLLOWS THE GROUND since 2026-09-17 (D107): neutral.100 on surface.page, neutral.200 on the product ground surface.card, one step darker than what it sits on. The token names the page half, the default; under [data-ground=\"card\"] - and inside every part of @pepperui/css that paints surface.card as a ground - it re-reso",
+          "aliases": {
+            "Value": "ground/page/sunken"
+          }
+        },
+        {
+          "name": "surface/inverse",
+          "type": "COLOR",
+          "values": {
+            "Value": "#231b1b"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Dark blocks on a light page. Not neutral.900, which is reserved for text (D4).",
+          "aliases": {
+            "Value": "color/neutral/800"
+          }
+        },
+        {
+          "name": "surface/slot",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "The inversion rule: a slot on surface.card is white, a slot on surface.page is card. Consumers flip this pair; the token names the default half.",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "surface/glass",
+          "type": "COLOR",
+          "values": {
+            "Value": "#e8e8e87d"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "D42 (Fedor, 2026-09-07, charter F19): the frosted surface of the site's navigation bar - rgba(232,232,232,.49) over blur.nav. The Navigation menu binds it; before D42 it was a literal (audit Finding 19).",
+          "aliases": {
+            "Value": "color/alpha/grey-232-49"
+          }
+        },
+        {
+          "name": "surface/glass-strong",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffffb5"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "D42: the stronger frost of the site's products panel - rgba(255,255,255,.71) over blur.panel. The Navigation panel binds it.",
+          "aliases": {
+            "Value": "color/alpha/white-71"
+          }
+        },
+        {
+          "name": "overlay/scrim",
+          "type": "COLOR",
+          "values": {
+            "Value": "#231b1b80"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The wash behind a dialog, sheet or drawer. One value for all three products; the blur the site adds is a product choice, not a token. Added 2026-09-07 for Dialog (D29 point 6).",
+          "aliases": {
+            "Value": "color/alpha/neutral-800-50"
+          }
+        },
+        {
+          "name": "border/default",
+          "type": "COLOR",
+          "values": {
+            "Value": "#dad9d9"
+          },
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "description": "Card and input borders.",
+          "aliases": {
+            "Value": "color/neutral/200"
+          }
+        },
+        {
+          "name": "border/strong",
+          "type": "COLOR",
+          "values": {
+            "Value": "#858080"
+          },
+          "scopes": [
+            "STROKE_COLOR"
+          ],
+          "description": "Dividers that have to be seen. Note: decorative separators are banned - a border that only decorates should not exist (G19).",
+          "aliases": {
+            "Value": "color/neutral/400"
+          }
+        },
+        {
+          "name": "border/focus",
+          "type": "COLOR",
+          "values": {
+            "Value": "#6a66e4"
+          },
+          "scopes": [
+            "STROKE_COLOR",
+            "EFFECT_COLOR"
+          ],
+          "description": "The focus ring hue and border, in every accent mode. QUOTED from styles.css:644-646 `.field__control:focus → border-color var(--color-blue-300), box-shadow 0 0 0 3px rgba(106,102,228,0.15)` — the only focus ring the site defines; `.btn.btn--dark:focus` (:558) changes colour only. CORRECTED 2026-09-07: was color.blue.400 since 2026-09-04 with no source behind it; the Figma Button ring was already q",
+          "aliases": {
+            "Value": "color/blue/300"
+          }
+        },
+        {
+          "name": "border/error",
+          "type": "COLOR",
+          "values": {
+            "Value": "#e42521"
+          },
+          "scopes": [
+            "STROKE_COLOR",
+            "EFFECT_COLOR"
+          ],
+          "description": "The error border and ring. QUOTED from styles.css:648-650 `.field__control:invalid:not(:placeholder-shown) → border-color var(--color-red-400), box-shadow 0 0 0 3px rgba(228,37,33,0.10)`. Note it is the brand red (color.red.400 #e42521), NOT color.status.danger #da4144 — the same two reds G2 flagged; the site chose the brand one for the ring. Added 2026-09-07 for the Figma Input (D29 point 6: no l",
+          "aliases": {
+            "Value": "color/red/400"
+          }
+        },
+        {
+          "name": "action/primary/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#0b0202"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "S5 --color-btn-primary-bg is #171717; D4 retires it into neutral.900 #0b0202. If a visual test shows the difference matters, #171717 comes back as its own primitive - until then this is the one place D4's merge is load-bearing and worth watching.",
+          "aliases": {
+            "Value": "color/neutral/900"
+          }
+        },
+        {
+          "name": "action/primary/bg-hover",
+          "type": "COLOR",
+          "values": {
+            "Value": "#3b3333"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5 --color-btn-primary-bg-hover is #404040, one of the four values DL-3 could not name. It is not a ramp value; the derived neutral.700 #3b3333 is the nearest step. FLAGGED: this is a real substitution, not an alias, and M1.5's visual_regress will show it if it is wrong.",
+          "aliases": {
+            "Value": "color/neutral/700"
+          }
+        },
+        {
+          "name": "action/primary/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "S5 --color-btn-primary-fg is #fafafa, also unnamed in DL-3. Substituted with pure white. FLAGGED like bg-hover - a 2% difference on button text, verified by visual_regress rather than by argument.",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "action/secondary/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Outlined button.",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "action/secondary/bg-hover",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f2f2f2"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "color/neutral/100"
+          }
+        },
+        {
+          "name": "action/secondary/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#0b0202"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "color/neutral/900"
+          }
+        },
+        {
+          "name": "action/secondary/border",
+          "type": "COLOR",
+          "values": {
+            "Value": "#dad9d9"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "color/neutral/200"
+          }
+        },
+        {
+          "name": "action/danger/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#e42521"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "QUOTED from Paggy app.css:57 .btn--red: background var(--red) = #E42521 (app.css:11), the brand red, red.400. The site has no red button, so Paggy's is the quotation (D17); MAFO's <Button color=danger> is CoreUI's #e55353 and shadcn's destructive variant is bg-destructive - both stated, neither carried (D35).",
+          "aliases": {
+            "Value": "color/red/400"
+          }
+        },
+        {
+          "name": "action/danger/bg-hover",
+          "type": "COLOR",
+          "values": {
+            "Value": "#b61d1a"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "Paggy app.css:58 .btn--red:hover is #c61f1c, not a ramp value. The nearest step is red.500 #b61d1a - FLAGGED as a real substitution, the same kind as action.primary.bg-hover, and M1.5's visual_regress will show it if it is wrong.",
+          "aliases": {
+            "Value": "color/red/500"
+          }
+        },
+        {
+          "name": "action/danger/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "QUOTED from Paggy app.css:57 .btn--red: color #fff. White on red.400 is 4.58 - the same pair the contrast matrix already passes as accent.red.on-accent on accent.red.main.",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        },
+        {
+          "name": "action/disabled/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f2f2f2"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "color/neutral/100"
+          }
+        },
+        {
+          "name": "action/disabled/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#b5b3b3"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "color/neutral/300"
+          }
+        },
+        {
+          "name": "status/success/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#d4f2de"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "S1 slide.css:287 .badge--green background.",
+          "aliases": {
+            "Value": "color/green/100"
+          }
+        },
+        {
+          "name": "status/success/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#1a6b36"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "S1 slide.css:287 .badge--green colour. This pair is quoted from a component that already ships, so its contrast is proven in production rather than asserted here.",
+          "aliases": {
+            "Value": "color/green/600"
+          }
+        },
+        {
+          "name": "status/success/solid",
+          "type": "COLOR",
+          "values": {
+            "Value": "#74af36"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "S5's solid status green, for dots and fills.",
+          "aliases": {
+            "Value": "color/green/400"
+          }
+        },
+        {
+          "name": "status/danger/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fce9e8"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "color/red/100"
+          }
+        },
+        {
+          "name": "status/danger/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#5b0e0d"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Not color.status.danger #da4144 - that value is a solid fill, too light to read as text on a pale tint.",
+          "aliases": {
+            "Value": "color/red/600"
+          }
+        },
+        {
+          "name": "status/danger/solid",
+          "type": "COLOR",
+          "values": {
+            "Value": "#da4144"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "color/status/danger"
+          }
+        },
+        {
+          "name": "status/warning/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fef9e9"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "color/yellow/100"
+          }
+        },
+        {
+          "name": "status/warning/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#634e0f"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Built from the existing yellow ramp - no new hue was invented to complete the set. yellow.600 not 500, because warning text has to clear 4.5 on a pale tint.",
+          "aliases": {
+            "Value": "color/yellow/600"
+          }
+        },
+        {
+          "name": "status/warning/solid",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f9c426"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "Fills and icons only. Never text - U12.",
+          "aliases": {
+            "Value": "color/yellow/400"
+          }
+        },
+        {
+          "name": "status/info/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#e9e9fb"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "color/blue/100"
+          }
+        },
+        {
+          "name": "status/info/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#110e56"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "color/blue/600"
+          }
+        },
+        {
+          "name": "status/info/solid",
+          "type": "COLOR",
+          "values": {
+            "Value": "#2b25d9"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "OPEN QUESTION: this is the brand blue, so an info chip and a blue-accent element are the same colour. Acceptable if info is rare; wrong if info chips ever sit on a blue-accent slide. Needs Fedor, and it is the kind of thing only a real screen will settle.",
+          "aliases": {
+            "Value": "color/blue/400"
+          }
+        },
+        {
+          "name": "tint/neutral/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#dad9d9"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Neutral tinted label background. QUOTED from three surfaces that agree on the pairing: the site tag styles.css:1194-1197 (.badge--red red-200/red-300, --blue blue-200/blue-300, --yellow yellow-300/yellow-600, --neutral neutral-200/neutral-600), Paggy app.css:92-96 (same pairs; --green #D4F2DE/#1A6B36 = green-100/green-600) and the deck slide.css:283-288 (same, plus --dark near-black/white).",
+          "aliases": {
+            "Value": "color/neutral/200"
+          }
+        },
+        {
+          "name": "tint/neutral/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#544d4d"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Neutral tinted label text. The site uses neutral-600; Paggy app and slide use neutral-400, which is 2.1:1 on neutral-200 and fails every text floor - the 600 is taken (4.4:1, passes 3.0 large, a hair under 4.5 at 12px). Added 2026-09-07 for the Figma Badge.",
+          "aliases": {
+            "Value": "color/neutral/600"
+          }
+        },
+        {
+          "name": "tint/blue/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#d4d3f7"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Blue tinted label background - the hue at 200, in every accent mode. QUOTED from three surfaces that agree on the pairing: the site tag styles.css:1194-1197 (.badge--red red-200/red-300, --blue blue-200/blue-300, --yellow yellow-300/yellow-600, --neutral neutral-200/neutral-600), Paggy app.css:92-96 (same pairs; --green #D4F2DE/#1A6B36 = green-100/green-600) and the deck slide.css:283-288 (same, p",
+          "aliases": {
+            "Value": "color/blue/200"
+          }
+        },
+        {
+          "name": "tint/blue/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#6a66e4"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Blue tinted label text - the hue at 300. Not accent.blue.light: a badge tone is fixed, it does not follow the slide accent.",
+          "aliases": {
+            "Value": "color/blue/300"
+          }
+        },
+        {
+          "name": "tint/red/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#f9d3d2"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Red tinted label background. QUOTED from three surfaces that agree on the pairing: the site tag styles.css:1194-1197 (.badge--red red-200/red-300, --blue blue-200/blue-300, --yellow yellow-300/yellow-600, --neutral neutral-200/neutral-600), Paggy app.css:92-96 (same pairs; --green #D4F2DE/#1A6B36 = green-100/green-600) and the deck slide.css:283-288 (same, plus --dark near-black/white).",
+          "aliases": {
+            "Value": "color/red/200"
+          }
+        },
+        {
+          "name": "tint/red/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ec6663"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Red tinted label text. red-300 on red-200 is 2.6:1 - below the 3.0 large floor; the three sources all ship it (D18-style accepted exception, recorded here, Fedor's call as with the red subtitle).",
+          "aliases": {
+            "Value": "color/red/300"
+          }
+        },
+        {
+          "name": "tint/yellow/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#fad567"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Yellow tinted label background - the hue at 300, not 200: the only tone whose tint is one step darker, because yellow-200 is too pale to read as a label. All three sources agree.",
+          "aliases": {
+            "Value": "color/yellow/300"
+          }
+        },
+        {
+          "name": "tint/yellow/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#634e0f"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Yellow tinted label text - yellow-600, U12: yellow is never text at its main step.",
+          "aliases": {
+            "Value": "color/yellow/600"
+          }
+        },
+        {
+          "name": "tint/green/bg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#d4f2de"
+          },
+          "scopes": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Green tinted label background - the same pair as status.success, kept as its own role because a green tag is not always a success state (D23 greens).",
+          "aliases": {
+            "Value": "color/green/100"
+          }
+        },
+        {
+          "name": "tint/green/fg",
+          "type": "COLOR",
+          "values": {
+            "Value": "#1a6b36"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Green tinted label text.",
+          "aliases": {
+            "Value": "color/green/600"
+          }
+        },
+        {
+          "name": "motion/state",
+          "type": "FLOAT",
+          "values": {
+            "Value": 150
+          },
+          "scopes": [],
+          "description": "Hover, focus, colour. The default.",
+          "aliases": {
+            "Value": "duration/fast"
+          }
+        },
+        {
+          "name": "motion/move",
+          "type": "FLOAT",
+          "values": {
+            "Value": 200
+          },
+          "scopes": [],
+          "description": "Transform and opacity.",
+          "aliases": {
+            "Value": "duration/medium"
+          }
+        },
+        {
+          "name": "motion/menu",
+          "type": "FLOAT",
+          "values": {
+            "Value": 250
+          },
+          "scopes": [],
+          "description": "The site's locked dropdown: max-height, opacity, margin-top.",
+          "aliases": {
+            "Value": "duration/slow"
+          }
+        },
+        {
+          "name": "motion/easing",
+          "type": "STRING",
+          "values": {
+            "Value": "cubic-bezier(0.25, 0.1, 0.25, 1)"
+          },
+          "scopes": [],
+          "description": "",
+          "aliases": {
+            "Value": "easing/standard"
+          }
+        },
+        {
+          "name": "motion/easing-enter",
+          "type": "STRING",
+          "values": {
+            "Value": "cubic-bezier(0.16, 1, 0.3, 1)"
+          },
+          "scopes": [],
+          "description": "The one hand-tuned curve in the codebase. Things arriving, not things leaving.",
+          "aliases": {
+            "Value": "easing/decelerate"
+          }
+        },
+        {
+          "name": "layout/gutter",
+          "type": "FLOAT",
+          "values": {
+            "Value": 24
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "space/24"
+          }
+        },
+        {
+          "name": "layout/section-gap",
+          "type": "FLOAT",
+          "values": {
+            "Value": 32
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --gap-section.",
+          "aliases": {
+            "Value": "space/32"
+          }
+        },
+        {
+          "name": "layout/heading-gap",
+          "type": "FLOAT",
+          "values": {
+            "Value": 64
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --gap-heading. Heading pair to content.",
+          "aliases": {
+            "Value": "space/64"
+          }
+        },
+        {
+          "name": "layout/card-padding",
+          "type": "FLOAT",
+          "values": {
+            "Value": 20
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --card-pad.",
+          "aliases": {
+            "Value": "space/20"
+          }
+        },
+        {
+          "name": "layout/card-gap",
+          "type": "FLOAT",
+          "values": {
+            "Value": 12
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "S1 --card-gap.",
+          "aliases": {
+            "Value": "space/12"
+          }
+        },
+        {
+          "name": "layout/bullet-gap",
+          "type": "FLOAT",
+          "values": {
+            "Value": 8
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "Locked. 8px, and there is a test for it (G19).",
+          "aliases": {
+            "Value": "space/8"
+          }
+        },
+        {
+          "name": "layout/content-width",
+          "type": "FLOAT",
+          "values": {
+            "Value": 1320
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "container/web"
+          }
+        },
+        {
+          "name": "layout/slide-margin",
+          "type": "FLOAT",
+          "values": {
+            "Value": 64
+          },
+          "scopes": [
+            "GAP",
+            "WIDTH_HEIGHT"
+          ],
+          "description": "",
+          "aliases": {
+            "Value": "canvas/slide-margin"
+          }
+        },
+        {
+          "name": "chart/text",
+          "type": "COLOR",
+          "values": {
+            "Value": "#0b0202"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "All chart text — axis labels, data labels, legend. Paggy charts.js:16 INK #0B0202 = neutral.900 (the same ink as text/default; its own role because a chart theme object reads a chart key, not the page's). Size is the label/medium role: 15 on a slide (Paggy's --fs-caption floor, 'nothing on a slide goes smaller'), 12 on web (the dashboard concepts' Label Medium). The concepts set axis text in neutr",
+          "aliases": {
+            "Value": "color/neutral/900"
+          }
+        },
+        {
+          "name": "chart/grid",
+          "type": "COLOR",
+          "values": {
+            "Value": "#00000012"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The light horizontal grid. Paggy charts.js:17 GRID rgba(0,0,0,0.07) as splitLine — no axis lines, no ticks, no bottom baseline (charts.js:213–214, 230). The concepts draw it as 1px neutral/200 (chart-recipes.md) — the opaque near-equivalent, stated.",
+          "aliases": {
+            "Value": "color/alpha/black-7"
+          }
+        },
+        {
+          "name": "chart/rest",
+          "type": "COLOR",
+          "values": {
+            "Value": "#dad9d9"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The second slice of a TWO-slice donut — share-vs-rest reads with slice 1 in the accent's main and slice 2 always Neutral Lighter #DAD9D9 (Fedor 2026-08-12; charts.js:280–291 pieChart, pptx_export.py:640). Also the empty track under a progress or ranking bar (chart-recipes.md §Horizontal bars).",
+          "aliases": {
+            "Value": "color/neutral/200"
+          }
+        },
+        {
+          "name": "chart/on-fill",
+          "type": "COLOR",
+          "values": {
+            "Value": "#ffffff"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The white on a filled bar or slice: the 3px borders between donut segments (charts.js:352 borderColor #fff, borderWidth 3), and a label drawn inside any fill that is not an accent's main colour (charts.js:178 label_inside #fff). Since D110 (2026-09-17) a label inside an accent's MAIN fill takes that accent's own on-accent instead - near-black on yellow, where this white read 1.62 to 1 - through th",
+          "aliases": {
+            "Value": "color/neutral/0"
+          }
+        }
+      ]
+    },
+    "Accent": {
+      "modes": [
+        "blue",
+        "red",
+        "yellow",
+        "multicolor"
+      ],
+      "variables": [
+        {
+          "name": "main",
+          "type": "COLOR",
+          "values": {
+            "blue": "#2b25d9",
+            "red": "#e42521",
+            "yellow": "#f9c426",
+            "multicolor": "#e42521"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "",
+          "aliases": {
+            "blue": "color/blue/400",
+            "red": "color/red/400",
+            "yellow": "color/yellow/400",
+            "multicolor": "color/red/400"
+          }
+        },
+        {
+          "name": "light",
+          "type": "COLOR",
+          "values": {
+            "blue": "#6a66e4",
+            "red": "#ec6663",
+            "yellow": "#fad567",
+            "multicolor": "#ec6663"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "",
+          "aliases": {
+            "blue": "color/blue/300",
+            "red": "color/red/300",
+            "yellow": "color/yellow/300",
+            "multicolor": "color/red/300"
+          }
+        },
+        {
+          "name": "lighter",
+          "type": "COLOR",
+          "values": {
+            "blue": "#d4d3f7",
+            "red": "#f9d3d2",
+            "yellow": "#fdf3d3",
+            "multicolor": "#f9d3d2"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "",
+          "aliases": {
+            "blue": "color/blue/200",
+            "red": "color/red/200",
+            "yellow": "color/yellow/200",
+            "multicolor": "color/red/200"
+          }
+        },
+        {
+          "name": "bg",
+          "type": "COLOR",
+          "values": {
+            "blue": "#e9e9fb",
+            "red": "#fce9e8",
+            "yellow": "#fef9e9",
+            "multicolor": "#fce9e8"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "",
+          "aliases": {
+            "blue": "color/blue/100",
+            "red": "color/red/100",
+            "yellow": "color/yellow/100",
+            "multicolor": "color/red/100"
+          }
+        },
+        {
+          "name": "dark",
+          "type": "COLOR",
+          "values": {
+            "blue": "#0c0b41",
+            "red": "#440b09",
+            "yellow": "#4a3a0b",
+            "multicolor": "#231b1b"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "Table header bar only.",
+          "aliases": {
+            "blue": "color/blue/700",
+            "red": "color/red/700",
+            "yellow": "color/yellow/700",
+            "multicolor": "color/neutral/800"
+          }
+        },
+        {
+          "name": "on-accent",
+          "type": "COLOR",
+          "values": {
+            "blue": "#ffffff",
+            "red": "#ffffff",
+            "yellow": "#0b0202",
+            "multicolor": "#ffffff"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "White reads on this hue.",
+          "aliases": {
+            "blue": "color/neutral/0",
+            "red": "color/neutral/0",
+            "yellow": "color/neutral/900",
+            "multicolor": "color/neutral/0"
+          }
+        },
+        {
+          "name": "heading",
+          "type": "COLOR",
+          "values": {
+            "blue": "#6a66e4",
+            "red": "#ec6663",
+            "yellow": "#858080",
+            "multicolor": "#858080"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "U12: the subtitle colour. Blue and red take their light step; yellow and multicolor take neutral.400. Promoting this out of a QA checklist into the token source is item 1.4.9 - a reviewer should not have to remember it.",
+          "aliases": {
+            "blue": "color/blue/300",
+            "red": "color/red/300",
+            "yellow": "color/neutral/400",
+            "multicolor": "color/neutral/400"
+          }
+        },
+        {
+          "name": "icon-ink",
+          "type": "COLOR",
+          "values": {
+            "blue": "#6a66e4",
+            "red": "#ec6663",
+            "yellow": "#f9c426",
+            "multicolor": "#ec6663"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "Icon-list glyph ink. The ONLY component that reads this (Fedor 2026-08-10).",
+          "aliases": {
+            "blue": "color/blue/300",
+            "red": "color/red/300",
+            "yellow": "color/yellow/400",
+            "multicolor": "color/red/300"
+          }
+        },
+        {
+          "name": "text",
+          "type": "COLOR",
+          "values": {
+            "blue": "#2b25d9",
+            "red": "#e42521",
+            "yellow": "#0b0202",
+            "multicolor": "#e42521"
+          },
+          "scopes": [
+            "TEXT_FILL",
+            "SHAPE_FILL"
+          ],
+          "description": "The accent used as text ink on a light surface — Paggy slide.css .insight__text (color: var(--accent)) with the [data-accent=yellow] .insight__text rule that sets color to var(--ink): yellow is unreadable as text on white (about 1.6:1), so it is neutral/900 the way D24's on-accent flips. Blue and red pass 4.5 on white (blue.400 8.4:1). Added 2026-09-07 for Insight block.",
+          "aliases": {
+            "blue": "color/blue/400",
+            "red": "color/red/400",
+            "yellow": "color/neutral/900",
+            "multicolor": "color/red/400"
+          }
+        },
+        {
+          "name": "selected",
+          "type": "COLOR",
+          "values": {
+            "blue": "#e9e9fb",
+            "red": "#fce9e8",
+            "yellow": "#fef9e9",
+            "multicolor": "#dad9d9"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The wash of a SELECTED row in a Table: the accent's palest tint, the value accent.blue.bg holds. Its own role since D110 (2026-09-17) because multicolor's is not a tint at all - table.row.selected-bg aliases it and the build emits one per accent mode, the way table.header.bg and the pill tint are built.",
+          "aliases": {
+            "blue": "color/blue/100",
+            "red": "color/red/100",
+            "yellow": "color/yellow/100",
+            "multicolor": "color/neutral/200"
+          }
+        },
+        {
+          "name": "pill-tint",
+          "type": "COLOR",
+          "values": {
+            "blue": "#d4d3f7",
+            "red": "#f9d3d2",
+            "yellow": "#fad567",
+            "multicolor": "#dad9d9"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The deck table's row-header pill tint — Paggy slide.css .ctbl__cell--hcol: background var(--accent-lighter) (the lighter tint). Its own role because the yellow and multicolor values are not the lighter tint; table.header.pill-tint aliases it. Added 2026-09-07 when the Table build rendered a red pill in multicolor.",
+          "aliases": {
+            "blue": "color/blue/200",
+            "red": "color/red/200",
+            "yellow": "color/yellow/300",
+            "multicolor": "color/neutral/200"
+          }
+        },
+        {
+          "name": "chart/1",
+          "type": "COLOR",
+          "values": {
+            "blue": "#2b25d9",
+            "red": "#e42521",
+            "yellow": "#f9c426",
+            "multicolor": "#e42521"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "Series 1 — the accent's main.",
+          "aliases": {
+            "blue": "color/blue/400",
+            "red": "color/red/400",
+            "yellow": "color/yellow/400",
+            "multicolor": "color/red/400"
+          }
+        },
+        {
+          "name": "chart/2",
+          "type": "COLOR",
+          "values": {
+            "blue": "#6a66e4",
+            "red": "#ec6663",
+            "yellow": "#858080",
+            "multicolor": "#f9c426"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "Series 2 — a readable MID tint (2026-07-09 fix: pale tints vanished as lines on the grey card).",
+          "aliases": {
+            "blue": "color/blue/300",
+            "red": "color/red/300",
+            "yellow": "color/neutral/400",
+            "multicolor": "color/yellow/400"
+          }
+        },
+        {
+          "name": "chart/3",
+          "type": "COLOR",
+          "values": {
+            "blue": "#d4d3f7",
+            "red": "#f9d3d2",
+            "yellow": "#dad9d9",
+            "multicolor": "#2b25d9"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "Series 3 — the pale tint.",
+          "aliases": {
+            "blue": "color/blue/200",
+            "red": "color/red/200",
+            "yellow": "color/neutral/200",
+            "multicolor": "color/blue/400"
+          }
+        },
+        {
+          "name": "chart/4",
+          "type": "COLOR",
+          "values": {
+            "blue": "#b5b3b3",
+            "red": "#b5b3b3",
+            "yellow": "#fad567",
+            "multicolor": "#b5b3b3"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "Series 4 — grey.",
+          "aliases": {
+            "blue": "color/neutral/300",
+            "red": "color/neutral/300",
+            "yellow": "color/yellow/300",
+            "multicolor": "color/neutral/300"
+          }
+        },
+        {
+          "name": "chart/5",
+          "type": "COLOR",
+          "values": {
+            "blue": "#dad9d9",
+            "red": "#dad9d9",
+            "yellow": "#b5b3b3",
+            "multicolor": "#ec6663"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "Series 5 — light grey.",
+          "aliases": {
+            "blue": "color/neutral/200",
+            "red": "color/neutral/200",
+            "yellow": "color/neutral/300",
+            "multicolor": "color/red/300"
+          }
+        },
+        {
+          "name": "gradient-far",
+          "type": "COLOR",
+          "values": {
+            "blue": "#f24288",
+            "red": "#d947d6",
+            "yellow": "#ebb8fc",
+            "multicolor": "#d947d6"
+          },
+          "scopes": [
+            "ALL_FILLS",
+            "STROKE_COLOR"
+          ],
+          "description": "The far stop of the accent's cover gradient, reached from the Accent mode - Pepper Deck UI Kit Decoration/Blob/Blue (fill style 8012:4117): the blob runs from the accent to this stop. Same pair as gradient.blue. Added 2026-09-07 for the Blob component (1.3.5); the stop colours themselves are the gradient-stop OPEN QUESTION.",
+          "aliases": {
+            "blue": "color/gradient-stop/pink",
+            "red": "color/gradient-stop/magenta",
+            "yellow": "color/gradient-stop/orchid",
+            "multicolor": "color/gradient-stop/magenta"
+          }
+        },
+        {
+          "name": "blob-opacity",
+          "type": "FLOAT",
+          "values": {
+            "blue": 20,
+            "red": 20,
+            "yellow": 35,
+            "multicolor": 20
+          },
+          "scopes": [
+            "OPACITY"
+          ],
+          "description": "Opacity of the Blob decoration behind a slide - Pepper Deck UI Kit Decoration/Blob/Blue node opacity 20%: yellow is lighter and needs 35, blue and red sit at 20 (the deck skill's Blob colour rule table). Added 2026-09-07 (1.3.5)."
+        }
+      ]
+    },
+    "Typography": {
+      "modes": [
+        "web-desktop",
+        "web-mobile",
+        "slide"
+      ],
+      "variables": [
+        {
+          "name": "display/large/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "INHERITED in web-mobile and slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "display/large/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 148,
+            "web-mobile": 148,
+            "slide": 148
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "INHERITED in web-mobile and slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "display/large/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 600,
+            "web-mobile": 600,
+            "slide": 600
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "INHERITED in web-mobile and slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "display/large/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.2,
+            "web-mobile": 1.2,
+            "slide": 1.2
+          },
+          "scopes": [],
+          "description": "INHERITED in web-mobile and slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "display/large/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": -0.01,
+            "web-mobile": -0.01,
+            "slide": -0.01
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": "INHERITED in web-mobile and slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "display/medium/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "INHERITED in web-mobile and slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "display/medium/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 117,
+            "web-mobile": 117,
+            "slide": 117
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "INHERITED in web-mobile and slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "display/medium/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 600,
+            "web-mobile": 600,
+            "slide": 600
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "INHERITED in web-mobile and slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "display/medium/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.2,
+            "web-mobile": 1.2,
+            "slide": 1.2
+          },
+          "scopes": [],
+          "description": "INHERITED in web-mobile and slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "display/medium/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": -0.01,
+            "web-mobile": -0.01,
+            "slide": -0.01
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": "INHERITED in web-mobile and slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "display/small/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "slide": "Poppins",
+            "web-mobile": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "INHERITED in web-mobile: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. "
+        },
+        {
+          "name": "display/small/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 92,
+            "slide": 64,
+            "web-mobile": 92
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "INHERITED in web-mobile: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. "
+        },
+        {
+          "name": "display/small/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 600,
+            "slide": 600,
+            "web-mobile": 600
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "INHERITED in web-mobile: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. "
+        },
+        {
+          "name": "display/small/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.2,
+            "slide": 1.2,
+            "web-mobile": 1.2
+          },
+          "scopes": [],
+          "description": "INHERITED in web-mobile: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. "
+        },
+        {
+          "name": "display/small/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": -0.01,
+            "slide": 0,
+            "web-mobile": -0.01
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": "INHERITED in web-mobile: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. "
+        },
+        {
+          "name": "headline/large/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "S5 --fs-headline-large. The 65 to the slide canvas's 66 - G5, now a mode difference rather than a discrepancy."
+        },
+        {
+          "name": "headline/large/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 65,
+            "web-mobile": 48,
+            "slide": 66
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "S5 --fs-headline-large. The 65 to the slide canvas's 66 - G5, now a mode difference rather than a discrepancy."
+        },
+        {
+          "name": "headline/large/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 600,
+            "web-mobile": 600,
+            "slide": 600
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "S5 --fs-headline-large. The 65 to the slide canvas's 66 - G5, now a mode difference rather than a discrepancy."
+        },
+        {
+          "name": "headline/large/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.2,
+            "web-mobile": 1.2,
+            "slide": 1.2
+          },
+          "scopes": [],
+          "description": "S5 --fs-headline-large. The 65 to the slide canvas's 66 - G5, now a mode difference rather than a discrepancy."
+        },
+        {
+          "name": "headline/large/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0,
+            "web-mobile": 0,
+            "slide": -0.01
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": "S5 --fs-headline-large. The 65 to the slide canvas's 66 - G5, now a mode difference rather than a discrepancy."
+        },
+        {
+          "name": "headline/medium/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": ""
+        },
+        {
+          "name": "headline/medium/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 45,
+            "web-mobile": 40,
+            "slide": 46
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "headline/medium/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 600,
+            "web-mobile": 600,
+            "slide": 500
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "headline/medium/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.2,
+            "web-mobile": 1.2,
+            "slide": 1.2
+          },
+          "scopes": [],
+          "description": ""
+        },
+        {
+          "name": "headline/medium/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0,
+            "web-mobile": 0,
+            "slide": -0.01
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": ""
+        },
+        {
+          "name": "headline/small/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "Weight 400 and line-height 1.2 both quoted from S5 usage - this role is set Regular on the site, not SemiBold."
+        },
+        {
+          "name": "headline/small/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 40,
+            "web-mobile": 32,
+            "slide": 41
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "Weight 400 and line-height 1.2 both quoted from S5 usage - this role is set Regular on the site, not SemiBold."
+        },
+        {
+          "name": "headline/small/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 400,
+            "web-mobile": 400,
+            "slide": 400
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "Weight 400 and line-height 1.2 both quoted from S5 usage - this role is set Regular on the site, not SemiBold."
+        },
+        {
+          "name": "headline/small/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.2,
+            "web-mobile": 1.2,
+            "slide": 1.5
+          },
+          "scopes": [],
+          "description": "Weight 400 and line-height 1.2 both quoted from S5 usage - this role is set Regular on the site, not SemiBold."
+        },
+        {
+          "name": "headline/small/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0,
+            "web-mobile": 0,
+            "slide": 0
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": "Weight 400 and line-height 1.2 both quoted from S5 usage - this role is set Regular on the site, not SemiBold."
+        },
+        {
+          "name": "title/large/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": ""
+        },
+        {
+          "name": "title/large/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 36,
+            "web-mobile": 32,
+            "slide": 36
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "title/large/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 600,
+            "web-mobile": 600,
+            "slide": 600
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "title/large/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.2,
+            "web-mobile": 1.2,
+            "slide": 1.2
+          },
+          "scopes": [],
+          "description": ""
+        },
+        {
+          "name": "title/large/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0,
+            "web-mobile": 0,
+            "slide": 0
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": ""
+        },
+        {
+          "name": "title/medium/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "INHERITED in slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "title/medium/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 32,
+            "web-mobile": 28,
+            "slide": 32
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "INHERITED in slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "title/medium/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 600,
+            "web-mobile": 600,
+            "slide": 600
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "INHERITED in slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "title/medium/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.2,
+            "web-mobile": 1.2,
+            "slide": 1.2
+          },
+          "scopes": [],
+          "description": "INHERITED in slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "title/medium/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0,
+            "web-mobile": 0,
+            "slide": 0
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": "INHERITED in slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "title/small/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "Medium, not SemiBold. At 28px this is close to a reading size, and SemiBold is a display weight."
+        },
+        {
+          "name": "title/small/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 28,
+            "web-mobile": 25,
+            "slide": 26
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "Medium, not SemiBold. At 28px this is close to a reading size, and SemiBold is a display weight."
+        },
+        {
+          "name": "title/small/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 500,
+            "web-mobile": 500,
+            "slide": 500
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "Medium, not SemiBold. At 28px this is close to a reading size, and SemiBold is a display weight."
+        },
+        {
+          "name": "title/small/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.4,
+            "web-mobile": 1.4,
+            "slide": 1.4
+          },
+          "scopes": [],
+          "description": "Medium, not SemiBold. At 28px this is close to a reading size, and SemiBold is a display weight."
+        },
+        {
+          "name": "title/small/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0,
+            "web-mobile": 0,
+            "slide": 0
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": "Medium, not SemiBold. At 28px this is close to a reading size, and SemiBold is a display weight."
+        },
+        {
+          "name": "body/large/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/large/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 22,
+            "web-mobile": 18,
+            "slide": 26
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/large/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 400,
+            "web-mobile": 400,
+            "slide": 400
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/large/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.4,
+            "web-mobile": 1.4,
+            "slide": 1.4
+          },
+          "scopes": [],
+          "description": ""
+        },
+        {
+          "name": "body/large/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0,
+            "web-mobile": 0,
+            "slide": 0
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/medium/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/medium/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 18,
+            "web-mobile": 16,
+            "slide": 20
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/medium/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 400,
+            "web-mobile": 400,
+            "slide": 400
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/medium/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.4,
+            "web-mobile": 1.4,
+            "slide": 1.4
+          },
+          "scopes": [],
+          "description": ""
+        },
+        {
+          "name": "body/medium/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0,
+            "web-mobile": 0,
+            "slide": 0
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/small/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/small/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 16,
+            "web-mobile": 14,
+            "slide": 18
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/small/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 400,
+            "web-mobile": 400,
+            "slide": 500
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/small/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.5,
+            "web-mobile": 1.5,
+            "slide": 1.4
+          },
+          "scopes": [],
+          "description": ""
+        },
+        {
+          "name": "body/small/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0,
+            "web-mobile": 0,
+            "slide": 0
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": ""
+        },
+        {
+          "name": "body/x-small/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "web-mobile": "Poppins",
+            "slide": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "S5 --fs-body-extra-small. Line-height 1.7 in long-form blocks, 1.5 elsewhere - the looser value is the token because that is the role's main use. INHERITED in slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "body/x-small/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 14,
+            "web-mobile": 12,
+            "slide": 14
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "S5 --fs-body-extra-small. Line-height 1.7 in long-form blocks, 1.5 elsewhere - the looser value is the token because that is the role's main use. INHERITED in slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "body/x-small/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 400,
+            "web-mobile": 400,
+            "slide": 400
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "S5 --fs-body-extra-small. Line-height 1.7 in long-form blocks, 1.5 elsewhere - the looser value is the token because that is the role's main use. INHERITED in slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "body/x-small/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.7,
+            "web-mobile": 1.7,
+            "slide": 1.7
+          },
+          "scopes": [],
+          "description": "S5 --fs-body-extra-small. Line-height 1.7 in long-form blocks, 1.5 elsewhere - the looser value is the token because that is the role's main use. INHERITED in slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "body/x-small/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0,
+            "web-mobile": 0,
+            "slide": 0
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": "S5 --fs-body-extra-small. Line-height 1.7 in long-form blocks, 1.5 elsewhere - the looser value is the token because that is the role's main use. INHERITED in slide: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. No slide uses this role today - if one needs it, author a real value rather than leaning on this."
+        },
+        {
+          "name": "label/medium/family",
+          "type": "STRING",
+          "values": {
+            "web-desktop": "Poppins",
+            "slide": "Poppins",
+            "web-mobile": "Poppins"
+          },
+          "scopes": [
+            "FONT_FAMILY"
+          ],
+          "description": "S5 --fs-label-medium, and .page-eyebrow's 0.1em tracking. INHERITED in web-mobile: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. "
+        },
+        {
+          "name": "label/medium/size",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 12,
+            "slide": 15,
+            "web-mobile": 12
+          },
+          "scopes": [
+            "FONT_SIZE"
+          ],
+          "description": "S5 --fs-label-medium, and .page-eyebrow's 0.1em tracking. INHERITED in web-mobile: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. "
+        },
+        {
+          "name": "label/medium/weight",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 500,
+            "slide": 400,
+            "web-mobile": 500
+          },
+          "scopes": [
+            "FONT_WEIGHT"
+          ],
+          "description": "S5 --fs-label-medium, and .page-eyebrow's 0.1em tracking. INHERITED in web-mobile: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. "
+        },
+        {
+          "name": "label/medium/line-height",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 1.4,
+            "slide": 1.4,
+            "web-mobile": 1.4
+          },
+          "scopes": [],
+          "description": "S5 --fs-label-medium, and .page-eyebrow's 0.1em tracking. INHERITED in web-mobile: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. "
+        },
+        {
+          "name": "label/medium/letter-spacing",
+          "type": "FLOAT",
+          "values": {
+            "web-desktop": 0.1,
+            "slide": 0,
+            "web-mobile": 0.1
+          },
+          "scopes": [
+            "LETTER_SPACING"
+          ],
+          "description": "S5 --fs-label-medium, and .page-eyebrow's 0.1em tracking. INHERITED in web-mobile: the source defines this role only for web-desktop, so these modes fall through to it rather than being authored. "
+        }
+      ]
+    },
+    "Ground": {
+      "modes": [
+        "page",
+        "card"
+      ],
+      "variables": [
+        {
+          "name": "ground/sunken",
+          "type": "COLOR",
+          "values": {
+            "page": "#f2f2f2",
+            "card": "#dad9d9"
+          },
+          "scopes": [],
+          "description": "GROUND MODE page (the default): a grey surface on the white ground surface.page is neutral.100 #f2f2f2, 1.12 : 1 - what the library has always drawn. A grey surface is one step darker than the ground it sits on (D107, Fedor 2026-09-17: 'the card looks good on the white and on the colored background'). surface.sunken aliases this half; the card half replaces it under [data-ground=\"card\"] and on a F",
+          "aliases": {
+            "page": "color/neutral/100",
+            "card": "color/neutral/200"
+          },
+          "descriptions": {
+            "page": "GROUND MODE page (the default): a grey surface on the white ground surface.page is neutral.100 #f2f2f2, 1.12 : 1 - what the library has always drawn. A grey surface is one step darker than the ground it sits on (D107, Fedor 2026-09-17: 'the card looks good on the white and on the colored background'). surface.sunken aliases this half; the card half replaces it under [data-ground=\"card\"] and on a F",
+            "card": "GROUND MODE card: on the product ground surface.card #f2f2f7 a grey surface is neutral.200 #dad9d9, 1.26 : 1 - the fill of the master Card/Metric/color_status_input. neutral.100 on that ground measured 1.00 : 1 and the surface disappeared (D106, D107). Text on it: text.default 14.56, text.muted and text.caption 5.86, text.link 6.29; text.subtle and text.error are not offered on it."
+          }
+        },
+        {
+          "name": "ground/track",
+          "type": "COLOR",
+          "values": {
+            "page": "#f2f2f2",
+            "card": "#ffffff"
+          },
+          "scopes": [],
+          "description": "GROUND MODE page: the box of a segmented Tabs on the white ground is neutral.100, the step every grey surface takes there. tabs.track aliases this half.",
+          "aliases": {
+            "page": "color/neutral/100",
+            "card": "color/neutral/0"
+          },
+          "descriptions": {
+            "page": "GROUND MODE page: the box of a segmented Tabs on the white ground is neutral.100, the step every grey surface takes there. tabs.track aliases this half.",
+            "card": "GROUND MODE card: the one exception to the step rule. On the product ground the segmented Tabs' box is white, 1.12 : 1 - the step the box has on a white page (D106 b, confirmed by D107; Fedor 2026-09-17: 'not for menu background, we're not making this one step darker, but instead we're taking white color only for this, for the colored background')."
+          }
+        }
+      ]
+    }
+  },
+  "notVariables": {
+    "$why": "Figma has no variable type for these. They become effect styles or stay CSS-only.",
+    "items": [
+      {
+        "name": "gradient/blue",
+        "type": "gradient"
+      },
+      {
+        "name": "gradient/yellow",
+        "type": "gradient"
+      },
+      {
+        "name": "gradient/red",
+        "type": "gradient"
+      },
+      {
+        "name": "shadow/sm",
+        "type": "shadow"
+      },
+      {
+        "name": "shadow/lg",
+        "type": "shadow"
+      },
+      {
+        "name": "shadow/xl",
+        "type": "shadow"
+      },
+      {
+        "name": "shadow/xxl",
+        "type": "shadow"
+      },
+      {
+        "name": "elevation/flat",
+        "type": "shadow"
+      },
+      {
+        "name": "elevation/card",
+        "type": "shadow"
+      },
+      {
+        "name": "elevation/floating",
+        "type": "shadow"
+      },
+      {
+        "name": "elevation/modal",
+        "type": "shadow"
+      }
+    ]
+  }
+}