diff --git a/stash-web/package-lock.json b/stash-web/package-lock.json
index 7a7d8d7..a526936 100644
--- a/stash-web/package-lock.json
+++ b/stash-web/package-lock.json
@@ -8,6 +8,7 @@
       "name": "stash-web",
       "version": "0.0.0",
       "dependencies": {
+        "@stash/ui": "file:../../stash-ui",
         "react": "^19.3.1",
         "react-dom": "^19.3.1"
       },
@@ -21,6 +22,25 @@
         "vite": "^8.3.4"
       }
     },
+    "../../stash-ui": {
+      "name": "@stash/ui",
+      "version": "0.1.0",
+      "devDependencies": {
+        "@types/react": "^19.3.0",
+        "@types/react-dom": "^19.3.0",
+        "@vitejs/plugin-react": "^6.1.2",
+        "oxlint": "^1.88.0",
+        "playwright-core": "^1.64.1",
+        "react": "^19.3.1",
+        "react-dom": "^19.3.1",
+        "typescript": "~6.0.3",
+        "vite": "^8.3.4"
+      },
+      "peerDependencies": {
+        "react": ">=19",
+        "react-dom": ">=19"
+      }
+    },
     "node_modules/@oxc-project/types": {
       "version": "0.154.0",
       "resolved": "https://registry.npmmirror.com/@oxc-project/types/-/types-0.154.0.tgz",
@@ -616,6 +636,10 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@stash/ui": {
+      "resolved": "../../stash-ui",
+      "link": true
+    },
     "node_modules/@types/node": {
       "version": "24.19.2",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-24.19.2.tgz",
diff --git a/stash-web/package.json b/stash-web/package.json
index 37c7667..df086d3 100644
--- a/stash-web/package.json
+++ b/stash-web/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@stash/ui": "file:../../stash-ui",
     "react": "^19.3.1",
     "react-dom": "^19.3.1"
   },
diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index ad0c908..7734ff0 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -1,1652 +1,408 @@
-/* ============================================================
-   页面背景：复刻 Alright 的 .site-background
-   ============================================================ */
-
-.site-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 65vh;
-  background-image: url('./assets/site-bg.jpg');
-  background-size: cover;
-  background-position: top center;
-  background-repeat: no-repeat;
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* 底部 80% 高度做一层「底色 → 透明」的渐变，让图片自然融进页面背景 */
-.site-background::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 80%;
-  background-image: linear-gradient(0deg, var(--bg-color) 0%, rgba(0, 0, 0, 0) 100%);
-}
-
-/* ============================================================
-   全局容器
-   ============================================================ */
+/* 页面级样式：只保留「组件库没有」的部分（背景、外壳、封面比例、正文版式）。
+   颜色 / 间距 / 字号全部取自 @stash/ui 的令牌，组件内部样式不要再在这里覆盖。 */
 
 .app {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+  background-color: var(--su-bg-page);
 }
 
-/* 版心：顶栏与内容区共用，保证左右边界一?*/
-.layout-container {
-  width: 100%;
-  max-width: var(--layout-max-width);
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.card-box {
-  background-color: var(--card-bg);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-main);
-  box-shadow: var(--shadow-card);
-}
-
-/* 仅屏幕阅读器可见 */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* ============================================================
-   顶部栏：品牌 + 运行信息 + 操作图标
-   ============================================================ */
-
-.site-header {
+/* 顶部背景图：固定 65vh，底部渐隐到页面底色 */
+.site-background {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: var(--top-nav-height);
-  background-color: var(--card-bg);
-  border-bottom: 1px solid var(--border-color);
-  z-index: 200;
+  inset: 0 0 auto;
+  z-index: -1;
+  height: 65vh;
+  background: url('./assets/site-bg.jpg') center top / cover no-repeat;
+  opacity: 0.16;
+  mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
 }
 
 .site-header-inner {
-  height: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
+  gap: var(--su-space-6);
+  height: 64px;
 }
 
 .site-brand {
   display: flex;
   align-items: center;
-  gap: 10px;
-  flex-shrink: 0;
+  gap: var(--su-space-2);
 }
 
 .site-brand-mark {
+  display: grid;
+  place-items: center;
   width: 32px;
   height: 32px;
-  border-radius: 50%;
-  background-color: var(--text-main);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: 700;
+  border-radius: var(--su-radius-sm);
+  background-color: var(--su-color-primary);
+  color: var(--su-white);
+  font-size: var(--su-font-size-md);
+  font-weight: var(--su-font-weight-strong);
 }
 
 .site-brand-name {
-  font-size: 18px;
-  font-weight: 800;
+  font-size: var(--su-font-size-lg);
+  line-height: var(--su-line-height-lg);
   letter-spacing: 0.04em;
-  color: var(--text-main);
 }
 
-/* 中间运行信息 */
-
 .header-info {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  min-width: 0;
-  font-size: 14px;
-  color: var(--text-sub);
+  flex: 1;
+  justify-content: center;
 }
 
-.header-info-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
-}
-
-.header-info-tag {
-  padding: 2px 8px;
-  border-radius: 4px;
-  background-color: var(--primary-soft);
-  color: var(--primary-color);
-  font-size: 12px;
-}
-
-.header-info-tag.is-green {
-  background-color: rgba(74, 189, 134, 0.12);
-  color: var(--green);
-}
-
-.header-info-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* 右侧图标 */
-
 .header-actions {
+  margin-left: auto;
+}
+
+.content {
   display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-shrink: 0;
-  color: var(--text-sub);
+  flex-direction: column;
+  gap: var(--su-space-4);
+  padding-top: var(--su-space-2);
 }
 
-.header-icon-button {
-  width: 34px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 6px;
-  border-radius: 50%;
-  cursor: pointer;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-
-.header-icon-button:hover {
-  background-color: var(--border-strong);
-  color: var(--text-main);
-}
-
-.header-icon-button .iconfont {
-  font-size: 19px;
-}
-
-/* ============================================================
-   搜索框：固定悬浮在顶栏下方居?   ============================================================ */
-
-/* 固定悬浮、相对整页居中，与设计稿一?*/
+/* 搜索框吸在页头下方，滚动时内容从它下面穿过 */
 .search-row {
-  position: fixed;
-  top: 76px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: min(480px, calc(100vw - 48px));
-  height: 44px;
-  z-index: 100;
-}
-
-.search-bar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  height: 100%;
-  padding: 0 12px;
-}
-
-.search-icon {
-  flex-shrink: 0;
-  font-size: 16px;
-  color: var(--text-sub);
-}
-
-.search-input {
-  flex: 1;
-  min-width: 0;
-  height: 36px;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: 14px;
-  color: var(--text-main);
-}
-
-.search-input::placeholder {
-  color: var(--text-muted);
-}
-
-.search-clear {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-
-.search-clear:hover {
-  background-color: var(--border-strong);
-  color: var(--text-main);
-}
-
-.search-clear .iconfont {
-  font-size: 14px;
-}
-
-/* ============================================================
-   双列布局：左侧栏 + 右侧内容
-   ============================================================ */
-
-.layout {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  max-width: var(--layout-max-width);
-  margin: var(--top-nav-height) auto 0;
-  height: calc(100vh - var(--top-nav-height));
-  padding: 36px 20px 0;
-  display: grid;
-  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
-  gap: 20px;
-  align-items: stretch;
+  position: sticky;
+  top: 64px;
+  z-index: var(--su-z-header);
+  padding: var(--su-space-2) 0;
+  background-color: color-mix(in srgb, var(--su-bg-page) 88%, transparent);
+  backdrop-filter: blur(8px);
 }
 
 .sidebar {
+  position: sticky;
+  top: 84px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  min-height: 0;
-  /* 与右侧首个分区卡片对?*/
-  margin-top: var(--content-top-offset);
+  gap: var(--su-space-3);
+  padding: var(--su-space-4) var(--su-space-4) var(--su-space-4) 0;
 }
 
-/* ---------- 用户资料?---------- */
+.profile-card,
+.service-panel,
+.nav-card {
+  flex-shrink: 0;
+}
 
 .profile-card {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 6px;
-  padding: 18px 14px 14px;
+  gap: var(--su-space-2);
   text-align: center;
-  flex-shrink: 0;
-}
-
-.profile-avatar {
-  position: relative;
-  width: 64px;
-  height: 64px;
-  margin-bottom: 4px;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  background: linear-gradient(135deg, #dfe4ff, #c9d0ff);
-  color: var(--primary-color);
-}
-
-.profile-avatar .iconfont {
-  font-size: 34px;
-}
-
-.profile-badge {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid var(--card-bg);
-  background-color: var(--orange);
-  color: #fff;
-  display: grid;
-  place-items: center;
-  font-size: 10px;
-  font-weight: 700;
-}
-
-.profile-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-main);
-  line-height: 1.2;
-}
-
-.profile-role {
-  padding: 1px 8px;
-  border: 1px solid var(--border-color);
-  border-radius: 999px;
-  font-size: 12px;
-  color: var(--text-sub);
-}
-
-.profile-bio {
-  margin: 2px 0 0;
-  font-size: 12px;
-  line-height: 1.55;
-  color: var(--text-sub);
-}
-
-.profile-location {
-  margin-top: 2px;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-/* ---------- 本地服务面板 ---------- */
-
-.service-panel {
-  padding: 12px 14px;
-  flex-shrink: 0;
-}
-
-.service-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.service-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-main);
-}
-
-.service-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background-color: var(--border-strong);
-  font-size: 12px;
-  color: var(--text-sub);
-}
-
-.service-pill.is-on {
-  background-color: rgba(34, 197, 94, 0.12);
-  color: var(--green);
 }
 
 .service-stats {
-  display: grid;
-  gap: 6px;
-  margin-top: 10px;
-}
-
-.service-stats > div {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  font-size: 12px;
-}
-
-.service-stats dt {
-  flex-shrink: 0;
-  color: var(--text-sub);
-}
-
-.service-stats dd {
-  margin: 0;
-  overflow: hidden;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-main);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.service-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.service-action {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding: 6px 8px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background-color: var(--card-bg);
-  color: var(--text-sub);
-  font-size: 12px;
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    border-color 0.2s,
-    color 0.2s,
-    background-color 0.2s;
-}
-
-.service-action:not(:disabled):hover {
-  border-color: var(--primary-color);
-  background-color: var(--primary-soft);
-  color: var(--primary-color);
-}
-
-.service-action:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.service-action .iconfont {
-  font-size: 14px;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: var(--border-strong);
-  flex-shrink: 0;
-  transition:
-    background-color 0.2s,
-    box-shadow 0.2s;
-}
-
-.status-dot.is-on {
-  background-color: var(--green);
-  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
-}
-
-/* ---------- 分类导航 ---------- */
-
-.nav-card {
-  padding: 8px;
-  flex-shrink: 0;
-}
-
-.nav-group {
-  list-style: none;
-}
-
-.nav-item {
-  margin-bottom: 4px;
-}
-
-.nav-item:last-child {
-  margin-bottom: 0;
-}
-
-.nav-link {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 9px 12px;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-sub);
-  cursor: pointer;
-  text-align: left;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-
-.nav-link:hover,
-.nav-link.active {
-  background-color: var(--primary-soft);
-  color: var(--primary-color);
-}
-
-/* 折叠箭头：复刻主题的 6×6 边框 V 形，靠右对齐 */
-.nav-link.has-children::after {
-  content: '';
-  flex-shrink: 0;
-  width: 6px;
-  height: 6px;
-  border-left: 1px solid currentColor;
-  border-bottom: 1px solid currentColor;
-  opacity: 0.4;
-  transform: rotate(315deg);
-  transition:
-    transform 0.3s,
-    opacity 0.3s;
-}
-
-.nav-link.has-children:hover::after {
-  opacity: 0.7;
-}
-
-.nav-item.open > .nav-link.has-children::after {
-  opacity: 0.7;
-  transform: rotate(135deg);
-}
-
-/* 子菜单展开：用 grid-template-rows 0fr → 1fr 做高度动画，
-   高度精确贴合内容，全程 overflow: hidden，不会出现滚动条 */
-.submenu-wrap {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.28s ease;
-}
-
-.submenu-wrap.is-open {
-  grid-template-rows: 1fr;
-}
-
-.submenu {
-  list-style: none;
-  min-height: 0;
-  padding-left: 12px;
-  overflow: hidden;
-}
-
-.submenu .nav-link {
-  padding: 7px 12px;
-  font-size: 12px;
-}
-
-.submenu .nav-link > span:first-child {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ============================================================
-   右侧内容?   ============================================================ */
-
-.content {
-  position: relative;
   display: flex;
   flex-direction: column;
-  min-height: 0;
-  /* 让出悬浮的搜索框；侧栏与遮罩层都按同一个变量对?*/
-  padding-top: var(--content-top-offset);
+  gap: var(--su-space-2);
+  margin: var(--su-space-3) 0;
 }
 
-/* 滚动后才淡入的顶部渐隐层?   卡片滚到容器顶边时被硬切会很难看，用一层背景色渐变把它柔化?*/
-.content-veil {
-  position: absolute;
-  top: var(--content-top-offset);
-  right: 0;
-  left: 0;
-  height: 32px;
-  pointer-events: none;
-  opacity: 0;
-  background: linear-gradient(to bottom, var(--bg-color) 0%, transparent 100%);
-  transition: opacity 0.2s ease;
-  z-index: 5;
+.service-host {
+  max-width: 140px;
 }
 
-.content-veil.is-visible {
-  opacity: 1;
-}
-
-.content-scroll {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding-right: 4px;
-  padding-bottom: 40px;
-  scroll-behavior: smooth;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.content-scroll::-webkit-scrollbar {
-  display: none;
-  width: 0;
-}
-
-/* ---------- 首页：分区卡?---------- */
-
 .home-view {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-}
-
-.section-card {
-  background-color: var(--card-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: var(--shadow-card);
+  gap: var(--su-space-4);
 }
 
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.section-title-wrapper {
-  display: flex;
-  align-items: center;
+  margin-bottom: var(--su-space-4);
 }
 
 .section-bar {
   width: 4px;
   height: 16px;
-  margin-right: 8px;
-  border-radius: 2px;
-  background-color: var(--primary-color);
+  border-radius: var(--su-radius-pill);
 }
 
-/* 标题容器设为 relative，角标才能贴在标题右上角 */
-.section-title-box {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.2;
-  color: var(--text-main);
-}
-
-.count-badge {
-  position: absolute;
-  top: -8px;
-  right: -18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 16px;
-  min-width: 16px;
-  padding: 0 4px;
-  border-radius: 8px;
-  background-color: var(--danger);
-  box-shadow: 0 1px 3px rgba(255, 77, 79, 0.3);
-  color: #fff;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.section-more {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 6px;
-  border-radius: 4px;
-  color: var(--text-muted);
-  font-size: 16px;
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-
-.section-more:hover {
-  background-color: var(--border-color);
-  color: var(--text-sub);
-}
-
-.section-empty {
-  padding: 8px 0;
-  font-size: 14px;
-  color: var(--text-sub);
-}
-
-/* ---------- 应用网格 ---------- */
-
-.app-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.app-grid--detail {
-  gap: 16px;
-}
+/* ---------- 应用条目 ---------- */
 
 .app-card {
   display: flex;
   align-items: center;
-  gap: 15px;
-  padding: 6px 0;
-  /* 和主题的作者条目一样：没有底色、描边、阴影，就是一行内容 */
-  background: none;
-  border: 0;
-  color: inherit;
+  gap: var(--su-space-3);
+  padding: var(--su-space-2);
+  border-radius: var(--su-radius-sm);
+  transition: background-color var(--su-duration-fast) var(--su-ease-in-out);
 }
 
-.app-card:hover .app-card-name {
-  color: var(--primary-color);
-}
-
-/* 48px 圆形头像 + 右下角认证角标，对应主题 .flex-avatar / .avatar-badge.badge_5 */
-.app-card-avatar {
-  position: relative;
-  width: 48px;
-  height: 48px;
-  flex-shrink: 0;
-  border-radius: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--primary-soft);
-  color: var(--primary-color);
-  font-size: 18px;
-  font-weight: 700;
-}
-
-/* 有封面图时直接铺满圆形头像 */
-.app-card-avatar img {
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  object-fit: cover;
-  display: block;
-}
-
-.app-card-verify {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 10px;
-  height: 10px;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9InVybCgjYSkiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yOC4yNSAxMS44NDRhMi4yMzIgMi4yMzIgMCAwIDEgMCAzLjE1NkwxNy41ODggMjUuNjYyYTIuMzggMi4zOCAwIDAgMS0zLjM2NiAwbC01LjY0NC01LjY0NGEyLjIzMiAyLjIzMiAwIDAgMSAzLjE1Ni0zLjE1NWw0LjE3IDQuMTcgOS4xOS05LjE4OWEyLjIzMiAyLjIzMiAwIDAgMSAzLjE1NiAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMzEuNzE0IiB4Mj0iLTMuNzMxIiB5MT0iLjg1NyIgeTI9IjExLjgzOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkI3NEEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRDkwMEYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
+.app-card:hover {
+  background-color: var(--su-bg-subtle);
 }
 
 .app-card-info {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  min-width: 0;
-  flex: 1 1 auto;
-  overflow: hidden;
-}
-
-.app-card-title {
-  display: flex;
-  align-items: center;
-  gap: 6px;
+  gap: 2px;
   min-width: 0;
 }
 
-.app-card-name {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-  color: var(--text-main);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+/* ---------- 封面卡（海报 / 图文） ---------- */
 
-/* 名字后的 HOT 徽标：主题里是 24×16 的图形，不是文字 */
-.app-card-badge {
-  position: relative;
-  top: 2px;
-  display: inline-block;
-  flex-shrink: 0;
-  width: 24px;
-  height: 16px;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTAgNGE0IDQgMCAwIDEgNC00aDQyYTQgNCAwIDAgMSA0IDR2MTNhNCA0IDAgMCAxLTQgNEg0YTQgNCAwIDAgMS00LTRWNFoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4yODYgOS4zNDVoOC4wM1Y0LjE3NmgyLjI4NnYxMi42NDhoLTIuMjg3di01LjE2OUg2LjI4NnY1LjE2OUg0VjQuMTc2aDIuMjg2djUuMTY5Wk0zMi41MTkgMTEuNzA4YzAgLjc3LS4xMzIgMS40NzktLjM5NiAyLjEyNmE1LjAzOSA1LjAzOSAwIDAgMS0xLjEgMS42NzUgNS4wMiA1LjAyIDAgMCAxLTEuNjcgMS4xMDNBNS41MjYgNS41MjYgMCAwIDEgMjcuMjYgMTdoLTMuMDk1Yy0uNzU3IDAtMS40NTctLjEzLTIuMTAyLS4zODhhNS4wMiA1LjAyIDAgMCAxLTEuNjcxLTEuMTAyIDUuMTUyIDUuMTUyIDAgMCAxLTEuMTA4LTEuNjc2IDUuNTc2IDUuNTc2IDAgMCAxLS4zOTYtMi4xMjZWOS4yOTJjMC0uNzY1LjEzMi0xLjQ3LjM5Ni0yLjExN2E1LjAzIDUuMDMgMCAwIDEgMS4xMDgtMS42NzYgNS4wMjIgNS4wMjIgMCAwIDEgMS42Ny0xLjEwMkE1LjQ4NCA1LjQ4NCAwIDAgMSAyNC4xNjYgNGgzLjA5NWMuNzU2IDAgMS40NTQuMTMyIDIuMDkzLjM5N2E1LjAyMiA1LjAyMiAwIDAgMSAxLjY3IDEuMTAyIDQuOTIyIDQuOTIyIDAgMCAxIDEuMSAxLjY3NmMuMjY0LjY0Ny4zOTYgMS4zNTIuMzk2IDIuMTE3djIuNDE2Wm0tMi4yODctMi40MTZjMC0uNDUzLS4wNzMtLjg2Mi0uMjItMS4yMjZhMi41ODkgMi41ODkgMCAwIDAtLjYwNi0uOTQ0IDIuNTggMi41OCAwIDAgMC0uOTQxLS42MDggMy4xODYgMy4xODYgMCAwIDAtMS4yMDUtLjIyaC0zLjA5NWMtLjQ0NiAwLS44NTMuMDczLTEuMjIzLjIyYTIuNjgxIDIuNjgxIDAgMCAwLS45NC42MDhjLS4yNjUuMjU5LS40Ny41NzMtLjYxNi45NDQtLjE0MS4zNjQtLjIxMS43NzMtLjIxMSAxLjIyNnYyLjQxNmMwIC40NTMuMDcuODY1LjIxIDEuMjM1LjE0Ny4zNjUuMzUyLjY4LjYxNi45NDQuMjY0LjI1OC41NzguNDYxLjk0MS42MDhhMy40IDMuNCAwIDAgMCAxLjIyMy4yMTJoMy4wNzhjLjQ0NSAwIC44NS0uMDcgMS4yMTMtLjIxMi4zNy0uMTQ3LjY4Ni0uMzUuOTUtLjYwOC4yNjQtLjI2NS40NjYtLjU4LjYwNy0uOTQ0LjE0Ni0uMzcuMjItLjc4Mi4yMi0xLjIzNVY5LjI5MlpNNDYgNi40N2gtNS4wMzl2MTAuMzU0aC0yLjI4NlY2LjQ2OWgtNS4wNDhWNC4xNzZINDZWNi40N1oiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSI0NC4wNDgiIHgyPSI5LjEwNyIgeTE9Ii41IiB5Mj0iMjYuMjc2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGN0I1MSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGMEUwRSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-
-.app-card-desc {
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* ---------- 海报网格 ---------- */
-
-.poster-grid {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.poster-grid--detail {
-  gap: 14px;
-}
-
-.poster-card {
+.cover-card {
   position: relative;
   display: block;
   width: 100%;
-  margin: 0;
-  padding: 0;
-  border: none;
+  overflow: hidden;
+  border-radius: var(--su-radius-sm);
+  background-color: var(--su-bg-light);
+  text-align: left;
+}
+
+.cover {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+  transition: transform var(--su-duration-base) var(--su-ease-in-out);
+}
+
+.cover--poster {
   aspect-ratio: 2 / 3;
-  border-radius: 8px;
-  overflow: hidden;
-  background-color: var(--border-strong);
-  text-align: left;
-  font: inherit;
-  cursor: pointer;
-  transition: transform 0.2s ease;
 }
 
-.poster-card:hover {
-  transform: translateY(-2px);
-}
-
-.poster-cover {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.poster-caption {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 20px 8px 8px;
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.85) 0%,
-    rgba(0, 0, 0, 0.4) 60%,
-    transparent 100%
-  );
-  color: #fff;
-}
-
-.poster-title {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.3;
-}
-
-/* ---------- 首页图文网格 ---------- */
-
-.article-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.article-card {
-  position: relative;
-  display: block;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border: none;
+.cover--article {
   aspect-ratio: 4 / 3;
-  border-radius: 6px;
-  overflow: hidden;
-  background-color: var(--border-strong);
-  text-align: left;
-  font: inherit;
-  cursor: pointer;
-  transition: transform 0.2s ease;
 }
 
-.article-card:hover {
-  transform: translateY(-2px);
+.cover-card:hover .cover {
+  transform: scale(1.04);
 }
 
-.article-cover {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.article-caption {
+.cover-caption {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 16px 6px 6px;
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.8) 0%,
-    rgba(0, 0, 0, 0.3) 70%,
-    transparent 100%
-  );
-  color: #fff;
-}
-
-.article-title {
+  inset: auto 0 0;
   display: -webkit-box;
+  overflow: hidden;
+  padding: 24px var(--su-space-2) var(--su-space-2);
+  background: linear-gradient(transparent, rgb(0 0 0 / 62%));
+  color: var(--su-white);
+  font-size: var(--su-font-size-sm);
+  line-height: var(--su-line-height-sm);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  overflow: hidden;
-  font-size: 12px;
-  line-height: 1.3;
-}
-
-/* ---------- 明细?---------- */
-
-.detail-view {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.detail-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-}
-
-.detail-back {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--primary-color);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.detail-back:hover {
-  text-decoration: underline;
-}
-
-.detail-breadcrumb {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.detail-hero {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12px 0 4px;
-  text-align: center;
-}
-
-.detail-hero-icon {
-  width: 44px;
-  height: 44px;
-  margin-bottom: 8px;
-  border-radius: 50%;
-  background-color: var(--primary-soft);
-  color: var(--primary-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-}
-
-.detail-hero-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--text-main);
-}
-
-.detail-hero-count {
-  margin-top: 4px;
-  font-size: 14px;
-  color: var(--text-muted);
-}
-
-/* 分组块：小标?+ 该组网格 */
-.group-block {
-  margin-bottom: 12px;
-}
-
-.group-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-main);
-}
-
-.group-title::before {
-  content: '';
-  width: 3px;
-  height: 14px;
-  border-radius: 2px;
-  background-color: var(--primary-color);
-}
-
-/* 明细页图文白?*/
-.ces-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
 }
 
 .ces-card {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding: 0;
   overflow: hidden;
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  background-color: var(--card-bg);
-  box-shadow: var(--shadow-card);
-  text-align: left;
-  font: inherit;
-  cursor: pointer;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-}
-
-.ces-card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-hover);
-}
-
-.ces-cover {
-  width: 100%;
-  aspect-ratio: 16 / 10;
-  object-fit: cover;
-  display: block;
-  background-color: var(--border-color);
 }
 
 .ces-body {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 12px;
+  padding: var(--su-space-3);
+  text-align: left;
 }
 
-.ces-title {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.4;
-  color: var(--text-main);
-}
-
-.ces-desc {
-  display: block;
-  margin-top: 2px;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-/* ============================================================
-   文章详情页（点击图文卡片进入?   ============================================================ */
-
-.article-head {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 4px 0;
-  text-align: center;
-}
-
-.article-heading {
-  max-width: 760px;
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 1.4;
-  color: var(--text-main);
-}
-
-.article-meta {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.article-meta-item {
-  display: inline-flex;
-  align-items: center;
-}
-
-.article-meta-dot {
-  width: 3px;
-  height: 3px;
-  margin: 0 8px;
-  border-radius: 50%;
-  background-color: var(--border-strong);
-}
-
-.article-body {
-  padding: 32px 40px 40px;
-}
-
-.article-body-text {
-  margin-bottom: 16px;
-  font-size: 14px;
-  line-height: 1.9;
-  color: var(--text-sub);
-}
-
-.article-body-heading {
-  margin: 28px 0 16px;
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--text-main);
-}
-
-.article-body-image {
-  display: block;
+.ces-body--button {
   width: 100%;
-  margin: 20px 0;
-  border-radius: 4px;
-  background-color: var(--border-color);
+  cursor: pointer;
 }
 
-/* ============================================================
-   条目详情页（点击应用卡片进入?   ============================================================ */
+.ces-body--button:hover {
+  background-color: var(--su-bg-subtle);
+}
+
+/* ---------- 详情 ---------- */
 
-/* 明细 / 条目详情共用同一套打开动画，和点击 ••?的表现保持一?*/
 .detail-view {
-  animation: view-in 0.22s ease both;
-}
-
-@keyframes view-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.item-card {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  padding: 24px 28px;
+  gap: var(--su-space-4);
 }
 
-.item-title {
+.detail-hero {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 6px;
+  gap: var(--su-space-3);
+}
+
+.detail-hero-icon {
   font-size: 24px;
-  font-weight: 600;
-  color: var(--text-main);
+  line-height: 1;
 }
 
 .item-edit {
-  font-size: 14px;
-  font-weight: 400;
-  color: var(--text-muted);
-  cursor: default;
+  margin-left: var(--su-space-2);
+  vertical-align: middle;
 }
 
-/* 主图：应用是方形头像，电影是竖版海报 */
 .item-cover {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 18px 0 10px;
+  display: grid;
+  place-items: center;
+  width: 120px;
+  margin: var(--su-space-4) 0;
   overflow: hidden;
-  background-color: var(--primary-soft);
-  color: var(--primary-color);
+  border-radius: var(--su-radius-md);
+  background-color: var(--su-bg-light);
 }
 
 .item-cover--square {
-  width: 96px;
-  height: 96px;
-  border-radius: 12px;
+  aspect-ratio: 1;
 }
 
 .item-cover--portrait {
-  width: 179px;
+  width: 160px;
   aspect-ratio: 2 / 3;
-  border-radius: 8px;
 }
 
 .item-cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  display: block;
 }
 
 .item-cover-letter {
-  font-size: 38px;
-  font-weight: 700;
-}
-
-.item-tags {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-}
-
-.item-tag {
-  padding: 2px 10px;
-  border-radius: 999px;
-  background-color: var(--primary-soft);
-  color: var(--primary-color);
-  font-size: 12px;
+  font-size: 32px;
+  color: var(--su-text-sub);
 }
 
 .item-quote {
-  display: flex;
-  gap: 6px;
-  width: 100%;
-  margin-top: 18px;
-  text-align: left;
-}
-
-.item-quote-mark {
-  flex-shrink: 0;
-  font-size: 32px;
-  font-weight: 700;
-  line-height: 1;
-  color: rgba(255, 62, 62, 0.35);
-}
-
-.item-quote-text {
-  font-size: 14px;
-  line-height: 1.7;
-  color: var(--text-sub);
-}
-
-.item-desc {
-  width: 100%;
-  margin-top: 10px;
-  font-size: 14px;
-  line-height: 1.7;
-  color: var(--text-sub);
-  text-align: left;
+  padding: var(--su-space-3) var(--su-space-4);
+  border-left: 2px solid var(--su-color-primary);
+  border-radius: 0 var(--su-radius-sm) var(--su-radius-sm) 0;
+  background-color: var(--su-bg-subtle);
 }
 
 .item-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  margin-top: 18px;
-}
-
-.item-stat {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  min-width: 56px;
-  height: 36px;
-  padding: 0 12px;
-  border-radius: 8px;
-  background-color: var(--bg-color);
-  color: var(--text-sub);
-  font-size: 12px;
-}
-
-.item-stat .iconfont {
-  font-size: 16px;
-}
-
-.item-stat em {
-  font-style: normal;
-  font-weight: 600;
-  color: var(--text-main);
-}
-
-.item-stat--icon {
-  cursor: pointer;
-}
-
-.item-stat--icon:hover {
-  background-color: var(--border-color);
-}
-
-.item-jump {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 36px;
-  border-radius: 8px;
-  background-color: var(--primary-color);
-  color: #fff;
-  font-size: 14px;
-  transition: background-color 0.2s;
-}
-
-.item-jump:hover {
-  background-color: #2c47d8;
-}
-
-.item-jump:disabled {
-  opacity: 0.55;
-  cursor: default;
-}
-
-.item-jump .iconfont {
-  font-size: 14px;
+  margin-top: var(--su-space-4);
 }
 
 .item-banner {
   width: 100%;
-  margin-top: 18px;
-  aspect-ratio: 3 / 1;
-  border-radius: 10px;
-  object-fit: cover;
-  background-color: var(--border-color);
+  margin-top: var(--su-space-4);
+  border-radius: var(--su-radius-md);
 }
 
-/* 详情页「推荐阅读?*/
+/* ---------- 文章 ---------- */
 
-.related-card {
-  padding: 20px;
-}
-
-.related-title {
+.article-head {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-main);
+  flex-direction: column;
+  gap: var(--su-space-2);
 }
 
-.related-title-icon {
-  font-size: 16px;
+.article-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--su-space-3);
 }
 
-.related-grid {
-  list-style: none;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px 24px;
+.article-meta-dot {
+  color: var(--su-text-muted);
 }
 
+.article-lead {
+  margin-bottom: var(--su-space-2);
+}
+
+.article-body-image {
+  width: 100%;
+  margin: var(--su-space-2) 0;
+  border-radius: var(--su-radius-md);
+}
+
+/* ---------- 推荐阅读 ---------- */
+
 .related-item {
   display: flex;
   align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 4px;
-  border-radius: 8px;
+  gap: var(--su-space-2);
+  padding: var(--su-space-2);
+  border-radius: var(--su-radius-sm);
   text-align: left;
-  cursor: pointer;
-  transition: background-color 0.2s;
+  transition: background-color var(--su-duration-fast) var(--su-ease-in-out);
 }
 
 .related-item:hover {
-  background-color: var(--bg-color);
-}
-
-.related-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--primary-soft);
-  color: var(--primary-color);
-  font-size: 14px;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.related-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
+  background-color: var(--su-bg-subtle);
 }
 
 .related-info {
-  display: flex;
-  flex-direction: column;
   min-width: 0;
 }
 
-.related-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-main);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+/* ---------- 通用 ---------- */
 
-.related-desc {
-  margin-top: 2px;
-  font-size: 12px;
-  color: var(--text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-@media (max-width: 900px) {
-  .related-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-/* ============================================================
-   提示?/ 回到顶部
-   ============================================================ */
-
-.notice {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 20px;
-  padding: 24px;
-  border: 1px dashed var(--border-color);
-  border-radius: 12px;
-  background-color: rgba(255, 255, 255, 0.7);
-  color: var(--text-sub);
-  font-size: 14px;
-}
-
-.notice strong {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-main);
-}
-
-.notice-error {
-  border-style: solid;
-  border-color: rgba(255, 62, 62, 0.25);
-  background-color: #fff5f5;
-}
-
-.notice-error strong {
-  color: var(--danger);
-}
-
-.notice-action {
-  align-self: flex-start;
-  margin-top: 8px;
-  padding: 6px 14px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background-color: var(--card-bg);
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.notice-action:hover {
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-}
-
-/* 返回顶部：复刻 Alright 的 .totop-button（42px 圆形浅灰底），
-   默认隐藏，内容区滚动后才淡入 */
-.back-to-top {
-  position: fixed;
-  top: 50%;
-  right: 30px;
-  width: 42px;
-  height: 42px;
-  display: flex;
+.link-button {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  border: 1px solid var(--border-color);
-  background-color: var(--border-color);
-  color: var(--text-sub);
-  cursor: pointer;
-  z-index: 99;
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-50%) translateY(15px);
-  transition:
-    opacity 0.3s ease,
-    visibility 0.3s ease,
-    transform 0.3s ease,
-    background-color 0.2s,
-    color 0.2s;
+  gap: var(--su-space-1);
+  height: 32px;
+  padding: 0 var(--su-space-3);
+  border-radius: var(--su-radius-sm);
+  font-size: var(--su-font-size-sm);
+  color: var(--su-text-sub);
+  transition: background-color var(--su-duration-fast) var(--su-ease-in-out);
 }
 
-.back-to-top.is-visible {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(-50%);
+.link-button:hover {
+  background-color: var(--su-bg-subtle);
+  color: var(--su-text-main);
 }
 
-.back-to-top:hover {
-  background-color: var(--border-strong);
-  border-color: var(--border-strong);
-  color: var(--text-main);
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
-.back-to-top .iconfont {
-  font-size: 20px;
-}
-
-/* 刷新按钮转圈 */
-.service-action[data-spinning='true'] .iconfont {
-  animation: spin 0.9s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ============================================================
-   响应?   ============================================================ */
+/* ---------- 响应式 ---------- */
 
 @media (max-width: 1100px) {
-  :root {
-    --sidebar-width: 200px;
-  }
-
-  .app-grid,
-  .article-grid,
-  .ces-grid {
+  .sidebar {
+    position: static;
+    display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--su-space-3);
+    padding: var(--su-space-4);
   }
 
-  .poster-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 900px) {
-  .app {
-    height: auto;
-    min-height: 100vh;
+  .profile-card {
+    grid-row: span 2;
   }
 
-  .layout-container {
-    padding: 0 16px;
-  }
-
-  .site-header {
-    position: sticky;
+  .service-panel {
+    display: none;
   }
 
   .header-info {
     display: none;
   }
+}
 
-  .search-row {
-    position: static;
-    left: auto;
-    top: auto;
-    transform: none;
-    width: auto;
-    height: 44px;
-    margin: 16px 16px 0;
-  }
-
-  .layout {
-    margin-top: 0;
-    height: auto;
-    padding: 16px;
-    grid-template-columns: minmax(0, 1fr);
-  }
-
+@media (max-width: 820px) {
   .sidebar {
     display: none;
   }
 
-  .content {
-    padding-top: 0;
+  .search-row {
+    top: 60px;
   }
 
-  .content-veil {
-    display: none;
+  .site-header-inner {
+    height: 60px;
   }
+}
 
-  .content-scroll {
-    overflow: visible;
-    -webkit-mask-image: none;
-    mask-image: none;
-  }
-
-  /* 窄屏沿用主题的右下侧定位，隐藏/显示的位移单独处理 */
-  .back-to-top {
-    top: auto;
-    right: 15px;
-    bottom: 30%;
-    transform: translateY(15px);
-  }
-
-  .back-to-top.is-visible {
-    transform: translateY(0);
+@media (prefers-reduced-motion: reduce) {
+  .cover,
+  .app-card,
+  .related-item,
+  .link-button {
+    transition: none;
   }
 }
diff --git a/stash-web/src/App.tsx b/stash-web/src/App.tsx
index 7b557c5..b9edf9b 100644
--- a/stash-web/src/App.tsx
+++ b/stash-web/src/App.tsx
@@ -1,3 +1,4 @@
+import { Empty, Layout, Notice } from '@stash/ui'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { BackToTop } from './components/common/BackToTop'
 import { ArticleDetailView } from './components/content/ArticleDetailView'
@@ -39,7 +40,6 @@ export default function App() {
   const { view, go, back } = useViewRoute()
   const [scrolled, setScrolled] = useState(false)
   const searchRef = useRef<HTMLInputElement>(null)
-  const scrollRef = useRef<HTMLDivElement>(null)
 
   const categories = useMemo(
     () => withLocalCategory(projects, catalog.categories),
@@ -103,20 +103,18 @@ export default function App() {
     return []
   }, [itemView, itemCategory])
 
-  // 切换视图时把内容区滚回顶部
+  // 切换视图时回到顶部（页面整体滚动）
   useEffect(() => {
-    scrollRef.current?.scrollTo({ top: 0 })
+    window.scrollTo({ top: 0 })
   }, [view])
 
-  // 桌面端滚动作在内容容器里，窄屏滚的是窗口：
-  // 两处都要驱动「已滚动」状态（顶部渐隐层 + 返回顶部按钮共用）
   useEffect(() => {
     const sync = () => {
-      const inner = scrollRef.current?.scrollTop ?? 0
-      const next = Math.max(inner, window.scrollY) > 4
+      const next = window.scrollY > 4
       setScrolled((current) => (current === next ? current : next))
     }
 
+    sync()
     window.addEventListener('scroll', sync, { passive: true })
     return () => window.removeEventListener('scroll', sync)
   }, [])
@@ -125,7 +123,6 @@ export default function App() {
    * 「打开这个分区」应该落到哪个视图。
    *
    * 应用类分区配了首页展示块时，直接落到那个分组；其余情况打开整个分区。
-   * 这样卡片上的「···」和分区标题都通向卡片里实际展示的那块内容。
    */
   const detailViewFor = (categoryId: string): View => {
     const category = categories.find((item) => item.id === categoryId)
@@ -203,21 +200,13 @@ export default function App() {
   function renderItemView() {
     if (itemView === undefined) return null
     if (itemCategory === undefined) {
-      return (
-        <p className="section-empty">
-          {dataPending ? '正在读取内容库…' : '分类不存在'}
-        </p>
-      )
+      return <Empty text={dataPending ? '正在读取内容库…' : '分类不存在'} />
     }
 
     if (itemCategory.kind === 'articles') {
       const article = findArticleItem(itemCategory, itemView.itemId)
       if (article === undefined) {
-        return (
-          <p className="section-empty">
-            {dataPending ? '正在读取内容库…' : '条目不存在'}
-          </p>
-        )
+        return <Empty text={dataPending ? '正在读取内容库…' : '条目不存在'} />
       }
 
       return (
@@ -230,11 +219,7 @@ export default function App() {
     }
 
     if (detailModel === undefined) {
-      return (
-        <p className="section-empty">
-          {dataPending ? '正在读取内容库…' : '条目不存在'}
-        </p>
-      )
+      return <Empty text={dataPending ? '正在读取内容库…' : '条目不存在'} />
     }
 
     return (
@@ -249,111 +234,98 @@ export default function App() {
   }
 
   return (
-    <div className="app">
+    <>
       {/* 主题的顶部背景图：固定 65vh，底部渐隐到页面底色 */}
       <div className="site-background" aria-hidden="true" />
 
-      <SiteHeader
-        projectCount={projects.length}
-        sampleProject={projects[0]?.name}
-        live={live}
-        onFocusSearch={() => searchRef.current?.focus()}
-      />
+      <Layout
+        contained
+        maxWidth={1380}
+        siderWidth={260}
+        className="app"
+        header={
+          <SiteHeader
+            projectCount={projects.length}
+            sampleProject={projects[0]?.name}
+            live={live}
+            onFocusSearch={() => searchRef.current?.focus()}
+          />
+        }
+        sider={
+          <Sidebar
+            projects={projects}
+            categories={sidebarCategories}
+            live={live}
+            refreshing={refreshing}
+            onRefresh={refresh}
+            activeCategoryId={viewCategoryId}
+            activeGroupId={detailView?.groupId}
+            onNavigate={navigate}
+          />
+        }
+      >
+        <div className="content">
+          <SearchBar value={keyword} onChange={setKeyword} inputRef={searchRef} />
 
-      <div className="search-row">
-        <SearchBar value={keyword} onChange={setKeyword} inputRef={searchRef} />
-      </div>
+          <h1 className="sr-only">Stash 本地应用工作区</h1>
 
-      <div className="layout">
-        <Sidebar
-          projects={projects}
-          categories={sidebarCategories}
-          live={live}
-          refreshing={refreshing}
-          onRefresh={refresh}
-          activeCategoryId={viewCategoryId}
-          activeGroupId={detailView?.groupId}
-          onNavigate={navigate}
-        />
+          {status === 'error' && (
+            <Notice
+              tone="error"
+              title="连不上 Stash 服务"
+              action={{ label: '重试', onClick: refresh }}
+            >
+              {error}
+            </Notice>
+          )}
 
-        <main className="content">
-          {/* 滚动后才淡入的顶部遮罩，避免内容在容器顶边被硬切 */}
-          <div className={`content-veil${scrolled ? ' is-visible' : ''}`} aria-hidden="true" />
+          {/* 内容库读取失败通常是用户改坏了 data 列里的 JSON，错误信息会带条目 id */}
+          {catalog.status === 'error' && (
+            <Notice
+              tone="error"
+              title="内容库读取失败"
+              action={{ label: '重试', onClick: catalog.reload }}
+            >
+              {catalog.error}
+            </Notice>
+          )}
 
-          <div
-            className="content-scroll"
-            id="content-scroll"
-            ref={scrollRef}
-            onScroll={(event) => {
-              const next = event.currentTarget.scrollTop > 4
-              setScrolled((current) => (current === next ? current : next))
-            }}
-          >
-            <h1 className="sr-only">Stash 本地应用工作区</h1>
+          {detailView === undefined && itemView === undefined && (
+            <>
+              {catalog.status === 'loading' && <Empty text="正在读取内容库…" />}
 
-            {status === 'error' && (
-              <div className="notice notice-error" role="alert">
-                <strong>连不上 Stash 服务</strong>
-                <p>{error}</p>
-                <button type="button" className="notice-action" onClick={refresh}>
-                  重试
-                </button>
-              </div>
-            )}
-
-            {/* 内容库读取失败通常是用户改坏了 data 列里的 JSON，错误信息会带条目 id */}
-            {catalog.status === 'error' && (
-              <div className="notice notice-error" role="alert">
-                <strong>内容库读取失败</strong>
-                <p>{catalog.error}</p>
-                <button type="button" className="notice-action" onClick={catalog.reload}>
-                  重试
-                </button>
-              </div>
-            )}
-
-            {detailView === undefined && itemView === undefined && (
-              <>
-                {catalog.status === 'loading' && (
-                  <p className="section-empty">正在读取内容库…</p>
-                )}
-
-                <HomeView
-                  categories={visibleCategories}
-                  onOpenDetail={openDetail}
-                  onOpenItem={openItem}
-                />
-
-                {searching && visibleCategories.length === 0 && (
-                  <div className="notice">
-                    <strong>没有匹配「{keyword.trim()}」的内容</strong>
-                    <p>换个关键字试试，或清空搜索查看全部。</p>
-                  </div>
-                )}
-              </>
-            )}
-
-            {detailView !== undefined && detailCategory !== undefined && (
-              <DetailView
-                category={detailCategory}
-                groupId={detailView.groupId}
-                onBack={goHome}
-                onOpenItem={(itemId) => openItem(detailCategory.id, itemId)}
+              <HomeView
+                categories={visibleCategories}
+                onOpenDetail={openDetail}
+                onOpenItem={openItem}
               />
-            )}
 
-            {detailView !== undefined && detailCategory === undefined && (
-              <p className="section-empty">
-                {dataPending ? '正在读取内容库…' : '分类不存在'}
-              </p>
-            )}
+              {searching && visibleCategories.length === 0 && (
+                <Notice title={`没有匹配「${keyword.trim()}」的内容`}>
+                  换个关键字试试，或清空搜索查看全部。
+                </Notice>
+              )}
+            </>
+          )}
 
-            {itemView !== undefined && renderItemView()}
-          </div>
-        </main>
-      </div>
+          {detailView !== undefined && detailCategory !== undefined && (
+            <DetailView
+              category={detailCategory}
+              groupId={detailView.groupId}
+              onBack={goHome}
+              onOpenItem={(itemId) => openItem(detailCategory.id, itemId)}
+            />
+          )}
+
+          {detailView !== undefined && detailCategory === undefined && (
+            <Empty text={dataPending ? '正在读取内容库…' : '分类不存在'} />
+          )}
+
+          {itemView !== undefined && renderItemView()}
+        </div>
+      </Layout>
 
       <BackToTop visible={scrolled} />
-    </div>
+    </>
   )
 }
diff --git a/stash-web/src/assets/iconfont.woff2 b/stash-web/src/assets/iconfont.woff2
deleted file mode 100644
index 4ca9e6f..0000000
Binary files a/stash-web/src/assets/iconfont.woff2 and /dev/null differ
diff --git a/stash-web/src/components/common/BackToTop.tsx b/stash-web/src/components/common/BackToTop.tsx
index 49d7f8f..aef9b79 100644
--- a/stash-web/src/components/common/BackToTop.tsx
+++ b/stash-web/src/components/common/BackToTop.tsx
@@ -1,33 +1,14 @@
-import { ArrowUpIcon } from './Icon'
+import { ScrollTop } from '@stash/ui'
 
 /**
- * 回到顶部：复刻 Alright 主题的 .scroll-toolbar .totop-button。
- *
- * - 42px 圆形、浅灰底，固定在右侧（bottom: 50%）
- * - 默认隐藏，只有内容区滚动后才淡入，回到顶部后再淡出
+ * 回到顶部：直接用组件库的 ScrollTop。
+ * 页面整体滚动（没有内部滚动容器），所以不传 targetId。
  */
 type BackToTopProps = {
-  /** 内容区是否已滚动（由 App 传入） */
+  /** 页面是否已滚动（由 App 传入） */
   visible: boolean
 }
 
 export function BackToTop({ visible }: BackToTopProps) {
-  const handleClick = () => {
-    // 桌面端滚动的是内容容器，窄屏滚动的是窗口，两处都滚一遍
-    document.getElementById('content-scroll')?.scrollTo({ top: 0, behavior: 'smooth' })
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-  }
-
-  return (
-    <button
-      type="button"
-      className={`back-to-top${visible ? ' is-visible' : ''}`}
-      title="回到顶部"
-      aria-label="回到顶部"
-      tabIndex={visible ? 0 : -1}
-      onClick={handleClick}
-    >
-      <ArrowUpIcon />
-    </button>
-  )
+  return <ScrollTop visible={visible} />
 }
diff --git a/stash-web/src/components/common/CountBadge.tsx b/stash-web/src/components/common/CountBadge.tsx
index 8248eaf..4c8212e 100644
--- a/stash-web/src/components/common/CountBadge.tsx
+++ b/stash-web/src/components/common/CountBadge.tsx
@@ -1,11 +1,13 @@
+import { Badge } from '@stash/ui'
+
 /**
- * 数量角标：贴在分区标题右上角的小红标。
- * 纯展示组件，只接收数字，宽度由内容撑开（两位数不会变形）。
+ * 数量角标：贴在分区标题旁边的小红标。
+ * 组件库的 Badge 已经处理了两位数和 99+ 的宽度，这里只做语义封装。
  */
 type CountBadgeProps = {
   count: number
 }
 
 export function CountBadge({ count }: CountBadgeProps) {
-  return <span className="count-badge">{count}</span>
+  return <Badge count={count} tone="danger" />
 }
diff --git a/stash-web/src/components/common/Icon.tsx b/stash-web/src/components/common/Icon.tsx
index 38a32c9..6151b46 100644
--- a/stash-web/src/components/common/Icon.tsx
+++ b/stash-web/src/components/common/Icon.tsx
@@ -1,63 +1,57 @@
-/**
- * 通用图标组件。
- *
- * 全部使用 Alright 主题的 iconfont 线性图标（见 src/iconfont.css），
- * 尺寸与颜色由使用处的 CSS 控制（font-size / color），
- * 因此同一套图标可以复用在按钮、统计条、导航等不同位置。
- */
+import { Icon } from '@stash/ui'
 
+/**
+ * 语义图标：stash 内部一直按用途引用（SearchIcon / RefreshIcon…），
+ * 这里统一映射到 @stash/ui 的 iconfont 字形，避免各页面记字形名。
+ */
 type IconProps = {
-  /** 附加类名，便于局部覆盖字号或颜色 */
   className?: string
 }
 
-const base = (name: string, className?: string) =>
-  `iconfont icon-${name}${className !== undefined ? ` ${className}` : ''}`
-
 export function SearchIcon({ className }: IconProps) {
-  return <i className={base('search', className)} aria-hidden="true" />
+  return <Icon name="search_3_line" className={className} />
 }
 
 export function UserIcon({ className }: IconProps) {
-  return <i className={base('user', className)} aria-hidden="true" />
+  return <Icon name="user_3_line" className={className} />
 }
 
 export function RefreshIcon({ className }: IconProps) {
-  return <i className={base('refresh', className)} aria-hidden="true" />
+  return <Icon name="refresh_3_line" className={className} />
 }
 
 export function LinkIcon({ className }: IconProps) {
-  return <i className={base('link', className)} aria-hidden="true" />
+  return <Icon name="link_3_line" className={className} />
 }
 
 export function ExternalIcon({ className }: IconProps) {
-  return <i className={base('external', className)} aria-hidden="true" />
+  return <Icon name="a-external_link_line1" className={className} />
 }
 
 export function EyeIcon({ className }: IconProps) {
-  return <i className={base('eye', className)} aria-hidden="true" />
+  return <Icon name="eye_line" className={className} />
 }
 
 export function ThumbUpIcon({ className }: IconProps) {
-  return <i className={base('thumb-up', className)} aria-hidden="true" />
+  return <Icon name="thumb_up_2_line" className={className} />
 }
 
 export function ShareIcon({ className }: IconProps) {
-  return <i className={base('share', className)} aria-hidden="true" />
+  return <Icon name="share_3_line" className={className} />
 }
 
 export function CloseIcon({ className }: IconProps) {
-  return <i className={base('close', className)} aria-hidden="true" />
+  return <Icon name="close_line" className={className} />
 }
 
 export function MoreIcon({ className }: IconProps) {
-  return <i className={base('more', className)} aria-hidden="true" />
+  return <Icon name="more_1_line" className={className} />
 }
 
 export function ArrowUpIcon({ className }: IconProps) {
-  return <i className={base('arrow-up', className)} aria-hidden="true" />
+  return <Icon name="arrow_up_line" className={className} />
 }
 
 export function ArrowDownIcon({ className }: IconProps) {
-  return <i className={base('arrow-down', className)} aria-hidden="true" />
+  return <Icon name="arrow_down_line" className={className} />
 }
diff --git a/stash-web/src/components/content/AppCard.tsx b/stash-web/src/components/content/AppCard.tsx
index c78aa43..6dafb0c 100644
--- a/stash-web/src/components/content/AppCard.tsx
+++ b/stash-web/src/components/content/AppCard.tsx
@@ -1,14 +1,9 @@
+import { Avatar, ItemBadge, Space, Text } from '@stash/ui'
 import type { AppItem } from '../../data/types'
 
 /**
- * 应用卡片：逐项复刻 Alright 主题「推荐作者」条目的结构。
- *
- * 对应主题的：
- *   .flex-avatar  > img.avatar-48 + span.avatar-badge.badge_5
- *   .item-content > h3.font-title.text-md（名字 + span.item-badge.hot）
- *                 + div.text-xs.text-muted.h-1x（单行描述）
- *
- * 热门条目才会同时出现头像角标和 HOT 徽标，普通条目两者都没有。
+ * 应用卡片：头像 + 名称（热门带 HOT 角标）+ 单行描述。
+ * 点击进入条目详情；按住修饰键时保持浏览器默认行为（新标签打开原始链接）。
  */
 type AppCardProps = {
   item: AppItem
@@ -28,22 +23,25 @@ export function AppCard({ item, onOpen }: AppCardProps) {
         onOpen(item.id)
       }}
     >
-      <span className="app-card-avatar" aria-hidden="true">
-        {item.cover !== undefined ? (
-          <img src={item.cover} alt="" loading="lazy" />
-        ) : (
-          <span className="app-card-letter">{item.icon}</span>
-        )}
-        {item.hot === true && <span className="app-card-verify" />}
-      </span>
+      <Avatar
+        size="md"
+        shape="square"
+        src={item.cover}
+        fallback={item.icon}
+        verified={item.hot === true}
+      />
 
-      <span className="app-card-info">
-        <span className="app-card-title">
-          <span className="app-card-name">{item.name}</span>
-          {item.hot === true && <span className="app-card-badge" />}
-        </span>
-        <span className="app-card-desc">{item.desc}</span>
-      </span>
+      <div className="app-card-info">
+        <Space gap="xs">
+          <Text strong truncate className="app-card-name">
+            {item.name}
+          </Text>
+          {item.hot === true && <ItemBadge tone="hot">HOT</ItemBadge>}
+        </Space>
+        <Text size="xs" tone="muted" truncate>
+          {item.desc}
+        </Text>
+      </div>
     </a>
   )
 }
diff --git a/stash-web/src/components/content/AppGrid.tsx b/stash-web/src/components/content/AppGrid.tsx
index 991a593..76cd1f5 100644
--- a/stash-web/src/components/content/AppGrid.tsx
+++ b/stash-web/src/components/content/AppGrid.tsx
@@ -1,10 +1,8 @@
+import { Grid } from '@stash/ui'
 import type { AppItem } from '../../data/types'
 import { AppCard } from './AppCard'
 
-/**
- * 应用网格：默认 4 列，窄屏退化为 2 列。
- * 首页预览与明细页共用，靠 modifier 调整间距。
- */
+/** 应用网格：默认 4 列，平板 2 列，手机 2 列（组件库 Grid 负责断点） */
 type AppGridProps = {
   items: AppItem[]
   /** 明细页使用更宽松的间距 */
@@ -15,10 +13,10 @@ type AppGridProps = {
 
 export function AppGrid({ items, variant = 'home', onOpen }: AppGridProps) {
   return (
-    <div className={`app-grid${variant === 'detail' ? ' app-grid--detail' : ''}`}>
+    <Grid columns={4} tabletColumns={2} mobileColumns={2} gap={variant === 'detail' ? 'md' : 'sm'}>
       {items.map((item) => (
         <AppCard key={item.id} item={item} onOpen={onOpen} />
       ))}
-    </div>
+    </Grid>
   )
 }
diff --git a/stash-web/src/components/content/ArticleBody.tsx b/stash-web/src/components/content/ArticleBody.tsx
index 5155e91..c0a3565 100644
--- a/stash-web/src/components/content/ArticleBody.tsx
+++ b/stash-web/src/components/content/ArticleBody.tsx
@@ -1,3 +1,4 @@
+import { Paragraph, Title } from '@stash/ui'
 import type { ReactNode } from 'react'
 
 /**
@@ -10,7 +11,6 @@ import type { ReactNode } from 'react'
  * - 行内 `**粗体**`、`` `代码` ``、`[文字](链接)`
  *
  * 不支持列表、表格、引用块——这里渲染的是文章正文，不是通用 Markdown 编辑器。
- * 需要完整语法时再换 react-markdown，渲染层已经隔离在这个组件里。
  */
 
 type Block =
@@ -104,9 +104,9 @@ export function ArticleBody({ markdown }: ArticleBodyProps) {
       {parseBlocks(markdown).map((block, index) => {
         if (block.kind === 'heading') {
           return (
-            <h3 className="article-body-heading" key={index}>
+            <Title level={2} as="h3" key={index}>
               {renderInline(block.text)}
-            </h3>
+            </Title>
           )
         }
 
@@ -123,9 +123,9 @@ export function ArticleBody({ markdown }: ArticleBodyProps) {
         }
 
         return (
-          <p className="article-body-text" key={index}>
+          <Paragraph tone="main" key={index}>
             {renderInline(block.text)}
-          </p>
+          </Paragraph>
         )
       })}
     </>
diff --git a/stash-web/src/components/content/ArticleCard.tsx b/stash-web/src/components/content/ArticleCard.tsx
index be972ec..90d71e3 100644
--- a/stash-web/src/components/content/ArticleCard.tsx
+++ b/stash-web/src/components/content/ArticleCard.tsx
@@ -12,24 +12,17 @@ type ArticleCardProps = {
 export function ArticleCard({ item, onOpen }: ArticleCardProps) {
   const content = (
     <>
-      <img className="article-cover" src={item.cover} alt={item.title} loading="lazy" />
-      <span className="article-caption">
-        <span className="article-title">{item.title}</span>
-      </span>
+      <img className="cover cover--article" src={item.cover} alt={item.title} loading="lazy" />
+      <span className="cover-caption">{item.title}</span>
     </>
   )
 
   if (onOpen === undefined) {
-    return <figure className="article-card">{content}</figure>
+    return <figure className="cover-card">{content}</figure>
   }
 
   return (
-    <button
-      type="button"
-      className="article-card"
-      title={item.title}
-      onClick={() => onOpen(item.id)}
-    >
+    <button type="button" className="cover-card" title={item.title} onClick={() => onOpen(item.id)}>
       {content}
     </button>
   )
diff --git a/stash-web/src/components/content/ArticleDetailView.tsx b/stash-web/src/components/content/ArticleDetailView.tsx
index 76f8571..5867f30 100644
--- a/stash-web/src/components/content/ArticleDetailView.tsx
+++ b/stash-web/src/components/content/ArticleDetailView.tsx
@@ -1,3 +1,4 @@
+import { Button, Card, Paragraph, Space, Text, Title } from '@stash/ui'
 import type { ArticleItem } from '../../data/types'
 import { ArticleBody } from './ArticleBody'
 
@@ -19,34 +20,49 @@ export function ArticleDetailView({ article, categoryTitle, onBack }: ArticleDet
 
   return (
     <div className="detail-view article-view">
-      <div className="detail-nav card-box">
-        <button type="button" className="detail-back" onClick={onBack}>
-          返回
-        </button>
-        <span className="detail-breadcrumb">{categoryTitle} / 文章</span>
-      </div>
+      <Card padding="sm">
+        <Space justify="between" wrap>
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            返回
+          </Button>
+          <Text size="sm" tone="sub">
+            {categoryTitle} / 文章
+          </Text>
+        </Space>
+      </Card>
 
       <header className="article-head">
-        <h2 className="article-heading">
+        <Title level={2}>
           {article.title}
-          <button type="button" className="item-edit" disabled title="编辑功能待接入">
-            [编辑]
-          </button>
-        </h2>
+          <Button variant="ghost" size="sm" disabled className="item-edit">
+            编辑
+          </Button>
+        </Title>
 
-        <div className="article-meta">
+        <Space gap="sm" wrap>
           {meta.map((text, index) => (
-            <span className="article-meta-item" key={text}>
-              {index > 0 && <i className="article-meta-dot" aria-hidden="true" />}
-              {text}
-            </span>
+            <Space gap="sm" key={text}>
+              {index > 0 && (
+                <span className="article-meta-dot" aria-hidden="true">
+                  ·
+                </span>
+              )}
+              <Text size="sm" tone="muted">
+                {text}
+              </Text>
+            </Space>
           ))}
-        </div>
+        </Space>
       </header>
 
-      <article className="article-body card-box">
-        <ArticleBody markdown={article.body} />
-      </article>
+      <Card padding="lg">
+        <div className="article-body">
+          <Paragraph tone="main" className="article-lead">
+            {article.desc}
+          </Paragraph>
+          <ArticleBody markdown={article.body} />
+        </div>
+      </Card>
     </div>
   )
 }
diff --git a/stash-web/src/components/content/ArticleGrid.tsx b/stash-web/src/components/content/ArticleGrid.tsx
index 2d9c154..ee40345 100644
--- a/stash-web/src/components/content/ArticleGrid.tsx
+++ b/stash-web/src/components/content/ArticleGrid.tsx
@@ -1,7 +1,8 @@
+import { Grid } from '@stash/ui'
 import type { ArticleItem } from '../../data/types'
 import { ArticleCard } from './ArticleCard'
 
-/** 图文网格：首页 4 列，窄屏 2 列 */
+/** 图文网格：桌面 4 列，平板 2 列，手机 1 列 */
 type ArticleGridProps = {
   items: ArticleItem[]
   /** 点击卡片打开文章详情 */
@@ -10,10 +11,10 @@ type ArticleGridProps = {
 
 export function ArticleGrid({ items, onOpen }: ArticleGridProps) {
   return (
-    <div className="article-grid">
+    <Grid columns={4} tabletColumns={2} mobileColumns={1} gap="sm">
       {items.map((item) => (
         <ArticleCard key={item.id} item={item} onOpen={onOpen} />
       ))}
-    </div>
+    </Grid>
   )
 }
diff --git a/stash-web/src/components/content/CesCard.tsx b/stash-web/src/components/content/CesCard.tsx
index 318ec79..635a9b9 100644
--- a/stash-web/src/components/content/CesCard.tsx
+++ b/stash-web/src/components/content/CesCard.tsx
@@ -1,3 +1,4 @@
+import { Card, Space, Text } from '@stash/ui'
 import type { ArticleItem } from '../../data/types'
 
 /**
@@ -10,28 +11,32 @@ type CesCardProps = {
 }
 
 export function CesCard({ item, onOpen }: CesCardProps) {
-  const content = (
-    <>
-      <img className="ces-cover" src={item.cover} alt={item.title} loading="lazy" />
-      <span className="ces-body">
-        <span className="ces-title">{item.title}</span>
-        <span className="ces-desc">{item.desc}</span>
-      </span>
-    </>
+  const body = (
+    <Space direction="column" gap="xs" align="stretch">
+      <Text strong truncate>
+        {item.title}
+      </Text>
+      <Text size="xs" tone="muted" truncate>
+        {item.desc}
+      </Text>
+    </Space>
   )
 
-  if (onOpen === undefined) {
-    return <article className="ces-card">{content}</article>
-  }
-
   return (
-    <button
-      type="button"
-      className="ces-card"
-      title={item.title}
-      onClick={() => onOpen(item.id)}
-    >
-      {content}
-    </button>
+    <Card padding="none" hoverable className="ces-card">
+      <img className="cover cover--article" src={item.cover} alt={item.title} loading="lazy" />
+      {onOpen === undefined ? (
+        <div className="ces-body">{body}</div>
+      ) : (
+        <button
+          type="button"
+          className="ces-body ces-body--button"
+          title={item.title}
+          onClick={() => onOpen(item.id)}
+        >
+          {body}
+        </button>
+      )}
+    </Card>
   )
 }
diff --git a/stash-web/src/components/content/CesCardGrid.tsx b/stash-web/src/components/content/CesCardGrid.tsx
index 62eac4e..7fa649f 100644
--- a/stash-web/src/components/content/CesCardGrid.tsx
+++ b/stash-web/src/components/content/CesCardGrid.tsx
@@ -1,7 +1,8 @@
+import { Grid } from '@stash/ui'
 import type { ArticleItem } from '../../data/types'
 import { CesCard } from './CesCard'
 
-/** 明细页图文网格：4 列白卡，窄屏 2 列 */
+/** 明细页图文网格：桌面 4 列，平板 2 列，手机 1 列 */
 type CesCardGridProps = {
   items: ArticleItem[]
   /** 点击卡片打开文章详情 */
@@ -10,10 +11,10 @@ type CesCardGridProps = {
 
 export function CesCardGrid({ items, onOpen }: CesCardGridProps) {
   return (
-    <div className="ces-grid">
+    <Grid columns={4} tabletColumns={2} mobileColumns={1} gap="sm">
       {items.map((item) => (
         <CesCard key={item.id} item={item} onOpen={onOpen} />
       ))}
-    </div>
+    </Grid>
   )
 }
diff --git a/stash-web/src/components/content/DetailView.tsx b/stash-web/src/components/content/DetailView.tsx
index 06a5c86..15749f3 100644
--- a/stash-web/src/components/content/DetailView.tsx
+++ b/stash-web/src/components/content/DetailView.tsx
@@ -1,3 +1,4 @@
+import { Badge, Breadcrumb, Button, Card, Empty, Space, Title } from '@stash/ui'
 import { categoryCount, type Category } from '../../data/types'
 import { AppGrid } from './AppGrid'
 import { CesCardGrid } from './CesCardGrid'
@@ -28,10 +29,14 @@ export function DetailView({ category, groupId, onBack, onOpenItem }: DetailView
 
   const title = activeGroup?.name ?? category.title
   const count = activeGroup !== undefined ? activeGroup.items.length : categoryCount(category)
-  const breadcrumb =
+  const crumbs =
     activeGroup !== undefined
-      ? `首页 / ${category.title} / ${activeGroup.name}`
-      : `首页 / ${category.title}`
+      ? [
+          { label: '首页', href: '/' },
+          { label: category.title },
+          { label: activeGroup.name },
+        ]
+      : [{ label: '首页', href: '/' }, { label: category.title }]
 
   function renderBody() {
     if (category.kind === 'posters') {
@@ -51,33 +56,35 @@ export function DetailView({ category, groupId, onBack, onOpenItem }: DetailView
     }
 
     if (category.groups.length === 0) {
-      return <p className="section-empty">{category.emptyText ?? '暂无内容'}</p>
+      return <Empty text={category.emptyText ?? '暂无内容'} />
     }
 
     return (
-      <>
+      <Space direction="column" gap="lg" align="stretch">
         {category.groups.map((group) => (
           <GroupBlock key={group.id} group={group} onOpen={onOpenItem} />
         ))}
-      </>
+      </Space>
     )
   }
 
   return (
     <div className="detail-view">
-      <div className="detail-nav card-box">
-        <button type="button" className="detail-back" onClick={onBack}>
-          返回首页
-        </button>
-        <span className="detail-breadcrumb">{breadcrumb}</span>
-      </div>
+      <Card padding="sm">
+        <Space justify="between" wrap>
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            返回首页
+          </Button>
+          <Breadcrumb items={crumbs} />
+        </Space>
+      </Card>
 
       <div className="detail-hero">
         <span className="detail-hero-icon" aria-hidden="true">
           {category.icon}
         </span>
-        <h2 className="detail-hero-title">{title}</h2>
-        <span className="detail-hero-count">[{count}]</span>
+        <Title level={2}>{title}</Title>
+        <Badge count={count} tone="neutral" />
       </div>
 
       {renderBody()}
diff --git a/stash-web/src/components/content/GroupBlock.tsx b/stash-web/src/components/content/GroupBlock.tsx
index 7a4c13f..f514449 100644
--- a/stash-web/src/components/content/GroupBlock.tsx
+++ b/stash-web/src/components/content/GroupBlock.tsx
@@ -1,3 +1,4 @@
+import { Space, Title } from '@stash/ui'
 import type { AppGroup } from '../../data/types'
 import { AppGrid } from './AppGrid'
 
@@ -12,9 +13,11 @@ type GroupBlockProps = {
 
 export function GroupBlock({ group, onOpen }: GroupBlockProps) {
   return (
-    <section className="group-block">
-      <h3 className="group-title">{group.name}</h3>
+    <Space direction="column" gap="sm" align="stretch" className="group-block">
+      <Title level={4} as="h3">
+        {group.name}
+      </Title>
       <AppGrid items={group.items} variant="detail" onOpen={onOpen} />
-    </section>
+    </Space>
   )
 }
diff --git a/stash-web/src/components/content/HomeView.tsx b/stash-web/src/components/content/HomeView.tsx
index f1ec5b0..f739133 100644
--- a/stash-web/src/components/content/HomeView.tsx
+++ b/stash-web/src/components/content/HomeView.tsx
@@ -1,6 +1,7 @@
 import { categoryCount, flattenAppItems, type Category } from '../../data/types'
 import { AppGrid } from './AppGrid'
 import { ArticleGrid } from './ArticleGrid'
+import { Empty } from '@stash/ui'
 import { PosterGrid } from './PosterGrid'
 import { SectionCard } from './SectionCard'
 
@@ -68,7 +69,7 @@ function renderPreview(
     const items = source.slice(0, limit)
 
     if (items.length === 0) {
-      return <p className="section-empty">{category.emptyText ?? '暂无内容'}</p>
+      return <Empty text={category.emptyText ?? '暂无内容'} />
     }
 
     return <AppGrid items={items} onOpen={(itemId) => onOpenItem(category.id, itemId)} />
diff --git a/stash-web/src/components/content/ItemDetailView.tsx b/stash-web/src/components/content/ItemDetailView.tsx
index 79c6a35..fc76bc8 100644
--- a/stash-web/src/components/content/ItemDetailView.tsx
+++ b/stash-web/src/components/content/ItemDetailView.tsx
@@ -1,6 +1,6 @@
+import { Button, Card, Icon, IconButton, Paragraph, Space, Tag, Text, Title } from '@stash/ui'
 import type { ItemDetailModel } from '../../data/detail'
 import type { RelatedItem } from '../../data/types'
-import { ExternalIcon, EyeIcon, ShareIcon, ThumbUpIcon } from '../common/Icon'
 import { RelatedList } from './RelatedList'
 
 /**
@@ -27,20 +27,24 @@ export function ItemDetailView({
 }: ItemDetailViewProps) {
   return (
     <div className="detail-view item-view">
-      <div className="detail-nav card-box">
-        <button type="button" className="detail-back" onClick={onBack}>
-          返回
-        </button>
-        <span className="detail-breadcrumb">{breadcrumb}</span>
-      </div>
+      <Card padding="sm">
+        <Space justify="between" wrap>
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            返回
+          </Button>
+          <Text size="sm" tone="sub">
+            {breadcrumb}
+          </Text>
+        </Space>
+      </Card>
 
-      <article className="item-card card-box">
-        <h2 className="item-title">
+      <Card padding="lg">
+        <Title level={2}>
           {model.title}
-          <button type="button" className="item-edit" disabled title="编辑功能待接入">
-            [编辑]
-          </button>
-        </h2>
+          <Button variant="ghost" size="sm" disabled className="item-edit">
+            编辑
+          </Button>
+        </Title>
 
         <div className={`item-cover item-cover--${model.shape}`}>
           {model.cover !== undefined ? (
@@ -51,68 +55,62 @@ export function ItemDetailView({
         </div>
 
         {model.tags.length > 0 && (
-          <div className="item-tags">
+          <Space gap="sm" wrap>
             {model.tags.map((tag) => (
-              <span className="item-tag" key={tag}>
+              <Tag key={tag} shape="rounded">
                 {tag}
-              </span>
+              </Tag>
             ))}
-          </div>
+          </Space>
         )}
 
         {model.comment !== undefined && (
-          <div className="item-quote">
-            <span className="item-quote-mark" aria-hidden="true">
-              “
-            </span>
-            <p className="item-quote-text">{model.comment}</p>
-          </div>
+          <Paragraph tone="secondary" className="item-quote">
+            {model.comment}
+          </Paragraph>
         )}
 
         {model.paragraphs.map((paragraph, index) => (
-          <p className="item-desc" key={`${index}-${paragraph.slice(0, 8)}`}>
+          <Paragraph key={`${index}-${paragraph.slice(0, 8)}`} tone="main">
             {paragraph}
-          </p>
+          </Paragraph>
         ))}
 
-        <div className="item-actions">
-          <span className="item-stat" title="浏览量">
-            <EyeIcon />
-            <em>{model.views}</em>
-          </span>
-
-          <span className="item-stat" title="点赞数">
-            <ThumbUpIcon />
-            <em>{model.likes}</em>
-          </span>
-
-          <button
-            type="button"
-            className="item-stat item-stat--icon"
-            title="分享（待接入）"
-            aria-label="分享"
-          >
-            <ShareIcon />
-          </button>
+        <Space justify="between" wrap className="item-actions">
+          <Space gap="lg">
+            <Space gap="xs" className="item-stat">
+              <Icon name="eye_line" />
+              <Text size="sm" tone="sub">
+                {model.views}
+              </Text>
+            </Space>
+            <Space gap="xs" className="item-stat">
+              <Icon name="thumb_up_2_line" />
+              <Text size="sm" tone="sub">
+                {model.likes}
+              </Text>
+            </Space>
+            <IconButton label="分享（待接入）" size="xs" icon={<Icon name="share_3_line" />} />
+          </Space>
 
           {/* 占位数据没有真实地址时，按钮置灰而不是打开空白页 */}
           {model.href === '#' ? (
-            <button type="button" className="item-jump" disabled title="暂无跳转地址">
+            <Button size="sm" disabled>
               跳转到
-              <ExternalIcon />
-            </button>
+              <Icon name="a-external_link_line1" />
+            </Button>
           ) : (
-            <a className="item-jump" href={model.href} target="_blank" rel="noreferrer">
+            <a className="link-button" href={model.href} target="_blank" rel="noreferrer">
               跳转到
-              <ExternalIcon />
+              <Icon name="a-external_link_line1" />
             </a>
           )}
-        </div>
+        </Space>
 
         {model.banner !== undefined && (
           <img className="item-banner" src={model.banner} alt="" loading="lazy" />
         )}
-      </article>
+      </Card>
 
       <RelatedList items={related} onOpen={onOpenItem} />
     </div>
diff --git a/stash-web/src/components/content/PosterCard.tsx b/stash-web/src/components/content/PosterCard.tsx
index c75febe..fc1d713 100644
--- a/stash-web/src/components/content/PosterCard.tsx
+++ b/stash-web/src/components/content/PosterCard.tsx
@@ -12,24 +12,17 @@ type PosterCardProps = {
 export function PosterCard({ item, onOpen }: PosterCardProps) {
   const content = (
     <>
-      <img className="poster-cover" src={item.cover} alt={item.title} loading="lazy" />
-      <span className="poster-caption">
-        <span className="poster-title">{item.title}</span>
-      </span>
+      <img className="cover cover--poster" src={item.cover} alt={item.title} loading="lazy" />
+      <span className="cover-caption">{item.title}</span>
     </>
   )
 
   if (onOpen === undefined) {
-    return <figure className="poster-card">{content}</figure>
+    return <figure className="cover-card">{content}</figure>
   }
 
   return (
-    <button
-      type="button"
-      className="poster-card"
-      title={item.title}
-      onClick={() => onOpen(item.id)}
-    >
+    <button type="button" className="cover-card" title={item.title} onClick={() => onOpen(item.id)}>
       {content}
     </button>
   )
diff --git a/stash-web/src/components/content/PosterGrid.tsx b/stash-web/src/components/content/PosterGrid.tsx
index f7486c5..82ea9b6 100644
--- a/stash-web/src/components/content/PosterGrid.tsx
+++ b/stash-web/src/components/content/PosterGrid.tsx
@@ -1,7 +1,8 @@
+import { Grid } from '@stash/ui'
 import type { PosterItem } from '../../data/types'
 import { PosterCard } from './PosterCard'
 
-/** 海报网格：首页 6 列，明细页同样 6 列但间距更大 */
+/** 海报网格：桌面 6 列，平板 4 列，手机 3 列 */
 type PosterGridProps = {
   items: PosterItem[]
   variant?: 'home' | 'detail'
@@ -9,12 +10,12 @@ type PosterGridProps = {
   onOpen?: (itemId: string) => void
 }
 
-export function PosterGrid({ items, variant = 'home', onOpen }: PosterGridProps) {
+export function PosterGrid({ items, onOpen }: PosterGridProps) {
   return (
-    <div className={`poster-grid${variant === 'detail' ? ' poster-grid--detail' : ''}`}>
+    <Grid columns={6} tabletColumns={4} mobileColumns={3} gap="sm">
       {items.map((item) => (
         <PosterCard key={item.id} item={item} onOpen={onOpen} />
       ))}
-    </div>
+    </Grid>
   )
 }
diff --git a/stash-web/src/components/content/RelatedList.tsx b/stash-web/src/components/content/RelatedList.tsx
index 07aadd1..5c0d841 100644
--- a/stash-web/src/components/content/RelatedList.tsx
+++ b/stash-web/src/components/content/RelatedList.tsx
@@ -1,3 +1,4 @@
+import { Avatar, Card, Grid, Space, Text, Title } from '@stash/ui'
 import type { RelatedItem } from '../../data/types'
 
 /**
@@ -13,33 +14,31 @@ export function RelatedList({ items, onOpen }: RelatedListProps) {
   if (items.length === 0) return null
 
   return (
-    <section className="related-card card-box" aria-label="推荐阅读">
-      <h3 className="related-title">
-        <span className="related-title-icon" aria-hidden="true">
-          📚
-        </span>
+    <Card padding="lg" className="related-card">
+      <Title level={4} as="h3">
         推荐阅读
-      </h3>
+      </Title>
 
-      <ul className="related-grid">
+      <Grid columns={2} tabletColumns={2} mobileColumns={1} gap="sm">
         {items.map((item) => (
-          <li key={item.id}>
-            <button type="button" className="related-item" onClick={() => onOpen(item.id)}>
-              <span className="related-avatar" aria-hidden="true">
-                {item.cover !== undefined ? (
-                  <img src={item.cover} alt="" loading="lazy" />
-                ) : (
-                  (item.icon ?? '•')
-                )}
-              </span>
-              <span className="related-info">
-                <span className="related-name">{item.name}</span>
-                <span className="related-desc">{item.desc}</span>
-              </span>
-            </button>
-          </li>
+          <button
+            key={item.id}
+            type="button"
+            className="related-item"
+            onClick={() => onOpen(item.id)}
+          >
+            <Avatar size="sm" shape="square" src={item.cover} fallback={item.icon ?? '•'} />
+            <Space direction="column" gap="xs" align="start" className="related-info">
+              <Text size="sm" strong truncate>
+                {item.name}
+              </Text>
+              <Text size="xs" tone="muted" truncate>
+                {item.desc}
+              </Text>
+            </Space>
+          </button>
         ))}
-      </ul>
-    </section>
+      </Grid>
+    </Card>
   )
 }
diff --git a/stash-web/src/components/content/SectionCard.tsx b/stash-web/src/components/content/SectionCard.tsx
index b25bc86..cb088ba 100644
--- a/stash-web/src/components/content/SectionCard.tsx
+++ b/stash-web/src/components/content/SectionCard.tsx
@@ -1,9 +1,8 @@
+import { Badge, Card, Icon, IconButton, Space, Title } from '@stash/ui'
 import type { ReactNode } from 'react'
-import { CountBadge } from '../common/CountBadge'
-import { MoreIcon } from '../common/Icon'
 
 /**
- * 首页分区卡片：白底圆角容器，组成「色条 + 标题 + 角标 + 更多按钮 + 内容」。
+ * 首页分区卡片：白底容器，组成「色条 + 标题 + 角标 + 更多按钮 + 内容」。
  * 内容由调用方传入，因此同一容器可以承载应用网格、海报网格或图文网格。
  */
 type SectionCardProps = {
@@ -18,30 +17,27 @@ type SectionCardProps = {
 
 export function SectionCard({ title, count, barColor, onMore, children }: SectionCardProps) {
   return (
-    <section className="section-card">
-      <header className="section-header">
-        <div className="section-title-wrapper">
+    <Card padding="lg" className="section-card">
+      <div className="section-header">
+        <Space gap="sm">
           <span className="section-bar" style={{ backgroundColor: barColor }} aria-hidden="true" />
-          <span className="section-title-box">
-            <h2 className="section-title">{title}</h2>
-            <CountBadge count={count} />
-          </span>
-        </div>
+          <Title level={3} as="h2">
+            {title}
+          </Title>
+          <Badge count={count} tone="danger" />
+        </Space>
 
         {onMore !== undefined && (
-          <button
-            type="button"
-            className="section-more"
-            title={`查看${title}全部`}
-            aria-label={`查看${title}全部`}
+          <IconButton
+            size="xs"
+            label={`查看${title}全部`}
+            icon={<Icon name="more_1_line" />}
             onClick={onMore}
-          >
-            <MoreIcon />
-          </button>
+          />
         )}
-      </header>
+      </div>
 
       {children}
-    </section>
+    </Card>
   )
 }
diff --git a/stash-web/src/components/header/HeaderInfoItem.tsx b/stash-web/src/components/header/HeaderInfoItem.tsx
index e9d9410..1f01edd 100644
--- a/stash-web/src/components/header/HeaderInfoItem.tsx
+++ b/stash-web/src/components/header/HeaderInfoItem.tsx
@@ -1,8 +1,9 @@
+import { Space, Tag, Text } from '@stash/ui'
 import type { ReactNode } from 'react'
 
 /**
  * 顶栏中间的一条信息，形如「[标签] 文本」。
- * 标签带浅色底，用于区分「本地 / 状态」这类类型前缀。
+ * 标签用组件库的 Tag（success / primary 两种语气）。
  */
 type HeaderInfoItemProps = {
   /** 可选的前缀标签 */
@@ -14,11 +15,15 @@ type HeaderInfoItemProps = {
 
 export function HeaderInfoItem({ tag, tone = 'blue', children }: HeaderInfoItemProps) {
   return (
-    <div className="header-info-item">
+    <Space gap="sm">
       {tag !== undefined && (
-        <span className={`header-info-tag${tone === 'green' ? ' is-green' : ''}`}>{tag}</span>
+        <Tag tone={tone === 'green' ? 'success' : 'primary'} shape="rounded">
+          {tag}
+        </Tag>
       )}
-      <span className="header-info-text">{children}</span>
-    </div>
+      <Text size="sm" tone="sub">
+        {children}
+      </Text>
+    </Space>
   )
 }
diff --git a/stash-web/src/components/header/SiteHeader.tsx b/stash-web/src/components/header/SiteHeader.tsx
index 8ed96a6..737bb09 100644
--- a/stash-web/src/components/header/SiteHeader.tsx
+++ b/stash-web/src/components/header/SiteHeader.tsx
@@ -1,10 +1,9 @@
-import { SearchIcon, UserIcon } from '../common/Icon'
+import { Icon, IconButton, Space } from '@stash/ui'
 import { HeaderInfoItem } from './HeaderInfoItem'
 
 /**
  * 顶部栏：左品牌、中间运行信息、右侧操作图标。
- * 信息区展示「共 N 个本地应用 / 第一个项目 / 连接状态」，
- * 对应模板里的 header-center-info。
+ * 外层 <header> 由 Layout 提供，这里只渲染栏内的内容。
  */
 type SiteHeaderProps = {
   projectCount: number
@@ -16,43 +15,35 @@ type SiteHeaderProps = {
 
 export function SiteHeader({ projectCount, sampleProject, live, onFocusSearch }: SiteHeaderProps) {
   return (
-    <header className="site-header">
-      <div className="layout-container site-header-inner">
-        <a className="site-brand" href="/" aria-label="Stash 首页">
-          <span className="site-brand-mark" aria-hidden="true">
-            S
-          </span>
-          <span className="site-brand-name">STASH</span>
-        </a>
+    <div className="site-header-inner">
+      <a className="site-brand" href="/" aria-label="Stash 首页">
+        <span className="site-brand-mark" aria-hidden="true">
+          S
+        </span>
+        <span className="site-brand-name">STASH</span>
+      </a>
 
-        <div className="header-info">
-          <HeaderInfoItem>共 {projectCount} 个本地应用</HeaderInfoItem>
+      <Space gap="lg" className="header-info">
+        <HeaderInfoItem>共 {projectCount} 个本地应用</HeaderInfoItem>
 
-          {sampleProject !== undefined && (
-            <HeaderInfoItem tag="本地">{sampleProject}</HeaderInfoItem>
-          )}
+        {sampleProject !== undefined && (
+          <HeaderInfoItem tag="本地">{sampleProject}</HeaderInfoItem>
+        )}
 
-          <HeaderInfoItem tag="状态" tone={live ? 'green' : 'blue'}>
-            {live ? '实时同步已连接' : '等待服务连接'}
-          </HeaderInfoItem>
-        </div>
+        <HeaderInfoItem tag="状态" tone={live ? 'green' : 'blue'}>
+          {live ? '实时同步已连接' : '等待服务连接'}
+        </HeaderInfoItem>
+      </Space>
 
-        <div className="header-actions">
-          <button
-            type="button"
-            className="header-icon-button"
-            title="搜索（Ctrl+K）"
-            aria-label="聚焦搜索框"
-            onClick={onFocusSearch}
-          >
-            <SearchIcon />
-          </button>
-          {/* TODO(auth): 后端登录接口就绪后接上，目前仅作入口占位 */}
-          <button type="button" className="header-icon-button" title="登录" aria-label="登录">
-            <UserIcon />
-          </button>
-        </div>
-      </div>
-    </header>
+      <Space gap="sm" className="header-actions">
+        <IconButton
+          label="聚焦搜索框（Ctrl+K）"
+          icon={<Icon name="search_3_line" />}
+          onClick={onFocusSearch}
+        />
+        {/* TODO(auth): 后端登录接口就绪后接上，目前仅作入口占位 */}
+        <IconButton label="登录" icon={<Icon name="user_3_line" />} />
+      </Space>
+    </div>
   )
 }
diff --git a/stash-web/src/components/search/SearchBar.tsx b/stash-web/src/components/search/SearchBar.tsx
index 1ed085c..545c02b 100644
--- a/stash-web/src/components/search/SearchBar.tsx
+++ b/stash-web/src/components/search/SearchBar.tsx
@@ -1,8 +1,8 @@
+import { Input } from '@stash/ui'
 import { useEffect, type RefObject } from 'react'
-import { CloseIcon, SearchIcon } from '../common/Icon'
 
 /**
- * 全局搜索框：固定悬浮在顶栏下方居中。
+ * 全局搜索框：吸在内容区顶部。
  * 支持 Ctrl/Cmd+K 聚焦、Esc 清空，输入内容由父组件接管过滤逻辑。
  */
 type SearchBarProps = {
@@ -26,33 +26,22 @@ export function SearchBar({ value, onChange, inputRef }: SearchBarProps) {
   }, [inputRef])
 
   return (
-    <div className="search-bar card-box">
-      <SearchIcon className="search-icon" />
-
-      <input
-        ref={inputRef}
-        className="search-input"
-        type="text"
+    <div className="search-row">
+      <Input
+        inputRef={inputRef}
+        icon="search_3_line"
         value={value}
         placeholder="搜索本地项目…"
         aria-label="搜索本地项目"
+        clearable
+        onClear={() => onChange('')}
+        shortcut="Ctrl K"
         spellCheck={false}
         onChange={(event) => onChange(event.target.value)}
         onKeyDown={(event) => {
           if (event.key === 'Escape') onChange('')
         }}
       />
-
-      {value !== '' && (
-        <button
-          type="button"
-          className="search-clear"
-          aria-label="清空搜索"
-          onClick={() => onChange('')}
-        >
-          <CloseIcon />
-        </button>
-      )}
     </div>
   )
 }
diff --git a/stash-web/src/components/sidebar/CategoryNav.tsx b/stash-web/src/components/sidebar/CategoryNav.tsx
index 69b4a61..fdf41c9 100644
--- a/stash-web/src/components/sidebar/CategoryNav.tsx
+++ b/stash-web/src/components/sidebar/CategoryNav.tsx
@@ -1,12 +1,14 @@
-import { useState } from 'react'
+import { Card, Menu, type MenuItem } from '@stash/ui'
 import type { NavTarget } from '../../data/nav'
 import type { Category } from '../../data/types'
 
 /**
- * 分类导航树：直接由内容树派生，不再读独立的导航数据。
+ * 分类导航树：由内容树派生。
  *
- * - 有分组的分类（apps）渲染成可折叠节点，子项是分组（分组可用 show_in_sidebar 单独隐藏）；
- * - 没有分组、或分组全被隐藏的分类，直接是链接。
+ * - 有分组的分类（apps）是折叠节点，子项是分组（分组可用 show_in_sidebar 单独隐藏）；
+ * - 没有分组、或分组全被隐藏的分类，就是一个普通菜单项。
+ *
+ * 折叠状态由组件库的 Menu 内部维护；这里只负责把内容树翻译成 items。
  */
 type CategoryNavProps = {
   /** 内容目录；顺序即侧栏顺序 */
@@ -17,82 +19,54 @@ type CategoryNavProps = {
   onNavigate: (target: NavTarget) => void
 }
 
+const categoryKey = (id: string) => `cat:${id}`
+const groupKey = (categoryId: string, groupId: string) => `group:${categoryId}:${groupId}`
+
 export function CategoryNav({
   categories,
   activeCategoryId,
   activeGroupId,
   onNavigate,
 }: CategoryNavProps) {
-  const [openGroups, setOpenGroups] = useState<string[]>([])
+  const items: MenuItem[] = categories.map((category) => {
+    const groups =
+      category.kind === 'apps'
+        ? category.groups.filter((group) => group.showInSidebar !== false)
+        : []
 
-  const toggle = (id: string) => {
-    setOpenGroups((previous) =>
-      previous.includes(id) ? previous.filter((item) => item !== id) : [...previous, id],
-    )
+    return {
+      key: categoryKey(category.id),
+      label: category.title,
+      children:
+        groups.length > 0
+          ? groups.map((group) => ({
+              key: groupKey(category.id, group.id),
+              label: group.name,
+            }))
+          : undefined,
+    }
+  })
+
+  const activeKey =
+    activeCategoryId === undefined
+      ? undefined
+      : activeGroupId !== undefined
+        ? groupKey(activeCategoryId, activeGroupId)
+        : categoryKey(activeCategoryId)
+
+  const handleSelect = (key: string) => {
+    if (key.startsWith('group:')) {
+      const [, categoryId, groupId] = key.split(':')
+      onNavigate({ categoryId, groupId })
+      return
+    }
+
+    onNavigate({ categoryId: key.slice('cat:'.length) })
   }
 
-  const isOpen = (id: string) => openGroups.includes(id)
-
   return (
-    <nav className="nav-card card-box" aria-label="站点分类">
-      <ul className="nav-group">
-        {categories.map((category) => {
-          // 只显示允许出现在侧栏的分组
-          const groups =
-            category.kind === 'apps'
-              ? category.groups.filter((group) => group.showInSidebar !== false)
-              : []
-
-          // 没有分组的分类：整行就是一个链接
-          if (groups.length === 0) {
-            return (
-              <li className="nav-item" key={category.id}>
-                <button
-                  type="button"
-                  className={`nav-link${
-                    activeCategoryId === category.id && activeGroupId === undefined ? ' active' : ''
-                  }`}
-                  onClick={() => onNavigate({ categoryId: category.id })}
-                >
-                  <span>{category.title}</span>
-                </button>
-              </li>
-            )
-          }
-
-          // 有分组：分区可折叠，分组是真正的链接
-          return (
-            <li className={`nav-item${isOpen(category.id) ? ' open' : ''}`} key={category.id}>
-              <button
-                type="button"
-                className="nav-link has-children"
-                aria-expanded={isOpen(category.id)}
-                onClick={() => toggle(category.id)}
-              >
-                <span>{category.title}</span>
-              </button>
-
-              {/* 用 grid-template-rows 做高度动画：不需要猜 max-height，
-                  也不会在过渡期间出现滚动条 */}
-              <div className={`submenu-wrap${isOpen(category.id) ? ' is-open' : ''}`}>
-                <ul className="submenu">
-                  {groups.map((group) => (
-                    <li key={group.id}>
-                      <button
-                        type="button"
-                        className={`nav-link${activeGroupId === group.id ? ' active' : ''}`}
-                        onClick={() => onNavigate({ categoryId: category.id, groupId: group.id })}
-                      >
-                        <span>{group.name}</span>
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </li>
-          )
-        })}
-      </ul>
-    </nav>
+    <Card padding="sm" className="nav-card">
+      <Menu items={items} activeKey={activeKey} onSelect={handleSelect} />
+    </Card>
   )
 }
diff --git a/stash-web/src/components/sidebar/ProfileCard.tsx b/stash-web/src/components/sidebar/ProfileCard.tsx
index 3d22302..3d8ea76 100644
--- a/stash-web/src/components/sidebar/ProfileCard.tsx
+++ b/stash-web/src/components/sidebar/ProfileCard.tsx
@@ -1,5 +1,5 @@
+import { Avatar, Card, Paragraph, Tag, Text, Title } from '@stash/ui'
 import { PLACEHOLDER_PROFILE } from '../../profile'
-import { UserIcon } from '../common/Icon'
 
 /**
  * 用户资料卡：头像、认证徽标、昵称、角色、简介、IP 属地。
@@ -9,16 +9,14 @@ export function ProfileCard() {
   const { name, role, bio, location } = PLACEHOLDER_PROFILE
 
   return (
-    <section className="profile-card card-box" aria-label="用户信息">
-      <div className="profile-avatar" aria-hidden="true">
-        <UserIcon />
-        <span className="profile-badge">✓</span>
-      </div>
-
-      <div className="profile-name">{name}</div>
-      <span className="profile-role">{role}</span>
-      <p className="profile-bio">{bio}</p>
-      <div className="profile-location">IP属地：{location}</div>
-    </section>
+    <Card padding="lg" className="profile-card">
+      <Avatar size="lg" fallback="S" verified />
+      <Title level={4}>{name}</Title>
+      {!name.includes(role) && <Tag shape="rounded">{role}</Tag>}
+      <Paragraph>{bio}</Paragraph>
+      <Text size="xs" tone="muted">
+        IP 属地：{location}
+      </Text>
+    </Card>
   )
 }
diff --git a/stash-web/src/components/sidebar/ServicePanel.tsx b/stash-web/src/components/sidebar/ServicePanel.tsx
index 8fba9c6..0258c16 100644
--- a/stash-web/src/components/sidebar/ServicePanel.tsx
+++ b/stash-web/src/components/sidebar/ServicePanel.tsx
@@ -1,5 +1,5 @@
+import { Button, Card, Divider, Icon, Space, Tag, Text, Title } from '@stash/ui'
 import type { Project } from '../../api'
-import { LinkIcon, RefreshIcon } from '../common/Icon'
 
 /**
  * 本地服务面板：连接状态、项目数、访问地址，以及两个操作入口。
@@ -16,50 +16,52 @@ export function ServicePanel({ projects, live, refreshing, onRefresh }: ServiceP
   const host = typeof window === 'undefined' ? '-' : window.location.host
 
   return (
-    <section className="service-panel card-box" aria-label="本地服务状态">
-      <header className="service-head">
-        <h2 className="service-title">本地服务</h2>
-        <span className={`service-pill${live ? ' is-on' : ''}`}>
-          <span className={`status-dot${live ? ' is-on' : ''}`} aria-hidden="true" />
+    <Card padding="md" className="service-panel">
+      <Space justify="between">
+        <Title level={4} as="h2">
+          本地服务
+        </Title>
+        <Tag tone={live ? 'success' : 'neutral'} dot>
           {live ? '已连接' : '未连接'}
-        </span>
-      </header>
+        </Tag>
+      </Space>
 
-      <dl className="service-stats">
-        <div>
-          <dt>项目数</dt>
-          <dd>{projects.length}</dd>
-        </div>
-        <div>
-          <dt>访问地址</dt>
-          <dd title={host}>{host}</dd>
-        </div>
-      </dl>
+      <Divider spacing="sm" />
 
-      <div className="service-actions">
-        <button
-          type="button"
-          className="service-action"
-          title="重新扫描项目"
-          data-spinning={refreshing}
-          disabled={refreshing}
-          onClick={onRefresh}
-        >
-          <RefreshIcon />
-          <span>重新扫描</span>
-        </button>
-
-        <a
-          className="service-action"
-          href="/api/projects"
-          target="_blank"
-          rel="noreferrer"
-          title="查看项目接口"
-        >
-          <LinkIcon />
-          <span>查看接口</span>
-        </a>
+      <div className="service-stats">
+        <Space justify="between">
+          <Text size="sm" tone="sub">
+            项目数
+          </Text>
+          <Text strong>{projects.length}</Text>
+        </Space>
+        <Space justify="between">
+          <Text size="sm" tone="sub">
+            访问地址
+          </Text>
+          <Text size="sm" truncate title={host} className="service-host">
+            {host}
+          </Text>
+        </Space>
       </div>
-    </section>
+
+      <Space gap="sm" wrap>
+        <Button
+          size="sm"
+          variant="ghost"
+          loading={refreshing}
+          icon={<Icon name="refresh_3_line" />}
+          onClick={onRefresh}
+          title="重新扫描项目"
+        >
+          重新扫描
+        </Button>
+
+        <a className="link-button" href="/api/projects" target="_blank" rel="noreferrer">
+          <Icon name="link_3_line" />
+          查看接口
+        </a>
+      </Space>
+    </Card>
   )
 }
diff --git a/stash-web/src/components/sidebar/Sidebar.tsx b/stash-web/src/components/sidebar/Sidebar.tsx
index 20a8b3a..f7e4b9a 100644
--- a/stash-web/src/components/sidebar/Sidebar.tsx
+++ b/stash-web/src/components/sidebar/Sidebar.tsx
@@ -32,7 +32,7 @@ export function Sidebar({
   onNavigate,
 }: SidebarProps) {
   return (
-    <aside className="sidebar">
+    <div className="sidebar">
       <ProfileCard />
 
       <ServicePanel
@@ -48,6 +48,6 @@ export function Sidebar({
         activeGroupId={activeGroupId}
         onNavigate={onNavigate}
       />
-    </aside>
+    </div>
   )
 }
diff --git a/stash-web/src/iconfont.css b/stash-web/src/iconfont.css
deleted file mode 100644
index a55507e..0000000
--- a/stash-web/src/iconfont.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * 图标字体：取自 Alright 主题自带的 iconfont（Project id 4809463）。
- * 字体文件放在 public/fonts/iconfont.woff2，这里只保留项目用到的字形，
- * 避免把整份 500 多个图标的样式表打进包里。
- */
-@font-face {
-  font-family: 'iconfont';
-  src: url('./assets/iconfont.woff2') format('woff2');
-  font-display: swap;
-}
-
-.iconfont {
-  display: inline-block;
-  font-family: 'iconfont' !important;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  text-rendering: auto;
-  speak: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-search::before {
-  content: '\e942';
-}
-
-.icon-user::before {
-  content: '\e966';
-}
-
-.icon-refresh::before {
-  content: '\e93d';
-}
-
-.icon-link::before {
-  content: '\ea37';
-}
-
-.icon-external::before {
-  content: '\e8be';
-}
-
-.icon-eye::before {
-  content: '\e8fd';
-}
-
-.icon-thumb-up::before {
-  content: '\e957';
-}
-
-.icon-share::before {
-  content: '\e946';
-}
-
-.icon-close::before {
-  content: '\e8e4';
-}
-
-.icon-more::before {
-  content: '\e91f';
-}
-
-.icon-arrow-up::before {
-  content: '\e8c1';
-}
-
-.icon-arrow-left::before {
-  content: '\e8b5';
-}
-
-.icon-arrow-down::before {
-  content: '\e8b7';
-}
diff --git a/stash-web/src/index.css b/stash-web/src/index.css
index ab5a4cb..203ac02 100644
--- a/stash-web/src/index.css
+++ b/stash-web/src/index.css
@@ -1,44 +1,11 @@
+/* 页面级基础：字号 / 字体 / 重置。颜色与间距全部来自 @stash/ui 的令牌。 */
+
 :root {
-  /* ---------- 颜色：取自 Alright 主题的设计变量 ---------- */
-  --bg-color: #f7f8fa;
-  --card-bg: #ffffff;
-  --primary-color: #3858f6;
-  --primary-soft: rgba(56, 88, 246, 0.1);
-  --text-main: #1d2129;
-  --text-sub: #4e5969;
-  --text-muted: #86909c;
-  --border-color: #f6f6f6;
-  --border-strong: #eeeeee;
-  --danger: #ff3e3e;
-  --orange: #ffba3a;
-  --green: #4abd86;
-
-  --radius-sm: 6px;
-  --radius-main: 12px;
-  --radius-lg: 24px;
-
-  /* 主题的阴影很轻：0 6px 16px rgba(27,26,49,2%) */
-  --shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02);
-  --shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06);
-
-  --sidebar-width: 240px;
-  --top-nav-height: 60px;
-  /* 内容区最大宽度，宽屏时整体居中 */
-  --layout-max-width: 1380px;
-  /* 内容列顶部让位高度（给悬浮搜索框），侧栏首卡与内容首卡都按它对齐 */
-  --content-top-offset: 52px;
-
-  /* 主题正文用霞鹜文楷（与演示站同一份 webfont），缺失时回退系统字体 */
-  --font-sans:
-    'LXGW WenKai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans CN', sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
-
-  font-family: var(--font-sans);
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--text-main);
-  background-color: var(--bg-color);
+  font-family: var(--su-font-sans);
+  font-size: var(--su-font-size-md);
+  line-height: var(--su-line-height-md);
+  color: var(--su-text-main);
+  background-color: var(--su-bg-page);
   color-scheme: light;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -53,15 +20,7 @@
 html,
 body,
 #root {
-  height: 100%;
-}
-
-/* 桌面端锁死视口，滚动交给右侧内容区 */
-body {
-  height: 100vh;
-  overflow: hidden;
-  background-color: var(--bg-color);
-  color: var(--text-main);
+  min-height: 100%;
 }
 
 a {
@@ -76,20 +35,13 @@ button {
   background: none;
 }
 
+ul,
+ol {
+  list-style: none;
+}
+
+/* 键盘焦点环由组件库统一提供；页面只补“可聚焦容器”的兜底 */
 :focus-visible {
-  outline: 2px solid var(--primary-color);
-  outline-offset: 2px;
-}
-
-@media (max-width: 900px) {
-  html,
-  body,
-  #root {
-    height: auto;
-  }
-
-  body {
-    height: auto;
-    overflow: auto;
-  }
+  outline: var(--su-focus-ring);
+  outline-offset: var(--su-focus-ring-offset);
 }
diff --git a/stash-web/src/main.tsx b/stash-web/src/main.tsx
index af55199..dc07bed 100644
--- a/stash-web/src/main.tsx
+++ b/stash-web/src/main.tsx
@@ -1,6 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './iconfont.css'
+import '@stash/ui/style.css'
 import './index.css'
 import App from './App.tsx'
 
diff --git a/stash-web/vite.config.ts b/stash-web/vite.config.ts
index 957eb68..260d6ce 100644
--- a/stash-web/vite.config.ts
+++ b/stash-web/vite.config.ts
@@ -6,6 +6,10 @@ const BACKEND = 'http://127.0.0.1:8080'
 // 前后端分离开发：dev / preview 都把 /api 透传给本地 Rust 服务
 export default defineConfig({
   plugins: [react()],
+  // @stash/ui 是本地 file 依赖（软链），去重 React，避免加载两份运行时
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
   server: {
     port: 5173,
     proxy: {