@dataimago/tokens 0.1.0-alpha.15 → 0.1.0-alpha.18

package/README.md

@@ -5,7 +5,7 @@ Canonical design tokens for the dataimago ethical AI design system.
 ## What's in the box
 
 - `src/*.json` — the hand-authored JSON sources (colors, typography, spacing, effects, etc.).
-- `dist/tokens.css` / `dist/tokens.scss` — CSS custom properties emitted from the JSON sources, theme-aware (`[data-bs-theme]` + `prefers-color-scheme`).
+- `dist/tokens.css` / `dist/tokens.scss` — CSS custom properties emitted from the JSON sources, theme-aware (`[data-bs-theme]` + `prefers-color-scheme`). The system preference applies only while the root has no `data-bs-theme="light"`, so an explicit choice (e.g. `@dataimago/ui`'s `ThemeToggle`) wins in both directions.
 - `dist/index.{mjs,cjs,d.ts}` — typed JS/TS imports for token values.
 - `dist/tokens.dtcg.json` — additive DTCG-style export for tools and agents. It does not replace the current runtime JSON shape.
 

package/dist/index.cjs

@@ -146,6 +146,95 @@ const tokens = {
         "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",
+          "description": "Okabe-Ito orange (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "sky-blue": {
+          "value": "#56B4E9",
+          "description": "Okabe-Ito sky blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "bluish-green": {
+          "value": "#009E73",
+          "description": "Okabe-Ito bluish green (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "yellow": {
+          "value": "#F0E442",
+          "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",
+          "description": "Okabe-Ito blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "vermillion": {
+          "value": "#D55E00",
+          "description": "Okabe-Ito vermillion (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "reddish-purple": {
+          "value": "#CC79A7",
+          "description": "Okabe-Ito reddish purple (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "black": {
+          "light": "#000000",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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": {
+          "light": "#000000",
+          "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": {
+          "light": "#D6D6D6",
+          "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": {
+          "light": "#9E9E9E",
+          "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": {
+          "light": "#333333",
+          "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)."
+        }
+      }
     }
   },
   "spacing": {

package/dist/index.mjs

@@ -146,6 +146,95 @@ const tokens = {
         "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",
+          "description": "Okabe-Ito orange (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "sky-blue": {
+          "value": "#56B4E9",
+          "description": "Okabe-Ito sky blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "bluish-green": {
+          "value": "#009E73",
+          "description": "Okabe-Ito bluish green (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "yellow": {
+          "value": "#F0E442",
+          "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",
+          "description": "Okabe-Ito blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "vermillion": {
+          "value": "#D55E00",
+          "description": "Okabe-Ito vermillion (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "reddish-purple": {
+          "value": "#CC79A7",
+          "description": "Okabe-Ito reddish purple (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "black": {
+          "light": "#000000",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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": {
+          "light": "#000000",
+          "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": {
+          "light": "#D6D6D6",
+          "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": {
+          "light": "#9E9E9E",
+          "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": {
+          "light": "#333333",
+          "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)."
+        }
+      }
     }
   },
   "spacing": {

package/dist/tokens.css

@@ -116,6 +116,20 @@
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  --color-dataviz-okabe-ito-orange: #E69F00;
+  --color-dataviz-okabe-ito-sky-blue: #56B4E9;
+  --color-dataviz-okabe-ito-bluish-green: #009E73;
+  --color-dataviz-okabe-ito-yellow: #F0E442;
+  --color-dataviz-okabe-ito-blue: #0072B2;
+  --color-dataviz-okabe-ito-vermillion: #D55E00;
+  --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
+  --color-dataviz-categorical-1: #E69F00;
+  --color-dataviz-categorical-2: #56B4E9;
+  --color-dataviz-categorical-3: #009E73;
+  --color-dataviz-categorical-4: #F0E442;
+  --color-dataviz-categorical-5: #0072B2;
+  --color-dataviz-categorical-6: #D55E00;
+  --color-dataviz-categorical-7: #CC79A7;
 }
 
 :root, [data-bs-theme="light"] {
@@ -183,6 +197,11 @@
   --border-focus: #3498DB;
   --navigation-hover-background: rgba(20, 20, 16, 0.05);
   --navigation-active-background: rgba(20, 20, 16, 0.1);
+  --color-dataviz-okabe-ito-black: #000000;
+  --color-dataviz-categorical-8: #000000;
+  --color-dataviz-uncertainty-outer: #D6D6D6;
+  --color-dataviz-uncertainty-union: #9E9E9E;
+  --color-dataviz-uncertainty-inner: #333333;
 }
 
 [data-bs-theme="dark"] {
@@ -250,10 +269,15 @@
   --border-focus: #4FC3F7;
   --navigation-hover-background: rgba(237, 237, 235, 0.05);
   --navigation-active-background: rgba(237, 237, 235, 0.1);
+  --color-dataviz-okabe-ito-black: #FDF9F2;
+  --color-dataviz-categorical-8: #FDF9F2;
+  --color-dataviz-uncertainty-outer: #333333;
+  --color-dataviz-uncertainty-union: #6B6B6B;
+  --color-dataviz-uncertainty-inner: #D6D6D6;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:where(:not([data-bs-theme="light"])) {
     --color-surface-page: #141410;
     --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-page-scrolled: #141410;
@@ -318,5 +342,10 @@
     --border-focus: #4FC3F7;
     --navigation-hover-background: rgba(237, 237, 235, 0.05);
     --navigation-active-background: rgba(237, 237, 235, 0.1);
+    --color-dataviz-okabe-ito-black: #FDF9F2;
+    --color-dataviz-categorical-8: #FDF9F2;
+    --color-dataviz-uncertainty-outer: #333333;
+    --color-dataviz-uncertainty-union: #6B6B6B;
+    --color-dataviz-uncertainty-inner: #D6D6D6;
   }
 }

package/dist/tokens.scss

@@ -116,6 +116,20 @@
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  --color-dataviz-okabe-ito-orange: #E69F00;
+  --color-dataviz-okabe-ito-sky-blue: #56B4E9;
+  --color-dataviz-okabe-ito-bluish-green: #009E73;
+  --color-dataviz-okabe-ito-yellow: #F0E442;
+  --color-dataviz-okabe-ito-blue: #0072B2;
+  --color-dataviz-okabe-ito-vermillion: #D55E00;
+  --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
+  --color-dataviz-categorical-1: #E69F00;
+  --color-dataviz-categorical-2: #56B4E9;
+  --color-dataviz-categorical-3: #009E73;
+  --color-dataviz-categorical-4: #F0E442;
+  --color-dataviz-categorical-5: #0072B2;
+  --color-dataviz-categorical-6: #D55E00;
+  --color-dataviz-categorical-7: #CC79A7;
 }
 
 :root, [data-bs-theme="light"] {
@@ -183,6 +197,11 @@
   --border-focus: #3498DB;
   --navigation-hover-background: rgba(20, 20, 16, 0.05);
   --navigation-active-background: rgba(20, 20, 16, 0.1);
+  --color-dataviz-okabe-ito-black: #000000;
+  --color-dataviz-categorical-8: #000000;
+  --color-dataviz-uncertainty-outer: #D6D6D6;
+  --color-dataviz-uncertainty-union: #9E9E9E;
+  --color-dataviz-uncertainty-inner: #333333;
 }
 
 [data-bs-theme="dark"] {
@@ -250,10 +269,15 @@
   --border-focus: #4FC3F7;
   --navigation-hover-background: rgba(237, 237, 235, 0.05);
   --navigation-active-background: rgba(237, 237, 235, 0.1);
+  --color-dataviz-okabe-ito-black: #FDF9F2;
+  --color-dataviz-categorical-8: #FDF9F2;
+  --color-dataviz-uncertainty-outer: #333333;
+  --color-dataviz-uncertainty-union: #6B6B6B;
+  --color-dataviz-uncertainty-inner: #D6D6D6;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:where(:not([data-bs-theme="light"])) {
     --color-surface-page: #141410;
     --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-page-scrolled: #141410;
@@ -318,5 +342,10 @@
     --border-focus: #4FC3F7;
     --navigation-hover-background: rgba(237, 237, 235, 0.05);
     --navigation-active-background: rgba(237, 237, 235, 0.1);
+    --color-dataviz-okabe-ito-black: #FDF9F2;
+    --color-dataviz-categorical-8: #FDF9F2;
+    --color-dataviz-uncertainty-outer: #333333;
+    --color-dataviz-uncertainty-union: #6B6B6B;
+    --color-dataviz-uncertainty-inner: #D6D6D6;
   }
 }

package/dist/tokens.studio.json

@@ -126,6 +126,90 @@
           "value": "#cc0000",
           "type": "color"
         }
+      },
+      "dataviz": {
+        "okabe-ito": {
+          "orange": {
+            "value": "#E69F00",
+            "type": "color"
+          },
+          "sky-blue": {
+            "value": "#56B4E9",
+            "type": "color"
+          },
+          "bluish-green": {
+            "value": "#009E73",
+            "type": "color"
+          },
+          "yellow": {
+            "value": "#F0E442",
+            "type": "color"
+          },
+          "blue": {
+            "value": "#0072B2",
+            "type": "color"
+          },
+          "vermillion": {
+            "value": "#D55E00",
+            "type": "color"
+          },
+          "reddish-purple": {
+            "value": "#CC79A7",
+            "type": "color"
+          },
+          "black": {
+            "value": "#000000",
+            "type": "color"
+          }
+        },
+        "categorical": {
+          "1": {
+            "value": "#E69F00",
+            "type": "color"
+          },
+          "2": {
+            "value": "#56B4E9",
+            "type": "color"
+          },
+          "3": {
+            "value": "#009E73",
+            "type": "color"
+          },
+          "4": {
+            "value": "#F0E442",
+            "type": "color"
+          },
+          "5": {
+            "value": "#0072B2",
+            "type": "color"
+          },
+          "6": {
+            "value": "#D55E00",
+            "type": "color"
+          },
+          "7": {
+            "value": "#CC79A7",
+            "type": "color"
+          },
+          "8": {
+            "value": "#000000",
+            "type": "color"
+          }
+        },
+        "uncertainty": {
+          "outer": {
+            "value": "#D6D6D6",
+            "type": "color"
+          },
+          "union": {
+            "value": "#9E9E9E",
+            "type": "color"
+          },
+          "inner": {
+            "value": "#333333",
+            "type": "color"
+          }
+        }
       }
     },
     "shadow": {
@@ -522,6 +606,34 @@
           "value": "#ff0000",
           "type": "color"
         }
+      },
+      "dataviz": {
+        "okabe-ito": {
+          "black": {
+            "value": "#FDF9F2",
+            "type": "color"
+          }
+        },
+        "categorical": {
+          "8": {
+            "value": "#FDF9F2",
+            "type": "color"
+          }
+        },
+        "uncertainty": {
+          "outer": {
+            "value": "#333333",
+            "type": "color"
+          },
+          "union": {
+            "value": "#6B6B6B",
+            "type": "color"
+          },
+          "inner": {
+            "value": "#D6D6D6",
+            "type": "color"
+          }
+        }
       }
     },
     "border": {

package/dist/tokens.w3c.dtcg.json

@@ -279,6 +279,134 @@
         },
         "$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)."
+        }
+      }
     }
   },
   "shadow": {

package/package.json

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

package/src/dataviz.json

@@ -0,0 +1,93 @@
+{
+  "color": {
+    "dataviz": {
+      "okabe-ito": {
+        "orange": {
+          "value": "#E69F00",
+          "description": "Okabe-Ito orange (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "sky-blue": {
+          "value": "#56B4E9",
+          "description": "Okabe-Ito sky blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "bluish-green": {
+          "value": "#009E73",
+          "description": "Okabe-Ito bluish green (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "yellow": {
+          "value": "#F0E442",
+          "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",
+          "description": "Okabe-Ito blue (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "vermillion": {
+          "value": "#D55E00",
+          "description": "Okabe-Ito vermillion (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "reddish-purple": {
+          "value": "#CC79A7",
+          "description": "Okabe-Ito reddish purple (Okabe & Ito 2008, colour-blind safe). House data-viz primitive; maintainer decision 2026-10-29."
+        },
+        "black": {
+          "light": "#000000",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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",
+          "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": {
+          "light": "#000000",
+          "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": {
+          "light": "#D6D6D6",
+          "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": {
+          "light": "#9E9E9E",
+          "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": {
+          "light": "#333333",
+          "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)."
+        }
+      }
+    }
+  }
+}