@felloinnovations/brand-kit 0.4.0 → 0.5.0

package/design-system/tokens.json

@@ -3,21 +3,29 @@
   "version": 1,
   "meta": {
     "source": "code",
-    "repo": "@felloinnovations/brand-kit 0.4.0: tokens/_source.hubl.css (the kit) and tokens/_product.css (the product layer)",
-    "note": "Generated by scripts/generate-tokens.mjs (yarn tokens): every value and the token list come from tokens/; the usage notes, the order and the type groups are kept from this file, so edit a note here and a value there. Kit tokens keep the kit's names (color-*, font-size-*, space-*, radius-*, shadow-*). The product layer keeps its ws-* names. A var(), calc() or color-mix() is written as the literal it resolves to, with the formula at the end of its usage note. A gradient cannot be held here, so these are in tokens.css and fello.css only: --gradient-ai, --gradient-scrim-dropdown, --gradient-btn-primary, --ws-team-glow, --ws-cool-glow."
+    "repo": "@felloinnovations/brand-kit 0.5.0: tokens/_source.hubl.css (the kit), tokens/_product.css (the product layer) and tokens/_dark.css (the dark theme)",
+    "note": "Generated by scripts/generate-tokens.mjs (yarn tokens): every value and the token list come from tokens/; the usage notes, the order and the type groups are kept from this file, so edit a note here and a value there. Kit tokens keep the kit's names (color-*, font-size-*, space-*, radius-*, shadow-*). The product layer keeps its ws-* names. A var(), calc() or color-mix() is written as the literal it resolves to, with the formula at the end of its usage note. A colour the dark theme changes has a value per theme: light, dark (data-theme=\"dark\") and navy (data-ground=\"navy\"). A gradient or a set of colour channels cannot be held here, so these are in tokens.css and fello.css only: --gradient-ai, --gradient-scrim-dropdown, --gradient-btn-primary, --ws-ink-rgb, --ws-shade-rgb, --ws-frame, --ws-stage-wash, --ws-shimmer, --ws-team-glow, --ws-cool-glow, --ws-orb."
   },
   "color": {
     "themes": [
       {
         "id": "light",
         "name": "Light"
+      },
+      {
+        "id": "dark",
+        "name": "Dark (night)"
+      },
+      {
+        "id": "navy",
+        "name": "Dark, navy ground"
       }
     ],
     "tokens": [
       {
         "name": "color-brand-salmon",
         "value": "#ff725c",
-        "usage": "The brand's salmon. A data tone and small marks only: a needs-you dot, a count badge's tint, the focus halo. Never a button, a wash, a card or a strip. 2.6:1 on the cream: never words (use ws-word-needs)."
+        "usage": "The brand's salmon. A data tone and small marks only: a needs-you dot, a count badge's tint. Never a button, a wash, a card or a strip. 2.6:1 on the cream: never words (use ws-word-needs)."
       },
       {
         "name": "color-brand-navy",
@@ -59,6 +67,15 @@
         "value": "#ffffff",
         "usage": "White. A field while typing (ws-field), words on navy, the tab thumb's words, a well's row under the pointer. Not a card (cards are the cream)."
       },
+      {
+        "name": "color-surface",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#131e28",
+          "navy": "#0f253c"
+        },
+        "usage": "What white is for: a marketing card, a well row under the pointer, the current AppShell mark. White in light; it swaps in dark, where white itself stays white. (CSS: var(--color-white))"
+      },
       {
         "name": "color-gray-1",
         "value": "#f9f9f9",
@@ -66,7 +83,7 @@
       },
       {
         "name": "color-surface-stripe",
-        "value": "#f7f4f4",
+        "value": "{ws-tint-accent}",
         "usage": "Stripe. A faint accent tint behind a row (ws-tint-accent)."
       },
       {
@@ -106,8 +123,12 @@
       },
       {
         "name": "color-text-primary",
-        "value": "#353e5a",
-        "usage": "Kit marketing body colour. Marketing pages only; the product's body is color-text-body."
+        "value": {
+          "light": "#353e5a",
+          "dark": "#ced6df",
+          "navy": "#ededed"
+        },
+        "usage": "Kit marketing body colour. Marketing pages only; the product's body is color-text-body. (CSS: color-mix(in srgb, var(--color-text-heading) 50%, #61475f))"
       },
       {
         "name": "color-ai-cyan",
@@ -136,87 +157,143 @@
       },
       {
         "name": "color-dropdown-bg",
-        "value": "#fcfaf9",
+        "value": {
+          "light": "#fcfaf9",
+          "dark": "#16222d",
+          "navy": "#162c42"
+        },
         "usage": "Kit dropdown ground. The product's menus use the cream (ws-menu)."
       },
       {
         "name": "color-feedback-error",
-        "value": "#ef6b51",
-        "usage": "Kit error (PROVISIONAL in the kit). 2.9:1 on the cream: never words. A field's error border only; the error's words are ws-word-needs."
+        "value": {
+          "light": "#ef6b51",
+          "dark": "#ff7d63",
+          "navy": "#ff7d63"
+        },
+        "usage": "Kit error (PROVISIONAL in the kit). 2.9:1 on the cream: never words. A field's error border only; the error's words are ws-word-needs. (CSS: color-mix(in srgb, var(--ws-chart-under-half) 87.5%, #7f3a04))"
       },
       {
         "name": "color-feedback-success-text",
-        "value": "#4f7d24",
+        "value": {
+          "light": "#4f7d24",
+          "dark": "#9bcf72",
+          "navy": "#9bcf72"
+        },
         "usage": "Kit success text (PROVISIONAL). Not used in the product; good news in words is ws-word-positive."
       },
       {
         "name": "color-feedback-success-bg",
-        "value": "#cde3cc",
-        "usage": "Kit success ground (PROVISIONAL). Not used in the product; a done tint is ws-tint-live."
+        "value": {
+          "light": "#cde3cc",
+          "dark": "#1b2f22",
+          "navy": "#1b2f22"
+        },
+        "usage": "Kit success ground (PROVISIONAL). Not used in the product; a done tint is ws-tint-live. (CSS: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(254 250.75 221.5)))"
       },
       {
         "name": "color-alert",
-        "value": "#e90f0f",
+        "value": {
+          "light": "#e90f0f",
+          "dark": "#ff5a5a",
+          "navy": "#ff5a5a"
+        },
         "usage": "Kit alert red. Not used in the product: a falling number is mid blue, something to fix is ws-word-needs."
       },
       {
         "name": "color-stat-positive",
-        "value": "#098486",
-        "usage": "Teal: done, passed, positive. Bars, rings, dots, a change arrow's mark. 4.4:1 on the cream: words take ws-word-positive."
+        "value": {
+          "light": "#098486",
+          "dark": "#3bb8b2",
+          "navy": "#3bb8b2"
+        },
+        "usage": "Teal: done, passed, positive. Bars, rings, dots, a change arrow's mark. 4.4:1 on the cream: words take ws-word-positive. (CSS: var(--ws-chart-finished))"
       },
       {
         "name": "color-bg-page",
-        "value": "{color-background}",
+        "value": {
+          "light": "#fefbf9",
+          "dark": "#0f1922",
+          "navy": "#021a32"
+        },
         "usage": "The page and every card. The one ground."
       },
       {
         "name": "color-text-heading",
-        "value": "{color-brand-navy}",
-        "usage": "Titles, a row's name, figures, the primary button's fill, a quiet act's words."
+        "value": {
+          "light": "#093555",
+          "dark": "#e8edf3",
+          "navy": "#ffffff"
+        },
+        "usage": "Titles, a row's name, figures, the primary button's fill, a quiet act's words. (CSS: var(--color-brand-navy))"
       },
       {
         "name": "color-text-body",
-        "value": "{color-gray-7}",
-        "usage": "Body copy, a card's one sentence, rows, a ghost button's words."
+        "value": {
+          "light": "#545454",
+          "dark": "#b0bbc7",
+          "navy": "#d3d3d3"
+        },
+        "usage": "Body copy, a card's one sentence, rows, a ghost button's words. (CSS: var(--color-gray-7))"
       },
       {
         "name": "color-text-muted",
-        "value": "#6e6e6e",
-        "usage": "Meta, labels, a band's 'how' line, the eyebrow. The lightest a word may be: 4.95:1 on the cream, 4.5:1 on ws-surface-sunk (kit 0.3.0; it was Gray 6 at 3.9:1)."
+        "value": {
+          "light": "#666666",
+          "dark": "#8494a5",
+          "navy": "#a9a9a9"
+        },
+        "usage": "Meta, labels, a band's 'how' line, the eyebrow. The lightest a word may be: 5.57:1 on the cream, 4.90 on the tray, 4.69 on the grey shell (0.5.0, D2: it was #6E6E6E, 4.36 on the tray; Gray 6 before that)."
       },
       {
         "name": "color-text-brand-strong",
-        "value": "#b35040",
-        "usage": "The salmon darkened for words (kit 0.3.0): 4.9:1 on the cream. The product's ws-word-needs is this token: an error under a field, 'Try again', a needs-you chip's words."
+        "value": "{ws-word-needs}",
+        "usage": "The salmon darkened for words, hue held: 5.45:1 on the cream, 4.80 on the tray, 4.52 on a pressed row (0.5.0, D2). The product's ws-word-needs is this token: an error under a field, 'Try again', a needs-you chip's words."
       },
       {
         "name": "color-text-error-strong",
-        "value": "#ae4e3b",
-        "usage": "The kit's error hue darkened until it clears 4.5:1 on its own tint (kit 0.3.0). The kit's error badge words; the product writes errors in ws-word-needs."
+        "value": {
+          "light": "#a74b39",
+          "dark": "#ff8b78",
+          "navy": "#ff8b78"
+        },
+        "usage": "The kit's error hue darkened, hue held, until it clears 4.5:1 on every ground and its own tint (0.5.0). The kit's error badge words; the product writes errors in ws-word-needs. (CSS: color-mix(in srgb, var(--ws-word-needs) 95%, #944b00))"
       },
       {
         "name": "color-text-success-strong",
-        "value": "#3c601b",
-        "usage": "The kit's success olive darkened until it clears 4.5:1 on its own tint (kit 0.3.0). The kit's success badge words; the product's good news is ws-word-positive."
+        "value": {
+          "light": "#3c601b",
+          "dark": "#9bcf72",
+          "navy": "#9bcf72"
+        },
+        "usage": "The kit's success olive darkened until it clears 4.5:1 on its own tint (kit 0.3.0). The kit's success badge words; the product's good news is ws-word-positive. (CSS: color-mix(in srgb, var(--ws-word-positive) 20%, rgb(72.75 91.74 3.19)))"
       },
       {
         "name": "color-text-placeholder",
-        "value": "#6e6e6e",
-        "usage": "A field's placeholder: 4.95:1 on the cream (kit 0.3.0; Gray 5 was 2.3:1). A placeholder is never the only label."
+        "value": {
+          "light": "#6e6e6e",
+          "dark": "#8494a5",
+          "navy": "#8494a5"
+        },
+        "usage": "A field's placeholder: 5.10:1 on the white field (kit 0.3.0; Gray 5 was 2.3:1). A placeholder is never the only label. (CSS: color-mix(in srgb, var(--color-text-muted) 93.75%, #e6e6e6))"
       },
       {
         "name": "color-text-interactive",
-        "value": "{color-brand-mid-blue}",
-        "usage": "Links, a link button's words, a falling number, a field's focus edge."
+        "value": {
+          "light": "#495883",
+          "dark": "#93a6dc",
+          "navy": "#93a6dc"
+        },
+        "usage": "Links, a link button's words, a falling number, a field's focus edge. (CSS: var(--color-brand-mid-blue))"
       },
       {
         "name": "color-border-default",
-        "value": "{color-gray-stroke}",
+        "value": "{ws-edge}",
         "usage": "A hairline between surfaces, the stage's edge (ws-edge)."
       },
       {
         "name": "color-border-hairline",
-        "value": "{color-gray-3}",
+        "value": "{ws-edge-card}",
         "usage": "A card's or field's edge, drawn at ws-hairline."
       },
       {
@@ -231,117 +308,445 @@
       },
       {
         "name": "color-nav-hover-bg",
-        "value": "rgba(73, 88, 131, 0.05)",
-        "usage": "Kit nav hover (mid blue 5%). The product's sidebar rows use ws-sidebar-hover instead. (CSS: color-mix(in srgb, var(--color-brand-mid-blue) 5%, transparent))"
+        "value": {
+          "light": "rgba(73, 88, 131, 0.05)",
+          "dark": "rgba(232, 237, 243, 0.04)",
+          "navy": "rgba(255, 255, 255, 0.04)"
+        },
+        "usage": "Kit nav hover (mid blue 5%). The product's sidebar rows use ws-sidebar-hover instead. (CSS: color-mix(in srgb, var(--color-text-interactive) 5%, transparent))"
       },
       {
         "name": "ws-page",
-        "value": "{color-gray-stroke}",
-        "usage": "The grey around the stage: the window behind the one surface."
+        "value": {
+          "light": "#e8e8e8",
+          "dark": "#0a1118",
+          "navy": "#021a32"
+        },
+        "usage": "The grey around the stage: the window behind the one surface. (CSS: color-mix(in srgb, var(--ws-tray) 97.5%, #252525))"
       },
       {
         "name": "ws-surface-sunk",
-        "value": "#f3f1ef",
+        "value": {
+          "light": "#f3f1ef",
+          "dark": "#17232e",
+          "navy": "#1b3147"
+        },
         "usage": "A plate, a track, a strip, a row under the pointer, the person's chat bubble: the cream 95% with gray-8. Ground for color-text-body and heading words. (CSS: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8)))"
       },
       {
         "name": "ws-surface-press",
-        "value": "#e9e6e4",
+        "value": {
+          "light": "#e9e6e4",
+          "dark": "#1e2b38",
+          "navy": "#2a3f53"
+        },
         "usage": "A row or card under a press (the cream 90% with gray-8), so a tap answers on touch where hover never shows. (CSS: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-gray-8)))"
       },
+      {
+        "name": "ws-raised-sunk",
+        "value": {
+          "light": "#f3f1ef",
+          "dark": "#1e2b38",
+          "navy": "#2a3f53"
+        },
+        "usage": "Something sunk inside a raised surface (an active option, a range band, a disabled field in a menu, a picker, a dialog, a panel): the house sunk in light, the press step in dark, where the page sunk is 1/255 off raised. The house points --ws-surface-sunk at it inside .ws-menu, .ws-popover, .ws-dialog and .ws-panel. (CSS: var(--ws-surface-sunk))"
+      },
       {
         "name": "ws-sidebar-hover",
-        "value": "#f0f0f0",
-        "usage": "A sidebar row under the pointer (gray-2 85% with white). (CSS: color-mix(in srgb, var(--color-gray-2) 85%, var(--color-white)))"
+        "value": {
+          "light": "#f0f0f0",
+          "dark": "#121c25",
+          "navy": "#11283e"
+        },
+        "usage": "A sidebar row under the pointer (gray-2 85% with white). (CSS: color-mix(in srgb, var(--ws-tray) 85%, var(--color-surface)))"
       },
       {
         "name": "ws-sidebar-press",
-        "value": "{color-gray-2}",
-        "usage": "A sidebar row under a press."
+        "value": {
+          "light": "#ededed",
+          "dark": "#17222d",
+          "navy": "#1b3147"
+        },
+        "usage": "A sidebar row under a press. (CSS: var(--ws-tray))"
       },
       {
         "name": "ws-menu-line",
-        "value": "#e2e0de",
+        "value": {
+          "light": "#e2e0de",
+          "dark": "#223040",
+          "navy": "rgba(255, 255, 255, 0.18)"
+        },
         "usage": "The hairline between a menu's groups (the cream 87% with gray-8). (CSS: color-mix(in srgb, var(--color-bg-page) 87%, var(--color-gray-8)))"
       },
       {
         "name": "ws-menu-hover",
-        "value": "#f5f3f1",
+        "value": {
+          "light": "#f5f3f1",
+          "dark": "#1e2b38",
+          "navy": "#20354b"
+        },
         "usage": "A menu row under the pointer (the cream 96% with gray-8). (CSS: color-mix(in srgb, var(--color-bg-page) 96%, var(--color-gray-8)))"
       },
       {
         "name": "ws-well",
-        "value": "{color-gray-2}",
-        "usage": "The grey well: the plate behind a list of 48 px cream rows (a list of things to ask or start)."
+        "value": {
+          "light": "#ededed",
+          "dark": "#0b141c",
+          "navy": "#11283e"
+        },
+        "usage": "The grey well: the plate behind a list of 48 px cream rows (a list of things to ask or start). (CSS: var(--ws-tray))"
       },
       {
         "name": "ws-field",
-        "value": "{color-white}",
-        "usage": "Every field's ground (Input, Select, TextArea), so a field reads as a field on a cream card."
+        "value": {
+          "light": "#ffffff",
+          "dark": "#0b141c",
+          "navy": "#ffffff"
+        },
+        "usage": "Every field's ground (Input, Select, TextArea), so a field reads as a field on a cream card. (CSS: var(--color-surface))"
+      },
+      {
+        "name": "ws-field-ink",
+        "value": {
+          "light": "#292929",
+          "dark": "#e1e7ee",
+          "navy": "#093555"
+        },
+        "usage": "A field's words. Grey 8 in light, light grey in dark, navy on the navy ground's white field. (CSS: color-mix(in srgb, var(--color-text-body) 46.25%, #040404))"
+      },
+      {
+        "name": "ws-field-mark",
+        "value": {
+          "light": "#093555",
+          "navy": "#093555",
+          "dark": "#e8edf3"
+        },
+        "usage": "A field's marks: the Select and Combobox chevron, the DateInput calendar, the PasswordInput eye, the NumberInput steppers. The heading navy (light in dark); the field's own ink on the navy ground, whose fields are white. (CSS: var(--color-text-heading))"
+      },
+      {
+        "name": "ws-on-act",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#0f1922",
+          "navy": "#021a32"
+        },
+        "usage": "Words and marks on the act fill (color-text-heading): the primary button, a pressed or chosen item, a checked box's tick, an on switch's thumb. White in light, the stage in dark. (CSS: var(--color-white))"
+      },
+      {
+        "name": "ws-inverse",
+        "value": {
+          "light": "#093555",
+          "dark": "#093555",
+          "navy": "#093555"
+        },
+        "usage": "A message on the act's own ground: a toast, a note tip, the site footer. The act fill in light; the brand navy in dark (with white words, a brand pair). (CSS: var(--color-text-heading))"
+      },
+      {
+        "name": "ws-on-inverse",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#ffffff",
+          "navy": "#ffffff"
+        },
+        "usage": "Words and marks on --ws-inverse: the words on the act in light, white in dark. (CSS: var(--ws-on-act))"
+      },
+      {
+        "name": "ws-act-hover",
+        "value": {
+          "light": "#0f4a73",
+          "dark": "#d7dce2",
+          "navy": "#ebedef"
+        },
+        "usage": "The navy act a shade brighter under the pointer (North). In dark the light act eases a step toward its words."
+      },
+      {
+        "name": "ws-act-light",
+        "value": {
+          "light": "rgba(255, 255, 255, 0.24)",
+          "dark": "rgba(0, 0, 0, 0)",
+          "navy": "rgba(0, 0, 0, 0)"
+        },
+        "usage": "The soft light under the pointer on the navy act (North); none in dark. (CSS: color-mix(in srgb, var(--ws-on-act) 24%, transparent))"
+      },
+      {
+        "name": "ws-agent-tally",
+        "value": {
+          "light": "#2c4870",
+          "dark": "#e8edf3",
+          "navy": "#ffffff"
+        },
+        "usage": "Seth's agent/tally #2C4870: a softer act, for the figure tabs' current cell, a seat meter's fill, a hatch. Words on it: ws-on-act. The act itself in dark."
+      },
+      {
+        "name": "ws-agent-coach",
+        "value": "{color-stat-positive}",
+        "usage": "The coaching assistant's one tone, a mark (Seth's agent/coach): the teal. Its words: ws-word-positive."
+      },
+      {
+        "name": "ws-agent-growth",
+        "value": "{ws-chart-past-half}",
+        "usage": "The growth assistant's one tone, a mark (Seth's agent/growth): the purple. Its words: ws-word-past-half."
+      },
+      {
+        "name": "ws-agent-recruit",
+        "value": "{ws-chart-under-half}",
+        "usage": "The recruiting assistant's one tone, a mark (Seth's agent/recruit): the salmon. Its words: ws-word-needs."
+      },
+      {
+        "name": "ws-mask",
+        "value": "#000",
+        "usage": "The opaque stop of a fade or tick mask: only its alpha is read, it never paints."
       },
       {
         "name": "ws-tint-accent",
-        "value": "{color-surface-stripe}",
-        "usage": "A faint accent tint behind a row."
+        "value": {
+          "light": "#f7f4f4",
+          "dark": "#131e28",
+          "navy": "#11283e"
+        },
+        "usage": "A faint accent tint behind a row. (CSS: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c))"
       },
       {
         "name": "ws-tint-needs",
-        "value": "#fff1ef",
-        "usage": "The needs-you chip's and count badge's tint (salmon 10% on white), with ws-word-needs words. A mark, never a wash. (CSS: color-mix(in srgb, var(--color-brand-salmon) 10%, var(--color-white)))"
+        "value": {
+          "light": "#fff1ef",
+          "dark": "#2e252a",
+          "navy": "#302a3a"
+        },
+        "usage": "The needs-you chip's and count badge's tint (salmon 10% on white), with ws-word-needs words. A mark, never a wash. (CSS: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface)))"
       },
       {
         "name": "ws-tint-live",
-        "value": "#e1f0f0",
-        "usage": "Done, gone well: a live chip's tint (teal 12% on white), with ws-word-positive words. (CSS: color-mix(in srgb, var(--color-stat-positive) 12%, var(--color-white)))"
+        "value": {
+          "light": "#e1f0f0",
+          "dark": "#112a32",
+          "navy": "#062d41"
+        },
+        "usage": "Done, gone well: a live chip's tint (teal 12% on white), with ws-word-positive words. (CSS: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface)))"
+      },
+      {
+        "name": "ws-tint-needs-work",
+        "value": {
+          "light": "#fcdfe8",
+          "dark": "#382939",
+          "navy": "#2d2947"
+        },
+        "usage": "The 'needs work' tag's ground: the pink at 20% on the cream (Seth 301:1630). Its words are ws-word-needs-work. (CSS: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page)))"
       },
       {
         "name": "ws-edge",
-        "value": "{color-border-default}",
-        "usage": "The stage's edge and the hairline between surfaces."
+        "value": {
+          "light": "#e8e8e8",
+          "dark": "#1e2a36",
+          "navy": "rgba(255, 255, 255, 0.1)"
+        },
+        "usage": "The stage's edge and the hairline between surfaces. (CSS: var(--color-gray-stroke))"
       },
       {
         "name": "ws-edge-card",
-        "value": "{color-gray-3}",
-        "usage": "The 0.5 px edge of a card, a field, a tab track, a secondary button (the designer's border/card)."
+        "value": {
+          "light": "#d3d3d3",
+          "dark": "#273544",
+          "navy": "rgba(255, 255, 255, 0.18)"
+        },
+        "usage": "The 0.5 px edge of a card, a field, a tab track, a secondary button (the designer's border/card). (CSS: var(--color-gray-3))"
+      },
+      {
+        "name": "ws-edge-hover",
+        "value": {
+          "light": "#aaa49d",
+          "dark": "#8494a5",
+          "navy": "#a9a9a9"
+        },
+        "usage": "An outlined control's 0.5 px edge under the pointer (North darkens #d3d3d3 to #aaa49d); the muted words in dark. Hover only, inside (hover: hover)."
+      },
+      {
+        "name": "ws-edge-card-1x",
+        "value": {
+          "light": "rgba(211, 211, 211, 0.5)",
+          "dark": "#273544",
+          "navy": "rgba(255, 255, 255, 0.18)"
+        },
+        "usage": "A card's edge on a screen under 1.5 dppx, where the 0.5 px hairline rounds up to a full pixel: half strength in light; full in dark, where half would vanish. (CSS: color-mix(in srgb, var(--ws-edge-card) 50%, transparent))"
       },
       {
         "name": "ws-edge-chip",
-        "value": "#d9d5d0",
-        "usage": "The 0.5 px edge of a chip and a change chip (the designer's border/chip)."
+        "value": {
+          "light": "#d9d5d0",
+          "dark": "#2c3b4b",
+          "navy": "rgba(255, 255, 255, 0.18)"
+        },
+        "usage": "The 0.5 px edge of a chip and a change chip (the designer's border/chip). (CSS: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7))"
       },
       {
         "name": "ws-edge-slot",
-        "value": "#e2e2e2",
-        "usage": "A day cell's and an empty tick's fine edge (the designer's border/slot); also ws-chart-cell-edge."
+        "value": {
+          "light": "#e2e2e2",
+          "dark": "#1f2c39",
+          "navy": "rgba(255, 255, 255, 0.18)"
+        },
+        "usage": "A day cell's and an empty tick's fine edge (the designer's border/slot); also ws-chart-cell-edge. (CSS: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb))"
       },
       {
         "name": "ws-edge-tray",
-        "value": "#d9d3cb",
-        "usage": "The footer band's top edge (the designer's border/tray)."
+        "value": {
+          "light": "#d9d3cb",
+          "dark": "#2c3b4b",
+          "navy": "rgba(255, 255, 255, 0.18)"
+        },
+        "usage": "The footer band's top edge (the designer's border/tray). (CSS: color-mix(in srgb, var(--ws-tray) 84%, rgb(112 74.5 24.5)))"
       },
       {
         "name": "ws-chart-foot",
-        "value": "#f3f1ef",
+        "value": {
+          "light": "#f3f1ef",
+          "dark": "#0c151d",
+          "navy": "#0f253c"
+        },
         "usage": "The footer band's ground under its edge and inset shade (ws-shadow-band). (CSS: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8)))"
       },
+      {
+        "name": "ws-raised",
+        "value": {
+          "light": "#fefbf9",
+          "dark": "#16222d",
+          "navy": "#162c42"
+        },
+        "usage": "A thing lifted off the page: menu, popover, tooltip, dialog, panel, toast. The cream in light; a step up from the stage in dark, since a shadow does not show there. (CSS: var(--color-bg-page))"
+      },
+      {
+        "name": "ws-track",
+        "value": {
+          "light": "#ededed",
+          "dark": "#1a2631",
+          "navy": "#20354b"
+        },
+        "usage": "An empty track: a meter, an upload bar, a password segment, a pending stat, the composer rule. Grey 2 in light. (CSS: var(--ws-tray))"
+      },
+      {
+        "name": "ws-tray",
+        "value": {
+          "light": "#ededed",
+          "dark": "#1e2b38",
+          "navy": "#2a3f53"
+        },
+        "usage": "The tray every product card sits in (D5): it shows as the 1 px rim (ws-rim) around the cream surface, and as the foot under it. Seth's #EDEDED. A word on the foot uses the word tokens, all AA on it. (CSS: var(--color-gray-2))"
+      },
+      {
+        "name": "ws-well-hover",
+        "value": {
+          "light": "#e4e2df",
+          "dark": "#273544",
+          "navy": "#273544"
+        },
+        "usage": "A well card's frame (its tray) under the pointer: North darkens the frame, it never lifts. Seth's value, not a kit colour."
+      },
+      {
+        "name": "ws-frame-top",
+        "value": {
+          "light": "#ebf0f5",
+          "dark": "#0a1118",
+          "navy": "#021a32"
+        },
+        "usage": "The top of the page wash behind a glass stage (Seth's #EBF0F5), fading into the page by 640 px. A palette sets it; dark keeps a flat shell."
+      },
+      {
+        "name": "ws-stage-foot",
+        "value": {
+          "light": "#fef9f6",
+          "dark": "#0f1922",
+          "navy": "#021a32"
+        },
+        "usage": "The foot of a washed stage (Seth's #FEF9F6), whose gradient starts at the page. A palette sets it."
+      },
+      {
+        "name": "ws-glass",
+        "value": {
+          "light": "rgba(255, 255, 255, 0.59)",
+          "dark": "rgba(15, 25, 34, 0.59)",
+          "navy": "rgba(2, 26, 50, 0.59)"
+        },
+        "usage": "The stage glass: white at 59% over the frame wash, with ws-glass-blur behind it (North). In dark the cream page at 59%, a derived interim until Seth draws one. (CSS: color-mix(in srgb, var(--color-surface) 59%, transparent))"
+      },
+      {
+        "name": "ws-edge-stage",
+        "value": {
+          "light": "#e8e8e8",
+          "dark": "#273544",
+          "navy": "rgba(255, 255, 255, 0.18)"
+        },
+        "usage": "The stage's and the chat shell's 1 px edge (North). (CSS: var(--ws-page))"
+      },
       {
         "name": "ws-word-needs",
-        "value": "{color-text-brand-strong}",
-        "usage": "Words that say something needs fixing or you: an error under a field, 'Try again', a needs-you chip's words. The AA step of salmon: 4.9:1 on the cream. Never for marks (they keep the salmon)."
+        "value": {
+          "light": "#a84b3c",
+          "dark": "#ff8b78",
+          "navy": "#ff8b78"
+        },
+        "usage": "Words that say something needs fixing or you: an error under a field, 'Try again', a needs-you chip's words. The AA step of salmon: 5.45:1 on the cream, 4.80 on the tray. Never for marks (they keep the salmon)."
       },
       {
         "name": "ws-word-positive",
-        "value": "#09787f",
-        "usage": "Good news in words: 'Passed', a saved form, a rising change chip. The AA step of teal (teal 85% with navy): 5.1:1 on the cream. (CSS: color-mix(in srgb, var(--color-stat-positive) 85%, var(--color-brand-navy)))"
+        "value": {
+          "light": "#09717a",
+          "dark": "#4fc7be",
+          "navy": "#4fc7be"
+        },
+        "usage": "Good news in words: 'Passed', a saved form, a rising change chip. The AA step of teal (teal 76% with navy, 0.5.0): 5.6:1 on the cream, 4.9 on the tray and on its live tint. (CSS: color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading)))"
+      },
+      {
+        "name": "ws-word-needs-work",
+        "value": {
+          "light": "#b42d68",
+          "dark": "#f370a4",
+          "navy": "#f583b0"
+        },
+        "usage": "A 'needs work' rating in words, on any ground (D10). Seth draws the words in the pink itself (2.34:1 on the tray); this is the AA step Ignite ships. 5.10 on the tray, 4.80 on its tint. (CSS: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68)))"
+      },
+      {
+        "name": "ws-word-alert",
+        "value": {
+          "light": "#b1042f",
+          "navy": "#ff8282",
+          "dark": "#ff5470"
+        },
+        "usage": "Seth's status red in words: a negative number, a down chip, an alert. 6.13 on the tray. (CSS: var(--ws-chart-alert))"
+      },
+      {
+        "name": "ws-word-past-half",
+        "value": {
+          "light": "#6d4fc2",
+          "navy": "#ad9bf1",
+          "dark": "#9a84ee"
+        },
+        "usage": "The purple (Grow, past half) in words. 5.06 on the tray. (CSS: var(--ws-chart-past-half))"
+      },
+      {
+        "name": "ws-word-answer",
+        "value": {
+          "light": "#3d3d3d",
+          "dark": "#c9d1db",
+          "navy": "#e9e9e9"
+        },
+        "usage": "North's answer ink: a chat answer's words, a step softer than the field's. AA on every ground (tokens.md). (CSS: color-mix(in srgb, var(--color-text-body) 71.25%, #040404))"
       },
       {
         "name": "ws-chart-finished",
-        "value": "{color-stat-positive}",
+        "value": {
+          "light": "#098486",
+          "dark": "#23a8a3",
+          "navy": "#23a8a3"
+        },
         "usage": "Chart tone: finished, done, the end of the goal gradient. Marks only."
       },
       {
         "name": "ws-chart-past-half",
-        "value": "#6d4fc2",
+        "value": {
+          "light": "#6d4fc2",
+          "dark": "#9a84ee",
+          "navy": "#9a84ee"
+        },
         "usage": "Chart tone: past halfway, the middle of the goal gradient. The designer's purple (not a kit colour; reported). 5.7:1 on the cream."
       },
       {
@@ -351,73 +756,273 @@
       },
       {
         "name": "ws-chart-empty",
-        "value": "{color-gray-1}",
-        "usage": "A chart part not yet filled (a bar's track, a ring's backdrop)."
+        "value": {
+          "light": "#f9f9f9",
+          "dark": "#1a2631",
+          "navy": "#20354b"
+        },
+        "usage": "A chart part not yet filled (a bar's track, a ring's backdrop). (CSS: color-mix(in srgb, var(--color-surface) 97.6%, #050505))"
+      },
+      {
+        "name": "ws-chart-rest",
+        "value": {
+          "light": "#d9d9d9",
+          "dark": "#273544",
+          "navy": "rgba(255, 255, 255, 0.18)"
+        },
+        "usage": "Seth's 'what stays' ground under a share bar's parts. (CSS: color-mix(in srgb, var(--ws-tray) 90%, #252525))"
+      },
+      {
+        "name": "ws-ghost",
+        "value": {
+          "light": "#e3dfdb",
+          "dark": "#273544",
+          "navy": "#273544"
+        },
+        "usage": "North's ghost chart shape behind a loading shimmer (Skeleton). (CSS: color-mix(in srgb, var(--ws-well-hover) 98%, #b24c17))"
+      },
+      {
+        "name": "ws-shimmer-ground",
+        "value": {
+          "light": "#ece8e4",
+          "dark": "#1a2631",
+          "navy": "#20354b"
+        },
+        "usage": "The grey a loading shimmer sweeps over: the tray made warmer in light, the track in dark. (CSS: color-mix(in srgb, var(--ws-tray) 96%, #d4700c))"
       },
       {
         "name": "ws-chart-dot",
-        "value": "#ebe8e6",
+        "value": {
+          "light": "#ebe8e6",
+          "dark": "#1c2834",
+          "navy": "rgba(255, 255, 255, 0.1)"
+        },
         "usage": "The fine dot of the dotted field a drawing sits on (the cream 91% with gray-8), one every 6.5 px. (CSS: color-mix(in srgb, var(--color-bg-page) 91%, var(--color-gray-8)))"
       },
       {
         "name": "ws-chart-navy-light",
-        "value": "#2e6088",
+        "value": {
+          "light": "#2e6088",
+          "dark": "#6e9cc4",
+          "navy": "#6e9cc4"
+        },
         "usage": "A lighter navy for a streak's second tier and a navy bar's top."
       },
       {
         "name": "ws-chart-navy-fade",
-        "value": "#a8c0d3",
-        "usage": "The pale end of a navy bar's fade."
+        "value": {
+          "light": "#a8c0d3",
+          "dark": "#31485d",
+          "navy": "#4e5f70"
+        },
+        "usage": "The pale end of a navy bar's fade. (CSS: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(198.5 216 229.75)))"
       },
       {
         "name": "ws-chart-salmon-fade",
-        "value": "#ffd2c8",
-        "usage": "The pale end of a salmon bar's fade."
+        "value": {
+          "light": "#ffd2c8",
+          "dark": "#5f3735",
+          "navy": "#563740"
+        },
+        "usage": "The pale end of a salmon bar's fade. (CSS: color-mix(in srgb, var(--ws-chart-under-half) 25%, #fff2ec))"
       },
       {
         "name": "ws-chart-purple-fade",
-        "value": "#d8ccf6",
-        "usage": "The pale end of a purple bar's fade."
+        "value": {
+          "light": "#d8ccf6",
+          "dark": "#3b3a62",
+          "navy": "#323b6d"
+        },
+        "usage": "The pale end of a purple bar's fade. (CSS: color-mix(in srgb, var(--ws-chart-past-half) 10%, rgb(227.8888888889 217.8888888889 251.7777777778)))"
       },
       {
         "name": "ws-chart-teal-fade",
-        "value": "#b0e2dd",
-        "usage": "The pale end of a teal bar's fade."
+        "value": {
+          "light": "#b0e2dd",
+          "dark": "#154448",
+          "navy": "#0c4454"
+        },
+        "usage": "The pale end of a teal bar's fade. (CSS: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(217.75 249.5 242.75)))"
       },
       {
         "name": "ws-chart-finished-tint",
-        "value": "#9fddd6",
-        "usage": "A teal tint for a ring's outer tracks."
+        "value": {
+          "light": "#9fddd6",
+          "dark": "#164e51",
+          "navy": "#0e4e5c"
+        },
+        "usage": "A teal tint for a ring's outer tracks. (CSS: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(196.5 243.25 234)))"
       },
       {
         "name": "ws-chart-past-half-tint",
-        "value": "#cbbdf3",
-        "usage": "A purple tint for a ring's outer tracks."
+        "value": {
+          "light": "#cbbdf3",
+          "dark": "#3c3b64",
+          "navy": "#333c6f"
+        },
+        "usage": "A purple tint for a ring's outer tracks. (CSS: color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235)))"
       },
       {
         "name": "ws-chart-under-half-tint",
-        "value": "#f9dfc6",
-        "usage": "A salmon tint for a ring's outer tracks."
+        "value": {
+          "light": "#f9dfc6",
+          "dark": "#4b3a2b",
+          "navy": "#4b3a2b"
+        },
+        "usage": "A salmon tint for a ring's outer tracks. (CSS: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5)))"
       },
       {
         "name": "ws-card-tint-blue",
-        "value": "#edeef3",
-        "usage": "A working pill on a chat card (mid blue 10% on white). (CSS: color-mix(in srgb, var(--color-brand-mid-blue) 10%, var(--color-white)))"
+        "value": {
+          "light": "#edeef3",
+          "dark": "#1b2637",
+          "navy": "#142a46"
+        },
+        "usage": "A working pill on a chat card (mid blue 10% on white). (CSS: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface)))"
       },
       {
         "name": "ws-card-tint-done",
-        "value": "#e6f3f3",
-        "usage": "A done pill on a chat card (teal 10% on white). (CSS: color-mix(in srgb, var(--color-stat-positive) 10%, var(--color-white)))"
+        "value": {
+          "light": "#e6f3f3",
+          "dark": "rgba(17, 40, 47, 1)",
+          "navy": "#062d41"
+        },
+        "usage": "A done pill on a chat card (teal 10% on white). (CSS: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface)))"
       },
       {
         "name": "ws-scrim",
-        "value": "rgba(9, 53, 85, 0.35)",
-        "usage": "Behind a dialog or a drawer: navy at 35%. (CSS: color-mix(in srgb, var(--color-brand-navy) 35%, transparent))"
+        "value": {
+          "light": "rgba(9, 53, 85, 0.35)",
+          "dark": "rgba(2, 6, 10, 0.62)",
+          "navy": "rgba(0, 8, 15, 0.62)"
+        },
+        "usage": "Behind a dialog or a drawer: navy at 35%. (CSS: color-mix(in srgb, var(--color-text-heading) 35%, transparent))"
+      },
+      {
+        "name": "ws-glow-rose",
+        "value": "#f59593",
+        "usage": "The rose of the team hero wash: the AI rose drawn from the under-half tone. A wash colour, never words. (CSS: color-mix(in srgb, var(--ws-chart-under-half) 50%, #ebb8ca))"
+      },
+      {
+        "name": "ws-glow-pink",
+        "value": "#ec67a0",
+        "usage": "The pink of the team hero wash: the AI pink drawn from the needs-work tone. A wash colour, never words. (CSS: color-mix(in srgb, var(--ws-chart-needs-work) 90%, #ad167c))"
+      },
+      {
+        "name": "ws-glow-blue",
+        "value": "#3898f0",
+        "usage": "The bright blue of the cool hero wash and the working orb: the AI blue drawn from the second navy tone. A wash colour, never words. (CSS: color-mix(in srgb, var(--ws-chart-navy-light) 10%, rgb(57.1111111111 158.2222222222 251.5555555556)))"
+      },
+      {
+        "name": "ws-veil",
+        "value": {
+          "light": "rgba(232, 232, 232, 0.3)",
+          "dark": "rgba(10, 17, 24, 0.3)",
+          "navy": "rgba(2, 26, 50, 0.3)"
+        },
+        "usage": "The page seen through behind a floating chat bar: the shell ground at 30%, with --ws-blur-panel. (CSS: color-mix(in srgb, var(--ws-page) 30%, transparent))"
       },
       {
         "name": "ws-chart-cell-edge",
         "value": "{ws-edge-slot}",
         "usage": "A day cell's, an empty tick's and a chart row's hairline (the slot edge)."
+      },
+      {
+        "name": "ws-chart-needs-work",
+        "value": "#f370a4",
+        "usage": "Seth's 'Needs work' pink as a mark: ticks, a bar, the tag's dot. 2.7:1 on the cream: never words (use ws-word-needs-work)."
+      },
+      {
+        "name": "ws-chart-alert",
+        "value": {
+          "light": "#b1042f",
+          "dark": "#ff5470",
+          "navy": "#ff5470"
+        },
+        "usage": "Seth's status red as a mark: 'needs a reply' ticks, an alert dot."
+      },
+      {
+        "name": "ws-rating-strong",
+        "value": "{color-stat-positive}",
+        "usage": "A 'strong' rating mark (D10): the teal. Its words: ws-word-positive."
+      },
+      {
+        "name": "ws-rating-middle",
+        "value": {
+          "light": "#495883",
+          "dark": "#93a6dc",
+          "navy": "#93a6dc"
+        },
+        "usage": "The middle 'getting there' rating mark (D10): mid blue, the kit's working/secondary meaning. Its words: color-text-interactive. (CSS: var(--color-brand-mid-blue))"
+      },
+      {
+        "name": "ws-mark-muted",
+        "value": {
+          "light": "#8a8a8a",
+          "dark": "#6c7b8b",
+          "navy": "#8a9aab"
+        },
+        "usage": "Seth's resting mark grey: a nav icon at rest, the not-checked dash, an axis. A mark (3:1), never words: words use color-text-muted. (CSS: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc))"
+      },
+      {
+        "name": "ws-control-off",
+        "value": {
+          "light": "#7f7f7f",
+          "navy": "#928a81",
+          "dark": "#7f7f7f"
+        },
+        "usage": "An off control's fill: a switch's track at rest. The muted words a step lighter, 3:1 as a control, never words. (CSS: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3))"
+      },
+      {
+        "name": "ws-rating-needs-work",
+        "value": "{ws-chart-needs-work}",
+        "usage": "A 'needs work' rating mark (D10): Seth's pink. Its words: ws-word-needs-work. Salmon stays 'needs you', for acts and alerts."
+      },
+      {
+        "name": "ws-hover-faint",
+        "value": {
+          "light": "rgba(9, 53, 85, 0.031)",
+          "dark": "rgba(232, 237, 243, 0.031)",
+          "navy": "rgba(255, 255, 255, 0.031)"
+        },
+        "usage": "Seth's lightest hover wash: a list or table row under the pointer. Navy at 3% (light at 3% in dark). (CSS: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent))"
+      },
+      {
+        "name": "ws-hover",
+        "value": {
+          "light": "rgba(9, 53, 85, 0.051)",
+          "dark": "rgba(232, 237, 243, 0.051)",
+          "navy": "rgba(255, 255, 255, 0.051)"
+        },
+        "usage": "Seth's hover wash for a nav row or a menu row. Navy at 5%. (CSS: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent))"
+      },
+      {
+        "name": "ws-hover-strong",
+        "value": {
+          "light": "rgba(9, 53, 85, 0.059)",
+          "dark": "rgba(232, 237, 243, 0.059)",
+          "navy": "rgba(255, 255, 255, 0.059)"
+        },
+        "usage": "Seth's hover wash for an icon button or an action. Navy at 6%. (CSS: color-mix(in srgb, var(--ws-ink) 5.8823529412%, transparent))"
+      },
+      {
+        "name": "ws-ink",
+        "value": "{color-text-heading}",
+        "usage": "The ink of Seth's alpha washes and lines: a hover, a scrollbar, a track, a rule. Mix it toward transparent (5% a hover); it is the heading, so it follows a palette."
+      },
+      {
+        "name": "ws-shade",
+        "value": {
+          "light": "#093555",
+          "dark": "#000",
+          "navy": "#000"
+        },
+        "usage": "The tint of a float's drop: the heading in light, black in dark. Mix it toward transparent for a shadow. (CSS: var(--color-text-heading))"
+      },
+      {
+        "name": "ws-focus-color",
+        "value": "{color-text-heading}",
+        "usage": "The focus colour (D8): the 2 px outline on :focus-visible everywhere, and the inset ring. Navy in light, the light heading colour in dark."
       }
     ]
   },
@@ -819,6 +1424,76 @@
         "name": "ws-leading-title",
         "value": "28px",
         "usage": "A title's line height. (CSS: calc(var(--space-lg) + var(--space-xxs)))"
+      },
+      {
+        "name": "ws-text-control",
+        "value": "13px",
+        "usage": "Seth's single size for control words: tabs, buttons, tags, links, status, labels; weight 500, on ws-leading-control (D6). (CSS: var(--font-size-xs))"
+      },
+      {
+        "name": "ws-leading-control",
+        "value": "18px",
+        "usage": "The line under control words: 13 / 18 (D6)."
+      },
+      {
+        "name": "ws-text-section",
+        "value": "15px",
+        "usage": "Section titles and row titles (600), row names (500): 15 px (D6). (CSS: var(--ws-text-chart))"
+      },
+      {
+        "name": "ws-leading-section",
+        "value": "22px",
+        "usage": "The line under a section or row title: 15 / 22 (D6)."
+      },
+      {
+        "name": "ws-leading-row",
+        "value": "20px",
+        "usage": "The line under a row's name: 15 / 20 (D6). (CSS: calc(var(--space-md) + var(--space-xxs)))"
+      },
+      {
+        "name": "ws-leading-micro",
+        "value": "13px",
+        "usage": "The line under the 11 px sub-line, only as a mark or meta that passes AA: 11 / 13 (D6)."
+      },
+      {
+        "name": "ws-text-figure-row",
+        "value": "28px",
+        "usage": "A list row's figure, right-aligned: 28 / 32, weight 400 (D6)."
+      },
+      {
+        "name": "ws-leading-figure-row",
+        "value": "32px",
+        "usage": "The line under a row's figure: 32. (CSS: var(--space-xl))"
+      },
+      {
+        "name": "ws-text-figure",
+        "value": "32px",
+        "usage": "A tile's figure: 32 / 38, weight 400 (D6). (CSS: var(--space-xl))"
+      },
+      {
+        "name": "ws-leading-figure",
+        "value": "38px",
+        "usage": "The line under a tile's figure: 38."
+      },
+      {
+        "name": "ws-text-figure-lg",
+        "value": "44px",
+        "usage": "A pane's figure ('1 of 6', a vendor's total): 44 / 48, weight 400 (D6)."
+      },
+      {
+        "name": "ws-leading-figure-lg",
+        "value": "48px",
+        "usage": "The line under a pane's figure: 48. (CSS: var(--space-3xl))"
+      },
+      {
+        "name": "ws-text-score",
+        "value": "96px",
+        "usage": "The report's hero figure: 96 / 96, weight 400, tracking ws-tracking-display (D6). Above the old 72 ceiling, by Seth's frames. (CSS: var(--space-6xl))"
+      },
+      {
+        "name": "ws-leading-score",
+        "value": "96px",
+        "usage": "The line under the hero figure: 96. (CSS: var(--space-6xl))"
       }
     ]
   },
@@ -830,16 +1505,36 @@
         "value": "4px",
         "usage": "Inside a row, between a bar's segments, an icon and its word in a chip, a face's room on touch."
       },
+      {
+        "name": "space-3xs",
+        "value": "2px",
+        "usage": "The 2 px half step: a segmented track's padding, the gap between a label and its hint, Seth's 2 px tick gaps (D4)."
+      },
+      {
+        "name": "space-xxs-plus",
+        "value": "6px",
+        "usage": "6 px, a step and the half step: Seth's icon gap inside a button, a hover pill's corner inset (D4)."
+      },
       {
         "name": "space-xs",
         "value": "8px",
         "usage": "Between related controls, rows in a list, an icon and its word in a button; a ghost button's sides."
       },
+      {
+        "name": "space-xs-plus",
+        "value": "10px",
+        "usage": "10 px: Seth's chip and bubble padding, a compact field's inside (D4)."
+      },
       {
         "name": "space-sm",
         "value": "12px",
         "usage": "A button's and a field's sides, a plate's inside, a 12 px icon."
       },
+      {
+        "name": "space-sm-plus",
+        "value": "14px",
+        "usage": "14 px: Seth's bubble sides, the figure edge inside a tile (D4)."
+      },
       {
         "name": "space-md",
         "value": "16px",
@@ -920,15 +1615,25 @@
         "value": "24px",
         "usage": "Between groups of components; between a card's sections. (CSS: var(--space-lg))"
       },
+      {
+        "name": "ws-gap-block",
+        "value": "32px",
+        "usage": "Between a report's blocks (Seth's Grow, 32); .ws-stack--block. A 28 in Seth's Fixes frame snaps to it (D4). (CSS: var(--space-xl))"
+      },
+      {
+        "name": "ws-gap-section",
+        "value": "56px",
+        "usage": "Between page sections: a hero, a chart row, a board (North, Tally; 56); .ws-stack--section. (CSS: calc(var(--space-3xl) + var(--space-xs)))"
+      },
       {
         "name": "ws-gap-turn",
-        "value": "22px",
-        "usage": "Between a chat's turns. (CSS: calc(var(--space-lg) - var(--space-xxs) / 2))"
+        "value": "28px",
+        "usage": "Between a chat's turns. (CSS: calc(var(--space-lg) + var(--space-xxs)))"
       },
       {
         "name": "ws-gutter",
-        "value": "24px",
-        "usage": "A page's or a header's side padding from the large screen; 16 px on a phone. (CSS: var(--space-lg))"
+        "value": "32px",
+        "usage": "A page's or a header's side padding from the large screen; 16 px on a phone. (CSS: var(--space-xl))"
       },
       {
         "name": "ws-card-padding",
@@ -960,6 +1665,26 @@
         "value": "6.5px",
         "usage": "The pitch of the dotted field a drawing sits on. (CSS: calc(var(--space-xs) * 0.8125))"
       },
+      {
+        "name": "ws-stage-inset-top",
+        "value": "13px",
+        "usage": "The stage's top inset in the window: 13 px (North, D3)."
+      },
+      {
+        "name": "ws-stage-inset",
+        "value": "12px",
+        "usage": "The stage's right and bottom inset in the window: 12 px (North, D3). (CSS: var(--space-sm))"
+      },
+      {
+        "name": "ws-nudge",
+        "value": "4px",
+        "usage": "A small offset: a tooltip or menu from its anchor, an arrow stepping forward (North). (CSS: var(--space-xxs))"
+      },
+      {
+        "name": "ws-drop",
+        "value": "12px",
+        "usage": "How far a greeting or a placeholder rolls in from (North). (CSS: var(--space-sm))"
+      },
       {
         "name": "layout-margin",
         "value": "48px",
@@ -998,7 +1723,7 @@
       {
         "name": "radius-xl",
         "value": "16px",
-        "usage": "A dialog, a docked pane, the stage."
+        "usage": "The website's 16 px corner. In a Tailwind host this name is Tailwind's (12 px there), so product parts use ws-radius-panel."
       },
       {
         "name": "radius-2xl",
@@ -1013,37 +1738,57 @@
       {
         "name": "ws-radius-bar",
         "value": "1px",
-        "usage": "A thin bar in a strip. (CSS: calc(var(--radius-xs) / 2))"
+        "usage": "A thin bar in a strip."
       },
       {
         "name": "ws-radius-chip",
         "value": "2px",
-        "usage": "A chip, a change chip. (CSS: var(--radius-xs))"
+        "usage": "A chip, a change chip."
       },
       {
         "name": "ws-radius-control",
         "value": "4px",
-        "usage": "Buttons, inputs, Search, the composer, End call. (CSS: var(--radius-sm))"
+        "usage": "Buttons, inputs, Search, the composer, End call."
       },
       {
         "name": "ws-radius-row",
         "value": "6px",
-        "usage": "A list row, a suggestion, a tab track. (CSS: var(--radius-md))"
+        "usage": "A list row, a suggestion, a tab track."
       },
       {
         "name": "ws-radius-card",
         "value": "8px",
-        "usage": "A card, a plate, a well, a tile. (CSS: var(--radius-lg))"
+        "usage": "A card, a plate, a well, a tile."
+      },
+      {
+        "name": "ws-radius-menu",
+        "value": "10px",
+        "usage": "North's menus, flyouts, panels and brief rows, 10."
+      },
+      {
+        "name": "ws-radius-card-inner",
+        "value": "7px",
+        "usage": "The cream surface inside a card's 1 px rim: 7, so the corners stay concentric (D5). (CSS: calc(var(--ws-radius-card) - var(--ws-rim)))"
       },
       {
         "name": "ws-radius-bubble",
         "value": "12px",
-        "usage": "The person's chat bubble. (CSS: calc(var(--radius-lg) + var(--radius-sm)))"
+        "usage": "The person's chat bubble."
+      },
+      {
+        "name": "ws-radius-drawer",
+        "value": "12px",
+        "usage": "A drawer's rimmed tray: 12 outside (D5). (CSS: var(--ws-radius-bubble))"
+      },
+      {
+        "name": "ws-radius-drawer-inner",
+        "value": "11px",
+        "usage": "The cream inside a drawer's rim: 11 (D5). (CSS: calc(var(--ws-radius-drawer) - var(--ws-rim)))"
       },
       {
         "name": "ws-radius-panel",
         "value": "16px",
-        "usage": "A dialog, a docked pane, the stage. (CSS: var(--radius-xl))"
+        "usage": "A dialog, a docked pane, the stage."
       }
     ]
   },
@@ -1055,6 +1800,11 @@
         "value": "0 0 0 0.5px #d3d3d3",
         "usage": "The 0.5 px card edge as a ring: a secondary button, a field, a chip-sized surface. A card itself draws it as an inside outline (ws-card). (CSS: 0 0 0 var(--ws-hairline) var(--ws-edge-card))"
       },
+      {
+        "name": "ws-shadow-hairline-in",
+        "value": "inset 0 0 0 0.5px #d3d3d3",
+        "usage": "The card edge drawn inside (inset), so a scroller never clips it: every outlined control (a secondary button, an outline icon button, a field, a key). (CSS: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card))"
+      },
       {
         "name": "ws-shadow-band",
         "value": "inset 0 0.5px 0 #d9d3cb, inset 0 28px 8px 0 rgba(0, 0, 0, 0), inset 0 18px 7px 0 rgba(0, 0, 0, 0.01), inset 0 10px 6px 0 rgba(0, 0, 0, 0.03), inset 0 4px 4px 0 rgba(0, 0, 0, 0.05), inset 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
@@ -1065,40 +1815,70 @@
         "value": "0 4px 8px rgba(9, 53, 85, 0.06), 0 8px 24px rgba(9, 53, 85, 0.08)",
         "usage": "A menu or a lifted card off the page (the kit's card hover). (CSS: var(--shadow-card-hover))"
       },
+      {
+        "name": "ws-float-rim",
+        "value": "0 0 0 0 transparent",
+        "usage": "The light rim a floating thing needs in dark, where a shadow does not show; nothing in light. Every ws-shadow-pop/menu/tip/float starts with it."
+      },
+      {
+        "name": "ws-shadow-pop",
+        "value": "0 0 0 0 transparent, 0 12px 32px -16px rgba(9, 53, 85, 0.35)",
+        "usage": "A popover's drop: North's one family for floating things, a single negative-spread shadow tinted navy (black in dark). (CSS: var(--ws-float-rim), 0 12px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent))"
+      },
+      {
+        "name": "ws-shadow-menu",
+        "value": "0 0 0 0 transparent, 0 16px 32px -16px rgba(9, 53, 85, 0.35)",
+        "usage": "A menu's or flyout's drop (North). (CSS: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent))"
+      },
+      {
+        "name": "ws-shadow-tip",
+        "value": "0 0 0 0 transparent, 0 16px 32px -20px rgba(9, 53, 85, 0.45)",
+        "usage": "A tooltip's or hover card's drop (North). (CSS: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent))"
+      },
+      {
+        "name": "ws-shadow-float",
+        "value": "0 0 0 0 transparent, 0 40px 80px -30px rgba(9, 53, 85, 0.3), 0 10px 24px -12px rgba(9, 53, 85, 0.14)",
+        "usage": "A floating chat shell's drop (North): the largest in the family. (CSS: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent))"
+      },
+      {
+        "name": "ws-shadow-bar",
+        "value": "0 0 0 0 transparent, 0 24px 60px -24px rgba(9, 53, 85, 0.32), 0 2px 10px rgba(9, 53, 85, 0.06)",
+        "usage": "The centred chat bar's drop (North): the float family's rim, a long soft drop and a close one, tinted by --ws-shade-rgb. (CSS: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent))"
+      },
       {
         "name": "ws-ring-selected",
         "value": "0 0 0 2px rgba(9, 53, 85, 0.55)",
-        "usage": "A chosen card or tile: a 2 px navy ring. (CSS: 0 0 0 2px color-mix(in srgb, var(--color-brand-navy) 55%, transparent))"
+        "usage": "A chosen card or tile: a 2 px navy ring. (CSS: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 55%, transparent))"
       },
       {
         "name": "ws-card-ring-lit",
         "value": "0 0 0 2px rgba(9, 53, 85, 0.3)",
-        "usage": "A chat card lit for a moment when the chat scrolls to it. (CSS: 0 0 0 2px color-mix(in srgb, var(--color-brand-navy) 30%, transparent))"
+        "usage": "A chat card lit for a moment when the chat scrolls to it. (CSS: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 30%, transparent))"
       },
       {
         "name": "ws-card-ring-person",
         "value": "inset 0 0 0 1px rgba(9, 53, 85, 0.12)",
-        "usage": "The person's chat bubble's faint inner edge. (CSS: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-navy) 12%, transparent))"
+        "usage": "The person's chat bubble's faint inner edge. (CSS: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 12%, transparent))"
       },
       {
         "name": "ws-focus-inset",
-        "value": "inset 0 0 0 2px #495883",
-        "usage": "A focus ring drawn inside (a row that cannot grow an outer ring). (CSS: inset 0 0 0 2px var(--color-text-interactive))"
+        "value": "inset 0 0 0 2px #093555",
+        "usage": "A focus ring drawn inside (a row that cannot grow an outer ring). (CSS: inset 0 0 0 var(--ws-focus-width) var(--ws-focus-color))"
       },
       {
         "name": "shadow-focus-ring",
-        "value": "0 0 0 3px rgba(255, 114, 92, 0.2)",
-        "usage": "The kit's focus halo on every control: 3 px of salmon at 20%. Paired with a mid-blue border on a field so focus never reads as an error (a kit gap, reported)."
+        "value": "0 0 0 2px #fefbf9, 0 0 0 4px #093555",
+        "usage": "The focus ring as a box-shadow, for a part that cannot take the outline: a 2 px navy ring 2 px out, the gap in the page colour (0.5.0, D8; it was a salmon halo at 1.2:1, not visible). Prefer the outline (ws-focus-*). (CSS: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-text-heading))"
       },
       {
         "name": "shadow-card-default",
         "value": "0 1px 2px rgba(9, 53, 85, 0.04), 0 4px 8px rgba(9, 53, 85, 0.06)",
-        "usage": "Kit marketing card. Not used in the product: cards are flat."
+        "usage": "Kit marketing card. Not used in the product: cards are flat. (CSS: 0 1px 2px color-mix(in srgb, var(--color-text-heading) 4%, transparent), 0 4px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent))"
       },
       {
         "name": "shadow-card-hover",
         "value": "0 4px 8px rgba(9, 53, 85, 0.06), 0 8px 24px rgba(9, 53, 85, 0.08)",
-        "usage": "Kit interactive card hover; the product's ws-shadow-lift."
+        "usage": "Kit interactive card hover; the product's ws-shadow-lift. (CSS: 0 4px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--color-text-heading) 8%, transparent))"
       },
       {
         "name": "shadow-pill",
@@ -1140,6 +1920,21 @@
         "value": "1px",
         "usage": "A hairline between rows and surfaces (ws-edge), a day cell's edge, a thin bar."
       },
+      {
+        "name": "ws-rim",
+        "value": "1px",
+        "usage": "The rim: the tray shows as 1 px of padding around a card's cream surface (D5). Not a border. (CSS: var(--ws-line))"
+      },
+      {
+        "name": "ws-divider",
+        "value": "0.5px solid #e8e8e8",
+        "usage": "The 0.5 px full-width rule between rows inside a tray card (D5): border-top: var(--ws-divider). (CSS: var(--ws-hairline) solid var(--ws-edge))"
+      },
+      {
+        "name": "ws-divider-inset",
+        "value": "inset 0 0.5px 0 #e8e8e8",
+        "usage": "The same row rule drawn as a shadow on the row's top, so it takes no room and a selected row's fill meets it: box-shadow: var(--ws-divider-inset) (CheckRow, Matrix, ListDetail). (CSS: inset 0 var(--ws-hairline) 0 var(--ws-edge))"
+      },
       {
         "name": "ws-chart-line",
         "value": "1.5px",
@@ -1154,6 +1949,16 @@
         "name": "ws-halo",
         "value": "3px",
         "usage": "The focus halo's spread."
+      },
+      {
+        "name": "ws-focus-width",
+        "value": "2px",
+        "usage": "The focus outline's width: 2 px (D8). (CSS: var(--ws-ring))"
+      },
+      {
+        "name": "ws-focus-offset",
+        "value": "2px",
+        "usage": "The focus outline's offset: 2 px out, on the ground around a control, never on it (D8). (CSS: var(--ws-ring))"
       }
     ]
   },
@@ -1180,6 +1985,31 @@
         "value": "40px",
         "usage": "The floor for a boxed control on a touch screen; words that act stand at least 24."
       },
+      {
+        "name": "ws-touch-public",
+        "value": "44px",
+        "usage": "Every act on a public (marketing) page on touch: 44 px (14-accessibility.md)."
+      },
+      {
+        "name": "ws-glass-blur",
+        "value": "4px",
+        "usage": "The blur behind the stage glass: 4 px (North)."
+      },
+      {
+        "name": "ws-glass-blur-chat",
+        "value": "28px",
+        "usage": "The blur behind the chat shell's glass: 28 px, with saturate(1.4) (North)."
+      },
+      {
+        "name": "ws-blur-arrive",
+        "value": "3px",
+        "usage": "Details and chat parts arrive blurred this much, then sharpen (North). Never under reduced motion."
+      },
+      {
+        "name": "ws-blur-panel",
+        "value": "8px",
+        "usage": "A panel or the greeting arrives blurred this much (North)."
+      },
       {
         "name": "ws-row-h",
         "value": "48px",
@@ -1212,8 +2042,8 @@
       },
       {
         "name": "ws-rail-width",
-        "value": "72px",
-        "usage": "The sidebar folded to a rail of marks. (CSS: calc(var(--space-2xl) + var(--space-xl)))"
+        "value": "64px",
+        "usage": "The sidebar folded to a rail of marks. (CSS: var(--space-4xl))"
       },
       {
         "name": "ws-sidebar-width",
@@ -1240,6 +2070,11 @@
         "value": "656px",
         "usage": "The one centred column of the home screen and the chat. (CSS: calc(var(--space-9xl) * 3 + var(--space-3xl) + var(--space-xs)))"
       },
+      {
+        "name": "ws-float-width",
+        "value": "300px",
+        "usage": "A popover's width and a note's wrap (North's pop, Seth's notes), 300. (CSS: calc(var(--space-9xl) * 1.5))"
+      },
       {
         "name": "ws-icon-sm",
         "value": "12px",
@@ -1297,18 +2132,43 @@
       {
         "name": "ws-duration-instant",
         "value": "120ms",
-        "usage": "Hover, press, focus, a chip or tab flipping; anything leaving (opacity); a dialog's exit."
+        "usage": "Press feedback: a button or chip giving under the pointer. Hover is ws-duration-hover, an exit ws-duration-exit."
+      },
+      {
+        "name": "ws-duration-exit",
+        "value": "120ms",
+        "usage": "Every exit: a menu, a tooltip, details leaving. Always shorter than the entrance (North .1 to .16 s)."
       },
       {
         "name": "ws-duration-gentle",
         "value": "200ms",
         "usage": "The default: a row or card arriving, a menu opening, a drawer leaving, a plain transition."
       },
+      {
+        "name": "ws-duration-hover",
+        "value": "200ms",
+        "usage": "Hover: a colour, tint, edge or opacity change. No lift (North .2 s)."
+      },
+      {
+        "name": "ws-duration-text",
+        "value": "250ms",
+        "usage": "Text colour and small fades: a segment's words, a nav label, a card's ground (North .25 s)."
+      },
       {
         "name": "ws-duration-settle",
         "value": "320ms",
         "usage": "A pane, dialog or drawer coming in, a screen changing, a pop, a tile rising."
       },
+      {
+        "name": "ws-duration-reveal",
+        "value": "350ms",
+        "usage": "A reveal: a link's underline growing, a top bar's ground, a chevron (North .35 s)."
+      },
+      {
+        "name": "ws-duration-shrink",
+        "value": "400ms",
+        "usage": "A tile closing back into its slot (North open.collapse)."
+      },
       {
         "name": "ws-duration-calm",
         "value": "420ms",
@@ -1319,11 +2179,96 @@
         "value": "400ms",
         "usage": "A side panel sliding open or shut."
       },
+      {
+        "name": "ws-duration-morph",
+        "value": "450ms",
+        "usage": "A shared element in flight, a band folding (North chat.morph)."
+      },
+      {
+        "name": "ws-duration-grow",
+        "value": "550ms",
+        "usage": "A tile growing open from its slot (North open.expand)."
+      },
+      {
+        "name": "ws-duration-shift",
+        "value": "550ms",
+        "usage": "A panel docking, columns trading width (North chat.shift)."
+      },
+      {
+        "name": "ws-duration-fill",
+        "value": "700ms",
+        "usage": "A bar filling (North health.barFill)."
+      },
+      {
+        "name": "ws-duration-draw",
+        "value": "900ms",
+        "usage": "A chart drawing inside an opened card, a gauge filling (North)."
+      },
+      {
+        "name": "ws-duration-draw-chat",
+        "value": "1500ms",
+        "usage": "A chart sweeping in inside chat (North chat.draw)."
+      },
+      {
+        "name": "ws-duration-fill-page",
+        "value": "1700ms",
+        "usage": "A dashboard building in (.ws-build): its tiles' charts and its goal bars filling, each card taking 0.79 of it (North \"Metric + goal bars fill\")."
+      },
+      {
+        "name": "ws-duration-build",
+        "value": "2400ms",
+        "usage": "A page's whole first-paint build-in, at most; only on first paint (North health.intro)."
+      },
       {
         "name": "ws-stagger",
         "value": "30ms",
         "usage": "Between items rising in a list, at most 6 items, first paint only (40 ms slow)."
       },
+      {
+        "name": "ws-stagger-detail",
+        "value": "22ms",
+        "usage": "Between details inside an opening tile (North open.stagger)."
+      },
+      {
+        "name": "ws-stagger-row",
+        "value": "45ms",
+        "usage": "Between rows in a tooltip or an opened card (North)."
+      },
+      {
+        "name": "ws-stagger-part",
+        "value": "70ms",
+        "usage": "Between blocks arriving under a chart (North)."
+      },
+      {
+        "name": "ws-ripple",
+        "value": "4ms",
+        "usage": "Per tick, a hover grow spreading along a run of ticks (North chat.ripple)."
+      },
+      {
+        "name": "ws-hover-intent",
+        "value": "40ms",
+        "usage": "The wait before a hover opens a tile (North health.hoverIntent)."
+      },
+      {
+        "name": "ws-hover-leave",
+        "value": "60ms",
+        "usage": "A hover-opened tile closes this long after the pointer leaves (North heatmap, js@710784)."
+      },
+      {
+        "name": "ws-stagger-square",
+        "value": "35ms",
+        "usage": "Between details inside an opening heatmap square (North health.tileStagger)."
+      },
+      {
+        "name": "ws-hover-grace",
+        "value": "180ms",
+        "usage": "How long a tooltip stays after the pointer leaves its mark (North hover.grace)."
+      },
+      {
+        "name": "ws-close-delay",
+        "value": "160ms",
+        "usage": "How long a flyout waits to close after the pointer leaves (North 140 to 180 ms)."
+      },
       {
         "name": "ws-sweep",
         "value": "220ms",
@@ -1331,14 +2276,29 @@
       },
       {
         "name": "ws-loop",
-        "value": "1.2s",
-        "usage": "The one working beat: a pressed button's dot, a live edge, typing dots."
+        "value": "1s",
+        "usage": "The working beat: a pressed button's dot, a live edge, typing dots. 1 s (North; it was 1.2 s)."
+      },
+      {
+        "name": "ws-loop-status",
+        "value": "1.6s",
+        "usage": "One lap of a status line's shimmering words (North)."
+      },
+      {
+        "name": "ws-loop-shimmer",
+        "value": "1.8s",
+        "usage": "One lap of a loading shimmer over ghost shapes (North)."
       },
       {
         "name": "ws-loop-slow",
         "value": "2.4s",
         "usage": "A big quiet area that waits: a placeholder bar, a ring's backdrop."
       },
+      {
+        "name": "ws-loop-ambient",
+        "value": "6s",
+        "usage": "One lap of the brand sheen on a selected glass edge (North). Ambient, never data."
+      },
       {
         "name": "transition-fast",
         "value": "150ms ease-out",
@@ -1381,12 +2341,107 @@
       {
         "name": "ws-ease-spring",
         "value": "cubic-bezier(0.22, 1, 0.36, 1)",
-        "usage": "Anything that pops into place (a chosen thumb, an unread count, a tick). No overshoot since 22 Oct 2026, so it is the soft curve itself. (CSS: var(--ws-ease-soft))"
+        "usage": "Kept as the CSS stand-in for a spring: the soft curve. Real springs are the spring-* presets, in JS (tokens.ts springs). (CSS: var(--ws-ease-soft))"
+      },
+      {
+        "name": "ws-ease-settle",
+        "value": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "usage": "Things that land and rest: a chart mark, a bar fill, a note (North)."
+      },
+      {
+        "name": "ws-ease-grow",
+        "value": "cubic-bezier(0.32, 0.72, 0, 1)",
+        "usage": "A shape changing size: a tile opening and closing, a switch thumb, a label pushing out of an icon (North)."
+      },
+      {
+        "name": "ws-ease-shift",
+        "value": "cubic-bezier(0.25, 1, 0.5, 1)",
+        "usage": "Layout moving: the chat docking, columns trading width (North)."
+      },
+      {
+        "name": "ws-ease-morph",
+        "value": "cubic-bezier(0.5, 0, 0.15, 1)",
+        "usage": "A shared element in flight: a card flying to full screen and back (North)."
+      },
+      {
+        "name": "ws-ease-sweep",
+        "value": "cubic-bezier(0.45, 0, 0.55, 1)",
+        "usage": "A chart drawing left to right inside chat (North)."
+      },
+      {
+        "name": "ws-ease-commit",
+        "value": "cubic-bezier(0.65, 0, 0.35, 1)",
+        "usage": "A decisive one-shot progress: sending, a check mark drawing (North)."
+      },
+      {
+        "name": "ws-ease-shimmer",
+        "value": "cubic-bezier(0.4, 0, 0.2, 1)",
+        "usage": "A loading sweep (North)."
+      },
+      {
+        "name": "ws-ease-ambient",
+        "value": "cubic-bezier(0.45, 0, 0.3, 1)",
+        "usage": "The slow brand sheen passing then resting (North)."
+      },
+      {
+        "name": "ws-ease-loop",
+        "value": "cubic-bezier(0.42, 0, 0.58, 1)",
+        "usage": "A symmetric loop (ease-in-out): working dots, a pulse (North runs loops on ease-in-out)."
+      },
+      {
+        "name": "ws-ease-pop",
+        "value": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+        "usage": "Overshoot for small marks lifting (a logo spoke, a chevron, a badge). Never a card, panel, field or words."
+      },
+      {
+        "name": "ws-ease-lift",
+        "value": "cubic-bezier(0.22, 1.25, 0.36, 1)",
+        "usage": "Overshoot for ticks and ring wedges growing on hover (North)."
       },
       {
         "name": "ws-press-scale",
         "value": "0.97",
         "usage": "How far a control gives under a press (1 with reduced motion). Rows never scale: they tint."
+      },
+      {
+        "name": "ws-press-scale-round",
+        "value": "0.94",
+        "usage": "A round icon button under a press (North voice button)."
+      },
+      {
+        "name": "ws-press-scale-send",
+        "value": "0.92",
+        "usage": "The send act under a press (North send button)."
+      },
+      {
+        "name": "ws-open-scale",
+        "value": "0.97",
+        "usage": "A menu, a popover or the docked panel opens from this scale (North .97); 1 with reduced motion."
+      },
+      {
+        "name": "ws-open-scale-pane",
+        "value": "0.98",
+        "usage": "A dialog window opens from this scale (North .98)."
+      },
+      {
+        "name": "ws-open-scale-toast",
+        "value": "0.96",
+        "usage": "A toast arrives from this scale (North .96)."
+      },
+      {
+        "name": "ws-pop-scale",
+        "value": "0.94",
+        "usage": "Tooltips start and leave at this scale (North)."
+      },
+      {
+        "name": "ws-grow-scale",
+        "value": "1.16",
+        "usage": "A hovered tick or ring wedge grows to this scale from its base (North)."
+      },
+      {
+        "name": "ws-dim",
+        "value": "0.3",
+        "usage": "The opacity the rest of a chart drops to while one part is hovered (North)."
       }
     ]
   },
@@ -1423,5 +2478,140 @@
         "usage": "A toast."
       }
     ]
+  },
+  "spring": {
+    "note": "Seth's spring presets for the motion library ({type: 'spring', visualDuration, bounce}), from Seth's motion config. Value: visualDuration in seconds, then bounce. In tokens.ts as springs; in CSS as --ws-spring-<name> (a linear() curve of the same spring) over --ws-spring-<name>-duration.",
+    "tokens": [
+      {
+        "name": "spring-press",
+        "value": "0.2s 0.3",
+        "usage": "A button or chip under a press (scale --ws-press-scale). CSS: var(--ws-spring-press-duration) var(--ws-spring-press), 450ms."
+      },
+      {
+        "name": "spring-follow",
+        "value": "0.22s 0",
+        "usage": "A tooltip following the pointer; never bounces. CSS: var(--ws-spring-follow-duration) var(--ws-spring-follow), 450ms."
+      },
+      {
+        "name": "spring-pop",
+        "value": "0.35s 0.1",
+        "usage": "A chart tooltip or tip popping in from --ws-pop-scale. CSS: var(--ws-spring-pop-duration) var(--ws-spring-pop), 500ms."
+      },
+      {
+        "name": "spring-settle",
+        "value": "0.32s 0.1",
+        "usage": "Menus, pickers and messages settling. CSS: var(--ws-spring-settle-duration) var(--ws-spring-settle), 450ms."
+      },
+      {
+        "name": "spring-fold",
+        "value": "0.32s 0",
+        "usage": "A section opening or closing (height and the chevron). CSS: var(--ws-spring-fold-duration) var(--ws-spring-fold), 600ms."
+      },
+      {
+        "name": "spring-indicator",
+        "value": "0.38s 0.16",
+        "usage": "The Segmented and tab thumb sliding to the chosen item. CSS: var(--ws-spring-indicator-duration) var(--ws-spring-indicator), 700ms."
+      },
+      {
+        "name": "spring-highlight",
+        "value": "0.45s 0.14",
+        "usage": "A list's selected fill sliding between rows. CSS: var(--ws-spring-highlight-duration) var(--ws-spring-highlight), 800ms."
+      },
+      {
+        "name": "spring-nav",
+        "value": "0.4s 0.1",
+        "usage": "The sidebar's current-row pill sliding. CSS: var(--ws-spring-nav-duration) var(--ws-spring-nav), 550ms."
+      },
+      {
+        "name": "spring-reorder",
+        "value": "0.4s 0",
+        "usage": "List rows moving to new places. CSS: var(--ws-spring-reorder-duration) var(--ws-spring-reorder), 750ms."
+      },
+      {
+        "name": "spring-tile",
+        "value": "0.26s 0.06",
+        "usage": "A heatmap square opening to two cells. CSS: var(--ws-spring-tile-duration) var(--ws-spring-tile), 450ms."
+      },
+      {
+        "name": "spring-lane",
+        "value": "0.46s 0.04",
+        "usage": "A lane's detail opening. CSS: var(--ws-spring-lane-duration) var(--ws-spring-lane), 750ms."
+      },
+      {
+        "name": "spring-lens",
+        "value": "0.45s 0.04",
+        "usage": "One chart swapping for another inside an open tile. CSS: var(--ws-spring-lens-duration) var(--ws-spring-lens), 750ms."
+      },
+      {
+        "name": "spring-swap",
+        "value": "0.6s 0.06",
+        "usage": "A board chart going out and the new one coming in. CSS: var(--ws-spring-swap-duration) var(--ws-spring-swap), 900ms."
+      },
+      {
+        "name": "spring-panel",
+        "value": "0.42s 0.12",
+        "usage": "The chat panel opening, moving or docking. CSS: var(--ws-spring-panel-duration) var(--ws-spring-panel), 550ms."
+      },
+      {
+        "name": "spring-card",
+        "value": "0.5s 0.08",
+        "usage": "A chart card arriving in the thread. CSS: var(--ws-spring-card-duration) var(--ws-spring-card), 700ms."
+      },
+      {
+        "name": "spring-text",
+        "value": "0.7s 0.2",
+        "usage": "A metric card's words swapping. CSS: var(--ws-spring-text-duration) var(--ws-spring-text), 1200ms."
+      },
+      {
+        "name": "spring-badge",
+        "value": "0.3s 0.4",
+        "usage": "A count badge popping when it changes. CSS: var(--ws-spring-badge-duration) var(--ws-spring-badge), 650ms."
+      },
+      {
+        "name": "spring-tab",
+        "value": "0.4s 0.12",
+        "usage": "A tab's underline sliding to the chosen tab (North dc-tab). CSS: var(--ws-spring-tab-duration) var(--ws-spring-tab), 500ms."
+      },
+      {
+        "name": "spring-chip",
+        "value": "0.25s 0.1",
+        "usage": "An attention chip opening into its card. CSS: var(--ws-spring-chip-duration) var(--ws-spring-chip), 350ms."
+      },
+      {
+        "name": "spring-glow",
+        "value": "0.3s 0",
+        "usage": "The composer's focus glow arriving. CSS: var(--ws-spring-glow-duration) var(--ws-spring-glow), 600ms."
+      },
+      {
+        "name": "spring-roll",
+        "value": "0.45s 0.05",
+        "usage": "The composer's placeholder rolling to the next line. CSS: var(--ws-spring-roll-duration) var(--ws-spring-roll), 700ms."
+      },
+      {
+        "name": "spring-flag",
+        "value": "0.26s 0.06",
+        "usage": "A trend read-out following the pointer along a chart. CSS: var(--ws-spring-flag-duration) var(--ws-spring-flag), 450ms."
+      },
+      {
+        "name": "spring-mark",
+        "value": "0.35s 0.35",
+        "usage": "A small mark popping in: the pace dot on an opened square. CSS: var(--ws-spring-mark-duration) var(--ws-spring-mark), 550ms."
+      },
+      {
+        "name": "spring-morphChart",
+        "value": "0.85s 0.06",
+        "usage": "A chart morphing between forms (bars to a line). CSS: var(--ws-spring-morph-chart-duration) var(--ws-spring-morph-chart), 1250ms."
+      },
+      {
+        "name": "spring-orb",
+        "value": "0.55s 0.35",
+        "usage": "An agent's orb arriving, from scale .3 out of a 4 px blur (North js@532276; a stack of them staggers on .5 / .35, js@531354). CSS: var(--ws-spring-orb-duration) var(--ws-spring-orb), 850ms."
+      },
+      {
+        "name": "spring-default",
+        "value": "0.4s 0.15",
+        "usage": "Anything the person drives that has no tuned spring (North's fallback). CSS: var(--ws-spring-default-duration) var(--ws-spring-default), 750ms."
+      }
+    ]
   }
 }