@cyberskill/design 1.0.0 → 1.1.0

package/tokens/tokens.json

@@ -1,7 +1,7 @@
 {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "generated": "2026-07-23",
     "note": "Generated from tokens/*.css. Root grouped by category; theme/element scopes carry overrides only. Regenerate after any token change (see docs/conventions.md)."
   },
@@ -53,14 +53,14 @@
     },
     "accent": {
       "--cs-accent": "#F4BA17",
-      "--cs-accent-strong": "#B98200",
+      "--cs-accent-strong": "#A47D17",
       "--cs-accent-bright": "#F4BA17",
       "--cs-accent-on": "#45210E",
       "--cs-accent-tint": "#FBF4E9",
       "--cs-accent-ink": "#45210E",
-      "--cs-accent-glow": "rgba(244, 186, 23, 0.5)",
+      "--cs-accent-glow": "rgba(244, 186, 23, 0.48)",
       "--cs-accent-grad-a": "#F4BA17",
-      "--cs-accent-grad-b": "#C77B4A"
+      "--cs-accent-grad-b": "#FCAF91"
     },
     "depth": {
       "--cs-depth-bg": "0",
@@ -137,6 +137,7 @@
     },
     "font": {
       "--cs-font-family-ui": "'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif",
+      "--cs-font-family-display": "'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif",
       "--cs-font-family-mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
       "--cs-font-weight-regular": "400",
       "--cs-font-weight-medium": "500",
@@ -237,198 +238,198 @@
     }
   },
   "elements": {
+    "tho.sand": {
+      "--cs-accent": "#F8E9C0",
+      "--cs-accent-strong": "#90825E",
+      "--cs-accent-bright": "#F6EBCC",
+      "--cs-accent-on": "#292414",
+      "--cs-accent-tint": "#FBF7EA",
+      "--cs-accent-ink": "#292414",
+      "--cs-accent-glow": "rgba(248, 233, 192, 0.48)",
+      "--cs-accent-grad-a": "#F8E9C0",
+      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-color-text-accent": "#90825E",
+      "--cs-color-link": "#90825E"
+    },
     "tho": {
       "--cs-accent": "#F4BA17",
-      "--cs-accent-strong": "#B98200",
+      "--cs-accent-strong": "#A47D17",
       "--cs-accent-bright": "#F4BA17",
       "--cs-accent-on": "#45210E",
       "--cs-accent-tint": "#FBF4E9",
       "--cs-accent-ink": "#45210E",
-      "--cs-accent-glow": "rgba(244, 186, 23, 0.5)",
+      "--cs-accent-glow": "rgba(244, 186, 23, 0.48)",
       "--cs-accent-grad-a": "#F4BA17",
-      "--cs-accent-grad-b": "#C77B4A"
+      "--cs-accent-grad-b": "#FCAF91"
     },
     "tho.clay": {
-      "--cs-accent": "#C77B4A",
-      "--cs-accent-strong": "#8F5230",
-      "--cs-accent-bright": "#EDBF9D",
-      "--cs-accent-on": "#2E1607",
-      "--cs-accent-tint": "#F8EDE4",
-      "--cs-accent-ink": "#2E1607",
-      "--cs-accent-glow": "rgba(199, 123, 74, 0.5)",
-      "--cs-accent-grad-a": "#C77B4A",
-      "--cs-accent-grad-b": "#F4BA17",
-      "--cs-color-text-accent": "#8F5230",
-      "--cs-color-link": "#8F5230"
+      "--cs-accent": "#513801",
+      "--cs-accent-strong": "#201300",
+      "--cs-accent-bright": "#DEC7A2",
+      "--cs-accent-on": "#2D220E",
+      "--cs-accent-tint": "#FFF6E7",
+      "--cs-accent-ink": "#2D220E",
+      "--cs-accent-glow": "rgba(81, 56, 1, 0.48)",
+      "--cs-accent-grad-a": "#513801",
+      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-color-text-accent": "#201300",
+      "--cs-color-link": "#201300"
     },
-    "tho.sand": {
-      "--cs-accent": "#E4C98F",
-      "--cs-accent-strong": "#A98B4E",
-      "--cs-accent-bright": "#EFDCB2",
-      "--cs-accent-on": "#3A2A10",
-      "--cs-accent-tint": "#FAF3E3",
-      "--cs-accent-ink": "#3A2A10",
-      "--cs-accent-glow": "rgba(228, 201, 143, 0.55)",
-      "--cs-accent-grad-a": "#E4C98F",
+    "hoa.plasma": {
+      "--cs-accent": "#FFE1D8",
+      "--cs-accent-strong": "#967C75",
+      "--cs-accent-bright": "#FCE6DF",
+      "--cs-accent-on": "#2C211E",
+      "--cs-accent-tint": "#FEF4F2",
+      "--cs-accent-ink": "#2C211E",
+      "--cs-accent-glow": "rgba(255, 225, 216, 0.48)",
+      "--cs-accent-grad-a": "#FFE1D8",
       "--cs-accent-grad-b": "#F4BA17",
-      "--cs-color-text-accent": "#8A6F3C",
-      "--cs-color-link": "#8A6F3C"
+      "--cs-color-text-accent": "#967C75",
+      "--cs-color-link": "#967C75"
     },
     "hoa": {
-      "--cs-accent": "#E0632B",
-      "--cs-accent-strong": "#A93E14",
-      "--cs-accent-bright": "#F6A26B",
-      "--cs-accent-on": "#231007",
-      "--cs-accent-tint": "#FBEADF",
-      "--cs-accent-ink": "#231007",
-      "--cs-accent-glow": "rgba(224, 99, 43, 0.5)",
-      "--cs-accent-grad-a": "#E0632B",
+      "--cs-accent": "#FCAF91",
+      "--cs-accent-strong": "#B47054",
+      "--cs-accent-bright": "#FED3C3",
+      "--cs-accent-on": "#381B10",
+      "--cs-accent-tint": "#FFF4F0",
+      "--cs-accent-ink": "#381B10",
+      "--cs-accent-glow": "rgba(252, 175, 145, 0.48)",
+      "--cs-accent-grad-a": "#FCAF91",
       "--cs-accent-grad-b": "#F4BA17",
-      "--cs-color-text-accent": "#A93E14",
-      "--cs-color-link": "#A93E14"
+      "--cs-color-text-accent": "#B47054",
+      "--cs-color-link": "#B47054"
     },
     "hoa.lava": {
-      "--cs-accent": "#C43D1F",
-      "--cs-accent-strong": "#7E1F0E",
-      "--cs-accent-bright": "#F6AC85",
-      "--cs-accent-on": "#1D0B05",
-      "--cs-accent-tint": "#FAE5DC",
-      "--cs-accent-ink": "#1D0B05",
-      "--cs-accent-glow": "rgba(196, 61, 31, 0.55)",
-      "--cs-accent-grad-a": "#C43D1F",
-      "--cs-accent-grad-b": "#E0632B",
-      "--cs-color-text-accent": "#9B2D14",
-      "--cs-color-link": "#9B2D14"
+      "--cs-accent": "#622B06",
+      "--cs-accent-strong": "#280D00",
+      "--cs-accent-bright": "#F1BEA4",
+      "--cs-accent-on": "#361D0F",
+      "--cs-accent-tint": "#FFF4EF",
+      "--cs-accent-ink": "#361D0F",
+      "--cs-accent-glow": "rgba(98, 43, 6, 0.48)",
+      "--cs-accent-grad-a": "#622B06",
+      "--cs-accent-grad-b": "#F4BA17",
+      "--cs-color-text-accent": "#280D00",
+      "--cs-color-link": "#280D00"
     },
-    "hoa.plasma": {
-      "--cs-accent": "#E8506E",
-      "--cs-accent-strong": "#B02348",
-      "--cs-accent-bright": "#F7A8B8",
-      "--cs-accent-on": "#200812",
-      "--cs-accent-tint": "#FBE6EB",
-      "--cs-accent-ink": "#200812",
-      "--cs-accent-glow": "rgba(232, 80, 110, 0.5)",
-      "--cs-accent-grad-a": "#E8506E",
-      "--cs-accent-grad-b": "#F08A52",
-      "--cs-color-text-accent": "#B02348",
-      "--cs-color-link": "#B02348"
+    "thuy.mist": {
+      "--cs-accent": "#C0F5FC",
+      "--cs-accent-strong": "#5A8A90",
+      "--cs-accent-bright": "#CDF4F9",
+      "--cs-accent-on": "#13282B",
+      "--cs-accent-tint": "#EBFAFC",
+      "--cs-accent-ink": "#13282B",
+      "--cs-accent-glow": "rgba(192, 245, 252, 0.48)",
+      "--cs-accent-grad-a": "#C0F5FC",
+      "--cs-accent-grad-b": "#A3D768",
+      "--cs-color-text-accent": "#5A8A90",
+      "--cs-color-link": "#5A8A90"
     },
     "thuy": {
-      "--cs-accent": "#4E8E9B",
-      "--cs-accent-strong": "#2F5E6B",
-      "--cs-accent-bright": "#A6D0DA",
-      "--cs-accent-on": "#0E1D20",
-      "--cs-accent-tint": "#E6F1F2",
-      "--cs-accent-ink": "#0E1D20",
-      "--cs-accent-glow": "rgba(78, 142, 155, 0.5)",
-      "--cs-accent-grad-a": "#4E8E9B",
-      "--cs-accent-grad-b": "#7A9B57",
-      "--cs-color-text-accent": "#2F5E6B",
-      "--cs-color-link": "#2F5E6B"
+      "--cs-accent": "#2EDBF7",
+      "--cs-accent-strong": "#108EA0",
+      "--cs-accent-bright": "#99EEFF",
+      "--cs-accent-on": "#012A30",
+      "--cs-accent-tint": "#E7FBFF",
+      "--cs-accent-ink": "#012A30",
+      "--cs-accent-glow": "rgba(46, 219, 247, 0.48)",
+      "--cs-accent-grad-a": "#2EDBF7",
+      "--cs-accent-grad-b": "#A3D768",
+      "--cs-color-text-accent": "#108EA0",
+      "--cs-color-link": "#108EA0"
     },
     "thuy.ocean": {
-      "--cs-accent": "#2E5E7E",
-      "--cs-accent-strong": "#1C3E56",
-      "--cs-accent-bright": "#A9CCE0",
-      "--cs-accent-on": "#0B161E",
-      "--cs-accent-tint": "#E4EEF4",
-      "--cs-accent-ink": "#0B161E",
-      "--cs-accent-glow": "rgba(46, 94, 126, 0.55)",
-      "--cs-accent-grad-a": "#2E5E7E",
-      "--cs-accent-grad-b": "#4E8E9B",
-      "--cs-color-text-accent": "#1C3E56",
-      "--cs-color-link": "#1C3E56"
+      "--cs-accent": "#004554",
+      "--cs-accent-strong": "#011A21",
+      "--cs-accent-bright": "#A8D3E0",
+      "--cs-accent-on": "#10282F",
+      "--cs-accent-tint": "#EAFAFF",
+      "--cs-accent-ink": "#10282F",
+      "--cs-accent-glow": "rgba(0, 69, 84, 0.48)",
+      "--cs-accent-grad-a": "#004554",
+      "--cs-accent-grad-b": "#A3D768",
+      "--cs-color-text-accent": "#011A21",
+      "--cs-color-link": "#011A21"
     },
-    "thuy.mist": {
-      "--cs-accent": "#A7C4C9",
-      "--cs-accent-strong": "#5E7F85",
-      "--cs-accent-bright": "#C4DADD",
-      "--cs-accent-on": "#16262A",
-      "--cs-accent-tint": "#F0F6F7",
-      "--cs-accent-ink": "#16262A",
-      "--cs-accent-glow": "rgba(167, 196, 201, 0.55)",
-      "--cs-accent-grad-a": "#A7C4C9",
-      "--cs-accent-grad-b": "#4E8E9B",
-      "--cs-color-text-accent": "#4A686E",
-      "--cs-color-link": "#4A686E"
+    "moc.bamboo": {
+      "--cs-accent": "#E1F1C8",
+      "--cs-accent-strong": "#7C8965",
+      "--cs-accent-bright": "#E5F1D2",
+      "--cs-accent-on": "#212617",
+      "--cs-accent-tint": "#F4F9ED",
+      "--cs-accent-ink": "#212617",
+      "--cs-accent-glow": "rgba(225, 241, 200, 0.48)",
+      "--cs-accent-grad-a": "#E1F1C8",
+      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-color-text-accent": "#7C8965",
+      "--cs-color-link": "#7C8965"
     },
     "moc": {
-      "--cs-accent": "#7A9B57",
-      "--cs-accent-strong": "#4C6B35",
-      "--cs-accent-bright": "#A9C177",
-      "--cs-accent-on": "#18200F",
-      "--cs-accent-tint": "#EEF3E2",
-      "--cs-accent-ink": "#18200F",
-      "--cs-accent-glow": "rgba(122, 155, 87, 0.5)",
-      "--cs-accent-grad-a": "#7A9B57",
-      "--cs-accent-grad-b": "#E0632B",
-      "--cs-color-text-accent": "#4C6B35",
-      "--cs-color-link": "#4C6B35"
-    },
-    "moc.bamboo": {
-      "--cs-accent": "#A9C177",
-      "--cs-accent-strong": "#6B8442",
-      "--cs-accent-bright": "#C4D69B",
-      "--cs-accent-on": "#1C240F",
-      "--cs-accent-tint": "#F3F7E8",
-      "--cs-accent-ink": "#1C240F",
-      "--cs-accent-glow": "rgba(169, 193, 119, 0.55)",
-      "--cs-accent-grad-a": "#A9C177",
-      "--cs-accent-grad-b": "#7A9B57",
-      "--cs-color-text-accent": "#5B7237",
-      "--cs-color-link": "#5B7237"
+      "--cs-accent": "#A3D768",
+      "--cs-accent-strong": "#629122",
+      "--cs-accent-bright": "#C5ED9C",
+      "--cs-accent-on": "#182A00",
+      "--cs-accent-tint": "#EFFCE3",
+      "--cs-accent-ink": "#182A00",
+      "--cs-accent-glow": "rgba(163, 215, 104, 0.48)",
+      "--cs-accent-grad-a": "#A3D768",
+      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-color-text-accent": "#629122",
+      "--cs-color-link": "#629122"
     },
     "moc.forest": {
-      "--cs-accent": "#3E5A2E",
-      "--cs-accent-strong": "#263A1B",
-      "--cs-accent-bright": "#B3CE9B",
-      "--cs-accent-on": "#101708",
-      "--cs-accent-tint": "#E9EFE1",
-      "--cs-accent-ink": "#101708",
-      "--cs-accent-glow": "rgba(62, 90, 46, 0.55)",
-      "--cs-accent-grad-a": "#3E5A2E",
-      "--cs-accent-grad-b": "#7A9B57",
-      "--cs-color-text-accent": "#31481F",
-      "--cs-color-link": "#31481F"
+      "--cs-accent": "#1A4A01",
+      "--cs-accent-strong": "#051D00",
+      "--cs-accent-bright": "#B0D8A3",
+      "--cs-accent-on": "#162A0E",
+      "--cs-accent-tint": "#ECFDE7",
+      "--cs-accent-ink": "#162A0E",
+      "--cs-accent-glow": "rgba(26, 74, 1, 0.48)",
+      "--cs-accent-grad-a": "#1A4A01",
+      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-color-text-accent": "#051D00",
+      "--cs-color-link": "#051D00"
+    },
+    "kim.titanium": {
+      "--cs-accent": "#FEE5C7",
+      "--cs-accent-strong": "#947F65",
+      "--cs-accent-bright": "#FBE8D2",
+      "--cs-accent-on": "#2B2217",
+      "--cs-accent-tint": "#FDF5ED",
+      "--cs-accent-ink": "#2B2217",
+      "--cs-accent-glow": "rgba(254, 229, 199, 0.48)",
+      "--cs-accent-grad-a": "#FEE5C7",
+      "--cs-accent-grad-b": "#2EDBF7",
+      "--cs-color-text-accent": "#947F65",
+      "--cs-color-link": "#947F65"
     },
     "kim": {
-      "--cs-accent": "#BFB29B",
-      "--cs-accent-strong": "#7E7160",
-      "--cs-accent-bright": "#D8CCB6",
-      "--cs-accent-on": "#221C12",
-      "--cs-accent-tint": "#F3EFE6",
-      "--cs-accent-ink": "#221C12",
-      "--cs-accent-glow": "rgba(191, 178, 155, 0.5)",
-      "--cs-accent-grad-a": "#BFB29B",
-      "--cs-accent-grad-b": "#4E8E9B",
-      "--cs-color-text-accent": "#6E6151",
-      "--cs-color-link": "#6E6151"
+      "--cs-accent": "#F3B958",
+      "--cs-accent-strong": "#AC780B",
+      "--cs-accent-bright": "#FDD89F",
+      "--cs-accent-on": "#312002",
+      "--cs-accent-tint": "#FFF5E7",
+      "--cs-accent-ink": "#312002",
+      "--cs-accent-glow": "rgba(243, 185, 88, 0.48)",
+      "--cs-accent-grad-a": "#F3B958",
+      "--cs-accent-grad-b": "#2EDBF7",
+      "--cs-color-text-accent": "#AC780B",
+      "--cs-color-link": "#AC780B"
     },
     "kim.steel": {
-      "--cs-accent": "#9FA3A3",
-      "--cs-accent-strong": "#63696B",
-      "--cs-accent-bright": "#C2C6C6",
-      "--cs-accent-on": "#191D1E",
-      "--cs-accent-tint": "#EFF1F1",
-      "--cs-accent-ink": "#191D1E",
-      "--cs-accent-glow": "rgba(159, 163, 163, 0.5)",
-      "--cs-accent-grad-a": "#9FA3A3",
-      "--cs-accent-grad-b": "#BFB29B",
-      "--cs-color-text-accent": "#565C5E",
-      "--cs-color-link": "#565C5E"
-    },
-    "kim.titanium": {
-      "--cs-accent": "#8A7F72",
-      "--cs-accent-strong": "#56504A",
-      "--cs-accent-bright": "#D9CFC0",
-      "--cs-accent-on": "#171310",
-      "--cs-accent-tint": "#EFEBE5",
-      "--cs-accent-ink": "#171310",
-      "--cs-accent-glow": "rgba(138, 127, 114, 0.5)",
-      "--cs-accent-grad-a": "#8A7F72",
-      "--cs-accent-grad-b": "#BFB29B",
-      "--cs-color-text-accent": "#56504A",
-      "--cs-color-link": "#56504A"
+      "--cs-accent": "#503901",
+      "--cs-accent-strong": "#1F1400",
+      "--cs-accent-bright": "#DCC8A2",
+      "--cs-accent-on": "#2D220E",
+      "--cs-accent-tint": "#FEF6E7",
+      "--cs-accent-ink": "#2D220E",
+      "--cs-accent-glow": "rgba(80, 57, 1, 0.48)",
+      "--cs-accent-grad-a": "#503901",
+      "--cs-accent-grad-b": "#2EDBF7",
+      "--cs-color-text-accent": "#1F1400",
+      "--cs-color-link": "#1F1400"
     }
   }
 }

package/tokens/typography.css

@@ -5,8 +5,16 @@
  * usage (status hub: 11–24px chrome; hero display larger). Vietnamese-safe
  * line-heights (body 1.5 / heading 1.35) leave room for stacked diacritics. */
 :root {
-  /* Families */
+  /* Families.
+   * `display` is the opt-in headline face (Space Grotesk, self-hosted 300-700,
+   * Vietnamese subset included) used by cyberskill.world / Lumi. Nothing points
+   * at it by default: opt a scope in with `--cs-heading-family:
+   * var(--cs-font-family-display)` or the `.cs-display-face` utility. Space
+   * Grotesk has no 800, so extrabold headings clamp to 700 within that family
+   * (CSS does not hop to the next stack family for a missing weight); Be
+   * Vietnam Pro in the stack covers glyphs outside Space Grotesk's subsets. */
   --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
+  --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
   --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 
   /* Weights */

package/ui_kits/status-hub/README.md

@@ -1,6 +1,6 @@
 # Status Hub — UI kit
 
-A high-fidelity recreation of **CyberSkill Status Hub** (`status-hub@2`): the single-page portfolio dashboard that ships inside the design system repo (`docs/status/`). One page, three lenses.
+A high-fidelity recreation of **CyberSkill Status Hub** (`status-hub@2`): the single-page portfolio dashboard. One page, three lenses. (Gate / Health browsing for operators is Storybook **Status** / `_audit/run.html` — not this kit.)
 
 ## What it demonstrates
 - **Umber header** with the official Logo mark on an Ochre tile, the product title, and a warm-dark theme toggle (`data-theme` on the root — flip it to see the whole surface re-theme).
@@ -28,7 +28,6 @@ A high-fidelity recreation of **CyberSkill Status Hub** (`status-hub@2`): the si
 
 - `project.html` — full project detail view: breadcrumb, KPI stats, tasks, `cs-steps`, `cs-timeline`, `cs-dl` (dark toggle).
 
-- `identity-lab.html` — live Theme × Element switching on a product surface (15 element-variant pills · light/dark).
 
 - `status.css` — product component styles ported from the real status-hub stylesheet; **tokens come from the design system**, not redeclared.
 

package/ui_kits/status-hub/index.html

@@ -9,8 +9,8 @@
 <link rel="stylesheet" href="../../styles.css" />
 <link rel="stylesheet" href="status.css" />
 <style>html,body{margin:0;background:var(--cs-color-surface-page);min-height:100vh}</style>
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="data.js"></script>
 </head>

package/ui_kits/status-hub/settings.html

@@ -59,9 +59,12 @@
       <section class="panel">
         <h3 class="sec">Notifications</h3>
         <p class="hint">We keep it quiet — only what you ask for.</p>
-        <div class="toggle-row"><div><div class="t">Release notes</div><div class="d">A summary each time a project ships. Bilingual (EN + VN).</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
-        <div class="toggle-row"><div><div class="t">Blocked-project alerts</div><div class="d">Get pinged when a project moves to Blocked.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
-        <div class="toggle-row"><div><div class="t">Weekly velocity digest</div><div class="d">Tasks shipped per week, every Monday morning.</div></div><label class="cs-switch"><input type="checkbox" role="switch" /><span class="cs-switch__track"></span></label></div>
+        <div class="cs-scroll-area" style="max-block-size:220px;padding-inline-end:6px" tabindex="0" aria-label="Notification preferences">
+          <div class="toggle-row"><div><div class="t">Release notes</div><div class="d">A summary each time a project ships. Bilingual (EN + VN).</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t">Blocked-project alerts</div><div class="d">Get pinged when a project moves to Blocked.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t">Weekly velocity digest</div><div class="d">Tasks shipped per week, every Monday morning.</div></div><label class="cs-switch"><input type="checkbox" role="switch" /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t">Quiet hours</div><div class="d">No pings between 22:00 and 07:00 local time.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
+        </div>
       </section>
 
       <section class="danger">

package/ui_kits/website/chat.html

@@ -30,8 +30,8 @@
   .lumi-answer-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
   @media (max-width: 820px) { .lumi-page { grid-template-columns: 1fr; } .lumi-side { display: none; } }
 </style>
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>

package/ui_kits/website/index.html

@@ -9,8 +9,8 @@
 <link rel="stylesheet" href="../../styles.css" />
 <link rel="stylesheet" href="site.css" />
 <style>html,body{margin:0}</style>
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="copy.js"></script>
 </head>