diff --git a/docs/prototype/code-reader/openpencil/exports/react-hooks-custom.png b/docs/prototype/code-reader/openpencil/exports/react-hooks-custom.png
index 70f8c42..1b8f18a 100644
Binary files a/docs/prototype/code-reader/openpencil/exports/react-hooks-custom.png and b/docs/prototype/code-reader/openpencil/exports/react-hooks-custom.png differ
diff --git a/docs/prototype/code-reader/openpencil/exports/react-hooks-panel.png b/docs/prototype/code-reader/openpencil/exports/react-hooks-panel.png
index e86160b..4e405bf 100644
Binary files a/docs/prototype/code-reader/openpencil/exports/react-hooks-panel.png and b/docs/prototype/code-reader/openpencil/exports/react-hooks-panel.png differ
diff --git a/docs/prototype/code-reader/openpencil/react-hooks.js b/docs/prototype/code-reader/openpencil/react-hooks.js
index bb232c5..51e2d78 100644
--- a/docs/prototype/code-reader/openpencil/react-hooks.js
+++ b/docs/prototype/code-reader/openpencil/react-hooks.js
@@ -813,14 +813,15 @@ function hookCard(parent, w) {
 const HOOK = { label: "钩子", color: "#b180d7", icon: "fishing-hook" };
 const ORIGIN = { react: "#61dafb", library: "#e5c07b", own: "#89d185" };
 
-// React 自带钩子的作用，同 React 类型定义里钩子的分组：卡片左边第二个图标，中性灰，悬停显示名字
+// React 自带钩子的作用，同 React 类型定义里钩子的分组：卡片左边第二个图标，悬停显示名字。
+// 颜色借 Dark Modern 的语法色，和钩子紫分得开：状态同变量、引用同常量、性能同数字、上下文同类型、并发同字符串
 const ROLE = {
-  state: { label: "状态", icon: "toggle-right" },
-  effect: { label: "副作用", icon: "zap" },
-  ref: { label: "引用", icon: "anchor" },
-  perf: { label: "性能", icon: "sigma" },
-  context: { label: "上下文", icon: "share-2" },
-  concurrent: { label: "并发", icon: "hourglass" },
+  state: { label: "状态", icon: "toggle-right", color: "#9cdcfe" },
+  effect: { label: "副作用", icon: "zap", color: "#e5c07b" },
+  ref: { label: "引用", icon: "anchor", color: "#4fc1ff" },
+  perf: { label: "性能", icon: "sigma", color: "#b5cea8" },
+  context: { label: "上下文", icon: "share-2", color: "#4ec9b0" },
+  concurrent: { label: "并发", icon: "hourglass", color: "#ce9178" },
 };
 
 // 所有钩子卡片同一个标签列宽，最长的标签是上下文的「没有外层提供时」
@@ -879,7 +880,7 @@ function hookCall(parent, w, h) {
   const tint = h.own ? ORIGIN.own : h.lib ? ORIGIN.library : ORIGIN.react;
   const icons = [{ name: HOOK.icon, color: HOOK.color, tip: HOOK.label }];
   if (h.role)
-    icons.push({ name: h.role.icon, color: C.desc, tip: h.roleTip || h.role.label, bubble: h.bubble });
+    icons.push({ name: h.role.icon, color: h.role.color, tip: h.roleTip || h.role.label, bubble: h.bubble });
   const ctx = card(parent, HOOK, w, { name: h.name + " · " + h.target, fold: h.fold ? "closed" : null, labelW: HOOK_LABEL_W, tint, icons });
   const line = row(ctx.content, "Prop / 钩子", { gap: 12, align: "start" });
   const key = row(line, "Key", { width: ctx.labelW, height: 20 });
diff --git a/docs/prototype/code-reader/openpencil/react-hooks.op b/docs/prototype/code-reader/openpencil/react-hooks.op
index 776bccc..c5a4894 100644
--- a/docs/prototype/code-reader/openpencil/react-hooks.op
+++ b/docs/prototype/code-reader/openpencil/react-hooks.op
@@ -6931,7 +6931,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#9cdcfe"
                                                 }
                                               ]
                                             },
@@ -9213,7 +9213,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#e5c07b"
                                                 }
                                               ]
                                             }
@@ -15066,7 +15066,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#4ec9b0"
                                                 }
                                               ]
                                             }
@@ -17497,7 +17497,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#9cdcfe"
                                                 }
                                               ]
                                             }
@@ -19331,7 +19331,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#9cdcfe"
                                                 }
                                               ]
                                             }
@@ -21549,7 +21549,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#ce9178"
                                                 }
                                               ]
                                             }
@@ -22501,7 +22501,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#4fc1ff"
                                                 }
                                               ]
                                             }
@@ -24316,7 +24316,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#4fc1ff"
                                                 }
                                               ]
                                             }
@@ -26384,7 +26384,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#b5cea8"
                                                 }
                                               ]
                                             }
@@ -28168,7 +28168,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#b5cea8"
                                                 }
                                               ]
                                             }
@@ -30266,7 +30266,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#e5c07b"
                                                 }
                                               ]
                                             }
@@ -32072,7 +32072,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#e5c07b"
                                                 }
                                               ]
                                             }
@@ -33656,7 +33656,7 @@
                                               "fill": [
                                                 {
                                                   "type": "solid",
-                                                  "color": "#9d9d9d"
+                                                  "color": "#e5c07b"
                                                 }
                                               ]
                                             }