@felloinnovations/brand-kit 0.4.0 → 0.5.0

package/tokens/design-tokens.json

@@ -626,5 +626,324 @@
       "status": "PROVISIONAL",
       "note": "Big card (2×2) featured stat figure. Chosen at 64px for visual impact over --font-size-5xl (56px). No Figma source — confirm with Anjali/design."
     }
+  },
+  "motion": {
+    "springs": {
+      "$comment": "Seth's tuned springs from the North DialKit config (nn object, app.js@824790; north-motion notes section 3, 4 Nov 2026), for the motion library: {type: 'spring', visualDuration, bounce}. scripts/generate-tokens.mjs writes them to tokens.ts (springs), design-system/tokens.json (spring) and every CSS token file as --ws-spring-<name> (the spring as a linear() curve, sampled from the motion library's own solver, overshoot kept) over --ws-spring-<name>-duration (the time it takes to settle), so CSS moves on the same spring: transition: scale var(--ws-spring-press-duration) var(--ws-spring-press). Things the person drives use a spring; things the system plays use the CSS eases. Wrap every motion tree in <MotionConfig reducedMotion=\"user\">.",
+      "press": {
+        "visualDuration": 0.2,
+        "bounce": 0.3,
+        "use": "A button or chip under a press (scale --ws-press-scale)"
+      },
+      "follow": {
+        "visualDuration": 0.22,
+        "bounce": 0,
+        "use": "A tooltip following the pointer; never bounces"
+      },
+      "pop": {
+        "visualDuration": 0.35,
+        "bounce": 0.1,
+        "use": "A chart tooltip or tip popping in from --ws-pop-scale"
+      },
+      "settle": {
+        "visualDuration": 0.32,
+        "bounce": 0.1,
+        "use": "Menus, pickers and messages settling"
+      },
+      "fold": {
+        "visualDuration": 0.32,
+        "bounce": 0,
+        "use": "A section opening or closing (height and the chevron)"
+      },
+      "indicator": {
+        "visualDuration": 0.38,
+        "bounce": 0.16,
+        "use": "The Segmented and tab thumb sliding to the chosen item"
+      },
+      "highlight": {
+        "visualDuration": 0.45,
+        "bounce": 0.14,
+        "use": "A list's selected fill sliding between rows"
+      },
+      "nav": {
+        "visualDuration": 0.4,
+        "bounce": 0.1,
+        "use": "The sidebar's current-row pill sliding"
+      },
+      "reorder": {
+        "visualDuration": 0.4,
+        "bounce": 0,
+        "use": "List rows moving to new places"
+      },
+      "tile": {
+        "visualDuration": 0.26,
+        "bounce": 0.06,
+        "use": "A heatmap square opening to two cells"
+      },
+      "lane": {
+        "visualDuration": 0.46,
+        "bounce": 0.04,
+        "use": "A lane's detail opening"
+      },
+      "lens": {
+        "visualDuration": 0.45,
+        "bounce": 0.04,
+        "use": "One chart swapping for another inside an open tile"
+      },
+      "swap": {
+        "visualDuration": 0.6,
+        "bounce": 0.06,
+        "use": "A board chart going out and the new one coming in"
+      },
+      "panel": {
+        "visualDuration": 0.42,
+        "bounce": 0.12,
+        "use": "The chat panel opening, moving or docking"
+      },
+      "card": {
+        "visualDuration": 0.5,
+        "bounce": 0.08,
+        "use": "A chart card arriving in the thread"
+      },
+      "text": {
+        "visualDuration": 0.7,
+        "bounce": 0.2,
+        "use": "A metric card's words swapping"
+      },
+      "badge": {
+        "visualDuration": 0.3,
+        "bounce": 0.4,
+        "use": "A count badge popping when it changes"
+      },
+      "tab": {
+        "visualDuration": 0.4,
+        "bounce": 0.12,
+        "use": "A tab's underline sliding to the chosen tab (North dc-tab)"
+      },
+      "chip": {
+        "visualDuration": 0.25,
+        "bounce": 0.1,
+        "use": "An attention chip opening into its card"
+      },
+      "glow": {
+        "visualDuration": 0.3,
+        "bounce": 0,
+        "use": "The composer's focus glow arriving"
+      },
+      "roll": {
+        "visualDuration": 0.45,
+        "bounce": 0.05,
+        "use": "The composer's placeholder rolling to the next line"
+      },
+      "flag": {
+        "visualDuration": 0.26,
+        "bounce": 0.06,
+        "use": "A trend read-out following the pointer along a chart"
+      },
+      "mark": {
+        "visualDuration": 0.35,
+        "bounce": 0.35,
+        "use": "A small mark popping in: the pace dot on an opened square"
+      },
+      "morphChart": {
+        "visualDuration": 0.85,
+        "bounce": 0.06,
+        "use": "A chart morphing between forms (bars to a line)"
+      },
+      "orb": {
+        "visualDuration": 0.55,
+        "bounce": 0.35,
+        "use": "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": {
+        "visualDuration": 0.4,
+        "bounce": 0.15,
+        "use": "Anything the person drives that has no tuned spring (North's fallback)"
+      }
+    }
+  },
+  "palette": {
+    "$comment": "D15 (4 Nov 2026): the palette contract, the only tokens a palette may set. Everything else is derived from these and the kit constants, and recomputes on any element that carries data-palette, data-theme or class=\"fello\". A palette is named for how it looks, never for an app. scripts/generate-tokens.mjs writes this list into tokens.md; scripts/check-palette.mjs checks a palette against it. A palette sets a light value and a dark value for each token it changes; marks keep their exact tone, words take their AA step (D2).",
+    "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)."
+    },
+    "tokens": [
+      {
+        "name": "--color-bg-page",
+        "group": "ground",
+        "meaning": "The page and every card's surface: the cream most words sit on."
+      },
+      {
+        "name": "--ws-frame-top",
+        "group": "ground",
+        "meaning": "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)."
+      },
+      {
+        "name": "--ws-stage-foot",
+        "group": "ground",
+        "meaning": "The foot of a washed stage, whose gradient starts at the page (light only)."
+      },
+      {
+        "name": "--color-surface",
+        "group": "ground",
+        "meaning": "What is white: a marketing card, a well row under the pointer, a chat bubble, the glass of the stage."
+      },
+      {
+        "name": "--ws-raised",
+        "group": "ground",
+        "meaning": "What floats off the page: a menu, a popover, a tooltip, a dialog, a panel, a toast."
+      },
+      {
+        "name": "--ws-tray",
+        "group": "ground",
+        "meaning": "The rim and foot of a rimmed card, and the well behind rows."
+      },
+      {
+        "name": "--ws-edge-card",
+        "group": "edge",
+        "meaning": "A card's and an outlined control's 0.5 px edge."
+      },
+      {
+        "name": "--ws-edge",
+        "group": "edge",
+        "meaning": "A divider between rows; a quiet line."
+      },
+      {
+        "name": "--ws-edge-hover",
+        "group": "edge",
+        "meaning": "An outlined control's edge under the pointer."
+      },
+      {
+        "name": "--ws-well-hover",
+        "group": "edge",
+        "meaning": "A rimmed card's rim under the pointer."
+      },
+      {
+        "name": "--color-text-heading",
+        "group": "word",
+        "meaning": "Titles, names, figures, navy marks, and the act fill (the primary button, a thumb, a checked box)."
+      },
+      {
+        "name": "--color-text-body",
+        "group": "word",
+        "meaning": "Body words: a card's line, a row."
+      },
+      {
+        "name": "--color-text-muted",
+        "group": "word",
+        "meaning": "Meta, labels, captions."
+      },
+      {
+        "name": "--color-text-interactive",
+        "group": "word",
+        "meaning": "Links and words that go somewhere, a falling number, \"working\"."
+      },
+      {
+        "name": "--ws-on-act",
+        "group": "act",
+        "meaning": "Words and marks on the act fill."
+      },
+      {
+        "name": "--ws-act-hover",
+        "group": "act",
+        "meaning": "The act fill under the pointer."
+      },
+      {
+        "name": "--ws-word-needs",
+        "group": "accent",
+        "meaning": "Needs you, in words: the current page, something to fix (the accent's AA step)."
+      },
+      {
+        "name": "--ws-focus-color",
+        "group": "focus",
+        "meaning": "The 2 px focus ring, outside or inset."
+      },
+      {
+        "name": "--ws-word-positive",
+        "group": "status",
+        "meaning": "Good news in words."
+      },
+      {
+        "name": "--ws-word-alert",
+        "group": "status",
+        "meaning": "Something wrong now, in words."
+      },
+      {
+        "name": "--ws-chart-finished",
+        "group": "chart",
+        "meaning": "Tone 1: done, passed, positive marks."
+      },
+      {
+        "name": "--ws-chart-past-half",
+        "group": "chart",
+        "meaning": "Tone 2: past halfway marks."
+      },
+      {
+        "name": "--ws-chart-under-half",
+        "group": "chart",
+        "meaning": "Tone 3: under halfway marks and needs-you dots.",
+        "withWords": true
+      },
+      {
+        "name": "--ws-chart-navy-light",
+        "group": "chart",
+        "meaning": "Tone 4: a second navy, for a series beside the heading navy."
+      },
+      {
+        "name": "--ws-chart-needs-work",
+        "group": "chart",
+        "meaning": "Tone 5: needs work marks.",
+        "withWords": true
+      },
+      {
+        "name": "--ws-chart-alert",
+        "group": "chart",
+        "meaning": "Tone 6: alert marks."
+      },
+      {
+        "name": "--ws-rating-strong",
+        "group": "rating",
+        "meaning": "Strong: its marks."
+      },
+      {
+        "name": "--ws-rating-middle",
+        "group": "rating",
+        "meaning": "Getting there (the middle band): its marks."
+      },
+      {
+        "name": "--ws-rating-needs-work",
+        "group": "rating",
+        "meaning": "Needs work: its marks."
+      },
+      {
+        "name": "--ws-agent-coach",
+        "group": "agent",
+        "meaning": "The coaching assistant's mark."
+      },
+      {
+        "name": "--ws-agent-growth",
+        "group": "agent",
+        "meaning": "The growth assistant's mark."
+      },
+      {
+        "name": "--ws-agent-recruit",
+        "group": "agent",
+        "meaning": "The recruiting assistant's mark."
+      },
+      {
+        "name": "--ws-agent-tally",
+        "group": "agent",
+        "meaning": "The money assistant's mark, and a softer act (a figure tab's current cell, a seat meter, a hatch)."
+      }
+    ]
   }
 }