@felloinnovations/brand-kit 0.4.0 → 0.5.1

package/tokens/tokens.md

@@ -1,10 +1,14 @@
 # Fello brand tokens
 
-Generated from Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11, and tokens/_product.css. 225 tokens: 106 kit, 119 product layer (`--ws-*`).
+Generated from Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11, tokens/_product.css and tokens/_dark.css. 422 tokens: 111 kit, 311 product layer (`--ws-*`); the dark theme re-points 98 (night) and 42 more on the navy ground.
 
 Use these through `var(--token)` or the Tailwind utility of the same name.
 Never write a raw hex, px font-size, or one-off shadow in a Fello project.
 
+Tailwind v4 owns `--radius-xs` to `--radius-2xl`: tokens.css leaves them out of `@theme` so a host keeps its own,
+and fello.css declares every token in the `theme.fello` layer, under the host's. The kit's own corners are the
+`--ws-radius-*` lengths, which never ride on them.
+
 ## Colour
 
 | Token | Value |
@@ -18,8 +22,9 @@ Never write a raw hex, px font-size, or one-off shadow in a Fello project.
 | `--color-tertiary-dark-blue` | `var(--color-brand-navy)` |
 | `--color-background` | `#FEFBF9` |
 | `--color-white` | `#FFFFFF` |
+| `--color-surface` | `var(--color-white)` |
 | `--color-gray-1` | `#F9F9F9` |
-| `--color-surface-stripe` | `#F7F4F4` |
+| `--color-surface-stripe` | `var(--ws-tint-accent)` |
 | `--color-gray-2` | `#EDEDED` |
 | `--color-gray-stroke` | `#E8E8E8` |
 | `--color-gray-3` | `#D3D3D3` |
@@ -27,32 +32,32 @@ Never write a raw hex, px font-size, or one-off shadow in a Fello project.
 | `--color-gray-6` | `#7F7F7F` |
 | `--color-gray-7` | `#545454` |
 | `--color-gray-8` | `#292929` |
-| `--color-text-primary` | `#353E5A` |
+| `--color-text-primary` | `color-mix(in srgb, var(--color-text-heading) 50%, #61475f)` |
 | `--color-ai-cyan` | `#14BACB` |
 | `--color-ai-blue` | `#3898F0` |
 | `--color-ai-violet` | `#8D6AE6` |
 | `--color-ai-pink` | `#EC67A0` |
 | `--color-ai-rose` | `#F59593` |
 | `--color-dropdown-bg` | `#fcfaf9` |
-| `--color-feedback-error` | `#ef6b51` |
+| `--color-feedback-error` | `color-mix(in srgb, var(--ws-chart-under-half) 87.5%, #7f3a04)` |
 | `--color-feedback-success-text` | `#4f7d24` |
-| `--color-feedback-success-bg` | `#cde3cc` |
+| `--color-feedback-success-bg` | `color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(254 250.75 221.5))` |
 | `--color-alert` | `#e90f0f` |
-| `--color-stat-positive` | `#098486` |
-| `--color-bg-page` | `var(--color-background)` |
+| `--color-stat-positive` | `var(--ws-chart-finished)` |
+| `--color-bg-page` | `#FEFBF9` |
 | `--color-text-heading` | `var(--color-brand-navy)` |
 | `--color-text-body` | `var(--color-gray-7)` |
-| `--color-text-muted` | `#6E6E6E` |
-| `--color-text-brand-strong` | `#B35040` |
-| `--color-text-error-strong` | `#AE4E3B` |
-| `--color-text-success-strong` | `#3C601B` |
-| `--color-text-placeholder` | `#6E6E6E` |
+| `--color-text-muted` | `#666666` |
+| `--color-text-brand-strong` | `var(--ws-word-needs)` |
+| `--color-text-error-strong` | `color-mix(in srgb, var(--ws-word-needs) 95%, #944b00)` |
+| `--color-text-success-strong` | `color-mix(in srgb, var(--ws-word-positive) 20%, rgb(72.75 91.74 3.19))` |
+| `--color-text-placeholder` | `color-mix(in srgb, var(--color-text-muted) 93.75%, #e6e6e6)` |
 | `--color-text-interactive` | `var(--color-brand-mid-blue)` |
-| `--color-border-default` | `var(--color-gray-stroke)` |
-| `--color-border-hairline` | `var(--color-gray-3)` |
+| `--color-border-default` | `var(--ws-edge)` |
+| `--color-border-hairline` | `var(--ws-edge-card)` |
 | `--color-border-btn` | `var(--color-button-border)` |
 | `--color-bg-dark` | `var(--color-brand-navy)` |
-| `--color-nav-hover-bg` | `color-mix(in srgb, var(--color-brand-mid-blue) 5%, transparent)` |
+| `--color-nav-hover-bg` | `color-mix(in srgb, var(--color-text-interactive) 5%, transparent)` |
 
 
 ## Gradient
@@ -95,11 +100,17 @@ Never write a raw hex, px font-size, or one-off shadow in a Fello project.
 
 ## Spacing
 
+The 4 px scale, plus the 2 px half step (`--space-3xs`) and the three half steps Seth reuses (`-plus`: a step and 2 px). A one-off value snaps to the nearest step (D4).
+
 | Token | Value |
 | --- | --- |
+| `--space-3xs` | `2px` |
 | `--space-xxs` | `4px` |
+| `--space-xxs-plus` | `6px` |
 | `--space-xs` | `8px` |
+| `--space-xs-plus` | `10px` |
 | `--space-sm` | `12px` |
+| `--space-sm-plus` | `14px` |
 | `--space-md` | `16px` |
 | `--space-lg` | `24px` |
 | `--space-xl` | `32px` |
@@ -131,13 +142,13 @@ Never write a raw hex, px font-size, or one-off shadow in a Fello project.
 | Token | Value |
 | --- | --- |
 | `--shadow-label-pill` | `2px 22px 6px 0 rgba(0, 0, 0, 0), 1px 14px 6px 0 rgba(0, 0, 0, 0.01), 1px 8px 5px 0 rgba(0, 0, 0, 0.04), 0 3px 4px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.08)` |
-| `--shadow-card-default` | `0 1px 2px rgba(9, 53, 85, 0.04), 0 4px 8px rgba(9, 53, 85, 0.06)` |
-| `--shadow-card-hover` | `0 4px 8px rgba(9, 53, 85, 0.06), 0 8px 24px rgba(9, 53, 85, 0.08)` |
+| `--shadow-card-default` | `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)` |
+| `--shadow-card-hover` | `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)` |
 | `--shadow-pill` | `0 8px 17px rgba(0, 0, 0, 0.07), 0 30px 30px rgba(0, 0, 0, 0.06), 0 68px 41px rgba(0, 0, 0, 0.04), 0 121px 48px rgba(0, 0, 0, 0.01)` |
 | `--shadow-dropdown` | `var(--shadow-pill)` |
 | `--shadow-btn` | `0 21px 6px rgba(0, 0, 0, 0), 0 13px 5px rgba(0, 0, 0, 0.02), 0 7px 4px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.09), 0 1px 2px rgba(0, 0, 0, 0.11)` |
 | `--shadow-btn-hover` | `0 32px 9px rgba(0, 0, 0, 0), 0 20px 8px rgba(0, 0, 0, 0.02), 0 11px 7px rgba(0, 0, 0, 0.06), 0 5px 5px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.11)` |
-| `--shadow-focus-ring` | `0 0 0 3px rgba(255, 114, 92, 0.2)` |
+| `--shadow-focus-ring` | `0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-text-heading)` |
 
 
 ## Z-index
@@ -177,45 +188,102 @@ The names every product screen is built from (design-system/ says when to use ea
 
 | Token | Value |
 | --- | --- |
-| `--ws-page` | `var(--color-gray-stroke)` |
+| `--ws-page` | `color-mix(in srgb, var(--ws-tray) 97.5%, #252525)` |
 | `--ws-surface-sunk` | `color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8))` |
 | `--ws-surface-press` | `color-mix(in srgb, var(--color-bg-page) 90%, var(--color-gray-8))` |
-| `--ws-sidebar-hover` | `color-mix(in srgb, var(--color-gray-2) 85%, var(--color-white))` |
-| `--ws-sidebar-press` | `var(--color-gray-2)` |
+| `--ws-sidebar-hover` | `color-mix(in srgb, var(--ws-tray) 85%, var(--color-surface))` |
+| `--ws-sidebar-press` | `var(--ws-tray)` |
 | `--ws-menu-line` | `color-mix(in srgb, var(--color-bg-page) 87%, var(--color-gray-8))` |
 | `--ws-menu-hover` | `color-mix(in srgb, var(--color-bg-page) 96%, var(--color-gray-8))` |
-| `--ws-well` | `var(--color-gray-2)` |
-| `--ws-field` | `var(--color-white)` |
-| `--ws-tint-accent` | `var(--color-surface-stripe)` |
-| `--ws-tint-needs` | `color-mix(in srgb, var(--color-brand-salmon) 10%, var(--color-white))` |
-| `--ws-tint-live` | `color-mix(in srgb, var(--color-stat-positive) 12%, var(--color-white))` |
-| `--ws-edge` | `var(--color-border-default)` |
+| `--ws-well` | `var(--ws-tray)` |
+| `--ws-field` | `var(--color-surface)` |
+| `--ws-tint-accent` | `color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c)` |
+| `--ws-tint-needs` | `color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface))` |
+| `--ws-tint-live` | `color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface))` |
+| `--ws-edge` | `var(--color-gray-stroke)` |
 | `--ws-edge-card` | `var(--color-gray-3)` |
-| `--ws-edge-chip` | `#d9d5d0` |
-| `--ws-edge-slot` | `#e2e2e2` |
-| `--ws-edge-tray` | `#d9d3cb` |
+| `--ws-edge-card-1x` | `color-mix(in srgb, var(--ws-edge-card) 50%, transparent)` |
+| `--ws-edge-chip` | `color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7)` |
+| `--ws-edge-slot` | `color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb)` |
+| `--ws-edge-tray` | `color-mix(in srgb, var(--ws-tray) 84%, rgb(112 74.5 24.5))` |
 | `--ws-chart-foot` | `color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8))` |
-| `--ws-word-needs` | `var(--color-text-brand-strong)` |
-| `--ws-word-positive` | `color-mix(in srgb, var(--color-stat-positive) 85%, var(--color-brand-navy))` |
-| `--ws-chart-finished` | `var(--color-stat-positive)` |
+| `--ws-raised` | `var(--color-bg-page)` |
+| `--ws-track` | `var(--ws-tray)` |
+| `--ws-field-ink` | `color-mix(in srgb, var(--color-text-body) 46.25%, #040404)` |
+| `--ws-field-mark` | `var(--color-text-heading)` |
+| `--ws-on-act` | `var(--color-white)` |
+| `--ws-ink` | `var(--color-text-heading)` |
+| `--ws-shade` | `var(--color-text-heading)` |
+| `--ws-ink-rgb` | `9, 53, 85` |
+| `--ws-shade-rgb` | `9, 53, 85` |
+| `--ws-inverse` | `var(--color-text-heading)` |
+| `--ws-on-inverse` | `var(--ws-on-act)` |
+| `--ws-control-off` | `color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3)` |
+| `--ws-raised-sunk` | `var(--ws-surface-sunk)` |
+| `--ws-edge-hover` | `#aaa49d` |
+| `--ws-act-hover` | `#0f4a73` |
+| `--ws-act-light` | `color-mix(in srgb, var(--ws-on-act) 24%, transparent)` |
+| `--ws-agent-tally` | `#2c4870` |
+| `--ws-agent-coach` | `var(--color-stat-positive)` |
+| `--ws-agent-growth` | `var(--ws-chart-past-half)` |
+| `--ws-agent-recruit` | `var(--ws-chart-under-half)` |
+| `--ws-mask` | `#000` |
+| `--ws-mark-muted` | `color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc)` |
+| `--ws-chart-rest` | `color-mix(in srgb, var(--ws-tray) 90%, #252525)` |
+| `--ws-ghost` | `color-mix(in srgb, var(--ws-well-hover) 98%, #b24c17)` |
+| `--ws-veil` | `color-mix(in srgb, var(--ws-page) 30%, transparent)` |
+| `--ws-word-answer` | `color-mix(in srgb, var(--color-text-body) 71.25%, #040404)` |
+| `--ws-tray` | `var(--color-gray-2)` |
+| `--ws-rim` | `var(--ws-line)` |
+| `--ws-divider` | `var(--ws-hairline) solid var(--ws-edge)` |
+| `--ws-divider-inset` | `inset 0 var(--ws-hairline) 0 var(--ws-edge)` |
+| `--ws-well-hover` | `#e4e2df` |
+| `--ws-frame-top` | `#ebf0f5` |
+| `--ws-stage-foot` | `#fef9f6` |
+| `--ws-frame` | `linear-gradient(180deg, var(--ws-frame-top) 0, var(--color-bg-page) 640px) var(--color-bg-page)` |
+| `--ws-stage-wash` | `linear-gradient(180deg, var(--color-bg-page), var(--ws-stage-foot))` |
+| `--ws-glass` | `color-mix(in srgb, var(--color-surface) 59%, transparent)` |
+| `--ws-glass-blur` | `4px` |
+| `--ws-glass-blur-chat` | `28px` |
+| `--ws-edge-stage` | `var(--ws-page)` |
+| `--ws-stage-inset-top` | `13px` |
+| `--ws-stage-inset` | `var(--space-sm)` |
+| `--ws-word-needs` | `#A84B3C` |
+| `--ws-word-positive` | `color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading))` |
+| `--ws-word-needs-work` | `color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68))` |
+| `--ws-word-alert` | `var(--ws-chart-alert)` |
+| `--ws-word-past-half` | `var(--ws-chart-past-half)` |
+| `--ws-tint-needs-work` | `color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page))` |
+| `--ws-chart-finished` | `#098486` |
 | `--ws-chart-past-half` | `#6d4fc2` |
 | `--ws-chart-under-half` | `var(--color-brand-salmon)` |
-| `--ws-chart-empty` | `var(--color-gray-1)` |
+| `--ws-chart-empty` | `color-mix(in srgb, var(--color-surface) 97.6%, #050505)` |
 | `--ws-chart-dot` | `color-mix(in srgb, var(--color-bg-page) 91%, var(--color-gray-8))` |
 | `--ws-chart-navy-light` | `#2e6088` |
-| `--ws-chart-navy-fade` | `#a8c0d3` |
-| `--ws-chart-salmon-fade` | `#ffd2c8` |
-| `--ws-chart-purple-fade` | `#d8ccf6` |
-| `--ws-chart-teal-fade` | `#b0e2dd` |
-| `--ws-chart-finished-tint` | `#9fddd6` |
-| `--ws-chart-past-half-tint` | `#cbbdf3` |
-| `--ws-chart-under-half-tint` | `#f9dfc6` |
+| `--ws-chart-navy-fade` | `color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(198.5 216 229.75))` |
+| `--ws-chart-salmon-fade` | `color-mix(in srgb, var(--ws-chart-under-half) 25%, #fff2ec)` |
+| `--ws-chart-purple-fade` | `color-mix(in srgb, var(--ws-chart-past-half) 10%, rgb(227.8888888889 217.8888888889 251.7777777778))` |
+| `--ws-chart-teal-fade` | `color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(217.75 249.5 242.75))` |
+| `--ws-chart-finished-tint` | `color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(196.5 243.25 234))` |
+| `--ws-chart-past-half-tint` | `color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235))` |
+| `--ws-chart-under-half-tint` | `color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5))` |
 | `--ws-chart-cell-edge` | `var(--ws-edge-slot)` |
-| `--ws-card-tint-blue` | `color-mix(in srgb, var(--color-brand-mid-blue) 10%, var(--color-white))` |
-| `--ws-card-tint-done` | `color-mix(in srgb, var(--color-stat-positive) 10%, var(--color-white))` |
-| `--ws-scrim` | `color-mix(in srgb, var(--color-brand-navy) 35%, transparent)` |
-| `--ws-team-glow` | `radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-brand-mid-blue) 14%, transparent), transparent), radial-gradient(70% 75% at 95% 100%, color-mix(in srgb, var(--color-ai-rose) 22%, transparent), transparent), radial-gradient(55% 60% at 70% 45%, color-mix(in srgb, var(--color-ai-pink) 8%, transparent), transparent)` |
-| `--ws-cool-glow` | `radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-brand-mid-blue) 16%, transparent), transparent), radial-gradient(60% 70% at 92% 30%, color-mix(in srgb, var(--color-ai-blue) 10%, transparent), transparent), radial-gradient(70% 60% at 60% 100%, color-mix(in srgb, var(--color-brand-navy) 6%, transparent), transparent)` |
+| `--ws-chart-needs-work` | `#f370a4` |
+| `--ws-chart-alert` | `#b1042f` |
+| `--ws-rating-strong` | `var(--color-stat-positive)` |
+| `--ws-rating-middle` | `var(--color-brand-mid-blue)` |
+| `--ws-rating-needs-work` | `var(--ws-chart-needs-work)` |
+| `--ws-shimmer-ground` | `var(--ws-ghost)` |
+| `--ws-shimmer` | `linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%)` |
+| `--ws-card-tint-blue` | `color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface))` |
+| `--ws-card-tint-done` | `color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface))` |
+| `--ws-scrim` | `color-mix(in srgb, var(--color-text-heading) 35%, transparent)` |
+| `--ws-glow-rose` | `color-mix(in srgb, var(--ws-chart-under-half) 50%, #ebb8ca)` |
+| `--ws-glow-pink` | `color-mix(in srgb, var(--ws-chart-needs-work) 90%, #ad167c)` |
+| `--ws-glow-blue` | `color-mix(in srgb, var(--ws-chart-navy-light) 10%, rgb(57.1111111111 158.2222222222 251.5555555556))` |
+| `--ws-team-glow` | `radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-text-interactive) 14%, transparent), transparent), radial-gradient(70% 75% at 95% 100%, color-mix(in srgb, var(--ws-glow-rose) 22%, transparent), transparent), radial-gradient(55% 60% at 70% 45%, color-mix(in srgb, var(--ws-glow-pink) 8%, transparent), transparent)` |
+| `--ws-cool-glow` | `radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-text-interactive) 16%, transparent), transparent), radial-gradient(60% 70% at 92% 30%, color-mix(in srgb, var(--ws-glow-blue) 10%, transparent), transparent), radial-gradient(70% 60% at 60% 100%, color-mix(in srgb, var(--color-text-heading) 6%, transparent), transparent)` |
+| `--ws-orb` | `radial-gradient(circle at 30% 30% in srgb, color-mix(in srgb, var(--ws-chart-finished) 37.5%, rgb(26.6 218.4 244.4)), var(--ws-glow-blue) 45%, color-mix(in srgb, var(--ws-chart-past-half) 37.5%, rgb(160.2 122.2 251.6)) 80%)` |
 | `--ws-text-micro` | `11px` |
 | `--ws-text-dense` | `var(--font-size-2xs)` |
 | `--ws-text-meta` | `var(--font-size-xs)` |
@@ -227,33 +295,66 @@ The names every product screen is built from (design-system/ says when to use ea
 | `--ws-text-display` | `var(--font-size-7xl)` |
 | `--ws-leading-message` | `var(--space-lg)` |
 | `--ws-leading-title` | `calc(var(--space-lg) + var(--space-xxs))` |
+| `--ws-text-control` | `var(--font-size-xs)` |
+| `--ws-leading-control` | `18px` |
+| `--ws-text-section` | `var(--ws-text-chart)` |
+| `--ws-leading-section` | `22px` |
+| `--ws-leading-row` | `calc(var(--space-md) + var(--space-xxs))` |
+| `--ws-leading-micro` | `13px` |
+| `--ws-text-figure-row` | `28px` |
+| `--ws-leading-figure-row` | `var(--space-xl)` |
+| `--ws-text-figure` | `var(--space-xl)` |
+| `--ws-leading-figure` | `38px` |
+| `--ws-text-figure-lg` | `44px` |
+| `--ws-leading-figure-lg` | `var(--space-3xl)` |
+| `--ws-text-score` | `var(--space-6xl)` |
+| `--ws-leading-score` | `var(--space-6xl)` |
 | `--ws-gap-tight` | `var(--space-xxs)` |
 | `--ws-gap` | `var(--space-xs)` |
 | `--ws-gap-loose` | `var(--space-sm)` |
 | `--ws-gap-component` | `var(--space-md)` |
 | `--ws-gap-group` | `var(--space-lg)` |
-| `--ws-gap-turn` | `calc(var(--space-lg) - var(--space-xxs) / 2)` |
-| `--ws-gutter` | `var(--space-lg)` |
+| `--ws-gap-turn` | `calc(var(--space-lg) + var(--space-xxs))` |
+| `--ws-gap-block` | `var(--space-xl)` |
+| `--ws-gap-section` | `calc(var(--space-3xl) + var(--space-xs))` |
+| `--ws-gutter` | `var(--space-xl)` |
 | `--ws-card-padding` | `var(--space-sm)` |
 | `--ws-card-padding-lg` | `var(--space-md)` |
 | `--ws-card-inset` | `calc(var(--space-md) + var(--space-xxs))` |
 | `--ws-band-inset` | `calc(var(--space-lg) + var(--space-xxs))` |
 | `--ws-rise` | `calc(var(--space-xxs) * 1.5)` |
 | `--ws-chart-dot-gap` | `calc(var(--space-xs) * 0.8125)` |
-| `--ws-radius-bar` | `calc(var(--radius-xs) / 2)` |
-| `--ws-radius-chip` | `var(--radius-xs)` |
-| `--ws-radius-control` | `var(--radius-sm)` |
-| `--ws-radius-row` | `var(--radius-md)` |
-| `--ws-radius-card` | `var(--radius-lg)` |
-| `--ws-radius-bubble` | `calc(var(--radius-lg) + var(--radius-sm))` |
-| `--ws-radius-panel` | `var(--radius-xl)` |
+| `--ws-radius-bar` | `1px` |
+| `--ws-radius-chip` | `2px` |
+| `--ws-radius-control` | `4px` |
+| `--ws-radius-row` | `6px` |
+| `--ws-radius-card` | `8px` |
+| `--ws-radius-menu` | `10px` |
+| `--ws-radius-card-inner` | `calc(var(--ws-radius-card) - var(--ws-rim))` |
+| `--ws-radius-bubble` | `12px` |
+| `--ws-radius-drawer` | `var(--ws-radius-bubble)` |
+| `--ws-radius-drawer-inner` | `calc(var(--ws-radius-drawer) - var(--ws-rim))` |
+| `--ws-radius-panel` | `16px` |
 | `--ws-shadow-hairline` | `0 0 0 var(--ws-hairline) var(--ws-edge-card)` |
+| `--ws-shadow-hairline-in` | `inset 0 0 0 var(--ws-hairline) var(--ws-edge-card)` |
 | `--ws-shadow-band` | `inset 0 var(--ws-hairline) 0 var(--ws-edge-tray), 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)` |
 | `--ws-shadow-lift` | `var(--shadow-card-hover)` |
-| `--ws-ring-selected` | `0 0 0 2px color-mix(in srgb, var(--color-brand-navy) 55%, transparent)` |
-| `--ws-card-ring-lit` | `0 0 0 2px color-mix(in srgb, var(--color-brand-navy) 30%, transparent)` |
-| `--ws-card-ring-person` | `inset 0 0 0 1px color-mix(in srgb, var(--color-brand-navy) 12%, transparent)` |
-| `--ws-focus-inset` | `inset 0 0 0 2px var(--color-text-interactive)` |
+| `--ws-ring-selected` | `0 0 0 2px color-mix(in srgb, var(--ws-ink) 55%, transparent)` |
+| `--ws-card-ring-lit` | `0 0 0 2px color-mix(in srgb, var(--ws-ink) 30%, transparent)` |
+| `--ws-card-ring-person` | `inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 12%, transparent)` |
+| `--ws-float-rim` | `0 0 0 0 transparent` |
+| `--ws-shadow-pop` | `var(--ws-float-rim), 0 12px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)` |
+| `--ws-shadow-menu` | `var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)` |
+| `--ws-shadow-tip` | `var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent)` |
+| `--ws-shadow-float` | `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)` |
+| `--ws-shadow-bar` | `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)` |
+| `--ws-hover-faint` | `color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent)` |
+| `--ws-hover` | `color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent)` |
+| `--ws-hover-strong` | `color-mix(in srgb, var(--ws-ink) 5.8823529412%, transparent)` |
+| `--ws-focus-color` | `var(--color-text-heading)` |
+| `--ws-focus-width` | `var(--ws-ring)` |
+| `--ws-focus-offset` | `var(--ws-ring)` |
+| `--ws-focus-inset` | `inset 0 0 0 var(--ws-focus-width) var(--ws-focus-color)` |
 | `--ws-hairline` | `0.5px` |
 | `--ws-line` | `1px` |
 | `--ws-chart-line` | `1.5px` |
@@ -263,18 +364,20 @@ The names every product screen is built from (design-system/ says when to use ea
 | `--ws-control-h` | `var(--space-xl)` |
 | `--ws-control-h-md` | `calc(var(--space-xl) + var(--space-xxs))` |
 | `--ws-touch` | `40px` |
+| `--ws-touch-public` | `44px` |
 | `--ws-row-h` | `var(--space-3xl)` |
 | `--ws-row-h-dense` | `var(--space-2xl)` |
 | `--ws-composer-h` | `52px` |
 | `--ws-header-h` | `calc(var(--space-3xl) + var(--space-xs))` |
 | `--ws-topbar-h` | `var(--space-3xl)` |
 | `--ws-band-h` | `80px` |
-| `--ws-rail-width` | `calc(var(--space-2xl) + var(--space-xl))` |
+| `--ws-rail-width` | `var(--space-4xl)` |
 | `--ws-sidebar-width` | `calc(var(--space-9xl) + var(--space-xl))` |
 | `--ws-thing-width` | `calc(var(--space-9xl) * 2 + var(--space-2xl))` |
 | `--ws-chart-card-w` | `calc(var(--space-9xl) * 2 + var(--space-8xl) - var(--space-xxs))` |
 | `--ws-chart-card-min` | `480px` |
 | `--ws-column-width` | `calc(var(--space-9xl) * 3 + var(--space-3xl) + var(--space-xs))` |
+| `--ws-float-width` | `calc(var(--space-9xl) * 1.5)` |
 | `--ws-icon-sm` | `12px` |
 | `--ws-icon` | `16px` |
 | `--ws-icon-lg` | `20px` |
@@ -282,17 +385,440 @@ The names every product screen is built from (design-system/ says when to use ea
 | `--ws-tracking-title` | `-0.005em` |
 | `--ws-tracking-display` | `-0.03em` |
 | `--ws-duration-instant` | `120ms` |
+| `--ws-duration-exit` | `120ms` |
 | `--ws-duration-gentle` | `200ms` |
+| `--ws-duration-hover` | `200ms` |
+| `--ws-duration-text` | `250ms` |
 | `--ws-duration-settle` | `320ms` |
+| `--ws-duration-reveal` | `350ms` |
+| `--ws-duration-shrink` | `400ms` |
 | `--ws-duration-calm` | `420ms` |
 | `--ws-duration-glide` | `400ms` |
+| `--ws-duration-morph` | `450ms` |
+| `--ws-duration-grow` | `550ms` |
+| `--ws-duration-shift` | `550ms` |
+| `--ws-duration-fill` | `700ms` |
+| `--ws-duration-draw` | `900ms` |
+| `--ws-duration-draw-chat` | `1500ms` |
+| `--ws-duration-fill-page` | `1700ms` |
+| `--ws-duration-build` | `2400ms` |
 | `--ws-stagger` | `30ms` |
+| `--ws-stagger-detail` | `22ms` |
+| `--ws-stagger-row` | `45ms` |
+| `--ws-stagger-part` | `70ms` |
+| `--ws-ripple` | `4ms` |
+| `--ws-stagger-square` | `35ms` |
+| `--ws-hover-intent` | `40ms` |
+| `--ws-hover-leave` | `60ms` |
+| `--ws-hover-grace` | `180ms` |
+| `--ws-close-delay` | `160ms` |
 | `--ws-sweep` | `calc(var(--ws-duration-calm) - var(--ws-duration-gentle))` |
-| `--ws-loop` | `1.2s` |
+| `--ws-loop` | `1s` |
+| `--ws-loop-status` | `1.6s` |
+| `--ws-loop-shimmer` | `1.8s` |
 | `--ws-loop-slow` | `2.4s` |
+| `--ws-loop-ambient` | `6s` |
 | `--ws-ease-soft` | `cubic-bezier(0.22, 1, 0.36, 1)` |
 | `--ws-ease-exit` | `cubic-bezier(0.4, 0, 1, 1)` |
 | `--ws-ease-glide` | `cubic-bezier(0.75, 0, 0.25, 1)` |
 | `--ws-ease-steady` | `linear` |
 | `--ws-ease-spring` | `var(--ws-ease-soft)` |
+| `--ws-ease-settle` | `cubic-bezier(0.16, 1, 0.3, 1)` |
+| `--ws-ease-grow` | `cubic-bezier(0.32, 0.72, 0, 1)` |
+| `--ws-ease-shift` | `cubic-bezier(0.25, 1, 0.5, 1)` |
+| `--ws-ease-morph` | `cubic-bezier(0.5, 0, 0.15, 1)` |
+| `--ws-ease-sweep` | `cubic-bezier(0.45, 0, 0.55, 1)` |
+| `--ws-ease-commit` | `cubic-bezier(0.65, 0, 0.35, 1)` |
+| `--ws-ease-shimmer` | `cubic-bezier(0.4, 0, 0.2, 1)` |
+| `--ws-ease-ambient` | `cubic-bezier(0.45, 0, 0.3, 1)` |
+| `--ws-ease-loop` | `cubic-bezier(0.42, 0, 0.58, 1)` |
+| `--ws-ease-pop` | `cubic-bezier(0.34, 1.4, 0.64, 1)` |
+| `--ws-ease-lift` | `cubic-bezier(0.22, 1.25, 0.36, 1)` |
 | `--ws-press-scale` | `0.97` |
+| `--ws-press-scale-round` | `0.94` |
+| `--ws-press-scale-send` | `0.92` |
+| `--ws-open-scale` | `0.97` |
+| `--ws-open-scale-pane` | `0.98` |
+| `--ws-open-scale-toast` | `0.96` |
+| `--ws-pop-scale` | `0.94` |
+| `--ws-grow-scale` | `1.16` |
+| `--ws-dim` | `0.3` |
+| `--ws-nudge` | `var(--space-xxs)` |
+| `--ws-drop` | `var(--space-sm)` |
+| `--ws-blur-arrive` | `3px` |
+| `--ws-blur-panel` | `8px` |
+
+
+## Palettes
+
+A palette is a set of values for the contract below, named for how it looks: `<html data-palette="cool">`, or on any
+container (`<div class="fello" data-palette="warm" data-theme="dark">`), nested either way. A palette sets only
+these tokens; everything else derives from them and recomputes inside the element that sets the palette. An app
+writes its own the same way, `[data-palette="name"] { ... }` and `[data-palette="name"][data-theme="dark"] { ... }`,
+checks it with `node node_modules/@felloinnovations/brand-kit/scripts/check-palette.mjs its-palette.css`, and ships what
+`check-palette.mjs --emit its-palette.css` writes: the built-ins' own form, so it works on `<html>` or any container,
+nested either way, in light and dark, in either build, loaded before or after the kit, and a dark value it leaves out
+is the kit's, derived from the dark inputs. Every other colour derives from these, in light and dark.
+
+The built-ins: `default`, `cool`, `warm` (`default` is no attribute). In JS: `palettes.cool.light` from
+`@felloinnovations/brand-kit/palettes`. Each cell is light / dark; `=` is the default's value.
+
+### The contract
+
+| Token | Group | Meaning | default | cool | warm |
+| --- | --- | --- | --- | --- | --- |
+| `--color-bg-page` | ground | The page and every card's surface: the cream most words sit on. | `#fefbf9` / `#0f1922` | = | = |
+| `--ws-frame-top` | ground | The top of the page wash behind a glass stage, fading into the page by 640 px; in dark the frame is flat and paints it (the shell, unless a palette says). | `#ebf0f5` / `#0a1118` | = | `#fefbf9` / `#0a1118` |
+| `--ws-stage-foot` | ground | The foot of a washed stage, whose gradient starts at the page (light only). | `#fef9f6` / `#0f1922` | `#fefbf9` / `#0f1922` | = |
+| `--color-surface` | ground | What is white: a marketing card, a well row under the pointer, a chat bubble, the glass of the stage. | `#ffffff` / `#131e28` | = | = |
+| `--ws-raised` | ground | What floats off the page: a menu, a popover, a tooltip, a dialog, a panel, a toast. | `#fefbf9` / `#16222d` | = | = |
+| `--ws-tray` | ground | The rim and foot of a rimmed card, and the well behind rows. | `#ededed` / `#1e2b38` | = | = |
+| `--ws-edge-card` | edge | A card's and an outlined control's 0.5 px edge. | `#d3d3d3` / `#273544` | = | = |
+| `--ws-edge` | edge | A divider between rows; a quiet line. | `#e8e8e8` / `#1e2a36` | `#e2e2e2` / `#1e2a36` | = |
+| `--ws-edge-hover` | edge | An outlined control's edge under the pointer. | `#aaa49d` / `#8494a5` | = | = |
+| `--ws-well-hover` | edge | A rimmed card's rim under the pointer. | `#e4e2df` / `#273544` | = | = |
+| `--color-text-heading` | word | Titles, names, figures, navy marks, and the act fill (the primary button, a thumb, a checked box). | `#093555` / `#e8edf3` | = | = |
+| `--color-text-body` | word | Body words: a card's line, a row. | `#545454` / `#b0bbc7` | = | = |
+| `--color-text-muted` | word | Meta, labels, captions. | `#666666` / `#8494a5` | = | = |
+| `--color-text-interactive` | word | Links and words that go somewhere, a falling number, "working". | `#495883` / `#93a6dc` | `#093555` / `#e8edf3` | = |
+| `--ws-on-act` | act | Words and marks on the act fill. | `#ffffff` / `#0f1922` | = | = |
+| `--ws-act-hover` | act | The act fill under the pointer. | `#0f4a73` / `#d7dce2` | = | = |
+| `--ws-word-needs` | accent | Needs you, in words: the current page, something to fix (the accent's AA step). | `#a84b3c` / `#ff8b78` | = | = |
+| `--ws-focus-color` | focus | The 2 px focus ring, outside or inset. | `#093555` / `#e8edf3` | = | = |
+| `--ws-word-positive` | status | Good news in words. | `#09717a` / `#4fc7be` | = | = |
+| `--ws-word-alert` | status | Something wrong now, in words. | `#b1042f` / `#ff5470` | = | = |
+| `--ws-chart-finished` | chart | Tone 1: done, passed, positive marks. | `#098486` / `#23a8a3` | = | = |
+| `--ws-chart-past-half` | chart | Tone 2: past halfway marks. | `#6d4fc2` / `#9a84ee` | = | = |
+| `--ws-chart-under-half` | chart | Tone 3: under halfway marks and needs-you dots. Drawn with its word: its 3:1 is reported. | `#ff725c` / `#ff725c` | = | = |
+| `--ws-chart-navy-light` | chart | Tone 4: a second navy, for a series beside the heading navy. | `#2e6088` / `#6e9cc4` | = | = |
+| `--ws-chart-needs-work` | chart | Tone 5: needs work marks. Drawn with its word: its 3:1 is reported. | `#f370a4` / `#f370a4` | = | = |
+| `--ws-chart-alert` | chart | Tone 6: alert marks. | `#b1042f` / `#ff5470` | = | = |
+| `--ws-rating-strong` | rating | Strong: its marks. | `#098486` / `#3bb8b2` | = | = |
+| `--ws-rating-middle` | rating | Getting there (the middle band): its marks. | `#495883` / `#93a6dc` | `#495883` / `#e8edf3` | = |
+| `--ws-rating-needs-work` | rating | Needs work: its marks. | `#f370a4` / `#f370a4` | = | = |
+| `--ws-agent-coach` | agent | The coaching assistant's mark. | `#098486` / `#3bb8b2` | = | = |
+| `--ws-agent-growth` | agent | The growth assistant's mark. | `#6d4fc2` / `#9a84ee` | = | = |
+| `--ws-agent-recruit` | agent | The recruiting assistant's mark. | `#ff725c` / `#ff725c` | = | = |
+| `--ws-agent-tally` | agent | The money assistant's mark, and a softer act (a figure tab's current cell, a seat meter, a hatch). | `#2c4870` / `#e8edf3` | = | = |
+
+### Groups
+
+- **ground**: What everything sits on. Every word is checked AA on each.
+- **edge**: Hairlines, and the edges under the pointer.
+- **word**: Words, each AA on every ground it can sit on.
+- **act**: The one primary act. Its fill is the heading colour.
+- **accent**: Needs you: the current page, something to fix.
+- **focus**: The keyboard ring, 3:1 on every ground.
+- **status**: Good and bad news, in words.
+- **chart**: The six data tones charts draw with: told apart from each other (CIEDE2000 10 or more) and 3:1 on the chart ground. A tone marked withWords (salmon, pink) is always drawn beside its word, so its ratio is reported, not required: Seth draws them at 2.6:1 and marks keep his exact tone (D2).
+- **rating**: One rating scale on every screen (D10): its marks. Their words are the status and word tokens.
+- **agent**: Each assistant keeps one tone and nothing else names it (03-colour).
+
+
+### The built-ins, checked
+
+scripts/check-palette.mjs on tokens/_palettes.css (generate-tokens stops on an error):
+
+```
+default: passes (sets 0: nothing)
+cool: passes (sets 3: --ws-stage-foot, --ws-edge, --color-text-interactive)
+  report: dark: no --ws-stage-foot, so it takes the kit's dark --ws-stage-foot (#0f1922), derived from the dark inputs
+  report: dark: no --ws-edge, so it takes the kit's dark --ws-edge (#1e2a36), derived from the dark inputs
+warm: passes (sets 1: --ws-frame-top)
+  report: dark: no --ws-frame-top, so it takes the kit's dark --ws-frame-top (#0a1118), derived from the dark inputs
+3 palettes: 0 errors, 3 reports. Checked in light, night and navy: every word AA on every ground, the focus ring and the act fill 3:1, the chart tones CIEDE2000 10 apart and 3:1 on the chart ground (the kit's --ws-chart-under-half 2.61:1 and --ws-chart-needs-work 2.66:1 are drawn beside their words, so their ratio is reported, not required).
+```
+
+
+## Dark theme
+
+Opt-in, on any element: `data-theme="dark"` (night), `data-theme="system"` (night on a dark OS, light otherwise),
+`data-theme="light"` (light again inside a dark element), and `data-ground="navy"` beside dark or system for the navy
+ground. The nearest one wins, so light inside dark and dark inside light both work. An app that sets nothing stays
+light. Brand colours stay literal; these semantic names carry the swap. `tokens.ts` exports every theme resolved
+(`themes.dark`, `themes.navy`).
+
+### Night (`[data-theme="dark"]`)
+
+| Token | Value |
+| --- | --- |
+| `--ws-page` | `color-mix(in srgb, var(--color-bg-page) 50%, #05090e)` |
+| `--color-bg-page` | `#0F1922` |
+| `--color-surface` | `#131E28` |
+| `--ws-raised` | `#16222D` |
+| `--ws-surface-sunk` | `color-mix(in srgb, var(--color-bg-page) 93.75%, #8fb9e2)` |
+| `--ws-surface-press` | `color-mix(in srgb, var(--color-bg-page) 90%, #a5cdfe)` |
+| `--ws-well` | `color-mix(in srgb, var(--ws-tray) 20%, rgb(6.25 14.25 21))` |
+| `--ws-field` | `color-mix(in srgb, var(--color-bg-page) 50%, #070f16)` |
+| `--ws-chart-foot` | `color-mix(in srgb, var(--color-bg-page) 80%, #000509)` |
+| `--ws-sidebar-hover` | `color-mix(in srgb, var(--color-bg-page) 98.5%, #d7e1ea)` |
+| `--ws-sidebar-press` | `color-mix(in srgb, var(--color-bg-page) 95%, #afcdfe)` |
+| `--ws-menu-hover` | `var(--ws-surface-press)` |
+| `--ws-menu-line` | `color-mix(in srgb, var(--color-bg-page) 80%, #6e8cb8)` |
+| `--ws-tint-accent` | `var(--color-surface)` |
+| `--ws-tint-needs` | `color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page))` |
+| `--ws-tint-live` | `color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page))` |
+| `--ws-card-tint-blue` | `color-mix(in srgb, var(--color-bg-page) 90%, #879bf4)` |
+| `--ws-card-tint-done` | `color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page))` |
+| `--ws-track` | `color-mix(in srgb, var(--ws-tray) 80%, #0a1215)` |
+| `--color-dropdown-bg` | `var(--ws-raised)` |
+| `--color-feedback-success-bg` | `color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(25 16.75 1.75))` |
+| `--ws-scrim` | `color-mix(in srgb, color-mix(in srgb, var(--ws-page) 20%, rgb(0 3.25 6.5)) 62%, transparent)` |
+| `--ws-edge` | `#1E2A36` |
+| `--ws-edge-card` | `#273544` |
+| `--ws-edge-chip` | `color-mix(in srgb, var(--ws-edge-card) 96%, #a4cbf3)` |
+| `--ws-edge-slot` | `color-mix(in srgb, var(--ws-edge-card) 75%, #071118)` |
+| `--ws-edge-tray` | `color-mix(in srgb, var(--ws-tray) 90%, #aacbf6)` |
+| `--color-text-heading` | `#E8EDF3` |
+| `--color-text-body` | `#B0BBC7` |
+| `--color-text-muted` | `#8494A5` |
+| `--color-text-placeholder` | `var(--color-text-muted)` |
+| `--color-text-interactive` | `#93A6DC` |
+| `--color-text-primary` | `color-mix(in srgb, var(--color-text-heading) 53.5%, var(--color-text-body))` |
+| `--ws-word-needs` | `#FF8B78` |
+| `--color-text-error-strong` | `var(--ws-word-needs)` |
+| `--ws-word-positive` | `#4FC7BE` |
+| `--color-text-success-strong` | `color-mix(in srgb, var(--ws-word-positive) 20%, #aed15f)` |
+| `--color-feedback-success-text` | `var(--color-text-success-strong)` |
+| `--ws-field-ink` | `color-mix(in srgb, var(--color-text-heading) 88%, var(--color-text-body))` |
+| `--ws-on-act` | `var(--color-bg-page)` |
+| `--color-stat-positive` | `color-mix(in srgb, var(--ws-chart-finished) 80%, #9bf8ee)` |
+| `--ws-chart-finished` | `#23A8A3` |
+| `--ws-chart-past-half` | `#9A84EE` |
+| `--ws-chart-navy-light` | `#6E9CC4` |
+| `--ws-chart-empty` | `var(--ws-track)` |
+| `--ws-chart-dot` | `color-mix(in srgb, var(--color-bg-page) 90%, #91afd6)` |
+| `--ws-chart-navy-fade` | `color-mix(in srgb, var(--ws-chart-navy-light) 36.2%, var(--color-bg-page))` |
+| `--ws-chart-salmon-fade` | `color-mix(in srgb, var(--ws-chart-under-half) 33.2%, var(--color-bg-page))` |
+| `--ws-chart-purple-fade` | `color-mix(in srgb, var(--ws-chart-past-half) 31.3%, var(--color-bg-page))` |
+| `--ws-chart-teal-fade` | `color-mix(in srgb, var(--ws-chart-finished) 29.8%, var(--color-bg-page))` |
+| `--ws-chart-finished-tint` | `color-mix(in srgb, var(--ws-chart-finished) 36.8%, var(--color-bg-page))` |
+| `--ws-chart-past-half-tint` | `color-mix(in srgb, var(--ws-chart-past-half) 32.2%, var(--color-bg-page))` |
+| `--ws-chart-under-half-tint` | `color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(30 44 30.75))` |
+| `--color-feedback-error` | `color-mix(in srgb, var(--ws-chart-under-half) 90%, #ffe0a2)` |
+| `--color-alert` | `#FF5A5A` |
+| `--ws-ink-rgb` | `232, 237, 243` |
+| `--ws-shade-rgb` | `0, 0, 0` |
+| `--ws-shade` | `#000` |
+| `--color-nav-hover-bg` | `color-mix(in srgb, var(--ws-ink) 4%, transparent)` |
+| `--ws-shadow-band` | `inset 0 0.5px 0 color-mix(in srgb, var(--ws-tray) 96%, #82a8ce), inset 0 10px 6px 0 rgba(0, 0, 0, 0.06), inset 0 4px 4px 0 rgba(0, 0, 0, 0.1), inset 0 1px 2px 0 rgba(0, 0, 0, 0.14)` |
+| `--ws-shadow-lift` | `0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 6px 14px rgba(0, 0, 0, 0.32), 0 16px 40px rgba(0, 0, 0, 0.42)` |
+| `--shadow-card-default` | `0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.24)` |
+| `--shadow-card-hover` | `var(--ws-shadow-lift)` |
+| `--shadow-dropdown` | `0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 8px 17px rgba(0, 0, 0, 0.3), 0 30px 30px rgba(0, 0, 0, 0.26), 0 68px 41px rgba(0, 0, 0, 0.16)` |
+| `--ws-ring-selected` | `0 0 0 2px color-mix(in srgb, var(--ws-ink) 70%, transparent)` |
+| `--ws-card-ring-lit` | `0 0 0 2px color-mix(in srgb, var(--ws-ink) 32%, transparent)` |
+| `--ws-card-ring-person` | `inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 14%, transparent)` |
+| `--ws-glow-blue` | `color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(42.5 151 251))` |
+| `--ws-cool-glow` | `radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised))` |
+| `--ws-team-glow` | `radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), radial-gradient(70% 80% at 0% 90%, color-mix(in srgb, var(--ws-chart-under-half) 12%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised))` |
+| `--ws-orb` | `radial-gradient(circle at 30% 30% in srgb, color-mix(in srgb, var(--ws-chart-finished) 50%, #05ccf3), var(--ws-glow-blue) 45%, color-mix(in srgb, var(--ws-chart-past-half) 80%, #5902c6) 80%)` |
+| `--ws-tray` | `#1E2B38` |
+| `--ws-edge-card-1x` | `var(--ws-edge-card)` |
+| `--ws-well-hover` | `#273544` |
+| `--ws-frame` | `var(--ws-frame-top)` |
+| `--ws-frame-top` | `var(--ws-page)` |
+| `--ws-stage-foot` | `var(--color-bg-page)` |
+| `--ws-stage-wash` | `var(--color-bg-page)` |
+| `--ws-glass` | `color-mix(in srgb, var(--color-bg-page) 59%, transparent)` |
+| `--ws-edge-stage` | `var(--ws-edge-card)` |
+| `--ws-float-rim` | `0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent)` |
+| `--ws-chart-alert` | `#FF5470` |
+| `--ws-word-needs-work` | `var(--ws-chart-needs-work)` |
+| `--ws-tint-needs-work` | `color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page))` |
+| `--ws-rating-middle` | `var(--color-text-interactive)` |
+| `--ws-raised-sunk` | `var(--ws-surface-press)` |
+| `--ws-edge-hover` | `var(--color-text-muted)` |
+| `--ws-act-hover` | `color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act))` |
+| `--ws-act-light` | `transparent` |
+| `--ws-agent-tally` | `var(--color-text-heading)` |
+| `--ws-mark-muted` | `color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page))` |
+| `--ws-control-off` | `color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59)` |
+| `--ws-shimmer` | `linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%)` |
+| `--ws-inverse` | `var(--color-bg-dark)` |
+| `--ws-on-inverse` | `var(--color-white)` |
+| `--ws-chart-rest` | `var(--ws-edge-card)` |
+| `--ws-ghost` | `var(--ws-well-hover)` |
+| `--ws-word-answer` | `color-mix(in srgb, var(--color-text-body) 50%, var(--ws-field-ink))` |
+
+### Navy ground (`[data-theme="dark"][data-ground="navy"]`, on top of night)
+
+| Token | Value |
+| --- | --- |
+| `--ws-page` | `var(--color-bg-page)` |
+| `--color-bg-page` | `#021A32` |
+| `--color-surface` | `color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white))` |
+| `--ws-raised` | `color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white))` |
+| `--ws-surface-sunk` | `color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white))` |
+| `--ws-surface-press` | `color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white))` |
+| `--ws-well` | `color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white))` |
+| `--ws-field` | `var(--color-white)` |
+| `--ws-chart-foot` | `color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white))` |
+| `--ws-sidebar-hover` | `color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white))` |
+| `--ws-sidebar-press` | `color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white))` |
+| `--ws-menu-hover` | `color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white))` |
+| `--ws-menu-line` | `var(--ws-edge-card)` |
+| `--ws-tint-accent` | `color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white))` |
+| `--ws-tint-needs` | `color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page))` |
+| `--ws-tint-live` | `color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page))` |
+| `--ws-card-tint-blue` | `color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page))` |
+| `--ws-card-tint-done` | `var(--ws-tint-live)` |
+| `--ws-track` | `color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white))` |
+| `--ws-edge` | `color-mix(in srgb, var(--color-white) 10%, transparent)` |
+| `--ws-edge-card` | `color-mix(in srgb, var(--color-white) 18%, transparent)` |
+| `--ws-edge-chip` | `var(--ws-edge-card)` |
+| `--ws-edge-slot` | `var(--ws-edge-card)` |
+| `--ws-edge-tray` | `var(--ws-edge-card)` |
+| `--color-text-heading` | `#FFFFFF` |
+| `--color-text-body` | `#D3D3D3` |
+| `--color-text-muted` | `#A9A9A9` |
+| `--color-text-placeholder` | `#6E6E6E` |
+| `--color-text-primary` | `color-mix(in srgb, var(--color-text-heading) 93%, #000000)` |
+| `--ws-field-ink` | `var(--color-brand-navy)` |
+| `--ws-field-mark` | `var(--ws-field-ink)` |
+| `--ws-chart-empty` | `var(--ws-track)` |
+| `--ws-chart-dot` | `color-mix(in srgb, var(--ws-ink) 10%, transparent)` |
+| `--ws-chart-navy-fade` | `color-mix(in srgb, var(--color-text-heading) 30%, var(--color-bg-page))` |
+| `--ws-ink-rgb` | `255, 255, 255` |
+| `--ws-shadow-band` | `inset 0 var(--ws-hairline) 0 var(--ws-edge-tray)` |
+| `--ws-tray` | `color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white))` |
+| `--ws-word-needs-work` | `color-mix(in srgb, var(--ws-chart-needs-work) 80%, #fdcfe0)` |
+| `--ws-word-alert` | `#FF8282` |
+| `--ws-word-past-half` | `color-mix(in srgb, var(--ws-chart-past-half) 80%, #f9f7fd)` |
+| `--ws-mark-muted` | `color-mix(in srgb, var(--color-text-muted) 80%, #0e5eb3)` |
+| `--ws-word-answer` | `color-mix(in srgb, var(--color-text-body) 50%, var(--color-text-heading))` |
+
+## Words on grounds (WCAG AA)
+
+Every word token on every ground it can sit on, computed by scripts/generate-tokens.mjs from the values above (it
+stops on a fail). Gated at 4.5:1 on cream (`--color-bg-page`), white (`--color-surface`), the plate
+(`--ws-surface-sunk`), the tray (`--ws-tray`), a raised surface (`--ws-raised`) and its sunk step (`--ws-raised-sunk`),
+the shell (`--ws-page`), a row under a press (`--ws-surface-press`), the well (`--ws-well`), the tints and card tints,
+the chart foot, the sidebar and menu hovers and the table stripe. Reported, not gated: the needs-work tint and the
+success ground (each carries only its own words, gated as a pair: `--ws-word-needs-work`, `--color-text-success-strong`;
+`--color-feedback-success-text` is for the cream or a raised surface, not its own ground) and `--ws-well-hover` (a
+frame under the pointer: keep muted words off it). A mark (tick, bar, dot, ring) keeps its own tone; a word in that
+tone uses the word token here (D2).
+
+### Light
+
+| Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | success | well hover |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `--color-text-heading` | `#093555` | 12.34 | 12.71 | 11.28 | 10.86 | 12.34 | 10.37 | 10.23 | 10.86 | 11.28 | 11.62 | 11.55 | 10.85 | 10.97 | 11.19 | 11.28 | 11.15 | 11.48 | 11.62 | 10.21 | 9.36 | 9.83 |
+| `--color-text-body` | `#545454` | 7.35 | 7.57 | 6.72 | 6.47 | 7.35 | 6.18 | 6.10 | 6.47 | 6.72 | 6.92 | 6.88 | 6.46 | 6.54 | 6.66 | 6.72 | 6.65 | 6.84 | 6.92 | 6.08 | 5.57 | 5.86 |
+| `--color-text-muted` | `#666666` | 5.57 | 5.74 | 5.10 | 4.90 | 5.57 | 4.69 | 4.62 | 4.90 | 5.10 | 5.25 | 5.22 | 4.90 | 4.96 | 5.05 | 5.10 | 5.04 | 5.19 | 5.25 | 4.61 | 4.23 (fails) | 4.44 (fails) |
+| `--color-text-interactive` | `#495883` | 6.78 | 6.98 | 6.20 | 5.97 | 6.78 | 5.70 | 5.62 | 5.97 | 6.20 | 6.39 | 6.35 | 5.96 | 6.03 | 6.15 | 6.20 | 6.13 | 6.31 | 6.39 | 5.61 | 5.14 | 5.40 |
+| `--color-text-brand-strong` | `#a84b3c` | 5.45 | 5.62 | 4.99 | 4.80 | 5.45 | 4.59 | 4.52 | 4.80 | 4.99 | 5.14 | 5.11 | 4.80 | 4.85 | 4.95 | 4.99 | 4.93 | 5.08 | 5.14 | 4.51 | 4.14 (fails) | 4.35 (fails) |
+| `--color-text-error-strong` | `#a74b39` | 5.50 | 5.66 | 5.03 | 4.84 | 5.50 | 4.62 | 4.56 | 4.84 | 5.03 | 5.18 | 5.14 | 4.83 | 4.89 | 4.98 | 5.03 | 4.97 | 5.12 | 5.18 | 4.55 | 4.17 (fails) | 4.38 (fails) |
+| `--color-text-success-strong` | `#3c601b` | 7.07 | 7.29 | 6.47 | 6.23 | 7.07 | 5.95 | 5.87 | 6.23 | 6.47 | 6.66 | 6.62 | 6.22 | 6.29 | 6.41 | 6.47 | 6.40 | 6.59 | 6.66 | 5.85 | 5.36 | 5.64 |
+| `--ws-word-needs` | `#a84b3c` | 5.45 | 5.62 | 4.99 | 4.80 | 5.45 | 4.59 | 4.52 | 4.80 | 4.99 | 5.14 | 5.11 | 4.80 | 4.85 | 4.95 | 4.99 | 4.93 | 5.08 | 5.14 | 4.51 | 4.14 (fails) | 4.35 (fails) |
+| `--ws-word-positive` | `#09717a` | 5.58 | 5.75 | 5.10 | 4.91 | 5.58 | 4.69 | 4.63 | 4.91 | 5.10 | 5.25 | 5.22 | 4.90 | 4.96 | 5.06 | 5.10 | 5.04 | 5.19 | 5.25 | 4.61 | 4.23 (fails) | 4.44 (fails) |
+| `--ws-word-needs-work` | `#b42d68` | 5.80 | 5.97 | 5.30 | 5.10 | 5.80 | 4.87 | 4.81 | 5.10 | 5.30 | 5.46 | 5.43 | 5.10 | 5.16 | 5.26 | 5.30 | 5.24 | 5.40 | 5.46 | 4.80 | 4.40 (fails) | 4.62 |
+| `--ws-word-alert` | `#b1042f` | 6.96 | 7.17 | 6.37 | 6.13 | 6.96 | 5.85 | 5.77 | 6.13 | 6.37 | 6.56 | 6.52 | 6.12 | 6.19 | 6.31 | 6.37 | 6.29 | 6.48 | 6.56 | 5.76 | 5.28 | 5.55 |
+| `--ws-word-past-half` | `#6d4fc2` | 5.74 | 5.92 | 5.25 | 5.06 | 5.74 | 4.83 | 4.76 | 5.06 | 5.25 | 5.41 | 5.38 | 5.05 | 5.11 | 5.21 | 5.25 | 5.19 | 5.35 | 5.41 | 4.75 | 4.36 (fails) | 4.58 |
+| `--ws-word-answer` | `#3d3d3d` | 10.54 | 10.86 | 9.64 | 9.28 | 10.54 | 8.87 | 8.74 | 9.28 | 9.64 | 9.93 | 9.87 | 9.27 | 9.38 | 9.56 | 9.64 | 9.53 | 9.81 | 9.93 | 8.72 | 7.99 | 8.40 |
+
+- `--color-text-placeholder` on `--ws-field`: 5.10:1
+- `--ws-field-ink` on `--ws-field`: 14.55:1
+- `--ws-on-act` on `--color-text-heading`: 12.71:1
+- `--ws-word-needs` on `--ws-tint-needs`: 5.11:1
+- `--ws-word-positive` on `--ws-tint-live`: 4.90:1
+- `--ws-word-needs-work` on `--ws-tint-needs-work`: 4.80:1
+- `--color-text-success-strong` on `--color-feedback-success-bg`: 5.36:1
+- `--ws-on-act` on `--ws-agent-tally`: 9.26:1
+
+
+### Night
+
+| Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | success | well hover |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `--color-text-heading` | `#e8edf3` | 15.09 | 14.34 | 13.55 | 12.24 | 13.71 | 16.13 | 12.24 | 15.77 | 12.24 | 14.34 | 12.61 | 12.73 | 12.94 | 13.04 | 15.64 | 14.64 | 12.24 | 14.34 | 11.55 | 12.08 | 10.62 |
+| `--color-text-body` | `#b0bbc7` | 9.12 | 8.66 | 8.19 | 7.39 | 8.29 | 9.74 | 7.39 | 9.53 | 7.39 | 8.66 | 7.62 | 7.69 | 7.82 | 7.88 | 9.45 | 8.85 | 7.39 | 8.66 | 6.98 | 7.30 | 6.42 |
+| `--color-text-muted` | `#8494a5` | 5.72 | 5.43 | 5.14 | 4.64 | 5.20 | 6.11 | 4.64 | 5.98 | 4.64 | 5.43 | 4.78 | 4.83 | 4.90 | 4.94 | 5.93 | 5.55 | 4.64 | 5.43 | 4.38 (fails) | 4.58 | 4.03 (fails) |
+| `--color-text-interactive` | `#93a6dc` | 7.38 | 7.02 | 6.63 | 5.99 | 6.71 | 7.89 | 5.99 | 7.72 | 5.99 | 7.02 | 6.17 | 6.23 | 6.33 | 6.38 | 7.65 | 7.16 | 5.99 | 7.02 | 5.65 | 5.91 | 5.20 |
+| `--color-text-brand-strong` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.24 | 5.49 |
+| `--color-text-error-strong` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.24 | 5.49 |
+| `--color-text-success-strong` | `#9bcf72` | 9.78 | 9.29 | 8.78 | 7.93 | 8.89 | 10.45 | 7.93 | 10.22 | 7.93 | 9.29 | 8.18 | 8.25 | 8.38 | 8.45 | 10.14 | 9.49 | 7.93 | 9.29 | 7.49 | 7.83 | 6.89 |
+| `--ws-word-needs` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.24 | 5.49 |
+| `--ws-word-positive` | `#4fc7be` | 8.66 | 8.24 | 7.78 | 7.03 | 7.88 | 9.26 | 7.03 | 9.06 | 7.03 | 8.24 | 7.24 | 7.31 | 7.43 | 7.49 | 8.98 | 8.41 | 7.03 | 8.24 | 6.63 | 6.94 | 6.10 |
+| `--ws-word-needs-work` | `#f370a4` | 6.48 | 6.16 | 5.82 | 5.26 | 5.89 | 6.93 | 5.26 | 6.78 | 5.26 | 6.16 | 5.42 | 5.47 | 5.56 | 5.60 | 6.72 | 6.29 | 5.26 | 6.16 | 4.96 | 5.19 | 4.57 |
+| `--ws-word-alert` | `#ff5470` | 5.71 | 5.43 | 5.13 | 4.63 | 5.19 | 6.11 | 4.63 | 5.97 | 4.63 | 5.43 | 4.78 | 4.82 | 4.90 | 4.94 | 5.92 | 5.54 | 4.63 | 5.43 | 4.37 (fails) | 4.57 | 4.02 (fails) |
+| `--ws-word-past-half` | `#9a84ee` | 5.84 | 5.55 | 5.25 | 4.74 | 5.31 | 6.25 | 4.74 | 6.11 | 4.74 | 5.55 | 4.89 | 4.93 | 5.01 | 5.05 | 6.06 | 5.67 | 4.74 | 5.55 | 4.47 (fails) | 4.68 | 4.12 (fails) |
+| `--ws-word-answer` | `#c9d1db` | 11.52 | 10.95 | 10.35 | 9.35 | 10.48 | 12.32 | 9.35 | 12.05 | 9.35 | 10.95 | 9.64 | 9.73 | 9.88 | 9.96 | 11.95 | 11.18 | 9.35 | 10.95 | 8.82 | 9.23 | 8.12 |
+
+- `--color-text-placeholder` on `--ws-field`: 5.98:1
+- `--ws-field-ink` on `--ws-field`: 14.91:1
+- `--ws-on-act` on `--color-text-heading`: 15.09:1
+- `--ws-word-needs` on `--ws-tint-needs`: 6.52:1
+- `--ws-word-positive` on `--ws-tint-live`: 7.31:1
+- `--ws-word-needs-work` on `--ws-tint-needs-work`: 4.96:1
+- `--color-text-success-strong` on `--color-feedback-success-bg`: 7.83:1
+- `--ws-on-act` on `--ws-agent-tally`: 15.09:1
+
+
+### Navy ground
+
+| Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | success | well hover |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `--color-text-heading` | `#ffffff` | 17.55 | 15.55 | 13.32 | 10.86 | 14.26 | 17.55 | 10.86 | 15.03 | 10.86 | 15.03 | 13.83 | 14.39 | 14.49 | 14.39 | 15.55 | 15.03 | 12.56 | 15.03 | 13.82 | 14.22 | 12.51 |
+| `--color-text-body` | `#d3d3d3` | 11.73 | 10.39 | 8.90 | 7.25 | 9.52 | 11.73 | 7.25 | 10.04 | 7.25 | 10.04 | 9.24 | 9.61 | 9.68 | 9.61 | 10.39 | 10.04 | 8.39 | 10.04 | 9.23 | 9.50 | 8.36 |
+| `--color-text-muted` | `#a9a9a9` | 7.47 | 6.62 | 5.67 | 4.62 | 6.07 | 7.47 | 4.62 | 6.40 | 4.62 | 6.40 | 5.89 | 6.12 | 6.16 | 6.12 | 6.62 | 6.40 | 5.34 | 6.40 | 5.88 | 6.05 | 5.32 |
+| `--color-text-interactive` | `#93a6dc` | 7.30 | 6.46 | 5.54 | 4.51 | 5.93 | 7.30 | 4.51 | 6.25 | 4.51 | 6.25 | 5.75 | 5.98 | 6.02 | 5.98 | 6.46 | 6.25 | 5.22 | 6.25 | 5.74 | 5.91 | 5.20 |
+| `--color-text-brand-strong` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.24 | 5.49 |
+| `--color-text-error-strong` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.24 | 5.49 |
+| `--color-text-success-strong` | `#9bcf72` | 9.66 | 8.56 | 7.33 | 5.98 | 7.85 | 9.66 | 5.98 | 8.28 | 5.98 | 8.28 | 7.62 | 7.92 | 7.98 | 7.92 | 8.56 | 8.28 | 6.91 | 8.28 | 7.61 | 7.83 | 6.89 |
+| `--ws-word-needs` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.24 | 5.49 |
+| `--ws-word-positive` | `#4fc7be` | 8.56 | 7.59 | 6.50 | 5.30 | 6.96 | 8.56 | 5.30 | 7.33 | 5.30 | 7.33 | 6.75 | 7.02 | 7.07 | 7.02 | 7.59 | 7.33 | 6.13 | 7.33 | 6.74 | 6.94 | 6.10 |
+| `--ws-word-needs-work` | `#f583b0` | 7.32 | 6.48 | 5.55 | 4.53 | 5.94 | 7.32 | 4.53 | 6.27 | 4.53 | 6.27 | 5.77 | 6.00 | 6.04 | 6.00 | 6.48 | 6.27 | 5.24 | 6.27 | 5.76 | 5.93 | 5.22 |
+| `--ws-word-alert` | `#ff8282` | 7.33 | 6.49 | 5.56 | 4.53 | 5.95 | 7.33 | 4.53 | 6.28 | 4.53 | 6.28 | 5.78 | 6.01 | 6.05 | 6.01 | 6.49 | 6.28 | 5.24 | 6.28 | 5.77 | 5.94 | 5.22 |
+| `--ws-word-past-half` | `#ad9bf1` | 7.30 | 6.47 | 5.54 | 4.52 | 5.93 | 7.30 | 4.52 | 6.25 | 4.52 | 6.25 | 5.75 | 5.99 | 6.03 | 5.99 | 6.47 | 6.25 | 5.22 | 6.25 | 5.75 | 5.92 | 5.20 |
+| `--ws-word-answer` | `#e9e9e9` | 14.46 | 12.81 | 10.97 | 8.94 | 11.74 | 14.46 | 8.94 | 12.38 | 8.94 | 12.38 | 11.39 | 11.85 | 11.93 | 11.85 | 12.81 | 12.38 | 10.34 | 12.38 | 11.38 | 11.72 | 10.30 |
+
+- `--color-text-placeholder` on `--ws-field`: 5.10:1
+- `--ws-field-ink` on `--ws-field`: 12.71:1
+- `--ws-on-act` on `--color-text-heading`: 17.55:1
+- `--ws-word-needs` on `--ws-tint-needs`: 6.07:1
+- `--ws-word-positive` on `--ws-tint-live`: 7.02:1
+- `--ws-word-needs-work` on `--ws-tint-needs-work`: 5.76:1
+- `--color-text-success-strong` on `--color-feedback-success-bg`: 7.83:1
+- `--ws-on-act` on `--ws-agent-tally`: 17.55:1
+
+
+## Springs
+
+Seth's presets from his DialKit config, in `tokens.ts` as `springs` (and `eases` for the CSS curves) for the motion
+library, and in every CSS token file as the same spring: `--ws-spring-<name>` is a `linear()` curve sampled from the
+motion library's own solver (within 1% everywhere, overshoot kept), `--ws-spring-<name>-duration` the time it takes to
+settle. Use both together: `transition: scale var(--ws-spring-press-duration) var(--ws-spring-press)`. A browser without
+`linear()` drops the transition and changes at once. A spring is for what the person drives (a press, the pointer, an
+indicator, a panel, a fold); a timed ease is for what the system plays (a draw, a build, a loop). Reduced motion: the
+house makes every CSS transition instant; wrap a motion tree in `<MotionConfig reducedMotion="user">`.
+
+| Preset | visualDuration | bounce | CSS | Settles in | Use |
+| --- | --- | --- | --- | --- | --- |
+| `press` | 0.2 s | 0.3 | `--ws-spring-press` | 450ms | A button or chip under a press (scale --ws-press-scale) |
+| `follow` | 0.22 s | 0 | `--ws-spring-follow` | 450ms | A tooltip following the pointer; never bounces |
+| `pop` | 0.35 s | 0.1 | `--ws-spring-pop` | 500ms | A chart tooltip or tip popping in from --ws-pop-scale |
+| `settle` | 0.32 s | 0.1 | `--ws-spring-settle` | 450ms | Menus, pickers and messages settling |
+| `fold` | 0.32 s | 0 | `--ws-spring-fold` | 600ms | A section opening or closing (height and the chevron) |
+| `indicator` | 0.38 s | 0.16 | `--ws-spring-indicator` | 700ms | The Segmented and tab thumb sliding to the chosen item |
+| `highlight` | 0.45 s | 0.14 | `--ws-spring-highlight` | 800ms | A list's selected fill sliding between rows |
+| `nav` | 0.4 s | 0.1 | `--ws-spring-nav` | 550ms | The sidebar's current-row pill sliding |
+| `reorder` | 0.4 s | 0 | `--ws-spring-reorder` | 750ms | List rows moving to new places |
+| `tile` | 0.26 s | 0.06 | `--ws-spring-tile` | 450ms | A heatmap square opening to two cells |
+| `lane` | 0.46 s | 0.04 | `--ws-spring-lane` | 750ms | A lane's detail opening |
+| `lens` | 0.45 s | 0.04 | `--ws-spring-lens` | 750ms | One chart swapping for another inside an open tile |
+| `swap` | 0.6 s | 0.06 | `--ws-spring-swap` | 900ms | A board chart going out and the new one coming in |
+| `panel` | 0.42 s | 0.12 | `--ws-spring-panel` | 550ms | The chat panel opening, moving or docking |
+| `card` | 0.5 s | 0.08 | `--ws-spring-card` | 700ms | A chart card arriving in the thread |
+| `text` | 0.7 s | 0.2 | `--ws-spring-text` | 1200ms | A metric card's words swapping |
+| `badge` | 0.3 s | 0.4 | `--ws-spring-badge` | 650ms | A count badge popping when it changes |
+| `tab` | 0.4 s | 0.12 | `--ws-spring-tab` | 500ms | A tab's underline sliding to the chosen tab (North dc-tab) |
+| `chip` | 0.25 s | 0.1 | `--ws-spring-chip` | 350ms | An attention chip opening into its card |
+| `glow` | 0.3 s | 0 | `--ws-spring-glow` | 600ms | The composer's focus glow arriving |
+| `roll` | 0.45 s | 0.05 | `--ws-spring-roll` | 700ms | The composer's placeholder rolling to the next line |
+| `flag` | 0.26 s | 0.06 | `--ws-spring-flag` | 450ms | A trend read-out following the pointer along a chart |
+| `mark` | 0.35 s | 0.35 | `--ws-spring-mark` | 550ms | A small mark popping in: the pace dot on an opened square |
+| `morphChart` | 0.85 s | 0.06 | `--ws-spring-morph-chart` | 1250ms | A chart morphing between forms (bars to a line) |
+| `orb` | 0.55 s | 0.35 | `--ws-spring-orb` | 850ms | 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) |
+| `default` | 0.4 s | 0.15 | `--ws-spring-default` | 750ms | Anything the person drives that has no tuned spring (North's fallback) |