diff --git a/CHANGELOG.md b/CHANGELOG.md
index 85502d8..35d8f57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,30 @@ file format introduced in `[0.0.1.0]` was dropped.
 
 ## [Unreleased]
 
+## [0.8.2] - 2026-06-27
+
+### Fixed
+
+- **Settings appearance copy no longer mixes languages.** The zh-CN 外观 subtitle
+  read "System 会跟随操作系统偏好" — the English enum label `System` inside Chinese
+  chrome, breaking the single-language-chrome rule. Now "「跟随系统」会随操作系统的明暗
+  偏好自动切换。".
+- **Editorial / responsive heading sizes snapped onto the role ladder.** The tail the
+  0.8.1 small-text pass left — `.wiki-preview-card h2` (19 → title 17),
+  `.import-done-banner__headline` (20 → title 17), `.wisdom-popover__title h2`
+  (15.5 → body 15), and the responsive `.metric-card__value` downscales (24 / 26 → 22,
+  the reader-h2 editorial step) — is now on the ladder.
+
+### Changed
+
+- **MB-Web type migrated onto the role tokens.** `src/mb/mb.css` dropped its
+  self-contained half-step scale (11.5 / 12.5 / 13.5 / 14.5 …); 59 of its 60
+  `font-size` declarations now resolve to `--type-*` (label / body-sm / body / title)
+  by nearest role, made available by the app-wide `styles.css` import. The one kept
+  literal is `.mb-r-title` (22px), the paper-reader title. MB-Web radii/colors remain a tracked
+  follow-up (DESIGN.md §3). Verified in the browser across the library, reader, and
+  notes views.
+
 ## [0.8.1] - 2026-06-27
 
 ### Fixed
diff --git a/DESIGN.md b/DESIGN.md
index 3276b81..f76555d 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -309,12 +309,13 @@ no stray 14 / 16 sitting beside `body` (15) / `title` (17). `body-sm` is the hom
 for *all* dense machine metadata — IDs, paths, durations, pills, table cells,
 hints, segmented controls — that previously drifted to an undocumented 12px. The
 `no UI text renders off the role scale` e2e invariant guards this band across the
-workbench routes (a passive, default-viewport sweep). A few **editorial /
-responsive heading sizes outside the small-text band are a pre-existing tail not
-yet on the ladder** — `.wiki-preview-card h2` (19), `.import-done-banner__headline`
-(20), `.wisdom-popover__title h2` (15.5), and the responsive `.metric-card__value`
-downscales (24 / 26) — surfaced only in hover popovers, success banners, or at
-narrow breakpoints. They are a tracked follow-up, kept out of this pass.
+workbench routes (a passive, default-viewport sweep). The editorial / responsive
+heading sizes that lived outside the small-text band are now on the ladder too:
+`.wiki-preview-card h2` (19 → title 17), `.import-done-banner__headline` (20 →
+title 17), `.wisdom-popover__title h2` (15.5 → body 15), and the responsive
+`.metric-card__value` downscales (24 / 26 → 22, the reader-h2 editorial step). The
+only deliberate off-role size left is em-relative notation (inline code, KaTeX) and
+the MB-Web paper title (see the subsystem note below).
 
 The **cascade base** is the body role: `body` sets `font-size:
 var(--type-body-size)` (15px), so any unsized text — and every `font: inherit`
@@ -354,10 +355,14 @@ context), and **KaTeX** math sub/superscripts and layout struts size themselves
 relative to the formula. Everything else is on-ladder.
 
 **Subsystem boundary — MB-Web.** The focused 论文 reader (`src/mb/mb.css`,
-`.mb-`-prefixed) still carries its own self-contained half-step scale
-(11.5 / 12.5 / 13.5 / 14.5 …) and does **not** yet consume these `--type-*`
-tokens. Migrating it onto the role ladder is a tracked follow-up, kept out of the
-workbench consolidation so each can be visually verified on its own surfaces.
+`.mb-`-prefixed) now consumes the `--type-*` role tokens for **type**: its former
+half-step scale (11.5 / 12.5 / 13.5 / 14.5 …) collapsed onto label / body-sm / body
+/ title by nearest role, and the global `styles.css` (imported app-wide in
+`main.tsx`) makes the tokens available inside the MB-Web tree. The one deliberate
+literal is `.mb-r-title` (22px) — the paper-reader title, the reader-h2 editorial
+step, kept compact rather than the workbench reader's 32. MB-Web's **radii and
+colors** are still off the documented scale (a separate `detect.mjs` finding) and
+remain a tracked follow-up; only type was migrated here.
 
 **The agent surface rides the roles.** Assistant and user messages use the body
 role (15px) for prose, the editorial serif for the three markdown heading levels
diff --git a/package.json b/package.json
index 4b9cd63..12cbf1c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dikw-web",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "private": true,
   "type": "module",
   "engines": {
diff --git a/src/i18n.ts b/src/i18n.ts
index 94d98cd..5c951d9 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -867,7 +867,7 @@ export const translations = {
       unsavedChanges: "有未保存的更改",
       saved: "已保存",
       appearanceTitle: "外观",
-      appearanceDetail: "System 会跟随操作系统偏好。",
+      appearanceDetail: "「跟随系统」会随操作系统的明暗偏好自动切换。",
       system: "跟随系统",
       light: "浅色",
       dark: "深色",
diff --git a/src/mb/mb.css b/src/mb/mb.css
index ebe13b8..101a31f 100644
--- a/src/mb/mb.css
+++ b/src/mb/mb.css
@@ -42,7 +42,7 @@
   background: var(--bg);
   color: var(--text);
   font-family: var(--sans);
-  font-size: 15px;
+  font-size: var(--type-body-size);
   -webkit-font-smoothing: antialiased;
   overflow: hidden;
 }
@@ -105,7 +105,7 @@ html[data-theme="dark"] .mb-app {
   align-items: center;
   gap: 9px;
   font-weight: 600;
-  font-size: 15px;
+  font-size: var(--type-body-size);
 }
 .mb-brand svg {
   color: var(--ac);
@@ -120,7 +120,7 @@ html[data-theme="dark"] .mb-app {
   border: 0;
   background: transparent;
   padding: 6px 14px;
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   color: var(--muted);
   cursor: pointer;
   display: flex;
@@ -136,7 +136,7 @@ html[data-theme="dark"] .mb-app {
 .mb-badge {
   background: var(--acb);
   color: var(--act);
-  font-size: 11px;
+  font-size: var(--type-label-size);
   border-radius: 20px;
   padding: 0 6px;
   min-width: 16px;
@@ -152,7 +152,7 @@ html[data-theme="dark"] .mb-app {
   align-items: center;
   gap: 15px;
   color: var(--faint);
-  font-size: 12.5px;
+  font-size: var(--type-body-sm-size);
 }
 .mb-dot {
   width: 7px;
@@ -280,7 +280,7 @@ body.mb-col-resizing * {
   flex-direction: column;
 }
 .mb-lib-head {
-  font-size: 11.5px;
+  font-size: var(--type-label-size);
   color: var(--faint);
   margin-bottom: 10px;
   letter-spacing: 0.04em;
@@ -294,7 +294,7 @@ body.mb-col-resizing * {
   padding: 1px;
 }
 .mb-lib-empty {
-  font-size: 12.5px;
+  font-size: var(--type-body-sm-size);
   color: var(--faint);
   padding: 10px 4px;
   line-height: 1.5;
@@ -308,7 +308,7 @@ body.mb-col-resizing * {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--surface);
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   color: var(--text);
   line-height: 1.45;
   cursor: pointer;
@@ -364,7 +364,7 @@ body.mb-col-resizing * {
   background: var(--bg);
   color: var(--text);
   font-family: inherit;
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   padding: 2px 6px;
 }
 .mb-rename-input:focus {
@@ -394,7 +394,7 @@ body.mb-col-resizing * {
   z-index: 1;
 }
 .mb-pstage {
-  font-size: 11px;
+  font-size: var(--type-label-size);
   color: var(--ac);
   white-space: nowrap;
   display: flex;
@@ -412,7 +412,7 @@ body.mb-col-resizing * {
   border-radius: var(--radius);
   background: transparent;
   color: var(--muted);
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -467,7 +467,7 @@ body.mb-col-resizing * {
   margin: 0 0 4px;
 }
 .mb-r-meta {
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   color: var(--muted);
   margin-bottom: 16px;
   word-break: break-all;
@@ -481,11 +481,11 @@ body.mb-col-resizing * {
   gap: 14px 32px;
   align-items: start;
   font-family: var(--serif);
-  font-size: 15px;
+  font-size: var(--type-body-size);
   line-height: 1.78;
 }
 .mb-lab {
-  font-size: 11.5px;
+  font-size: var(--type-label-size);
   color: var(--faint);
   letter-spacing: 0.06em;
   margin: 0 0 2px;
@@ -545,7 +545,7 @@ body.mb-col-resizing * {
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  font-size: 12px;
+  font-size: var(--type-body-sm-size);
   color: var(--muted);
   background: var(--surface2);
   border: 0.5px solid var(--border);
@@ -566,10 +566,10 @@ body.mb-col-resizing * {
   background: none;
   color: var(--ac);
   cursor: pointer;
-  font-size: 12px;
+  font-size: var(--type-body-sm-size);
 }
 .mb-chip-cached {
-  font-size: 11px;
+  font-size: var(--type-label-size);
   background: var(--acb);
   color: var(--act);
   border-radius: 12px;
@@ -589,12 +589,12 @@ body.mb-col-resizing * {
   margin-bottom: 14px;
 }
 .mb-reader-empty .t {
-  font-size: 17px;
+  font-size: var(--type-title-size);
   color: var(--text);
   margin-bottom: 5px;
 }
 .mb-reader-empty .s {
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   color: var(--faint);
   margin-bottom: 18px;
 }
@@ -602,7 +602,7 @@ body.mb-col-resizing * {
 /* MarkdownView lives in the source reader — give it the serif paper feel. */
 .mb-reader .markdown-body {
   font-family: var(--serif);
-  font-size: 15px;
+  font-size: var(--type-body-size);
   line-height: 1.78;
   color: var(--text);
 }
@@ -621,7 +621,7 @@ body.mb-col-resizing * {
   flex: 0 0 auto;
 }
 .mb-qa-h b {
-  font-size: 14px;
+  font-size: var(--type-body-size);
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -631,7 +631,7 @@ body.mb-col-resizing * {
   color: var(--ac);
 }
 .mb-qa-h span {
-  font-size: 11.5px;
+  font-size: var(--type-label-size);
   color: var(--faint);
   display: block;
   margin-top: 3px;
@@ -644,7 +644,7 @@ body.mb-col-resizing * {
   display: flex;
   flex-direction: column;
   gap: 13px;
-  font-size: 13.5px;
+  font-size: var(--type-body-sm-size);
 }
 .mb-m-u {
   align-self: flex-end;
@@ -663,13 +663,13 @@ body.mb-col-resizing * {
   line-height: 1.6;
 }
 .mb-m-a .markdown-body {
-  font-size: 13.5px;
+  font-size: var(--type-body-sm-size);
 }
 .mb-m-hint {
   color: var(--faint);
   text-align: center;
   margin-top: 18px;
-  font-size: 12.5px;
+  font-size: var(--type-body-sm-size);
 }
 .mb-cite {
   margin-top: 8px;
@@ -678,7 +678,7 @@ body.mb-col-resizing * {
   gap: 6px;
 }
 .mb-cite span {
-  font-size: 11.5px;
+  font-size: var(--type-label-size);
   background: var(--surface2);
   border: 0.5px solid var(--border);
   border-radius: var(--radius);
@@ -699,7 +699,7 @@ body.mb-col-resizing * {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  font-size: 12px;
+  font-size: var(--type-body-sm-size);
   border: 0.5px solid var(--border2);
   background: transparent;
   color: var(--muted);
@@ -728,7 +728,7 @@ body.mb-col-resizing * {
   background: var(--bg);
   color: var(--text);
   padding: 0 12px;
-  font-size: 13.5px;
+  font-size: var(--type-body-sm-size);
 }
 .mb-qa-in input:focus {
   outline: 0;
@@ -774,7 +774,7 @@ body.mb-col-resizing * {
   flex-wrap: wrap;
 }
 .mb-notes-head .t {
-  font-size: 20px;
+  font-size: var(--type-title-size);
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -811,7 +811,7 @@ body.mb-col-resizing * {
   background: var(--surface);
   color: var(--text);
   padding: 0 12px 0 34px;
-  font-size: 13.5px;
+  font-size: var(--type-body-sm-size);
 }
 .mb-search input:focus {
   outline: 0;
@@ -825,7 +825,7 @@ body.mb-col-resizing * {
   flex-wrap: wrap;
 }
 .mb-f {
-  font-size: 12.5px;
+  font-size: var(--type-body-sm-size);
   padding: 5px 13px;
   border-radius: 20px;
   border: 0.5px solid var(--border2);
@@ -885,7 +885,7 @@ body.mb-col-resizing * {
   opacity: 1;
 }
 .mb-card-preview {
-  font-size: 13.5px;
+  font-size: var(--type-body-sm-size);
   line-height: 1.55;
   color: var(--text);
   display: -webkit-box;
@@ -920,7 +920,7 @@ body.mb-col-resizing * {
   background: none;
   color: var(--muted);
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   padding: 5px 8px 5px 4px;
   border-radius: var(--radius);
 }
@@ -940,7 +940,7 @@ body.mb-col-resizing * {
   gap: 6px;
 }
 .mb-kind {
-  font-size: 11.5px;
+  font-size: var(--type-label-size);
   padding: 2px 9px;
   border-radius: var(--radius);
   display: inline-flex;
@@ -960,7 +960,7 @@ body.mb-col-resizing * {
   color: var(--muted);
 }
 .mb-note-date {
-  font-size: 11.5px;
+  font-size: var(--type-label-size);
   color: var(--faint);
 }
 .mb-na {
@@ -981,7 +981,7 @@ body.mb-col-resizing * {
    reads like the chat answer. */
 .mb-quote {
   font-family: var(--serif);
-  font-size: 14.5px;
+  font-size: var(--type-body-size);
   line-height: 1.7;
   background: transparent;
   color: var(--text);
@@ -991,7 +991,7 @@ body.mb-col-resizing * {
 }
 .mb-quote .markdown-body {
   font-family: var(--serif);
-  font-size: 14.5px;
+  font-size: var(--type-body-size);
   line-height: 1.7;
   color: var(--text);
   background: transparent;
@@ -1003,7 +1003,7 @@ body.mb-col-resizing * {
   margin-bottom: 0;
 }
 .mb-note-txt {
-  font-size: 14px;
+  font-size: var(--type-body-size);
   line-height: 1.6;
   margin: 0 0 11px;
   white-space: pre-wrap;
@@ -1022,14 +1022,14 @@ body.mb-col-resizing * {
   display: flex;
   align-items: center;
   gap: 5px;
-  font-size: 11.5px;
+  font-size: var(--type-label-size);
   color: var(--ac);
   letter-spacing: 0.03em;
   margin-bottom: 5px;
 }
 .mb-anno-body {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--type-body-size);
   line-height: 1.62;
   color: var(--text);
   white-space: pre-wrap;
@@ -1039,7 +1039,7 @@ body.mb-col-resizing * {
   align-items: center;
   gap: 9px;
   flex-wrap: wrap;
-  font-size: 12px;
+  font-size: var(--type-body-sm-size);
   color: var(--muted);
 }
 .mb-note-foot .src {
@@ -1048,7 +1048,7 @@ body.mb-col-resizing * {
   gap: 5px;
 }
 .mb-ed-lab {
-  font-size: 11px;
+  font-size: var(--type-label-size);
   color: var(--faint);
   margin: 0 0 5px;
   letter-spacing: 0.03em;
@@ -1062,7 +1062,7 @@ body.mb-col-resizing * {
   color: var(--text);
   padding: 8px 11px;
   font-family: var(--serif);
-  font-size: 13.5px;
+  font-size: var(--type-body-sm-size);
   line-height: 1.55;
   resize: vertical;
   margin-bottom: 11px;
@@ -1075,7 +1075,7 @@ body.mb-col-resizing * {
   background: var(--bg);
   color: var(--text);
   padding: 9px 11px;
-  font-size: 14px;
+  font-size: var(--type-body-size);
   line-height: 1.55;
   resize: vertical;
   margin-bottom: 11px;
@@ -1089,7 +1089,7 @@ body.mb-col-resizing * {
 .mb-empty {
   text-align: center;
   color: var(--faint);
-  font-size: 14px;
+  font-size: var(--type-body-size);
   padding: 40px 0;
   line-height: 1.6;
 }
@@ -1102,7 +1102,7 @@ body.mb-col-resizing * {
   color: var(--acfg);
   border: 0;
   border-radius: 22px;
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   padding: 7px 14px;
   cursor: pointer;
   display: flex;
@@ -1122,7 +1122,7 @@ body.mb-col-resizing * {
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
 }
 .mb-pop-h {
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -1134,7 +1134,7 @@ body.mb-col-resizing * {
 }
 .mb-pop-q {
   font-family: var(--serif);
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   line-height: 1.6;
   background: var(--acb);
   color: var(--act);
@@ -1152,7 +1152,7 @@ body.mb-col-resizing * {
   background: var(--bg);
   color: var(--text);
   padding: 8px 10px;
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   resize: none;
   margin-bottom: 10px;
 }
@@ -1166,7 +1166,7 @@ body.mb-col-resizing * {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  font-size: 11.5px;
+  font-size: var(--type-label-size);
   color: var(--muted);
   margin-bottom: 13px;
 }
@@ -1183,7 +1183,7 @@ body.mb-col-resizing * {
   white-space: nowrap;
 }
 .mb-pop-w {
-  font-size: 11px;
+  font-size: var(--type-label-size);
   color: var(--faint);
   white-space: nowrap;
 }
@@ -1193,7 +1193,7 @@ body.mb-col-resizing * {
   gap: 9px;
 }
 .mb-btn {
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   padding: 7px 14px;
   border-radius: var(--radius);
   border: 0.5px solid var(--border2);
@@ -1237,7 +1237,7 @@ body.mb-col-resizing * {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 15px;
+  font-size: var(--type-body-size);
   font-weight: 600;
   color: var(--text);
   margin-bottom: 8px;
@@ -1246,7 +1246,7 @@ body.mb-col-resizing * {
   color: var(--danger);
 }
 .mb-confirm-b {
-  font-size: 13.5px;
+  font-size: var(--type-body-sm-size);
   color: var(--muted);
   line-height: 1.6;
   margin-bottom: 16px;
@@ -1264,7 +1264,7 @@ body.mb-col-resizing * {
 }
 .mb-lib-err .mb-btn {
   padding: 5px 12px;
-  font-size: 12.5px;
+  font-size: var(--type-body-sm-size);
 }
 .mb-toast {
   position: fixed;
@@ -1274,7 +1274,7 @@ body.mb-col-resizing * {
   z-index: 60;
   background: var(--ac);
   color: var(--acfg);
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   padding: 9px 16px;
   border-radius: 24px;
   display: flex;
@@ -1288,7 +1288,7 @@ body.mb-col-resizing * {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: 11px;
+  font-size: var(--type-label-size);
   border: 0.5px solid var(--border);
   background: var(--surface2);
   color: var(--muted);
@@ -1317,7 +1317,7 @@ body.mb-col-resizing * {
 }
 .mb-up-err {
   display: block;
-  font-size: 11px;
+  font-size: var(--type-label-size);
   color: var(--danger);
   margin-top: 2px;
   white-space: normal;
@@ -1381,7 +1381,7 @@ body.mb-col-resizing * {
   border-radius: var(--radius);
   background: transparent;
   color: var(--muted);
-  font-size: 13px;
+  font-size: var(--type-body-sm-size);
   font-weight: 500;
   cursor: pointer;
 }
diff --git a/src/styles.css b/src/styles.css
index 3e33e06..3d75612 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2440,7 +2440,7 @@ html[data-theme="dark"] .wiki-reader-tabs .wrt-switch__thumb {
 .wiki-preview-card h2 {
   margin: 0;
   color: var(--text);
-  font-size: 19px;
+  font-size: var(--type-title-size);
   line-height: 1.25;
 }
 
@@ -3558,7 +3558,7 @@ html[data-theme="dark"] .wiki-reader-tabs .wrt-switch__thumb {
 }
 
 .import-done-banner__headline {
-  font-size: 20px;
+  font-size: var(--type-title-size);
   font-weight: 600;
   letter-spacing: -0.01em;
   color: var(--text);
@@ -4568,7 +4568,7 @@ html[data-theme="dark"] .markdown-body blockquote {
   }
 
   .metric-card__value {
-    font-size: 24px;
+    font-size: 22px;
   }
 }
 
@@ -5174,7 +5174,7 @@ html[data-theme="dark"] .brand__mark {
     border-bottom: 0;
   }
   .overview-grid > .metric-card .metric-card__value {
-    font-size: 26px;
+    font-size: 22px;
   }
 }
 
@@ -6622,7 +6622,7 @@ html[data-theme="dark"] .graph-pixi-stage {
 
 .wisdom-popover__title h2 {
   margin: 0;
-  font-size: 15.5px;
+  font-size: var(--type-body-size);
   line-height: 1.2;
 }
 
diff --git a/tests/e2e/typography.spec.ts b/tests/e2e/typography.spec.ts
index 332b8c6..842c7a0 100644
--- a/tests/e2e/typography.spec.ts
+++ b/tests/e2e/typography.spec.ts
@@ -171,9 +171,8 @@ test("no rendered text drops below the 11px floor", async ({ page }) => {
 // the drift the post-v0.8.0 consolidation removed. Code, KaTeX math and the
 // missing-asset placeholder are em-relative notation, deliberately exempt. NOTE:
 // this is a passive, default-viewport sweep — it does not open modals/popovers or
-// exercise @media breakpoints, so a few pre-existing editorial/responsive heading
-// sizes (preview-card 19, done-banner 20, wisdom-popover 15.5, responsive metric
-// 24/26) are out of its reach and out of this pass; see DESIGN.md §3.
+// exercise @media breakpoints, so any size that surfaces only there is out of its
+// reach (see DESIGN.md §3).
 test("no UI text renders off the role scale", async ({ page }) => {
   for (const route of SWEEP_ROUTES) {
     await gotoAndSettle(page, route);