@dataimago/tokens 0.1.0-alpha.31 → 0.1.0-alpha.33

package/dist/index.cjs

@@ -45,12 +45,27 @@ const tokens = {
       "scrim": {
         "light": "rgba(20, 20, 16, 0.85)",
         "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)."
+        "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": {
         "light": "rgba(20, 20, 16, 0.92)",
         "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": {
+        "light": "#f7f7f6",
+        "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": {
+        "light": "rgba(247, 247, 246, 0.92)",
+        "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": {
+        "light": "#000000",
+        "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": {
@@ -88,6 +103,11 @@ const tokens = {
         "light": "#3498DB",
         "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": {
+        "light": "rgba(12, 10, 9, 0.45)",
+        "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": {
@@ -115,6 +135,11 @@ const tokens = {
         "light": "#f7f7f6",
         "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": {
+        "light": "#14140f",
+        "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": {
@@ -308,6 +333,13 @@ const tokens = {
           "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."
         }
+      },
+      "map": {
+        "ocean": {
+          "light": "#808fa7",
+          "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)."
+        }
       }
     }
   },
@@ -422,6 +454,52 @@ const tokens = {
       "description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
     }
   },
+  "gradient": {
+    "video-poster": {
+      "value": "linear-gradient(135deg, #2b3a4a, #1f2a1f 60%, #3b2f1c)",
+      "description": "Video-poster placeholder, shown until a real poster frame exists: a slate-to-green-to-umber diagonal. It depicts a video frame, so it is theme-invariant (the same in light and dark). Its three stops (#2b3a4a, #1f2a1f, #3b2f1c) are a one-off and are NOT palette colours: do not reach for them elsewhere. A CSS gradient string has no clean DTCG mapping, so this token is in tokens.css and the JS exports only and is left out of the W3C DTCG and Tokens Studio exports (the legacy dist/tokens.dtcg.json still carries it). Raised from the SGPc apps (2026-11-03)."
+    }
+  },
+  "motion": {
+    "enter": {
+      "value": "200ms",
+      "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",
+      "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": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+      "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": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+      "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",
+        "description": "Duration scale step, 120ms. Equal to motion.exit."
+      },
+      "160": {
+        "value": "160ms",
+        "description": "Duration scale step, 160ms: a hover on a small control, a sheet leaving."
+      },
+      "200": {
+        "value": "200ms",
+        "description": "Duration scale step, 200ms. Equal to motion.enter."
+      },
+      "250": {
+        "value": "250ms",
+        "description": "Duration scale step, 250ms: a sheet arriving, a grid-column change."
+      },
+      "300": {
+        "value": "300ms",
+        "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."
+      }
+    }
+  },
   "card": {
     "background": "surface.elevated",
     "padding": "spacing.component.padding",

package/dist/index.mjs

@@ -45,12 +45,27 @@ const tokens = {
       "scrim": {
         "light": "rgba(20, 20, 16, 0.85)",
         "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)."
+        "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": {
         "light": "rgba(20, 20, 16, 0.92)",
         "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": {
+        "light": "#f7f7f6",
+        "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": {
+        "light": "rgba(247, 247, 246, 0.92)",
+        "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": {
+        "light": "#000000",
+        "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": {
@@ -88,6 +103,11 @@ const tokens = {
         "light": "#3498DB",
         "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": {
+        "light": "rgba(12, 10, 9, 0.45)",
+        "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": {
@@ -115,6 +135,11 @@ const tokens = {
         "light": "#f7f7f6",
         "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": {
+        "light": "#14140f",
+        "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": {
@@ -308,6 +333,13 @@ const tokens = {
           "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."
         }
+      },
+      "map": {
+        "ocean": {
+          "light": "#808fa7",
+          "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)."
+        }
       }
     }
   },
@@ -422,6 +454,52 @@ const tokens = {
       "description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
     }
   },
+  "gradient": {
+    "video-poster": {
+      "value": "linear-gradient(135deg, #2b3a4a, #1f2a1f 60%, #3b2f1c)",
+      "description": "Video-poster placeholder, shown until a real poster frame exists: a slate-to-green-to-umber diagonal. It depicts a video frame, so it is theme-invariant (the same in light and dark). Its three stops (#2b3a4a, #1f2a1f, #3b2f1c) are a one-off and are NOT palette colours: do not reach for them elsewhere. A CSS gradient string has no clean DTCG mapping, so this token is in tokens.css and the JS exports only and is left out of the W3C DTCG and Tokens Studio exports (the legacy dist/tokens.dtcg.json still carries it). Raised from the SGPc apps (2026-11-03)."
+    }
+  },
+  "motion": {
+    "enter": {
+      "value": "200ms",
+      "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",
+      "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": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+      "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": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+      "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",
+        "description": "Duration scale step, 120ms. Equal to motion.exit."
+      },
+      "160": {
+        "value": "160ms",
+        "description": "Duration scale step, 160ms: a hover on a small control, a sheet leaving."
+      },
+      "200": {
+        "value": "200ms",
+        "description": "Duration scale step, 200ms. Equal to motion.enter."
+      },
+      "250": {
+        "value": "250ms",
+        "description": "Duration scale step, 250ms: a sheet arriving, a grid-column change."
+      },
+      "300": {
+        "value": "300ms",
+        "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."
+      }
+    }
+  },
   "card": {
     "background": "surface.elevated",
     "padding": "spacing.component.padding",

package/dist/tokens.css

@@ -63,6 +63,16 @@
   --transition-standard: 0.25s ease-in-out;
   --transition-smooth: 0.35s ease;
   --transition-logo: 0.3s;
+  --gradient-video-poster: linear-gradient(135deg, #2b3a4a, #1f2a1f 60%, #3b2f1c);
+  --motion-enter: 200ms;
+  --motion-exit: 120ms;
+  --motion-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --motion-ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --motion-duration-120: 120ms;
+  --motion-duration-160: 160ms;
+  --motion-duration-200: 200ms;
+  --motion-duration-250: 250ms;
+  --motion-duration-300: 300ms;
   --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);
@@ -158,6 +168,12 @@
   --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
   --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
   --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
+  --color-surface-print: #f7f7f6;
+  --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
+  --color-surface-play-disc: rgba(247, 247, 246, 0.92);
+  --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
+  --color-surface-media: #000000;
+  --color-surface-media: color(display-p3 0 0 0);
   --color-border-subtle: rgba(12, 10, 9, 0.45);
   --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
   --color-border-moderate: rgba(12, 10, 9, 0.60);
@@ -172,6 +188,8 @@
   --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
   --color-border-on-scrim-focus: #3498db;
   --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
+  --color-border-print: rgba(12, 10, 9, 0.45);
+  --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
   --color-content-primary: #14140f;
   --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
   --color-content-secondary: #6a6a6a;
@@ -182,6 +200,8 @@
   --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
   --color-content-on-scrim: #f7f7f6;
   --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
+  --color-content-on-print: #14140f;
+  --color-content-on-print: color(display-p3 0.0784 0.0784 0.0608);
   --color-interactive-primary: #434739;
   --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
   --color-interactive-hover: #363a2e;
@@ -219,6 +239,10 @@
   --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
   --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
   --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
+  --shadow-lift: 0 -8px 24px rgb(20 20 16 / 0.07);
+  --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.18);
+  --shadow-float: 0 1px 2px rgb(20 20 16 / 0.06), 0 4px 14px rgb(20 20 16 / 0.08);
+  --shadow-print: 0 1px 3px rgb(0 0 0 / 0.25);
   --border-subtle: rgba(20, 20, 16, 0.47);
   --border-moderate: rgba(20, 20, 16, 0.63);
   --border-focus: #3498DB;
@@ -229,6 +253,7 @@
   --color-dataviz-uncertainty-outer: #D6D6D6;
   --color-dataviz-uncertainty-union: #9E9E9E;
   --color-dataviz-uncertainty-inner: #333333;
+  --color-dataviz-map-ocean: #808fa7;
 }
 
 [data-bs-theme="dark"] {
@@ -252,6 +277,12 @@
   --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
   --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
   --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
+  --color-surface-print: #f7f7f6;
+  --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
+  --color-surface-play-disc: rgba(247, 247, 246, 0.92);
+  --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
+  --color-surface-media: #000000;
+  --color-surface-media: color(display-p3 0 0 0);
   --color-border-subtle: rgba(253, 249, 242, 0.45);
   --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
   --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -266,6 +297,8 @@
   --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
   --color-border-on-scrim-focus: #3498db;
   --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
+  --color-border-print: rgba(12, 10, 9, 0.45);
+  --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
   --color-content-primary: #fdf9f2;
   --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
   --color-content-secondary: #a8a29e;
@@ -276,6 +309,8 @@
   --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
   --color-content-on-scrim: #f7f7f6;
   --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
+  --color-content-on-print: #14140f;
+  --color-content-on-print: color(display-p3 0.0784 0.0784 0.0608);
   --color-interactive-primary: #98a384;
   --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
   --color-interactive-hover: #7e8a6b;
@@ -313,6 +348,10 @@
   --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
   --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
   --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
+  --shadow-lift: 0 -8px 24px rgb(0 0 0 / 0.30);
+  --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.18);
+  --shadow-float: 0 1px 2px rgb(0 0 0 / 0.40), 0 4px 14px rgb(0 0 0 / 0.35);
+  --shadow-print: 0 1px 3px rgb(0 0 0 / 0.25);
   --border-subtle: rgba(237, 237, 235, 0.47);
   --border-moderate: rgba(237, 237, 235, 0.63);
   --border-focus: #4FC3F7;
@@ -323,6 +362,7 @@
   --color-dataviz-uncertainty-outer: #333333;
   --color-dataviz-uncertainty-union: #6B6B6B;
   --color-dataviz-uncertainty-inner: #D6D6D6;
+  --color-dataviz-map-ocean: #042438;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -347,6 +387,12 @@
     --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
     --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
     --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
+    --color-surface-print: #f7f7f6;
+    --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
+    --color-surface-play-disc: rgba(247, 247, 246, 0.92);
+    --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
+    --color-surface-media: #000000;
+    --color-surface-media: color(display-p3 0 0 0);
     --color-border-subtle: rgba(253, 249, 242, 0.45);
     --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
     --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -361,6 +407,8 @@
     --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
     --color-border-on-scrim-focus: #3498db;
     --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
+    --color-border-print: rgba(12, 10, 9, 0.45);
+    --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
     --color-content-primary: #fdf9f2;
     --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
     --color-content-secondary: #a8a29e;
@@ -371,6 +419,8 @@
     --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
     --color-content-on-scrim: #f7f7f6;
     --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
+    --color-content-on-print: #14140f;
+    --color-content-on-print: color(display-p3 0.0784 0.0784 0.0608);
     --color-interactive-primary: #98a384;
     --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
     --color-interactive-hover: #7e8a6b;
@@ -408,6 +458,10 @@
     --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
     --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
     --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
+    --shadow-lift: 0 -8px 24px rgb(0 0 0 / 0.30);
+    --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.18);
+    --shadow-float: 0 1px 2px rgb(0 0 0 / 0.40), 0 4px 14px rgb(0 0 0 / 0.35);
+    --shadow-print: 0 1px 3px rgb(0 0 0 / 0.25);
     --border-subtle: rgba(237, 237, 235, 0.47);
     --border-moderate: rgba(237, 237, 235, 0.63);
     --border-focus: #4FC3F7;
@@ -418,5 +472,6 @@
     --color-dataviz-uncertainty-outer: #333333;
     --color-dataviz-uncertainty-union: #6B6B6B;
     --color-dataviz-uncertainty-inner: #D6D6D6;
+    --color-dataviz-map-ocean: #042438;
   }
 }

package/dist/tokens.dtcg.json

@@ -71,7 +71,7 @@
           "dark": "rgba(20, 20, 16, 0.85)"
         },
         "$type": "color",
-        "$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)."
+        "$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": {
@@ -80,6 +80,30 @@
         },
         "$type": "color",
         "$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": {
+          "light": "#f7f7f6",
+          "dark": "#f7f7f6"
+        },
+        "$type": "color",
+        "$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": {
+          "light": "rgba(247, 247, 246, 0.92)",
+          "dark": "rgba(247, 247, 246, 0.92)"
+        },
+        "$type": "color",
+        "$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": {
+          "light": "#000000",
+          "dark": "#000000"
+        },
+        "$type": "color",
+        "$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": {
@@ -138,6 +162,14 @@
         },
         "$type": "color",
         "$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": {
+          "light": "rgba(12, 10, 9, 0.45)",
+          "dark": "rgba(12, 10, 9, 0.45)"
+        },
+        "$type": "color",
+        "$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": {
@@ -180,6 +212,14 @@
         },
         "$type": "color",
         "$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": {
+          "light": "#14140f",
+          "dark": "#14140f"
+        },
+        "$type": "color",
+        "$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": {
@@ -465,6 +505,62 @@
       "$description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
     }
   },
+  "gradient": {
+    "video-poster": {
+      "$value": "linear-gradient(135deg, #2b3a4a, #1f2a1f 60%, #3b2f1c)",
+      "$type": "other",
+      "$description": "Video-poster placeholder, shown until a real poster frame exists: a slate-to-green-to-umber diagonal. It depicts a video frame, so it is theme-invariant (the same in light and dark). Its three stops (#2b3a4a, #1f2a1f, #3b2f1c) are a one-off and are NOT palette colours: do not reach for them elsewhere. A CSS gradient string has no clean DTCG mapping, so this token is in tokens.css and the JS exports only and is left out of the W3C DTCG and Tokens Studio exports (the legacy dist/tokens.dtcg.json still carries it). Raised from the SGPc apps (2026-11-03)."
+    }
+  },
+  "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": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+      "$type": "other",
+      "$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": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+      "$type": "other",
+      "$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."
+      }
+    }
+  },
   "card": {
     "background": {
       "$value": "surface.elevated",

package/dist/tokens.scss

@@ -63,6 +63,16 @@
   --transition-standard: 0.25s ease-in-out;
   --transition-smooth: 0.35s ease;
   --transition-logo: 0.3s;
+  --gradient-video-poster: linear-gradient(135deg, #2b3a4a, #1f2a1f 60%, #3b2f1c);
+  --motion-enter: 200ms;
+  --motion-exit: 120ms;
+  --motion-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --motion-ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --motion-duration-120: 120ms;
+  --motion-duration-160: 160ms;
+  --motion-duration-200: 200ms;
+  --motion-duration-250: 250ms;
+  --motion-duration-300: 300ms;
   --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);
@@ -158,6 +168,12 @@
   --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
   --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
   --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
+  --color-surface-print: #f7f7f6;
+  --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
+  --color-surface-play-disc: rgba(247, 247, 246, 0.92);
+  --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
+  --color-surface-media: #000000;
+  --color-surface-media: color(display-p3 0 0 0);
   --color-border-subtle: rgba(12, 10, 9, 0.45);
   --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
   --color-border-moderate: rgba(12, 10, 9, 0.60);
@@ -172,6 +188,8 @@
   --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
   --color-border-on-scrim-focus: #3498db;
   --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
+  --color-border-print: rgba(12, 10, 9, 0.45);
+  --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
   --color-content-primary: #14140f;
   --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
   --color-content-secondary: #6a6a6a;
@@ -182,6 +200,8 @@
   --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
   --color-content-on-scrim: #f7f7f6;
   --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
+  --color-content-on-print: #14140f;
+  --color-content-on-print: color(display-p3 0.0784 0.0784 0.0608);
   --color-interactive-primary: #434739;
   --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
   --color-interactive-hover: #363a2e;
@@ -219,6 +239,10 @@
   --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
   --shadow-figure-plate-hover: 0 10px 15px -3px rgb(20 20 16 / 0.1);
   --shadow-figure-plate-active: 0 4px 6px -1px rgb(20 20 16 / 0.1);
+  --shadow-lift: 0 -8px 24px rgb(20 20 16 / 0.07);
+  --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.18);
+  --shadow-float: 0 1px 2px rgb(20 20 16 / 0.06), 0 4px 14px rgb(20 20 16 / 0.08);
+  --shadow-print: 0 1px 3px rgb(0 0 0 / 0.25);
   --border-subtle: rgba(20, 20, 16, 0.47);
   --border-moderate: rgba(20, 20, 16, 0.63);
   --border-focus: #3498DB;
@@ -229,6 +253,7 @@
   --color-dataviz-uncertainty-outer: #D6D6D6;
   --color-dataviz-uncertainty-union: #9E9E9E;
   --color-dataviz-uncertainty-inner: #333333;
+  --color-dataviz-map-ocean: #808fa7;
 }
 
 [data-bs-theme="dark"] {
@@ -252,6 +277,12 @@
   --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
   --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
   --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
+  --color-surface-print: #f7f7f6;
+  --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
+  --color-surface-play-disc: rgba(247, 247, 246, 0.92);
+  --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
+  --color-surface-media: #000000;
+  --color-surface-media: color(display-p3 0 0 0);
   --color-border-subtle: rgba(253, 249, 242, 0.45);
   --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
   --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -266,6 +297,8 @@
   --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
   --color-border-on-scrim-focus: #3498db;
   --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
+  --color-border-print: rgba(12, 10, 9, 0.45);
+  --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
   --color-content-primary: #fdf9f2;
   --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
   --color-content-secondary: #a8a29e;
@@ -276,6 +309,8 @@
   --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
   --color-content-on-scrim: #f7f7f6;
   --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
+  --color-content-on-print: #14140f;
+  --color-content-on-print: color(display-p3 0.0784 0.0784 0.0608);
   --color-interactive-primary: #98a384;
   --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
   --color-interactive-hover: #7e8a6b;
@@ -313,6 +348,10 @@
   --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
   --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
   --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
+  --shadow-lift: 0 -8px 24px rgb(0 0 0 / 0.30);
+  --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.18);
+  --shadow-float: 0 1px 2px rgb(0 0 0 / 0.40), 0 4px 14px rgb(0 0 0 / 0.35);
+  --shadow-print: 0 1px 3px rgb(0 0 0 / 0.25);
   --border-subtle: rgba(237, 237, 235, 0.47);
   --border-moderate: rgba(237, 237, 235, 0.63);
   --border-focus: #4FC3F7;
@@ -323,6 +362,7 @@
   --color-dataviz-uncertainty-outer: #333333;
   --color-dataviz-uncertainty-union: #6B6B6B;
   --color-dataviz-uncertainty-inner: #D6D6D6;
+  --color-dataviz-map-ocean: #042438;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -347,6 +387,12 @@
     --color-surface-scrim: color(display-p3 0.0784 0.0784 0.0643 / 0.85);
     --color-surface-scrim-solid: rgba(20, 20, 16, 0.92);
     --color-surface-scrim-solid: color(display-p3 0.0784 0.0784 0.0643 / 0.92);
+    --color-surface-print: #f7f7f6;
+    --color-surface-print: color(display-p3 0.9686 0.9686 0.9651);
+    --color-surface-play-disc: rgba(247, 247, 246, 0.92);
+    --color-surface-play-disc: color(display-p3 0.9686 0.9686 0.9651 / 0.92);
+    --color-surface-media: #000000;
+    --color-surface-media: color(display-p3 0 0 0);
     --color-border-subtle: rgba(253, 249, 242, 0.45);
     --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
     --color-border-moderate: rgba(253, 249, 242, 0.60);
@@ -361,6 +407,8 @@
     --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
     --color-border-on-scrim-focus: #3498db;
     --color-border-on-scrim-focus: color(display-p3 0.3208 0.588 0.8369);
+    --color-border-print: rgba(12, 10, 9, 0.45);
+    --color-border-print: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
     --color-content-primary: #fdf9f2;
     --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
     --color-content-secondary: #a8a29e;
@@ -371,6 +419,8 @@
     --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
     --color-content-on-scrim: #f7f7f6;
     --color-content-on-scrim: color(display-p3 0.9686 0.9686 0.9651);
+    --color-content-on-print: #14140f;
+    --color-content-on-print: color(display-p3 0.0784 0.0784 0.0608);
     --color-interactive-primary: #98a384;
     --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
     --color-interactive-hover: #7e8a6b;
@@ -408,6 +458,10 @@
     --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
     --shadow-figure-plate-hover: 0 4px 12px rgb(0 0 0 / 0.5);
     --shadow-figure-plate-active: 0 2px 8px rgb(0 0 0 / 0.35);
+    --shadow-lift: 0 -8px 24px rgb(0 0 0 / 0.30);
+    --shadow-sheet: 0 -8px 24px rgb(0 0 0 / 0.18);
+    --shadow-float: 0 1px 2px rgb(0 0 0 / 0.40), 0 4px 14px rgb(0 0 0 / 0.35);
+    --shadow-print: 0 1px 3px rgb(0 0 0 / 0.25);
     --border-subtle: rgba(237, 237, 235, 0.47);
     --border-moderate: rgba(237, 237, 235, 0.63);
     --border-focus: #4FC3F7;
@@ -418,5 +472,6 @@
     --color-dataviz-uncertainty-outer: #333333;
     --color-dataviz-uncertainty-union: #6B6B6B;
     --color-dataviz-uncertainty-inner: #D6D6D6;
+    --color-dataviz-map-ocean: #042438;
   }
 }

package/dist/tokens.studio.json

@@ -41,6 +41,18 @@
         "scrim-solid": {
           "value": "rgba(20, 20, 16, 0.92)",
           "type": "color"
+        },
+        "print": {
+          "value": "#f7f7f6",
+          "type": "color"
+        },
+        "play-disc": {
+          "value": "rgba(247, 247, 246, 0.92)",
+          "type": "color"
+        },
+        "media": {
+          "value": "#000000",
+          "type": "color"
         }
       },
       "border": {
@@ -71,6 +83,10 @@
         "on-scrim-focus": {
           "value": "#3498DB",
           "type": "color"
+        },
+        "print": {
+          "value": "rgba(12, 10, 9, 0.45)",
+          "type": "color"
         }
       },
       "content": {
@@ -93,6 +109,10 @@
         "on-scrim": {
           "value": "#f7f7f6",
           "type": "color"
+        },
+        "on-print": {
+          "value": "#14140f",
+          "type": "color"
         }
       },
       "interactive": {
@@ -273,6 +293,12 @@
             "value": "#0072B2",
             "type": "color"
           }
+        },
+        "map": {
+          "ocean": {
+            "value": "#808fa7",
+            "type": "color"
+          }
         }
       }
     },
@@ -326,6 +352,46 @@
         "type": "duration"
       }
     },
+    "motion": {
+      "enter": {
+        "value": "200ms",
+        "type": "duration"
+      },
+      "exit": {
+        "value": "120ms",
+        "type": "duration"
+      },
+      "ease-out": {
+        "value": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+        "type": "other"
+      },
+      "ease-in": {
+        "value": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+        "type": "other"
+      },
+      "duration": {
+        "120": {
+          "value": "120ms",
+          "type": "duration"
+        },
+        "160": {
+          "value": "160ms",
+          "type": "duration"
+        },
+        "200": {
+          "value": "200ms",
+          "type": "duration"
+        },
+        "250": {
+          "value": "250ms",
+          "type": "duration"
+        },
+        "300": {
+          "value": "300ms",
+          "type": "duration"
+        }
+      }
+    },
     "font": {
       "family": {
         "sans": {
@@ -593,6 +659,18 @@
         "scrim-solid": {
           "value": "rgba(20, 20, 16, 0.92)",
           "type": "color"
+        },
+        "print": {
+          "value": "#f7f7f6",
+          "type": "color"
+        },
+        "play-disc": {
+          "value": "rgba(247, 247, 246, 0.92)",
+          "type": "color"
+        },
+        "media": {
+          "value": "#000000",
+          "type": "color"
         }
       },
       "border": {
@@ -623,6 +701,10 @@
         "on-scrim-focus": {
           "value": "#3498DB",
           "type": "color"
+        },
+        "print": {
+          "value": "rgba(12, 10, 9, 0.45)",
+          "type": "color"
         }
       },
       "content": {
@@ -645,6 +727,10 @@
         "on-scrim": {
           "value": "#f7f7f6",
           "type": "color"
+        },
+        "on-print": {
+          "value": "#14140f",
+          "type": "color"
         }
       },
       "interactive": {
@@ -739,6 +825,12 @@
             "value": "#D6D6D6",
             "type": "color"
           }
+        },
+        "map": {
+          "ocean": {
+            "value": "#042438",
+            "type": "color"
+          }
         }
       }
     },

package/dist/tokens.w3c.dtcg.json

@@ -89,7 +89,7 @@
             "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)."
+        "$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)",
@@ -100,6 +100,36 @@
           }
         },
         "$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": {
@@ -172,6 +202,16 @@
           }
         },
         "$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": {
@@ -224,6 +264,16 @@
           }
         },
         "$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": {
@@ -535,6 +585,18 @@
           "$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."
         }
+      },
+      "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)."
+        }
       }
     }
   },
@@ -606,6 +668,65 @@
       "$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": {

package/package.json

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

package/src/dataviz.json

@@ -109,6 +109,13 @@
           "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."
         }
+      },
+      "map": {
+        "ocean": {
+          "light": "#808fa7",
+          "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)."
+        }
       }
     }
   }

package/src/effects.json

@@ -26,6 +26,26 @@
         "dark": "0 2px 8px rgb(0 0 0 / 0.35)",
         "description": "Figure plate while pressed. Light mode is the moderate shadow; dark mode is a plain black shadow for the same reason as figure-plate.hover. Not mode-invariant."
       }
+    },
+    "lift": {
+      "light": "0 -8px 24px rgb(20 20 16 / 0.07)",
+      "dark": "0 -8px 24px rgb(0 0 0 / 0.30)",
+      "description": "Upward panel lift: a lower panel rising over the section above it, e.g. the landing's lower panel over the globe during the section wipe. Every other shadow here falls downward. Light is ink-900-ish at 0.07 (the apps wrote rgb(28 25 23), normalised to the house base rgb(20 20 16)); dark is plain black at 0.30 because a light-ink glow (as in shadow.prominent) would haze the dark page above the panel. The dark value is a controller call, not measured. Raised from the SGPc apps (2026-11-03)."
+    },
+    "sheet": {
+      "light": "0 -8px 24px rgb(0 0 0 / 0.18)",
+      "dark": "0 -8px 24px rgb(0 0 0 / 0.18)",
+      "description": "Upward shadow for a bottom sheet (the map details panel on a narrow screen). Plain black at 0.18 in both modes: a sheet is a physical layer over the page, so light and dark carry the same value. Raised from the SGPc apps (2026-11-03)."
+    },
+    "float": {
+      "light": "0 1px 2px rgb(20 20 16 / 0.06), 0 4px 14px rgb(20 20 16 / 0.08)",
+      "dark": "0 1px 2px rgb(0 0 0 / 0.40), 0 4px 14px rgb(0 0 0 / 0.35)",
+      "description": "Floating control: a small disc standing off the page, e.g. the landing's scroll chevron. Two layers, a tight contact shadow and a soft spread. Pair it with a hairline outline, because a shadow alone does not read in dark mode. Light is the apps' value normalised to rgb(20 20 16); dark is plain black, stronger (0.40 and 0.35) so the layers still read on a dark page, a controller call, not measured. Raised from the SGPc apps (2026-11-03)."
+    },
+    "print": {
+      "light": "0 1px 3px rgb(0 0 0 / 0.25)",
+      "dark": "0 1px 3px rgb(0 0 0 / 0.25)",
+      "description": "Paper drop shadow under a printed-paper object, e.g. the paper-cover thumbnail on color.surface.print. It depicts a physical object, so it is theme-invariant: the same in light and dark. Raised from the SGPc apps (2026-11-03)."
     }
   },
   "border": {
@@ -62,5 +82,51 @@
       "value": "0.3s",
       "description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
     }
+  },
+  "gradient": {
+    "video-poster": {
+      "value": "linear-gradient(135deg, #2b3a4a, #1f2a1f 60%, #3b2f1c)",
+      "description": "Video-poster placeholder, shown until a real poster frame exists: a slate-to-green-to-umber diagonal. It depicts a video frame, so it is theme-invariant (the same in light and dark). Its three stops (#2b3a4a, #1f2a1f, #3b2f1c) are a one-off and are NOT palette colours: do not reach for them elsewhere. A CSS gradient string has no clean DTCG mapping, so this token is in tokens.css and the JS exports only and is left out of the W3C DTCG and Tokens Studio exports (the legacy dist/tokens.dtcg.json still carries it). Raised from the SGPc apps (2026-11-03)."
+    }
+  },
+  "motion": {
+    "enter": {
+      "value": "200ms",
+      "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",
+      "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": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+      "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": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+      "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",
+        "description": "Duration scale step, 120ms. Equal to motion.exit."
+      },
+      "160": {
+        "value": "160ms",
+        "description": "Duration scale step, 160ms: a hover on a small control, a sheet leaving."
+      },
+      "200": {
+        "value": "200ms",
+        "description": "Duration scale step, 200ms. Equal to motion.enter."
+      },
+      "250": {
+        "value": "250ms",
+        "description": "Duration scale step, 250ms: a sheet arriving, a grid-column change."
+      },
+      "300": {
+        "value": "300ms",
+        "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."
+      }
+    }
   }
 }

package/src/theme-colors-p3.json

@@ -116,7 +116,7 @@
           "oklch": "oklch(18.97% 0.0078 107.13 / 0.85)",
           "p3": "color(display-p3 0.0784 0.0784 0.0643 / 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)."
+        "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": {
         "light": {
@@ -130,6 +130,45 @@
           "p3": "color(display-p3 0.0784 0.0784 0.0643 / 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": {
+        "light": {
+          "srgb": "#f7f7f6",
+          "oklch": "oklch(97.59% 0.0013 106.42)",
+          "p3": "color(display-p3 0.9686 0.9686 0.9651)"
+        },
+        "dark": {
+          "srgb": "#f7f7f6",
+          "oklch": "oklch(97.59% 0.0013 106.42)",
+          "p3": "color(display-p3 0.9686 0.9686 0.9651)"
+        },
+        "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": {
+        "light": {
+          "srgb": "rgba(247, 247, 246, 0.92)",
+          "oklch": "oklch(97.59% 0.0013 106.42 / 0.92)",
+          "p3": "color(display-p3 0.9686 0.9686 0.9651 / 0.92)"
+        },
+        "dark": {
+          "srgb": "rgba(247, 247, 246, 0.92)",
+          "oklch": "oklch(97.59% 0.0013 106.42 / 0.92)",
+          "p3": "color(display-p3 0.9686 0.9686 0.9651 / 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": {
+        "light": {
+          "srgb": "#000000",
+          "oklch": "oklch(0% 0 0)",
+          "p3": "color(display-p3 0 0 0)"
+        },
+        "dark": {
+          "srgb": "#000000",
+          "oklch": "oklch(0% 0 0)",
+          "p3": "color(display-p3 0 0 0)"
+        },
+        "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": {
@@ -223,6 +262,19 @@
           "p3": "color(display-p3 0.3208 0.588 0.8369)"
         },
         "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": {
+        "light": {
+          "srgb": "rgba(12, 10, 9, 0.45)",
+          "oklch": "oklch(14.69% 0.0041 49.25 / 0.45)",
+          "p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.45)"
+        },
+        "dark": {
+          "srgb": "rgba(12, 10, 9, 0.45)",
+          "oklch": "oklch(14.69% 0.0041 49.25 / 0.45)",
+          "p3": "color(display-p3 0.0457 0.0395 0.0358 / 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": {
@@ -290,6 +342,19 @@
           "p3": "color(display-p3 0.9686 0.9686 0.9651)"
         },
         "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": {
+        "light": {
+          "srgb": "#14140f",
+          "oklch": "oklch(18.93% 0.0098 107.3)",
+          "p3": "color(display-p3 0.0784 0.0784 0.0608)"
+        },
+        "dark": {
+          "srgb": "#14140f",
+          "oklch": "oklch(18.93% 0.0098 107.3)",
+          "p3": "color(display-p3 0.0784 0.0784 0.0608)"
+        },
+        "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": {

package/src/theme-colors.json

@@ -44,12 +44,27 @@
       "scrim": {
         "light": "rgba(20, 20, 16, 0.85)",
         "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)."
+        "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": {
         "light": "rgba(20, 20, 16, 0.92)",
         "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": {
+        "light": "#f7f7f6",
+        "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": {
+        "light": "rgba(247, 247, 246, 0.92)",
+        "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": {
+        "light": "#000000",
+        "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": {
@@ -87,6 +102,11 @@
         "light": "#3498DB",
         "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": {
+        "light": "rgba(12, 10, 9, 0.45)",
+        "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": {
@@ -114,6 +134,11 @@
         "light": "#f7f7f6",
         "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": {
+        "light": "#14140f",
+        "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": {