diff --git a/apps/web/bun.lock b/apps/web/bun.lock
index f6993fc3..494c48dc 100644
--- a/apps/web/bun.lock
+++ b/apps/web/bun.lock
@@ -5,7 +5,7 @@
     "": {
       "name": "@hraness/slopcamera-web",
       "dependencies": {
-        "@hraness/design-kit": "github:hraness/design-kit#v0.23.0",
+        "@hraness/design-kit": "github:hraness/design-kit#v0.24.0",
         "@hraness/design-kit-articles": "github:hraness/design-kit#v0.21.0",
         "@hraness/design-kit-status": "github:hraness/design-kit#v0.21.0",
         "@hraness/site-footer": "github:hraness/site-footer#v0.20.0",
@@ -71,7 +71,7 @@
 
     "@emnapi/runtime": ["@emnapi/runtime@1.11.3", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA=="],
 
-    "@hraness/design-kit": ["@hraness/design-kit@github:hraness/design-kit#585fba2", { "dependencies": { "@hugeicons/core-free-icons": "4.2.3", "@stylexjs/stylex": "0.19.0", "motion": "12.42.0", "next-themes": "0.4.6", "react-aria-components": "1.19.0", "recharts": "3.8.0", "sugar-high": "^1.2.1", "web-haptics": "0.0.6" }, "peerDependencies": { "@hraness/ui": ">=0.5.16 <0.6.0", "react": ">=18 <20", "react-dom": ">=18 <20" }, "optionalPeers": ["@hraness/ui"] }, "hraness-design-kit-585fba2", "sha512-VlxOg8iAQ59LzbkBnt1EB1ikiu8jEuxku9yK+skfuozYtFFxEq9/JHE1xiyYHzSR0EmNCMKt0AGJjpuTIief9w=="],
+    "@hraness/design-kit": ["@hraness/design-kit@github:hraness/design-kit#cd5d1db", { "dependencies": { "@hugeicons/core-free-icons": "4.2.3", "@stylexjs/stylex": "0.19.0", "motion": "12.42.0", "next-themes": "0.4.6", "react-aria-components": "1.19.0", "recharts": "3.8.0", "sugar-high": "^1.2.1", "web-haptics": "0.0.6" }, "peerDependencies": { "@hraness/ui": ">=0.5.16 <0.6.0", "react": ">=18 <20", "react-dom": ">=18 <20" }, "optionalPeers": ["@hraness/ui"] }, "hraness-design-kit-cd5d1db", "sha512-NuGRWXbkKXYkhC4IMohklgwOfAcguPUcETVflhzpUAklPtxVi5GltVMcchk52yNYX0oN5ZRrlUqo2FK8Ni+fHA=="],
 
     "@hraness/design-kit-articles": ["@hraness/design-kit@github:hraness/design-kit#4c3f7c9", { "dependencies": { "@hugeicons/core-free-icons": "4.2.3", "@stylexjs/stylex": "0.19.0", "motion": "12.42.0", "next-themes": "0.4.6", "react-aria-components": "1.19.0", "recharts": "3.8.0", "sugar-high": "^1.2.1", "web-haptics": "0.0.6" }, "peerDependencies": { "@hraness/ui": ">=0.5.16 <0.6.0", "react": ">=18 <20", "react-dom": ">=18 <20" }, "optionalPeers": ["@hraness/ui"] }, "hraness-design-kit-4c3f7c9", "sha512-7SfYsa39IMWkb67vXWBK5xJ5l7nrotVERD/KnhogvJObxLBfvxLLl6qBY9Q6QK0uxBE5LTzRT/huciboQf91nw=="],
 
diff --git a/apps/web/package.json b/apps/web/package.json
index 96af3716..64142502 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -6,7 +6,7 @@
   "type": "module",
   "packageManager": "bun@1.3.14",
   "dependencies": {
-    "@hraness/design-kit": "github:hraness/design-kit#v0.23.0",
+    "@hraness/design-kit": "github:hraness/design-kit#v0.24.0",
     "@hraness/design-kit-articles": "github:hraness/design-kit#v0.21.0",
     "@hraness/design-kit-status": "github:hraness/design-kit#v0.21.0",
     "@hraness/site-footer": "github:hraness/site-footer#v0.20.0",
diff --git a/apps/web/scripts/build-site.ts b/apps/web/scripts/build-site.ts
index 30e9e8b1..82a35874 100644
--- a/apps/web/scripts/build-site.ts
+++ b/apps/web/scripts/build-site.ts
@@ -23,7 +23,7 @@ import { renderStatusPage } from "../src/status-page-content"
 import type { BlogPageContent, SiteAssets } from "../src/site-content"
 
 const packages = [
-  { name: "@hraness/design-kit", version: "0.23.0" },
+  { name: "@hraness/design-kit", version: "0.24.0" },
   { name: "@hraness/site-footer", version: "0.20.0" },
   { name: "@hraness/ui", version: "0.5.16" },
 ] as const
diff --git a/apps/web/scripts/site-contract.test.ts b/apps/web/scripts/site-contract.test.ts
index 509e1be1..1e6c374d 100644
--- a/apps/web/scripts/site-contract.test.ts
+++ b/apps/web/scripts/site-contract.test.ts
@@ -37,7 +37,7 @@ function completeFixture() {
   const finalCss = artifact(`assets/site-${digest}.css`, ".fixture{display:grid}")
   // Deliberately make canonical identity order differ from package name order.
   const packages = [
-    { manifestSha256: "8".repeat(64), name: "@hraness/design-kit", version: "0.23.0" },
+    { manifestSha256: "8".repeat(64), name: "@hraness/design-kit", version: "0.24.0" },
     { manifestSha256: "e".repeat(64), name: "@hraness/site-footer", version: "0.20.0" },
     { manifestSha256: "a".repeat(64), name: "@hraness/ui", version: "0.5.16" },
   ]
diff --git a/apps/web/scripts/site-contract.ts b/apps/web/scripts/site-contract.ts
index 971ac15b..a288dcfe 100644
--- a/apps/web/scripts/site-contract.ts
+++ b/apps/web/scripts/site-contract.ts
@@ -15,7 +15,7 @@ export const siteSha256 = (value: string | Uint8Array): string => createHash("sh
 const foundationRoot = "graphs/site-foundation/"
 const maxArtifactBytes = 16 * 1024 * 1024
 const releases = [
-  { name: "@hraness/design-kit", version: "0.23.0" },
+  { name: "@hraness/design-kit", version: "0.24.0" },
   { name: "@hraness/site-footer", version: "0.20.0" },
   { name: "@hraness/ui", version: "0.5.16" },
 ] as const
diff --git a/apps/web/site.test.ts b/apps/web/site.test.ts
index 39304049..2c6c2f5e 100644
--- a/apps/web/site.test.ts
+++ b/apps/web/site.test.ts
@@ -1377,7 +1377,7 @@ describe("static Slopcamera site", () => {
     const localLockfile = await readFile(join(appDirectory, "bun.lock"), "utf8")
 
     expect(manifest.dependencies).toEqual({
-      "@hraness/design-kit": "github:hraness/design-kit#v0.23.0",
+      "@hraness/design-kit": "github:hraness/design-kit#v0.24.0",
       "@hraness/design-kit-articles": "github:hraness/design-kit#v0.21.0",
       "@hraness/design-kit-status": "github:hraness/design-kit#v0.21.0",
       "@hraness/site-footer": "github:hraness/site-footer#v0.20.0",
@@ -1406,7 +1406,7 @@ describe("static Slopcamera site", () => {
     })
     expect(rootManifest.workspaces?.catalog?.["posthog-js"]).toBeUndefined()
     expect(rootManifest.workspaces?.catalog?.["@hraness/design-kit"]).toBeUndefined()
-    expect(localLockfile).toContain('"@hraness/design-kit": "github:hraness/design-kit#v0.23.0"')
+    expect(localLockfile).toContain('"@hraness/design-kit": "github:hraness/design-kit#v0.24.0"')
     expect(localLockfile).toContain(
       '"@hraness/site-footer": "github:hraness/site-footer#v0.20.0"',
     )
diff --git a/bun.lock b/bun.lock
index be5a4472..7741a551 100644
--- a/bun.lock
+++ b/bun.lock
@@ -52,7 +52,7 @@
       "name": "@hraness/slopcamera-web",
       "version": "0.0.0",
       "dependencies": {
-        "@hraness/design-kit": "github:hraness/design-kit#v0.23.0",
+        "@hraness/design-kit": "github:hraness/design-kit#v0.24.0",
         "@hraness/design-kit-articles": "github:hraness/design-kit#v0.21.0",
         "@hraness/design-kit-status": "github:hraness/design-kit#v0.21.0",
         "@hraness/site-footer": "github:hraness/site-footer#v0.20.0",
@@ -188,7 +188,7 @@
 
     "@hraness/algal": ["@hraness/algal@github:hraness/algal#c46264a", { "bin": { "algal": "./cli.ts", "morphogen": "./cli.ts" } }, "hraness-algal-c46264a", "sha512-7NwCCh55A4RPdiCmfnvJJVumA1AU/3OA93rG3qEV3a/EjkiE9XBRZkbOdM81loFXvGmmBBqwRq4OtJXTY9aPgw=="],
 
-    "@hraness/design-kit": ["@hraness/design-kit@github:hraness/design-kit#585fba2", { "dependencies": { "@hugeicons/core-free-icons": "4.2.3", "@stylexjs/stylex": "0.19.0", "motion": "12.42.0", "next-themes": "0.4.6", "react-aria-components": "1.19.0", "recharts": "3.8.0", "sugar-high": "^1.2.1", "web-haptics": "0.0.6" }, "peerDependencies": { "@hraness/ui": ">=0.5.16 <0.6.0", "react": ">=18 <20", "react-dom": ">=18 <20" }, "optionalPeers": ["@hraness/ui"] }, "hraness-design-kit-585fba2", "sha512-VlxOg8iAQ59LzbkBnt1EB1ikiu8jEuxku9yK+skfuozYtFFxEq9/JHE1xiyYHzSR0EmNCMKt0AGJjpuTIief9w=="],
+    "@hraness/design-kit": ["@hraness/design-kit@github:hraness/design-kit#cd5d1db", { "dependencies": { "@hugeicons/core-free-icons": "4.2.3", "@stylexjs/stylex": "0.19.0", "motion": "12.42.0", "next-themes": "0.4.6", "react-aria-components": "1.19.0", "recharts": "3.8.0", "sugar-high": "^1.2.1", "web-haptics": "0.0.6" }, "peerDependencies": { "@hraness/ui": ">=0.5.16 <0.6.0", "react": ">=18 <20", "react-dom": ">=18 <20" }, "optionalPeers": ["@hraness/ui"] }, "hraness-design-kit-cd5d1db", "sha512-NuGRWXbkKXYkhC4IMohklgwOfAcguPUcETVflhzpUAklPtxVi5GltVMcchk52yNYX0oN5ZRrlUqo2FK8Ni+fHA=="],
 
     "@hraness/design-kit-articles": ["@hraness/design-kit@github:hraness/design-kit#4c3f7c9", { "dependencies": { "@hugeicons/core-free-icons": "4.2.3", "@stylexjs/stylex": "0.19.0", "motion": "12.42.0", "next-themes": "0.4.6", "react-aria-components": "1.19.0", "recharts": "3.8.0", "sugar-high": "^1.2.1", "web-haptics": "0.0.6" }, "peerDependencies": { "@hraness/ui": ">=0.5.16 <0.6.0", "react": ">=18 <20", "react-dom": ">=18 <20" }, "optionalPeers": ["@hraness/ui"] }, "hraness-design-kit-4c3f7c9", "sha512-7SfYsa39IMWkb67vXWBK5xJ5l7nrotVERD/KnhogvJObxLBfvxLLl6qBY9Q6QK0uxBE5LTzRT/huciboQf91nw=="],