@dataimago/tokens 0.1.0-alpha.22 → 0.1.0-alpha.27

package/dist/index.cjs

@@ -17,6 +17,11 @@ const tokens = {
         "dark": "#1c1917",
         "description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
       },
+      "figure-plate": {
+        "light": "#f7f7f6",
+        "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": {
         "light": "#faf2e3",
         "dark": "#0c0a09",
@@ -59,6 +64,11 @@ const tokens = {
         "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": {
+        "light": "#6a6a6a",
+        "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": {
         "light": "#d6d3d1",
         "dark": "#292524",
@@ -234,6 +244,28 @@ const tokens = {
           "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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."
+        }
       }
     }
   },
@@ -393,8 +425,8 @@ const tokens = {
   "font": {
     "family": {
       "sans": {
-        "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
-        "description": "Primary sans-serif font - body text"
+        "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",

package/dist/index.mjs

@@ -17,6 +17,11 @@ const tokens = {
         "dark": "#1c1917",
         "description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
       },
+      "figure-plate": {
+        "light": "#f7f7f6",
+        "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": {
         "light": "#faf2e3",
         "dark": "#0c0a09",
@@ -59,6 +64,11 @@ const tokens = {
         "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": {
+        "light": "#6a6a6a",
+        "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": {
         "light": "#d6d3d1",
         "dark": "#292524",
@@ -234,6 +244,28 @@ const tokens = {
           "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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."
+        }
       }
     }
   },
@@ -393,8 +425,8 @@ const tokens = {
   "font": {
     "family": {
       "sans": {
-        "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
-        "description": "Primary sans-serif font - body text"
+        "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",

package/dist/tokens.css

@@ -63,7 +63,7 @@
   --transition-standard: 0.25s ease-in-out;
   --transition-smooth: 0.35s ease;
   --transition-logo: 0.3s;
-  --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
+  --font-family-sans: Noto Sans, Noto Sans Math, system-ui, sans-serif;
   --font-family-mono: Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace;
   --font-family-display: var(--font-family-display-editorial);
   --font-family-display-editorial: Josefin Sans, Noto Sans, system-ui, sans-serif;
@@ -130,6 +130,11 @@
   --color-dataviz-categorical-5: #0072B2;
   --color-dataviz-categorical-6: #D55E00;
   --color-dataviz-categorical-7: #CC79A7;
+  --color-dataviz-sgpc-bucket-very-low: #D55E00;
+  --color-dataviz-sgpc-bucket-low: #E69F00;
+  --color-dataviz-sgpc-bucket-typical: #56B4E9;
+  --color-dataviz-sgpc-bucket-high: #009E73;
+  --color-dataviz-sgpc-bucket-very-high: #0072B2;
 }
 
 :root, [data-bs-theme="light"] {
@@ -139,6 +144,8 @@
   --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
   --color-surface-elevated: #f7f7f6;
   --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
+  --color-surface-figure-plate: #f7f7f6;
+  --color-surface-figure-plate: color(display-p3 0.9686 0.9686 0.9651);
   --color-surface-sunken: #faf2e3;
   --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
   --color-surface-navbar: #ededeb;
@@ -155,6 +162,8 @@
   --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
   --color-border-card: rgba(12, 10, 9, 0.60);
   --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
+  --color-border-figure-frame: #6a6a6a;
+  --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
   --color-border-code: #d6d3d1;
   --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
   --color-content-primary: #14140f;
@@ -211,6 +220,8 @@
   --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
   --color-surface-elevated: #1c1917;
   --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
+  --color-surface-figure-plate: #dcdcda;
+  --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
   --color-surface-sunken: #0c0a09;
   --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
   --color-surface-navbar: #141410;
@@ -227,6 +238,8 @@
   --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
   --color-border-card: rgba(253, 249, 242, 0.60);
   --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
+  --color-border-figure-frame: #6a6a6a;
+  --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
   --color-border-code: #292524;
   --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
   --color-content-primary: #fdf9f2;
@@ -284,6 +297,8 @@
     --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-elevated: #1c1917;
     --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
+    --color-surface-figure-plate: #dcdcda;
+    --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
     --color-surface-sunken: #0c0a09;
     --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
     --color-surface-navbar: #141410;
@@ -300,6 +315,8 @@
     --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
     --color-border-card: rgba(253, 249, 242, 0.60);
     --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
+    --color-border-figure-frame: #6a6a6a;
+    --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
     --color-border-code: #292524;
     --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
     --color-content-primary: #fdf9f2;

package/dist/tokens.dtcg.json

@@ -25,6 +25,14 @@
         "$type": "color",
         "$description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
       },
+      "figure-plate": {
+        "$value": {
+          "light": "#f7f7f6",
+          "dark": "#dcdcda"
+        },
+        "$type": "color",
+        "$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": {
           "light": "#faf2e3",
@@ -91,6 +99,14 @@
         "$type": "color",
         "$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": {
+          "light": "#6a6a6a",
+          "dark": "#6a6a6a"
+        },
+        "$type": "color",
+        "$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": {
           "light": "#d6d3d1",
@@ -497,9 +513,9 @@
   "font": {
     "family": {
       "sans": {
-        "$value": "Noto Sans, Fira Sans, system-ui, sans-serif",
+        "$value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
         "$type": "other",
-        "$description": "Primary sans-serif font - body text"
+        "$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",

package/dist/tokens.scss

@@ -63,7 +63,7 @@
   --transition-standard: 0.25s ease-in-out;
   --transition-smooth: 0.35s ease;
   --transition-logo: 0.3s;
-  --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
+  --font-family-sans: Noto Sans, Noto Sans Math, system-ui, sans-serif;
   --font-family-mono: Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace;
   --font-family-display: var(--font-family-display-editorial);
   --font-family-display-editorial: Josefin Sans, Noto Sans, system-ui, sans-serif;
@@ -130,6 +130,11 @@
   --color-dataviz-categorical-5: #0072B2;
   --color-dataviz-categorical-6: #D55E00;
   --color-dataviz-categorical-7: #CC79A7;
+  --color-dataviz-sgpc-bucket-very-low: #D55E00;
+  --color-dataviz-sgpc-bucket-low: #E69F00;
+  --color-dataviz-sgpc-bucket-typical: #56B4E9;
+  --color-dataviz-sgpc-bucket-high: #009E73;
+  --color-dataviz-sgpc-bucket-very-high: #0072B2;
 }
 
 :root, [data-bs-theme="light"] {
@@ -139,6 +144,8 @@
   --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
   --color-surface-elevated: #f7f7f6;
   --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
+  --color-surface-figure-plate: #f7f7f6;
+  --color-surface-figure-plate: color(display-p3 0.9686 0.9686 0.9651);
   --color-surface-sunken: #faf2e3;
   --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
   --color-surface-navbar: #ededeb;
@@ -155,6 +162,8 @@
   --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
   --color-border-card: rgba(12, 10, 9, 0.60);
   --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
+  --color-border-figure-frame: #6a6a6a;
+  --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
   --color-border-code: #d6d3d1;
   --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
   --color-content-primary: #14140f;
@@ -211,6 +220,8 @@
   --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
   --color-surface-elevated: #1c1917;
   --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
+  --color-surface-figure-plate: #dcdcda;
+  --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
   --color-surface-sunken: #0c0a09;
   --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
   --color-surface-navbar: #141410;
@@ -227,6 +238,8 @@
   --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
   --color-border-card: rgba(253, 249, 242, 0.60);
   --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
+  --color-border-figure-frame: #6a6a6a;
+  --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
   --color-border-code: #292524;
   --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
   --color-content-primary: #fdf9f2;
@@ -284,6 +297,8 @@
     --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-elevated: #1c1917;
     --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
+    --color-surface-figure-plate: #dcdcda;
+    --color-surface-figure-plate: color(display-p3 0.8627 0.8627 0.8556);
     --color-surface-sunken: #0c0a09;
     --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
     --color-surface-navbar: #141410;
@@ -300,6 +315,8 @@
     --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
     --color-border-card: rgba(253, 249, 242, 0.60);
     --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
+    --color-border-figure-frame: #6a6a6a;
+    --color-border-figure-frame: color(display-p3 0.4157 0.4157 0.4157);
     --color-border-code: #292524;
     --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
     --color-content-primary: #fdf9f2;

package/dist/tokens.studio.json

@@ -14,6 +14,10 @@
           "value": "#f7f7f6",
           "type": "color"
         },
+        "figure-plate": {
+          "value": "#f7f7f6",
+          "type": "color"
+        },
         "sunken": {
           "value": "#faf2e3",
           "type": "color"
@@ -48,6 +52,10 @@
           "value": "rgba(12, 10, 9, 0.60)",
           "type": "color"
         },
+        "figure-frame": {
+          "value": "#6a6a6a",
+          "type": "color"
+        },
         "code": {
           "value": "#d6d3d1",
           "type": "color"
@@ -209,6 +217,28 @@
             "value": "#333333",
             "type": "color"
           }
+        },
+        "sgpc-bucket": {
+          "very-low": {
+            "value": "#D55E00",
+            "type": "color"
+          },
+          "low": {
+            "value": "#E69F00",
+            "type": "color"
+          },
+          "typical": {
+            "value": "#56B4E9",
+            "type": "color"
+          },
+          "high": {
+            "value": "#009E73",
+            "type": "color"
+          },
+          "very-high": {
+            "value": "#0072B2",
+            "type": "color"
+          }
         }
       }
     },
@@ -265,7 +295,7 @@
     "font": {
       "family": {
         "sans": {
-          "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
+          "value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
           "type": "other"
         },
         "mono": {
@@ -502,6 +532,10 @@
           "value": "#1c1917",
           "type": "color"
         },
+        "figure-plate": {
+          "value": "#dcdcda",
+          "type": "color"
+        },
         "sunken": {
           "value": "#0c0a09",
           "type": "color"
@@ -536,6 +570,10 @@
           "value": "rgba(253, 249, 242, 0.60)",
           "type": "color"
         },
+        "figure-frame": {
+          "value": "#6a6a6a",
+          "type": "color"
+        },
         "code": {
           "value": "#292524",
           "type": "color"

package/dist/tokens.w3c.dtcg.json

@@ -31,6 +31,16 @@
         },
         "$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": "#faf2e3",
         "$type": "color",
@@ -113,6 +123,16 @@
         },
         "$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",
@@ -406,6 +426,33 @@
           },
           "$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."
+        }
       }
     }
   },
@@ -480,8 +527,8 @@
   "font": {
     "family": {
       "sans": {
-        "$value": "Noto Sans, Fira Sans, system-ui, sans-serif",
-        "$description": "Primary sans-serif font - body text"
+        "$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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataimago/tokens",
-  "version": "0.1.0-alpha.22",
+  "version": "0.1.0-alpha.27",
   "description": "dataimago design tokens — canonical JSON sources plus generated TS/CSS artifacts",
   "license": "MIT",
   "repository": {

package/src/dataviz.json

@@ -87,6 +87,28 @@
           "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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."
+        }
       }
     }
   }

package/src/theme-colors-p3.json

@@ -40,6 +40,19 @@
         },
         "description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
       },
+      "figure-plate": {
+        "light": {
+          "srgb": "#f7f7f6",
+          "oklch": "oklch(97.59% 0.0013 106.42)",
+          "p3": "color(display-p3 0.9686 0.9686 0.9651)"
+        },
+        "dark": {
+          "srgb": "#dcdcda",
+          "oklch": "oklch(89.39% 0.0027 106.45)",
+          "p3": "color(display-p3 0.8627 0.8627 0.8556)"
+        },
+        "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": {
         "light": {
           "srgb": "#faf2e3",
@@ -146,6 +159,19 @@
         },
         "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": {
+        "light": {
+          "srgb": "#6a6a6a",
+          "oklch": "oklch(52.43% 0 0)",
+          "p3": "color(display-p3 0.4157 0.4157 0.4157)"
+        },
+        "dark": {
+          "srgb": "#6a6a6a",
+          "oklch": "oklch(52.43% 0 0)",
+          "p3": "color(display-p3 0.4157 0.4157 0.4157)"
+        },
+        "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": {
         "light": {
           "srgb": "#d6d3d1",

package/src/theme-colors.json

@@ -16,6 +16,11 @@
         "dark": "#1c1917",
         "description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
       },
+      "figure-plate": {
+        "light": "#f7f7f6",
+        "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": {
         "light": "#faf2e3",
         "dark": "#0c0a09",
@@ -58,6 +63,11 @@
         "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": {
+        "light": "#6a6a6a",
+        "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": {
         "light": "#d6d3d1",
         "dark": "#292524",

package/src/typography.json

@@ -2,8 +2,8 @@
   "font": {
     "family": {
       "sans": {
-        "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
-        "description": "Primary sans-serif font - body text"
+        "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",