@dataimago/tokens 0.1.0-alpha.4 → 0.1.0-alpha.48

package/dist/tokens.w3c.dtcg.json

@@ -0,0 +1,1084 @@
+{
+  "color": {
+    "surface": {
+      "page": {
+        "$value": "#ededeb",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#141410"
+          }
+        },
+        "$description": "Main page background — warm-grey (light) / ink-900 (dark)"
+      },
+      "page-scrolled": {
+        "$value": "#ededeb",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#141410"
+          }
+        },
+        "$description": "Page background when navbar shrinks — matches page"
+      },
+      "elevated": {
+        "$value": "#f7f7f6",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#1c1917"
+          }
+        },
+        "$description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
+      },
+      "figure-plate": {
+        "$value": "#f7f7f6",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#dcdcda"
+          }
+        },
+        "$description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
+      },
+      "sunken": {
+        "$value": "#f7f7f6",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#0c0a09"
+          }
+        },
+        "$description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
+      },
+      "navbar": {
+        "$value": "#ededeb",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#141410"
+          }
+        },
+        "$description": "Navbar background — matches page in both themes"
+      },
+      "navbar-scrolled": {
+        "$value": "#ededeb",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#141410"
+          }
+        },
+        "$description": "Navbar when scrolled/shrunk — matches page-scrolled"
+      },
+      "code": {
+        "$value": "#f7f7f6",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#1c1917"
+          }
+        },
+        "$description": "Code block and inline code background: the card colour (surface.elevated) in both modes, so code reads as a card on the page (2026-11-02; light mode was the warm paper-200 #faf2e3)"
+      },
+      "scrim": {
+        "$value": "rgba(20, 20, 16, 0.85)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(20, 20, 16, 0.85)"
+          }
+        },
+        "$description": "Figure viewer backdrop. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Ink-900-ish at 0.85, drawn under a 3px blur; measured composited over the page, on-scrim text is 11.5:1 on the light page and 17.2:1 on the dark (gated by tools/contrast-check.mjs, 2026-11-03). Older browsers (Chrome < 122, Safari < 17.4, Firefox < 120) do not let ::backdrop inherit custom properties from :root, so a consumer painting the scrim on ::backdrop should write a fallback, e.g. var(--color-surface-scrim, rgba(20, 20, 16, 0.85)); the house figure viewer draws its scrim on a div (.di-figure-modal), so it is not affected."
+      },
+      "scrim-solid": {
+        "$value": "rgba(20, 20, 16, 0.92)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(20, 20, 16, 0.92)"
+          }
+        },
+        "$description": "Figure viewer backdrop where backdrop blur is unavailable (prefers-reduced-transparency, prefers-contrast: more and browsers without backdrop blur): the same ink at 0.92. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Gated by tools/contrast-check.mjs."
+      },
+      "print": {
+        "$value": "#f7f7f6",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#f7f7f6"
+          }
+        },
+        "$description": "Printed paper: the paper-cover thumbnail, the light slide, the face of a video-play disc. It depicts a physical object (a printed page, a slide), so it is theme-invariant: light and dark carry the same value, and the paper does not darken with the page (the color.border.figure-frame precedent). stone-50, the card colour; the SGPc apps' own #f6f4ee is not a house colour and was mapped onto this step (maintainer decision 2026-11-03). Ink on it is content.on-print, held to 7:1 by tools/contrast-check.mjs. Paper reads as paper by its edge, not its colour: a print surface always carries --shadow-print or a hairline in border.print (the edge rule, maintainer decision 2026-11-03)."
+      },
+      "play-disc": {
+        "$value": "rgba(247, 247, 246, 0.92)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(247, 247, 246, 0.92)"
+          }
+        },
+        "$description": "The video-play disc: surface.print at 0.92 alpha, over a poster frame or poster placeholder. It depicts a physical object, so it is theme-invariant: light and dark carry the same value. Its glyph is content.on-print (no separate token), held to 4.5:1 on the disc composited over each mode's page by tools/contrast-check.mjs, so the disc stays legible in dark mode."
+      },
+      "media": {
+        "$value": "#000000",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#000000"
+          }
+        },
+        "$description": "The media letterbox: the ground behind a <video> and other media (an embedded player, a frame that does not fill its box). Pure black, not the house near-black (stone-900 #14140f, ink-900 #0c0a09): video frames carry true black, so a near-black ground shows the letterbox bars beside the frame's own black, and pure black hides them. It depicts the media frame, not the page, so it is theme-invariant: light and dark carry the same value (the color.surface.print precedent). Nothing is drawn on it, so it has no contrast floor; tools/contrast-check.mjs holds it to theme invariance (maintainer decision 2026-11-03)."
+      }
+    },
+    "border": {
+      "subtle": {
+        "$value": "rgba(12, 10, 9, 0.45)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(253, 249, 242, 0.45)"
+          }
+        },
+        "$description": "Subtle borders — element separation. THE ALPHA IS THE ROLE: border.subtle / moderate / strong / card share one base color and are distinguished by opacity alone, so a gamut conversion that drops the alpha channel collapses four semantic roles into one opaque value (this happened in 17995c3, #72, 2026-06-28). No number is quoted here on purpose: the scale is set by the founder decision recorded in wi-20260817-border-alpha-scale-retune and gated by tools/contrast-check.mjs at the WCAG 1.4.11 non-text threshold (3:1). Read the value, not this sentence."
+      },
+      "moderate": {
+        "$value": "rgba(12, 10, 9, 0.60)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(253, 249, 242, 0.60)"
+          }
+        },
+        "$description": "Moderate borders — defined boundaries. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
+      },
+      "strong": {
+        "$value": "rgba(12, 10, 9, 0.75)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(253, 249, 242, 0.75)"
+          }
+        },
+        "$description": "Strong borders — prominent separation. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
+      },
+      "card": {
+        "$value": "rgba(12, 10, 9, 0.60)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(253, 249, 242, 0.60)"
+          }
+        },
+        "$description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
+      },
+      "figure-frame": {
+        "$value": "#6a6a6a",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#6a6a6a"
+          }
+        },
+        "$description": "Figure frame: the 1px rule round a .box figure and the border of an enlarged figure in the figure modal. It sits on surface.figure-plate, which is light in both modes, so the frame keeps the light content.secondary value in both: 5.0:1 on the light plate #f7f7f6 and 3.9:1 on the dimmed dark-mode plate #dcdcda (WCAG 1.4.11 non-text, 3:1). The PDF's di-figure-frame is the same colour (2026-11-01)."
+      },
+      "code": {
+        "$value": "#d6d3d1",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#292524"
+          }
+        },
+        "$description": "Code block border"
+      },
+      "on-scrim-focus": {
+        "$value": "#3498DB",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#3498DB"
+          }
+        },
+        "$description": "Focus ring on the figure viewer scrim. Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). The slate accent's dark-mode value in both modes, because the scrim is dark in both. Held to 3:1 (WCAG 1.4.11) over both scrims and both page modes by tools/contrast-check.mjs."
+      },
+      "print": {
+        "$value": "rgba(12, 10, 9, 0.45)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(12, 10, 9, 0.45)"
+          }
+        },
+        "$description": "The hairline edge of printed paper (surface.print): the paper-cover thumbnail, the light slide. THE EDGE RULE: paper reads as paper by its edge, not by its colour. surface.print is the card colour, so a print surface always carries either --shadow-print or a hairline in this token (maintainer decision 2026-11-03). It is drawn on the paper, which stays light in both modes, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). It starts from the light value of border.subtle, and as there the alpha is the role and no ratio is quoted on purpose: composited over surface.print it is held to the WCAG 1.4.11 non-text threshold (3:1) by tools/contrast-check.mjs. Read the value, not this sentence."
+      }
+    },
+    "content": {
+      "primary": {
+        "$value": "#14140f",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#fdf9f2"
+          }
+        },
+        "$description": "Primary text — stone-900 on stone-100 (light, matches presentation-theme.scss exactly) / paper-100 on dark surface"
+      },
+      "secondary": {
+        "$value": "#6a6a6a",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#a8a29e"
+          }
+        },
+        "$description": "Secondary text — WCAG-AA on all light surfaces (≥4.6:1, darkened from stone-500 #7c7c7c which was 3.6:1) / ink-300 on dark"
+      },
+      "muted": {
+        "$value": "#706964",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#89827d"
+          }
+        },
+        "$description": "Muted text — captions, meta info. WCAG-AA on all surfaces in both modes (darkened/lightened from #78716c which failed AA on page)"
+      },
+      "inverse": {
+        "$value": "#fdf9f2",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#0c0a09"
+          }
+        },
+        "$description": "Inverse text — for contrasting backgrounds"
+      },
+      "on-scrim": {
+        "$value": "#f7f7f6",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#f7f7f6"
+          }
+        },
+        "$description": "Text and controls on the figure viewer scrim (stone-50). Mode-invariant: the scrim is dark in both modes, so light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 over both scrims and both page modes by tools/contrast-check.mjs."
+      },
+      "on-print": {
+        "$value": "#14140f",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#14140f"
+          }
+        },
+        "$description": "Ink on surface.print, and the glyph on surface.play-disc (the play triangle takes this token; it has no separate one). stone-900. It depicts printed ink, so it is theme-invariant: light and dark carry the same value (the color.border.figure-frame precedent). Held to 7:1 on surface.print, and 4.5:1 on the play disc composited over each mode's page, by tools/contrast-check.mjs."
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$value": "#434739",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#98a384"
+          }
+        },
+        "$description": "Primary interactive — forest-700 on light (7.75:1 on stone-100, white text 9.0:1 — passes WCAG AAA) / forest-300 on dark"
+      },
+      "hover": {
+        "$value": "#363a2e",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#7e8a6b"
+          }
+        },
+        "$description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
+      },
+      "accent": {
+        "$value": "#1f618d",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#3498DB"
+          }
+        },
+        "$description": "Accent — sky-blue moral-weight color (iteration-2). Light: accent-500 (5.68:1 on stone-100, AA with headroom; 6.66:1 white-on-color for backplates). Dark: accent-300 (5.41:1 on stone-900, AA with headroom — closes the iteration-1 dark-mode AA-large-only contrast gap). FIRST instance of mode-aware role mapping in the system: light and dark point to different palette stops rather than the same hex. The scale-name `accent` is preserved across iteration-1 → iteration-2 (consumer-side text-accent-500 keeps working). See wiki/decisions/iteration-2-blue-accent.md for the dialectical reframe of the iteration-1 emancipation-copper framing (sky/horizon/Enlightenment-blueprint/Reformation-Protestant traditions vs. Western-traffic-coding STOP-red)."
+      },
+      "focus": {
+        "$value": "#434739",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#98a384"
+          }
+        },
+        "$description": "Focus indicators — mirrors interactive.primary"
+      }
+    },
+    "state": {
+      "success": {
+        "$value": "#007a58",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#009E73"
+          }
+        },
+        "$description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
+      },
+      "warning": {
+        "$value": "#906306",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#E69F00"
+          }
+        },
+        "$description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
+      },
+      "error": {
+        "$value": "#a4262c",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#ef5350"
+          }
+        },
+        "$description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
+      },
+      "info": {
+        "$value": "#1f618d",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#3498DB"
+          }
+        },
+        "$description": "State: info. The house slate accent (interactive.accent), so notes and info read slate-blue against the stone surfaces: 5.68:1 on page in light mode (dark 5.86). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
+      }
+    },
+    "presentation": {
+      "accent": {
+        "$value": "#3498DB",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#3498DB"
+          }
+        },
+        "$description": "Presentation accent — Flat-UI peter-river; reserved for reveal.js 2030s-feel highlights. Not for body prose or interactive primary use. Pairs well with copper on dark slides."
+      },
+      "accent-hover": {
+        "$value": "#2980B9",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#2980B9"
+          }
+        },
+        "$description": "Presentation accent hover/emphasized variant — Flat-UI belize-hole"
+      }
+    },
+    "vertical-accent": {
+      "$comment": {
+        "$value": "Per-vertical brand accents — each Level-2 property's identity color, distinct from the house interactive.accent (the L1 sky-blue hub color). Mode-aware (light/dark stops) like interactive.accent. Used for app icons, navbar-logo emphasis, and per-vertical theming. Contrast vs surface.page verified WCAG: light values are the on-light marks, dark values the on-dark marks. dataimago (L1 hub) intentionally has no vertical accent — it uses interactive.accent + ink."
+      },
+      "dissertation": {
+        "$value": "#B87333",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#CE8E5C"
+          }
+        },
+        "$description": "dissertation-ai — copper (manuscript / annotation / the human hand in the margin). Light: 3.23:1 on stone-100 (AA-large; large-mark use). Dark: #CE8E5C 6.72:1 on ink-900 (AA)."
+      },
+      "rpkg": {
+        "$value": "#3B82F6",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#60A5FA"
+          }
+        },
+        "$description": "rpkg-ai — engineering blue. Light: 3.14:1 on stone-100 (AA-large; large-mark use). Dark: #60A5FA 7.26:1 on ink-900 (AA)."
+      },
+      "SGPc": {
+        "$value": "#5A6310",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#B2BF22"
+          }
+        },
+        "$description": "SGPc-ai — growth yellow-green (decided 2026-06-26). The brand value is the bright #B2BF22, but it fails contrast on light surfaces (1.73:1), so LIGHT mode uses the darkened companion #5A6310 (5.55:1 on stone-100 — full AA) and DARK mode uses the bright #B2BF22 (9.12:1 on ink-900). See wiki/decisions/sgpc-accent.md."
+      }
+    },
+    "brand-mark": {
+      "$comment": {
+        "$value": "Brand-MARK colors (the dataimago monogram / wordmark logo treatment) — distinct from the interactive.accent role. The signature monogram red is a wide-gamut PILOT (see wiki/decisions/p3-oklch-color.md). It is mode-aware for AA-normal headroom: a single red cannot clear 4.5:1 on BOTH the light page (#ededeb) and ink-900 — light needs a deep red, dark needs a bright one. LIGHT uses the deepened #cc0000 (faithful P3, contrast-first); DARK keeps the vivid display-P3 primary red (#ff0000 fallback → color(display-p3 1 0 0)), where #ff0000 already passes AA-normal. Vivid override authored in tools/color-converter.mjs (dark-only for the red), emitted as a `#hex → color(display-p3 …)` cascade in the -p3 build."
+      },
+      "red": {
+        "$value": "#cc0000",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#ff0000"
+          }
+        },
+        "$description": "Signature monogram red — mode-aware for AA-normal. LIGHT: deepened #cc0000 (5.0:1 on stone-100 #ededeb / 5.5:1 on elevated — full AA-normal, safe at small sizes / as text). DARK: vivid #ff0000 fallback + display-P3 primary red (4.6:1 on ink-900 — AA-normal). Logo-mark color only — NOT the interactive accent (which is iteration-2 blue). Large navbar lift-wash marks keep the vivid display-P3 red (AA-large, large-mark use); this token is the AA-normal value for arbitrary/small mark reuse."
+      }
+    },
+    "dataviz": {
+      "okabe-ito": {
+        "orange": {
+          "$value": "#E69F00",
+          "$type": "color",
+          "$description": "Okabe-Ito orange (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "sky-blue": {
+          "$value": "#56B4E9",
+          "$type": "color",
+          "$description": "Okabe-Ito sky blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "bluish-green": {
+          "$value": "#009E73",
+          "$type": "color",
+          "$description": "Okabe-Ito bluish green (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "yellow": {
+          "$value": "#F0E442",
+          "$type": "color",
+          "$description": "Okabe-Ito yellow — 1.13:1 on the light page: never use it without a mark outline or a label (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "blue": {
+          "$value": "#0072B2",
+          "$type": "color",
+          "$description": "Okabe-Ito blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "vermillion": {
+          "$value": "#D55E00",
+          "$type": "color",
+          "$description": "Okabe-Ito vermillion (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "reddish-purple": {
+          "$value": "#CC79A7",
+          "$type": "color",
+          "$description": "Okabe-Ito reddish purple (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "black": {
+          "$value": "#000000",
+          "$type": "color",
+          "$extensions": {
+            "com.dataimago.theme": {
+              "dark": "#FDF9F2"
+            }
+          },
+          "$description": "Okabe-Ito black (Okabe & Ito 2008). In dark mode it becomes content.primary.dark: #000000 is 1.14:1 on the dark page. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
+        }
+      },
+      "categorical": {
+        "1": {
+          "$value": "#E69F00",
+          "$type": "color",
+          "$description": "= okabe-ito.orange (slot 1, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
+        },
+        "2": {
+          "$value": "#56B4E9",
+          "$type": "color",
+          "$description": "= okabe-ito.sky-blue (slot 2, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
+        },
+        "3": {
+          "$value": "#009E73",
+          "$type": "color",
+          "$description": "= okabe-ito.bluish-green (slot 3, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
+        },
+        "4": {
+          "$value": "#F0E442",
+          "$type": "color",
+          "$description": "= okabe-ito.yellow (slot 4, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
+        },
+        "5": {
+          "$value": "#0072B2",
+          "$type": "color",
+          "$description": "= okabe-ito.blue (slot 5, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
+        },
+        "6": {
+          "$value": "#D55E00",
+          "$type": "color",
+          "$description": "= okabe-ito.vermillion (slot 6, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
+        },
+        "7": {
+          "$value": "#CC79A7",
+          "$type": "color",
+          "$description": "= okabe-ito.reddish-purple (slot 7, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
+        },
+        "8": {
+          "$value": "#000000",
+          "$type": "color",
+          "$extensions": {
+            "com.dataimago.theme": {
+              "dark": "#FDF9F2"
+            }
+          },
+          "$description": "= okabe-ito.black (slot 8, Wilke order). Categorical colour is never the only channel: pair it with marker shape, line style or a label."
+        }
+      },
+      "uncertainty": {
+        "outer": {
+          "$value": "#D6D6D6",
+          "$type": "color",
+          "$extensions": {
+            "com.dataimago.theme": {
+              "dark": "#333333"
+            }
+          },
+          "$description": "Outermost nested uncertainty band (gray 0.84 in the LIwLD PSTricks figures). The ramp is mirrored in dark mode so the innermost band stays the strongest. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
+        },
+        "union": {
+          "$value": "#9E9E9E",
+          "$type": "color",
+          "$extensions": {
+            "com.dataimago.theme": {
+              "dark": "#6B6B6B"
+            }
+          },
+          "$description": "Union band (gray 0.62); mirrored in dark mode. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
+        },
+        "inner": {
+          "$value": "#333333",
+          "$type": "color",
+          "$extensions": {
+            "com.dataimago.theme": {
+              "dark": "#D6D6D6"
+            }
+          },
+          "$description": "Innermost band (gray 0.20); mirrored in dark mode, where #333333 would be 1.46:1. Dark value approved by the maintainer 2026-10-29 (dataviz-check --propose-dark)."
+        }
+      },
+      "sgpc-bucket": {
+        "very-low": {
+          "$value": "#D55E00",
+          "$type": "color",
+          "$description": "= okabe-ito.vermillion. SGPc growth bucket 1 of 5 (very low) on the ordered scale very low → very high. Colour is never the only channel: pair it with a marker and the bucket letter code. Author decision 2026-11-01, matching the LIwLD paper's figures."
+        },
+        "low": {
+          "$value": "#E69F00",
+          "$type": "color",
+          "$description": "= okabe-ito.orange. SGPc growth bucket 2 of 5 (low) on the ordered scale very low → very high. Colour is never the only channel: pair it with a marker and the bucket letter code. Author decision 2026-11-01, matching the LIwLD paper's figures."
+        },
+        "typical": {
+          "$value": "#56B4E9",
+          "$type": "color",
+          "$description": "= okabe-ito.sky-blue. SGPc growth bucket 3 of 5 (typical) on the ordered scale very low → very high. Colour is never the only channel: pair it with a marker and the bucket letter code. Author decision 2026-11-01, matching the LIwLD paper's figures."
+        },
+        "high": {
+          "$value": "#009E73",
+          "$type": "color",
+          "$description": "= okabe-ito.bluish-green. SGPc growth bucket 4 of 5 (high) on the ordered scale very low → very high. Colour is never the only channel: pair it with a marker and the bucket letter code. Author decision 2026-11-01, matching the LIwLD paper's figures."
+        },
+        "very-high": {
+          "$value": "#0072B2",
+          "$type": "color",
+          "$description": "= okabe-ito.blue. SGPc growth bucket 5 of 5 (very high) on the ordered scale very low → very high. Colour is never the only channel: pair it with a marker and the bucket letter code. Author decision 2026-11-01, matching the LIwLD paper's figures."
+        }
+      },
+      "sgpc-role": {
+        "marginal": {
+          "$value": "#0072B2",
+          "$type": "color",
+          "$description": "= okabe-ito.blue. SGPc methodological role: what the separate margins (the score distributions) supply. 5.19:1 on white. A figure uses role colours or bucket colours, never both: this hue is also sgpc-bucket.very-high. Light-ground tints (marginal-pale 30 %, marginal-wash 12 %, mixes with white) ship in the TeX, JSON and R data-viz outputs only, and a tint is never the only channel: it sits with this stroke or a label. Maintainer decision 2026-11-09."
+        },
+        "linkage": {
+          "$value": "#D55E00",
+          "$type": "color",
+          "$description": "= okabe-ito.vermillion. SGPc methodological role: what linkage (the copula) supplies. 3.87:1 on white. A figure uses role colours or bucket colours, never both: this hue is also sgpc-bucket.very-low. Light-ground tints (linkage-pale 30 %, linkage-wash 12 %, mixes with white) ship in the TeX, JSON and R data-viz outputs only, and a tint is never the only channel: it sits with this stroke or a label. Maintainer decision 2026-11-09."
+        },
+        "kernel": {
+          "$value": "#CC79A7",
+          "$type": "color",
+          "$description": "= okabe-ito.reddish-purple. SGPc methodological role: the kernel-substitution term b_K. 3.06:1 on white, 2.86:1 on the light figure plate and 2.61:1 on the light page, so the kernel term always carries a second cue (a dash pattern or a label). Its light-ground tint (kernel-pale, 30 % mixed with white) ships in the TeX, JSON and R data-viz outputs only and is never the only channel. Maintainer decision 2026-11-09."
+        }
+      },
+      "map": {
+        "ocean": {
+          "$value": "#808fa7",
+          "$type": "color",
+          "$extensions": {
+            "com.dataimago.theme": {
+              "dark": "#042438"
+            }
+          },
+          "$description": "Map-surface ground: the sea on the SGPc globe, behind land, absent countries and bucket-filled shapes. A muted slate blue on light surfaces and a deep blue on dark (maintainer 2026-10-22); not a palette step. The light value moved from #c9e1ec on 2026-11-01, when the Okabe-Ito sky-blue bucket blended into it: #808fa7 sits mid-way in lightness between the two blue buckets and is grey enough to read as sea. Gated by tools/dataviz-check.mjs against the five sgpc-bucket colours and the land neutrals (ink-200 land and ink-100 absent in light; ink-600 land and ink-700 absent in dark) at ΔE2000 ≥ 11.1 under normal vision and deutan, protan and tritan simulation, and the country outline (ink-600 light, ink-300 dark) at ≥ 3:1. Draw country borders in this colour, as gaps between shapes. The dark value moved from the apps' #14232c to #042438 on 2026-11-03 (maintainer): a slightly deeper sea keeps the quiet 'no data' countries (ink-700) distinct from it for protan readers (#14232c was ΔE 6.61 from them). Raised from the SGPc apps (2026-11-03)."
+        }
+      }
+    }
+  },
+  "shadow": {
+    "sm": {
+      "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+    },
+    "md": {
+      "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    },
+    "lg": {
+      "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1)"
+    },
+    "xl": {
+      "$value": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
+    }
+  },
+  "border": {
+    "subtle": {
+      "$value": "rgba(20, 20, 16, 0.47)",
+      "$type": "color",
+      "$extensions": {
+        "com.dataimago.theme": {
+          "dark": "rgba(237, 237, 235, 0.47)"
+        }
+      },
+      "$description": "Subtle borders - element separation. THE ALPHA IS THE ROLE. Distinct from color.border.subtle: this family has its own base (20,20,16 / 237,237,235), so it needs a DIFFERENT alpha to render the same. 0.47 here matches 0.45 there at 3.07:1 on the worst surface; copying 0.45 would land at 2.90:1 and fail WCAG 1.4.11. Gated by tools/contrast-check.mjs."
+    },
+    "moderate": {
+      "$value": "rgba(20, 20, 16, 0.63)",
+      "$type": "color",
+      "$extensions": {
+        "com.dataimago.theme": {
+          "dark": "rgba(237, 237, 235, 0.63)"
+        }
+      },
+      "$description": "Moderate borders - defined boundaries. 0.63 here matches color.border.moderate 0.60 in rendered contrast; see border.subtle on why the numbers differ between the two families."
+    },
+    "focus": {
+      "$value": "#3498DB",
+      "$type": "color",
+      "$extensions": {
+        "com.dataimago.theme": {
+          "dark": "#4FC3F7"
+        }
+      },
+      "$description": "Focus indicators - accessibility"
+    }
+  },
+  "transition": {
+    "quick": {
+      "$value": "0.15s ease",
+      "$type": "duration",
+      "$description": "Snap-fast micro-interactions — hover lifts, focus rings, immediate-feedback affordances"
+    },
+    "standard": {
+      "$value": "0.25s ease-in-out",
+      "$type": "duration",
+      "$description": "Default for most state changes — toggles, button states, card hovers"
+    },
+    "smooth": {
+      "$value": "0.35s ease",
+      "$type": "duration",
+      "$description": "Theme transitions, navbar collapse/expand, layout shifts that should feel deliberate"
+    },
+    "logo": {
+      "$value": "0.3s",
+      "$type": "duration",
+      "$description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
+    }
+  },
+  "motion": {
+    "enter": {
+      "$value": "200ms",
+      "$type": "duration",
+      "$description": "Something arrives: a page fade, tooltip in, chip in, view switch, drawer open, chart marks. Pair with motion.ease-out. Raised from the SGPc apps (2026-11-03), which named it --motion-enter. Within the 300ms motion-dignity ceiling; gated by tools/motion-lint.mjs."
+    },
+    "exit": {
+      "$value": "120ms",
+      "$type": "duration",
+      "$description": "Something leaves: tooltip out, chip out, drawer close. Shorter than motion.enter, because leaving should not hold the reader. Pair with motion.ease-in; a component that unmounts in script holds the unmount for this long. Raised from the SGPc apps (2026-11-03), which named it --motion-exit."
+    },
+    "ease-out": {
+      "$value": [
+        0.25,
+        0.46,
+        0.45,
+        0.94
+      ],
+      "$type": "cubicBezier",
+      "$description": "easeOutQuad, the curve foundations/design/motion-dignity.md names, for entrances: fast at the start, settling gently. Raised from the SGPc apps (2026-11-03), which named it --motion-ease-out."
+    },
+    "ease-in": {
+      "$value": [
+        0.55,
+        0.085,
+        0.68,
+        0.53
+      ],
+      "$type": "cubicBezier",
+      "$description": "easeInQuad, for exits: starts gently and leaves quickly. The counterpart of motion.ease-out. Raised from the SGPc apps (2026-11-03), which named it --motion-ease-in."
+    },
+    "duration": {
+      "120": {
+        "$value": "120ms",
+        "$type": "duration",
+        "$description": "Duration scale step, 120ms. Equal to motion.exit."
+      },
+      "160": {
+        "$value": "160ms",
+        "$type": "duration",
+        "$description": "Duration scale step, 160ms: a hover on a small control, a sheet leaving."
+      },
+      "200": {
+        "$value": "200ms",
+        "$type": "duration",
+        "$description": "Duration scale step, 200ms. Equal to motion.enter."
+      },
+      "250": {
+        "$value": "250ms",
+        "$type": "duration",
+        "$description": "Duration scale step, 250ms: a sheet arriving, a grid-column change."
+      },
+      "300": {
+        "$value": "300ms",
+        "$type": "duration",
+        "$description": "Duration scale step, 300ms: the motion-dignity ceiling. Nothing in the scale is longer, and the motion gate holds every motion.* value to it. A slow ambient entrance is not a token: a wait before an animation is a delay, not motion, and the animation itself stays at or under this step."
+      }
+    }
+  },
+  "font": {
+    "family": {
+      "sans": {
+        "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
+        "$description": "Primary sans-serif font - body text. Noto Sans Math is second so a glyph Noto Sans lacks (arrows such as U+2192, maths operators) is drawn by the shipped Noto, not a system font; a page downloads the maths face only when it needs such a glyph. Fira Sans, a leftover of the ai-native extension, was dropped (2026-11-01)."
+      },
+      "mono": {
+        "$value": "Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace",
+        "$description": "Noto Sans Mono — code blocks and technical content; matches the shipped font"
+      },
+      "display": {
+        "$value": "var(--font-family-display-editorial)",
+        "$description": "Alias of display-editorial, and the load-bearing indirection .di-prose rebinds to swap a whole surface to the documentation family — do NOT rewrite heading rules to reference display-editorial directly or .di-prose stops working. Reference display-editorial/display-documentation explicitly only where the surface must NOT control the family (brand chrome, navbars). Its 0.3.0 removal was deferred 2026-08-10 under wiki/decisions/compatibility-contract.md (additive-only); removal now requires its own cleanup ADR. See wiki/decisions/display-family-split.md."
+      },
+      "display-editorial": {
+        "$value": "Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif",
+        "$description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. The Noto Sans fallback serves untagged text; tagged languages are handled by fonts/lang.css. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
+      },
+      "display-documentation": {
+        "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
+        "$description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
+      },
+      "brand": {
+        "$value": "Futura, system-ui, sans-serif",
+        "$description": "Brand font - dataimago navbar and branding elements"
+      },
+      "math": {
+        "$value": "Noto Sans Math, math",
+        "$description": "Noto Sans Math, falling back to the browser's maths face; native MathML is the maths contract"
+      }
+    },
+    "size": {
+      "micro": {
+        "$value": "0.75rem",
+        "$type": "dimension",
+        "$description": "Micro text - captions, metadata"
+      },
+      "small": {
+        "$value": "0.875rem",
+        "$type": "dimension",
+        "$description": "Small text - secondary information"
+      },
+      "base": {
+        "$value": "1rem",
+        "$type": "dimension",
+        "$description": "Base text size - body content"
+      },
+      "readable": {
+        "$value": "1.125rem",
+        "$type": "dimension",
+        "$description": "Comfortable reading size - main content"
+      },
+      "emphasis": {
+        "$value": "1.25rem",
+        "$type": "dimension",
+        "$description": "Emphasized text - call-outs"
+      },
+      "heading-small": {
+        "$value": "1.5rem",
+        "$type": "dimension",
+        "$description": "Small headings - H4, H5"
+      },
+      "heading-medium": {
+        "$value": "1.875rem",
+        "$type": "dimension",
+        "$description": "Medium headings - H3"
+      },
+      "heading-large": {
+        "$value": "2.25rem",
+        "$type": "dimension",
+        "$description": "Large headings - H2"
+      },
+      "heading-xl": {
+        "$value": "3rem",
+        "$type": "dimension",
+        "$description": "Extra large headings - H1"
+      }
+    },
+    "weight": {
+      "extralight": {
+        "$value": "200",
+        "$type": "number",
+        "$description": "Extra-light weight — reserved for display-scale refinements (subtitles, oversized numerals)"
+      },
+      "light": {
+        "$value": "300",
+        "$type": "number",
+        "$description": "Light weight — minor headings (h4–h6), large serif-like display at small sizes"
+      },
+      "normal": {
+        "$value": "400",
+        "$type": "number",
+        "$description": "Normal text weight — body content"
+      },
+      "medium": {
+        "$value": "500",
+        "$type": "number",
+        "$description": "Medium weight — emphasis within text, h2"
+      },
+      "semibold": {
+        "$value": "600",
+        "$type": "number",
+        "$description": "Semi-bold — subtitles, important text"
+      },
+      "bold": {
+        "$value": "700",
+        "$type": "number",
+        "$description": "Bold — h1, strong emphasis"
+      },
+      "heading": {
+        "_invariant": {
+          "$value": "Heading-weight cluster — 400 floor for all Josefin Sans headings (see wiki/decisions/josefin-weight-floor.md). Sub-400 weights (200, 300) are bound to the opt-in .di-numeric-display utility class, never the default for prose-tier headings. Per wiki/decisions/h1-weight-medium.md the prose-correct band for editorial headings is 400–500."
+        },
+        "h1": {
+          "$value": "var(--font-weight-medium)",
+          "$description": "Heading h1 weight — medium (500). Top-level editorial voice; preserves Josefin Sans's geometric character at hero scale (was bold/700 before iteration-1; see wiki/decisions/h1-weight-medium.md)."
+        },
+        "h2": {
+          "$value": "var(--font-weight-medium)",
+          "$description": "Heading h2 weight — medium (500). Second tier; sub-sections."
+        },
+        "h3": {
+          "$value": "var(--font-weight-normal)",
+          "$description": "Heading h3 weight — normal (400). Differentiated from body by size, not weight."
+        },
+        "h4": {
+          "$value": "var(--font-weight-light)",
+          "$description": "Heading h4 weight — light (300). Minor heading; quiet hierarchy marker."
+        },
+        "h5": {
+          "$value": "var(--font-weight-light)",
+          "$description": "Heading h5 weight — light (300). Minor heading."
+        },
+        "h6": {
+          "$value": "var(--font-weight-light)",
+          "$description": "Heading h6 weight — light (300). Minor heading."
+        },
+        "subtitle": {
+          "$value": "var(--font-weight-semibold)",
+          "$description": "Subtitle weight — semibold (600). Heavier than h3 on purpose: reads as emphasis, not continuation."
+        }
+      }
+    },
+    "style": {
+      "normal": {
+        "$value": "normal",
+        "$description": "Normal font style - upright text"
+      },
+      "italic": {
+        "$value": "italic",
+        "$description": "Italic style - sloped text with true italic glyphs"
+      },
+      "oblique": {
+        "$value": "oblique",
+        "$description": "Oblique style - sloped text without true italic design"
+      }
+    },
+    "lineHeight": {
+      "tight": {
+        "$value": "1.25",
+        "$type": "number",
+        "$description": "Tight line height - headings"
+      },
+      "normal": {
+        "$value": "1.5",
+        "$type": "number",
+        "$description": "Normal line height - body text"
+      },
+      "relaxed": {
+        "$value": "1.625",
+        "$type": "number",
+        "$description": "Relaxed line height - long-form content"
+      }
+    },
+    "feature-settings": {
+      "_invariant": {
+        "$value": "OpenType feature settings cluster — display rules apply lining figures (lnum) so numerals render uniform-baseline at heading scale; body rules retain old-style figures where they belong (in-line numerical mentions in prose). See wiki/decisions/display-lining-figures.md."
+      },
+      "display": {
+        "$value": "\"lnum\"",
+        "$description": "Lining figures (lnum) for display headings — uniform baseline, uniform height; corrects Josefin Sans's old-style default figures that read as casual at editorial/title scale. Consumed by every CSS rule whose font-family resolves to --font-family-display, --font-family-display-editorial, or --font-family-display-documentation."
+      },
+      "body": {
+        "$value": "\"normal\"",
+        "$description": "Default figure style for body text — preserves Josefin's old-style figures where they harmonize with lowercase letterforms in continuous prose."
+      }
+    }
+  },
+  "spacing": {
+    "xs": {
+      "$value": "0.25rem",
+      "$type": "dimension"
+    },
+    "sm": {
+      "$value": "0.5rem",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "1rem",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "1.5rem",
+      "$type": "dimension"
+    },
+    "xl": {
+      "$value": "2rem",
+      "$type": "dimension"
+    },
+    "2xl": {
+      "$value": "3rem",
+      "$type": "dimension"
+    },
+    "3xl": {
+      "$value": "4rem",
+      "$type": "dimension"
+    }
+  },
+  "radius": {
+    "sm": {
+      "$value": "0.25rem",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "0.5rem",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "0.75rem",
+      "$type": "dimension"
+    },
+    "xl": {
+      "$value": "1rem",
+      "$type": "dimension"
+    },
+    "full": {
+      "$value": "9999px",
+      "$type": "dimension"
+    }
+  },
+  "$extensions": {
+    "com.dataimago.components": {
+      "card": {
+        "background": "surface.elevated",
+        "padding": "spacing.component.padding",
+        "radius": "radius.component",
+        "shadow": "shadow.moderate",
+        "border": "border.subtle",
+        "description": "Card component tokens - references semantic tokens"
+      },
+      "button": {
+        "padding-x": "spacing.component.padding",
+        "padding-y": "spacing.micro.normal",
+        "radius": "radius.component",
+        "font-weight": "typography.weight.medium",
+        "primary": {
+          "background": "interactive.primary",
+          "text": "content.inverse",
+          "hover": "interactive.hover"
+        },
+        "secondary": {
+          "background": "surface.elevated",
+          "text": "content.primary",
+          "hover": "surface.page"
+        }
+      },
+      "navbar": {
+        "background": "surface.navbar",
+        "background-scrolled": "surface.navbar-scrolled",
+        "text": "content.secondary",
+        "text-hover": "interactive.accent",
+        "transition": "transition.smooth"
+      },
+      "navigation": {
+        "item-spacing": "spacing.micro.loose",
+        "hover-background": {
+          "light": "rgba(20, 20, 16, 0.05)",
+          "dark": "rgba(237, 237, 235, 0.05)"
+        },
+        "active-background": {
+          "light": "rgba(20, 20, 16, 0.1)",
+          "dark": "rgba(237, 237, 235, 0.1)"
+        }
+      }
+    },
+    "com.dataimago.frequent": {
+      "spacing": {
+        "component": {
+          "padding": "1rem",
+          "margin": "1.5rem",
+          "gap": "0.75rem",
+          "description": "Most frequently adjusted spacing - component internals"
+        },
+        "layout": {
+          "section": "3rem",
+          "container": "2rem",
+          "comfortable": "1rem",
+          "description": "Layout-level spacing - between major elements"
+        },
+        "micro": {
+          "tight": "0.25rem",
+          "normal": "0.5rem",
+          "loose": "1rem",
+          "description": "Fine-tuning spacing - when things feel cramped or loose"
+        }
+      },
+      "radius": {
+        "component": "0.5rem",
+        "subtle": "0.25rem",
+        "prominent": "0.75rem",
+        "full": "9999px",
+        "description": "Border radius values - component rounding"
+      },
+      "contrast": {
+        "high": {
+          "light": "rgb(20, 20, 16)",
+          "dark": "rgb(237, 237, 235)",
+          "description": "Maximum contrast text - accessibility focus"
+        },
+        "readable": {
+          "light": "rgb(20, 20, 16)",
+          "dark": "rgb(237, 237, 235)",
+          "description": "Comfortable reading contrast - primary text"
+        },
+        "medium": {
+          "light": "#7c7c7c",
+          "dark": "#83838f",
+          "description": "Medium emphasis - secondary information"
+        },
+        "subtle": {
+          "light": "#7c7c7c",
+          "dark": "#83838f",
+          "description": "De-emphasized text - captions, meta info"
+        }
+      }
+    }
+  }
+}