From db541c820eb4129d9f17c9ce724706d11767199d Mon Sep 17 00:00:00 2001
From: AskaEth <i@yeij.top>
Date: Tue, 10 Nov 2026 23:12:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(app-iced):=20Ink=20Cat=20/=20Silver=20Cat?=
 =?UTF-8?q?=20=E6=8D=A2=E8=82=A4=20=E2=80=94=E2=80=94=20=E5=8F=8C=E8=89=B2?=
 =?UTF-8?q?=E6=9D=BF=E9=BB=98=E8=AE=A4=20+=20=E8=A7=84=E6=A0=BC=E5=8D=A1?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=87=A0=E4=BD=95=EF=BC=88M229=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

产品出厂外观从 tone 派生的 `Scheme::baseline` 切到品牌色板：深色 = Ink（淡绿）、
浅色 = Silver（钢蓝），D38 取色链（背景图 / 壁纸）仍然优先，取色失败回落到色板。

主题三档接进设置页「通用 → 主题」：Ink / Silver / 跟随系统（落盘仍是
`appearance.theme_mode` 的 dark / light / auto，不新增配置键）。

组件几何按规格卡对齐（M228 的 `inkcat` 登记项逐条落地）：
- 卡片圆角 12 → 16；实例元信息卡改用新的 ELEVATED CARD（无描边、SurfaceContainer
  底、内距 24、上标注 11/600）
- Snackbar 48/4 → 52/16（双行 72）
- Checkbox 20/rx2 → 18/rx4；Radio 20 → 18 Ø（内点仍 10）
- 按钮加 XS~XL 五档（产品仍只用 S=40），内距改走 ControlSize::pad_x
- 新增 FAB 四态（40/56/80/160×56）与图标按钮第四式 outlined
- 语言与主题两行 chips 统一成规格卡 chip（32 高 / rx8）

`theme.rs` 原本正好 400 行，先把单测纯搬移到 `theme/tests.rs` 再加色板字段；
`app/tests.rs`、`settings/general.rs` 同样按纯搬移拆分守 400 行硬线。

验证：cargo fmt --all --check、cargo check -p unlucky-app-iced --all-targets、
cargo test --workspace（除 clippy 前的一轮 flake，见报告）、cargo clippy --workspace
--all-targets -- -D warnings、全仓 400 行扫描。视觉矩阵 42 张在
DevDocs/artifacts/m229/（gitignored，不进提交）。
---
 crates/app-iced/src/app/state/construct.rs    |   5 +-
 crates/app-iced/src/app/state/theme.rs        |  66 ++++++
 crates/app-iced/src/app/tests.rs              |  16 +-
 crates/app-iced/src/app/tests/appearance.rs   |   2 +-
 crates/app-iced/src/app/tests/theme.rs        |  85 +++++++
 .../app-iced/src/app/update/page_messages.rs  |   3 +
 crates/app-iced/src/app/view.rs               |   4 +-
 .../src/components/buttons/assemble.rs        |  14 +-
 crates/app-iced/src/components/buttons/fab.rs | 203 ++++++++++++++++
 .../src/components/buttons/fab/tests.rs       |  40 ++++
 .../src/components/buttons/geometry.rs        |  32 ++-
 crates/app-iced/src/components/buttons/mod.rs |  47 +++-
 .../app-iced/src/components/buttons/tests.rs  |  12 +-
 .../src/components/feedback/geometry.rs       |   4 +-
 .../app-iced/src/components/feedback/panel.rs |  13 +-
 .../app-iced/src/components/feedback/probe.rs |  10 +-
 .../src/components/feedback/snackbar.rs       |   6 +-
 .../app-iced/src/components/feedback/tests.rs |  13 +-
 .../src/components/gallery/feedback.rs        |   4 +-
 crates/app-iced/src/components/gallery/mod.rs |  16 +-
 .../app-iced/src/components/gallery/sizes.rs  | 123 ++++++++++
 crates/app-iced/src/components/mod.rs         |   2 +
 .../src/components/selection/geometry.rs      |  36 +--
 .../src/components/selection/tests.rs         |  18 +-
 .../src/components/surfaces/elevated.rs       | 126 ++++++++++
 .../src/components/surfaces/elevated/tests.rs |  68 ++++++
 .../app-iced/src/components/surfaces/mod.rs   |   7 +
 crates/app-iced/src/pages/account/widgets.rs  |   3 +-
 .../src/pages/appearance/section/mod.rs       |   5 +-
 crates/app-iced/src/pages/frame/pieces.rs     |  10 +-
 crates/app-iced/src/pages/frame/tests.rs      |  14 +-
 crates/app-iced/src/pages/instances/detail.rs |  31 +--
 crates/app-iced/src/pages/logs/panel.rs       |   3 +-
 crates/app-iced/src/pages/message.rs          |   6 +
 crates/app-iced/src/pages/settings/general.rs |  55 +++--
 .../src/pages/settings/general/theme.rs       | 161 +++++++++++++
 .../src/pages/settings/language_appearance.rs |  12 +-
 crates/app-iced/src/pages/settings/mod.rs     |   2 +-
 .../pages/settings/tests/general_section.rs   |  13 +-
 crates/app-iced/src/shell/mod.rs              |   2 +-
 crates/app-iced/src/theme.rs                  | 224 ++++++------------
 crates/app-iced/src/theme/tests.rs            | 207 ++++++++++++++++
 crates/i18n/src/catalog/general.rs            |   9 +
 crates/i18n/src/catalog/golden/tail_ai.rs     |   7 +
 44 files changed, 1439 insertions(+), 300 deletions(-)
 create mode 100644 crates/app-iced/src/app/tests/theme.rs
 create mode 100644 crates/app-iced/src/components/buttons/fab.rs
 create mode 100644 crates/app-iced/src/components/buttons/fab/tests.rs
 create mode 100644 crates/app-iced/src/components/gallery/sizes.rs
 create mode 100644 crates/app-iced/src/components/surfaces/elevated.rs
 create mode 100644 crates/app-iced/src/components/surfaces/elevated/tests.rs
 create mode 100644 crates/app-iced/src/components/surfaces/mod.rs
 create mode 100644 crates/app-iced/src/pages/settings/general/theme.rs
 create mode 100644 crates/app-iced/src/theme/tests.rs

diff --git a/crates/app-iced/src/app/state/construct.rs b/crates/app-iced/src/app/state/construct.rs
index 311104f..4efff33 100644
--- a/crates/app-iced/src/app/state/construct.rs
+++ b/crates/app-iced/src/app/state/construct.rs
@@ -154,7 +154,10 @@ impl App {
             avatars: pages::account::avatar::Cache::default(),
             corner_applied: None,
         };
-        // 配色来源档可能已经指向一张背景图：那时 `Ui` 必须由解析出的方案构造，而不是 baseline。
+        // M229：设置页「主题」行的选中态来自设置组自有状态（`language_appearance::State::theme`），
+        // 唯一写者是 `App::set_theme_mode`；这里把启动时读到的档位灌进去，首帧才不会画错档。
+        app.settings.language_appearance.theme = theme_mode;
+        // 配色来源档可能已经指向一张背景图：那时 `Ui` 必须由解析出的方案构造，而不是色板。
         app.rebuild_ui();
         // M174：助手配置的首屏值（真值来自 `config/launcher.json`；截图通道走 `ULL_AI_STATE`）。
         app.hydrate_ai_settings();
diff --git a/crates/app-iced/src/app/state/theme.rs b/crates/app-iced/src/app/state/theme.rs
index 7094a52..b8086ab 100644
--- a/crates/app-iced/src/app/state/theme.rs
+++ b/crates/app-iced/src/app/state/theme.rs
@@ -6,6 +6,8 @@
 //! 截图通道的判据 [`App::has_screenshot`] 也放在这儿：上面三条里两条都要「截图不读用户配置」。
 
 use crate::app::diag::diag;
+use crate::app::message::Message;
+use iced::Task;
 use unlucky_design::color::SchemeFlavor;
 use unlucky_presenter::prefs::ThemeMode;
 
@@ -73,6 +75,8 @@ impl App {
         }
         let mode = self.bridge.load().1;
         self.theme_mode = mode;
+        // M229：设置页那一行画的是这个字段（唯一写者见 [`App::set_theme_mode`]）。
+        self.settings.language_appearance.theme = mode;
         match mode {
             ThemeMode::Light => self.set_flavor(SchemeFlavor::Light),
             ThemeMode::Dark => self.set_flavor(SchemeFlavor::Dark),
@@ -80,6 +84,68 @@ impl App {
         }
     }
 
+    /// 换主题档（M229：设置页「通用 → 主题」→ `pages::Message::Theme`）。
+    ///
+    /// 四件事：①改 `theme_mode`（唯一真相）②同步设置页那一行的档位 ③重建 `Ui`（色板换了，
+    /// `Theme::name` 与 49 个角色一起变，iced 才会重算缓存）④落盘 `appearance.theme_mode`。
+    /// `Auto` 自己没有颜色，要等系统回答——所以返回 `iced::system::theme()` 那个 Task，
+    /// 由既有的 `Message::SystemTheme` 分支落地（它只在 `theme_mode == Auto` 时吃这条消息）。
+    pub(in crate::app) fn set_theme_mode(&mut self, mode: ThemeMode) -> Task<Message> {
+        self.settings.language_appearance.theme = mode;
+        if mode == self.theme_mode {
+            return Task::none();
+        }
+        self.theme_mode = mode;
+
+        let prefs = self.appearance_prefs.clone();
+        self.bridge.persist(&prefs, mode);
+        match self.bridge.path() {
+            Some(path) => diag!("[theme] mode={} 已写回 {}", mode.as_str(), path.display()),
+            None => diag!(
+                "[theme] mode={} 未落盘（数据根解析不出来，内存态运行）：重启会回到旧值",
+                mode.as_str()
+            ),
+        }
+
+        match mode {
+            ThemeMode::Light => {
+                self.set_flavor(SchemeFlavor::Light);
+                self.after_theme_switch();
+                Task::none()
+            }
+            ThemeMode::Dark => {
+                self.set_flavor(SchemeFlavor::Dark);
+                self.after_theme_switch();
+                Task::none()
+            }
+            // 跟随系统：当前先按已有深浅画，紧接着由系统主题回答覆盖
+            // （`set_flavor` 有「同档不重建」的保护，所以这里不必先猜一次）。
+            ThemeMode::Auto => iced::system::theme().map(Message::SystemTheme),
+        }
+    }
+
+    /// 换档之后重建视图模型 + 记一行取证日志（色板名就是证据：`ink` / `silver`）。
+    fn after_theme_switch(&mut self) {
+        self.view_dirty = true;
+        self.refresh_view();
+        diag!(
+            "[theme] mode={} board={} Theme::name={}",
+            self.theme_mode().as_str(),
+            self.board_name(),
+            self.ui.name()
+        );
+    }
+
+    /// 当前主题档（设置页那一行的选中态来自 `settings.groups`，这里是取证与测试的读数口）。
+    pub(in crate::app) fn theme_mode(&self) -> ThemeMode {
+        self.theme_mode
+    }
+
+    /// 当前色板名（日志与测试用：`ink` / `silver`；取色方案接管时仍报它所属深浅的那块）。
+    pub(in crate::app) fn board_name(&self) -> &'static str {
+        self.ui.board().name()
+    }
+
     /// 当前令牌求值器（测试与截图日志用）。
     pub(in crate::app) fn ui(&self) -> &Ui {
         &self.ui
diff --git a/crates/app-iced/src/app/tests.rs b/crates/app-iced/src/app/tests.rs
index 2f10ec5..a86769e 100644
--- a/crates/app-iced/src/app/tests.rs
+++ b/crates/app-iced/src/app/tests.rs
@@ -54,11 +54,11 @@ fn switching_flavor_rebuilds_styles_but_keeps_ui_state() {
     let mut app = headless(Options::default(), SchemeFlavor::Light);
     app.state.navigate(Route::Logs);
     app.refresh_view();
-    assert_eq!(app.ui().name(), "ull-m3-light");
+    assert_eq!(app.ui().name(), "ull-silver");
 
     app.set_flavor(SchemeFlavor::Dark);
 
-    assert_eq!(app.ui().name(), "ull-m3-dark", "切主题要换主题名");
+    assert_eq!(app.ui().name(), "ull-ink", "切主题要换主题名");
     assert_eq!(app.state.route(), &Route::Logs, "切主题不许重置 UI 状态");
     assert_eq!(app.view.screen, pages::Screen::Logs, "视图模型跟着路由");
     assert!(app.options.screenshot.is_none(), "切主题不许改启动参数");
@@ -78,7 +78,7 @@ fn screenshot_mode_never_waits_for_the_system_theme() {
     assert_eq!(options.capture_flavor(), Some(SchemeFlavor::Light));
 
     let app = headless(options, SchemeFlavor::Light);
-    assert!(app.has_screenshot() && app.ui().name() == "ull-m3-light");
+    assert!(app.has_screenshot() && app.ui().name() == "ull-silver");
 }
 
 #[test]
@@ -336,7 +336,7 @@ fn the_page_navigation_entry_also_detaches() {
 fn screenshot_mode_ignores_the_settings_file_theme() {
     let mut app = headless(screenshot_options(), SchemeFlavor::Light);
     app.apply_config_theme();
-    assert_eq!(app.ui().name(), "ull-m3-light", "截图模式的主题只认命令行");
+    assert_eq!(app.ui().name(), "ull-silver", "截图模式的主题只认命令行");
 }
 
 /// 主题优先级：`--theme` > 配置文件 `appearance.theme_mode` > 系统主题。
@@ -355,7 +355,7 @@ fn the_system_theme_never_overrides_an_explicit_one() {
     let mut auto = headless(Options::default(), SchemeFlavor::Light);
     assert_eq!(auto.theme_mode, ThemeMode::Auto);
     let _ = auto.update(Message::SystemTheme(iced::theme::Mode::Dark));
-    assert_eq!(auto.ui().name(), "ull-m3-dark", "auto 模式要跟随系统");
+    assert_eq!(auto.ui().name(), "ull-ink", "auto 模式要跟随系统");
 
     // ② 配置文件显式 dark：系统给浅色也不许改
     let mut pinned = headless(Options::default(), SchemeFlavor::Dark);
@@ -363,7 +363,7 @@ fn the_system_theme_never_overrides_an_explicit_one() {
     let _ = pinned.update(Message::SystemTheme(iced::theme::Mode::Light));
     assert_eq!(
         pinned.ui().name(),
-        "ull-m3-dark",
+        "ull-ink",
         "配置文件说 dark，系统说 light：不许改"
     );
 
@@ -378,7 +378,9 @@ fn the_system_theme_never_overrides_an_explicit_one() {
     let _ = explicit.update(Message::SystemTheme(iced::theme::Mode::Light));
     assert_eq!(
         explicit.ui().name(),
-        "ull-m3-dark",
+        "ull-ink",
         "--theme 优先级最高，系统主题不许盖"
     );
 }
+
+mod theme;
diff --git a/crates/app-iced/src/app/tests/appearance.rs b/crates/app-iced/src/app/tests/appearance.rs
index ff7991e..5f05438 100644
--- a/crates/app-iced/src/app/tests/appearance.rs
+++ b/crates/app-iced/src/app/tests/appearance.rs
@@ -181,7 +181,7 @@ fn a_decodable_png_makes_the_background_and_the_palette_active() {
         "取色成功后 Ui 要换成解析出的方案"
     );
     // 换 scheme 之后主题名仍是同一个（深浅没变），但 primary 必须与 baseline 不同。
-    assert_eq!(app.ui().name(), "ull-m3-light");
+    assert_eq!(app.ui().name(), "ull-silver");
     let baseline = crate::theme::Ui::new(SchemeFlavor::Light, FAMILIES);
     assert_ne!(
         app.ui().color(unlucky_design::color::Role::Primary),
diff --git a/crates/app-iced/src/app/tests/theme.rs b/crates/app-iced/src/app/tests/theme.rs
new file mode 100644
index 0000000..b2528cd
--- /dev/null
+++ b/crates/app-iced/src/app/tests/theme.rs
@@ -0,0 +1,85 @@
+//! 主题三档（Ink / Silver / 跟随系统）的落点测试（M229；从 `app/tests.rs` 拆出守 400 行）。
+//!
+//! 这一份只管**用户点设置页那三枚 chip 之后**发生的事：换色板、同步设置组状态、落盘。
+//! `Auto`（跟随系统）那条路在 `app::tests::the_system_theme_never_overrides_an_explicit_one`。
+
+use crate::app::message::Message;
+use crate::app::state::App;
+use crate::cli::Options;
+use crate::pages;
+use crate::theme::Families;
+use unlucky_design::color::SchemeFlavor;
+use unlucky_presenter::mock::MockBackend;
+use unlucky_presenter::prefs::ThemeMode;
+use unlucky_presenter::settings_bridge::SettingsBridge;
+
+const FAMILIES: Families = Families {
+    text: "Segoe UI",
+    display: "Segoe UI",
+    mono: "Consolas",
+};
+
+/// 一个把配置写在临时文件里的 App：测「落盘」必须真的过文件（内存桥读回来永远是出厂值）。
+fn with_config() -> (App, std::path::PathBuf) {
+    let dir = std::env::temp_dir().join(format!("ull-theme-m229-{}", std::process::id()));
+    std::fs::create_dir_all(dir.join("config")).expect("临时目录");
+    let path = dir.join("config/launcher.json");
+    std::fs::write(&path, "{}").expect("写配置文件");
+
+    let app = App::with_presenter(
+        Options::default(),
+        FAMILIES,
+        SchemeFlavor::Light,
+        Box::new(MockBackend::new()),
+        SettingsBridge::with_path(&path),
+    );
+    (app, dir)
+}
+
+/// M229：设置页「通用 → 主题」三档（Ink / Silver / 跟随系统）真的换色板、真的落盘。
+///
+/// 抓得住：①`pages::Message::Theme` 没接进 `on_page`（点了没反应）②接了但不换 `Ui`
+/// （只有选中态变了，界面颜色还是旧的）③同步设置组状态漏了（设置页首帧/刷新后画错档）
+/// ④落盘漏了（重启回旧值——这里读的是内存桥的 `theme_mode`）。
+/// 抓不住：色板好不好看、像素级差异（那要截图，见 `DevDocs/artifacts/m229/`）。
+#[test]
+fn the_theme_message_switches_the_board_and_persists_it() {
+    let (mut app, dir) = with_config();
+    assert_eq!(app.board_name(), "silver", "首帧是浅色主方案（Silver）");
+
+    // 选 Ink（= 深色主方案）
+    let _ = app.update(Message::Page(pages::Message::Theme(ThemeMode::Dark)));
+    assert_eq!(app.theme_mode(), ThemeMode::Dark);
+    assert_eq!(app.board_name(), "ink", "Ink 深板要真切过去");
+    assert_eq!(app.ui().flavor(), SchemeFlavor::Dark);
+    assert_eq!(
+        app.settings.language_appearance.theme,
+        ThemeMode::Dark,
+        "设置页那一行的档位要跟着改"
+    );
+    // 落盘：真的过了文件（重新打开同一个配置读回来就是 dark）
+    assert_eq!(
+        SettingsBridge::with_path(dir.join("config/launcher.json"))
+            .load()
+            .1,
+        ThemeMode::Dark,
+        "主题档要落盘"
+    );
+
+    // 选 Silver（= 浅色主方案）
+    let _ = app.update(Message::Page(pages::Message::Theme(ThemeMode::Light)));
+    assert_eq!(app.board_name(), "silver");
+    assert_eq!(app.ui().flavor(), SchemeFlavor::Light);
+    assert_eq!(
+        SettingsBridge::with_path(dir.join("config/launcher.json"))
+            .load()
+            .1,
+        ThemeMode::Light
+    );
+
+    // 同一档再点一次：不许白重建
+    let refreshes = app.refreshes;
+    let _ = app.update(Message::Page(pages::Message::Theme(ThemeMode::Light)));
+    assert_eq!(app.refreshes, refreshes, "同一档不该再重建视图模型");
+    std::fs::remove_dir_all(&dir).ok();
+}
diff --git a/crates/app-iced/src/app/update/page_messages.rs b/crates/app-iced/src/app/update/page_messages.rs
index da352e9..5494647 100644
--- a/crates/app-iced/src/app/update/page_messages.rs
+++ b/crates/app-iced/src/app/update/page_messages.rs
@@ -66,6 +66,9 @@ impl App {
             // 这是**唯一**一处绕开 M101 投递口的页面消息：语言档位不是「某一组的状态」，
             // 它要落盘到 `ui.language` 并重建整棵视图模型（设置页的语言行只是它的第一个出口）。
             pages::Message::Language(choice) => self.set_language(choice),
+            // M229：换主题档（Ink / Silver / 跟随系统）——换 `Ui` 的色板 + 落盘
+            // `appearance.theme_mode`。与语言行同一条「页面消息直接改本地 + 落盘」的路。
+            pages::Message::Theme(mode) => return self.set_theme_mode(mode),
             // M109：内容库那一套意图在自己的文件里穷尽分发（`update/content.rs`）
             pages::Message::Content(message) => return self.on_content(message),
             // M95：摘要落剪贴板（文本由页面造，这里只搬）
diff --git a/crates/app-iced/src/app/view.rs b/crates/app-iced/src/app/view.rs
index e3ee9bb..ff108dc 100644
--- a/crates/app-iced/src/app/view.rs
+++ b/crates/app-iced/src/app/view.rs
@@ -33,7 +33,7 @@ use update::update_of;
 /// 上一次记过的「设置页看到的组 + 主题」（`None` = 还没记过）。
 ///
 /// 只给 [`note_screenshot_group`] 用：`view` 每帧都会跑，日志必须只在身份**变化**时落一行。
-/// 用 `Mutex` 而不是 `AtomicUsize` 位打包：主题是字符串（`ull-m3-light` / `ull-m3-dark`），
+/// 用 `Mutex` 而不是 `AtomicUsize` 位打包：主题是字符串（`ull-ink` / `ull-silver`），
 /// 把两件事挤进一个整数要引入「高半位 = 深色」这种与主题命名耦合的约定，不如老实用一对值。
 static SHOT_GROUP_LOGGED: std::sync::Mutex<Option<(usize, String)>> = std::sync::Mutex::new(None);
 
@@ -43,7 +43,7 @@ static SHOT_GROUP_LOGGED: std::sync::Mutex<Option<(usize, String)>> = std::sync:
 ///
 /// 举证图自带不了身份。M201 的事故就是 worker 交了一张「外观」页当下载组的证据，报告里的结论
 /// 建立在一个错的「这是哪个组」上，直到视觉 reviewer 自己重拍才发现。所以每张交付图都要能对上
-/// 一行日志：`[shot] settings route=Settings group=2 theme=ull-m3-light`。
+/// 一行日志：`[shot] settings route=Settings group=2 theme=ull-silver`。
 ///
 /// ## 为什么只在变化时打
 ///
diff --git a/crates/app-iced/src/components/buttons/assemble.rs b/crates/app-iced/src/components/buttons/assemble.rs
index 0b22b85..96f1ef0 100644
--- a/crates/app-iced/src/components/buttons/assemble.rs
+++ b/crates/app-iced/src/components/buttons/assemble.rs
@@ -10,7 +10,6 @@ use iced::{Alignment, Background, Border, Element, Length, Pixels, Shadow};
 use unlucky_design::color::Role;
 use unlucky_design::elevation::Elevation;
 use unlucky_design::shape::ShapeScale;
-use unlucky_design::typography::TypeRole;
 
 use crate::icons;
 use crate::theme::Ui;
@@ -48,7 +47,7 @@ pub(super) fn assemble<'a, M: Clone + 'a>(
     variant: Variant,
     spec: super::Button<'a, M>,
 ) -> Element<'a, M> {
-    let geometry = Geometry::of(ui, variant, spec.leading.is_some());
+    let geometry = Geometry::sized(ui, variant, spec.leading.is_some(), spec.size);
     let (fill, content, border) = variant.roles();
     let forced = spec.state.or(if spec.on_press.is_none() {
         Some(Interaction::Disabled)
@@ -70,12 +69,13 @@ pub(super) fn assemble<'a, M: Clone + 'a>(
     // 逐像素相同」（视觉 reviewer 实测 changed_px = 0；filled 禁用标签 1.23:1）。
     let ink = content_color(ui, forced, content, fill, variant.disabled_content());
 
+    // 标签排版跟尺寸档走：`ControlSize::label()` 已把「字号跟字级、字重固定 500」定死
+    // （XS/S = LabelLarge 14、M = BodyLarge 16、L = HeadlineSmall 24、XL = HeadlineLarge 32）。
+    let label_style = geometry.size.label();
     let label = text(spec.label)
-        .size(ui.style(TypeRole::LabelLarge).size_px)
-        .line_height(LineHeight::Absolute(Pixels(
-            ui.style(TypeRole::LabelLarge).line_height_px,
-        )))
-        .font(ui.font_of(ui.emphasized(TypeRole::LabelLarge)))
+        .size(label_style.size_px)
+        .line_height(LineHeight::Absolute(Pixels(label_style.line_height_px)))
+        .font(ui.font_of(label_style))
         .color(ink);
 
     let mut row = Row::new().align_y(Alignment::Center);
diff --git a/crates/app-iced/src/components/buttons/fab.rs b/crates/app-iced/src/components/buttons/fab.rs
new file mode 100644
index 0000000..e057f1e
--- /dev/null
+++ b/crates/app-iced/src/components/buttons/fab.rs
@@ -0,0 +1,203 @@
+//! FAB 四态（规格卡 `FAB / SMALL - DEFAULT - MEDIUM - EXTENDED`）。
+//!
+//! ## 规格卡原值（`[spec]` = 图上的坐标/字号，几何全部来自 [`FabSize`] 的令牌访问器）
+//!
+//! | 档 | 尺寸 | 圆角 | 图标 | 标签 | 规格卡依据 |
+//! |---|---|---|---|---|---|
+//! | Small | 40×40 | 12（`Medium`） | 20 | — | `+` 徽章式小 FAB |
+//! | Default | 56×56 | 16（`Large`） | 26 | — | M3 默认 FAB |
+//! | Medium | 80×80 | 20（`LargeIncreased`） | 34 | — | 中大档 |
+//! | Extended | 160×56（最小宽） | 16（`Large`） | 24 | 15 | `+ New`：起始内距 28、图标↔标签 8 |
+//!
+//! ## 配色：`PrimaryContainer` / `OnPrimaryContainer`
+//!
+//! 规格卡上四颗 FAB 都是**淡绿底 + 深绿字形**，M3 的对应角色正是 `primary-container` /
+//! `on-primary-container`（`boards/ink.rs` 的 `[spec]` 行注释也这么标：`FAB 底` / `FAB 图标`）。
+//! 所以这里不引入新角色，也不画阴影——规格卡上是纯色块，M3 的 FAB 高程由容器色表达。
+//!
+//! 色值不写在这份文档里：`tests/no_hardcoded_tokens.rs` 会扫 `src/**` 的十六进制色值，
+//! 要核对数字请看 `boards/ink.rs` 的 `ANCHORS` 表（那是唯一真源）。
+//!
+//! ## 为什么单独一个文件
+//!
+//! 按钮家族（五式 × 五态 × 五档）已经在 `buttons/mod.rs` + `assemble.rs` 里贴着 400 行；FAB 的
+//! 几何与按钮**不共享**（圆角不是半高、图标随档放大、扩展态有自己的内距），硬塞进去只会让两边
+//! 的读取路径都变长。共享的只有 `interaction` 的状态层与图标烘焙工具。
+
+use iced::widget::{button, container, row, text};
+use iced::{Alignment, Background, Border, Element, Length, Padding, Shadow};
+
+use unlucky_design::color::Role;
+use unlucky_design::icons::IconKind;
+use unlucky_design::inkcat::size::FabSize;
+use unlucky_design::typography::{TypeRole, TypeStyle, Weight};
+
+use crate::icons;
+use crate::theme::Ui;
+
+use super::super::interaction::{self, Interaction};
+use super::super::layout;
+
+/// 一颗 FAB：图标必有，标签只有扩展态有；`on_press = None` 即禁用。
+#[derive(Debug, Clone)]
+pub struct Fab<'a, M> {
+    icon: IconKind,
+    label: Option<&'a str>,
+    size: FabSize,
+    on_press: Option<M>,
+    state: Option<Interaction>,
+}
+
+impl<'a, M> Fab<'a, M> {
+    /// 标准 FAB（默认档 = 56）。
+    pub fn new(icon: IconKind, on_press: M) -> Self {
+        Self {
+            icon,
+            label: None,
+            size: FabSize::Default,
+            on_press: Some(on_press),
+            state: None,
+        }
+    }
+
+    /// 扩展态（药丸 + 图标 + 标签）。`label` 文案由调用方给（组件不碰 i18n）。
+    pub fn extended(icon: IconKind, label: &'a str, on_press: M) -> Self {
+        Self {
+            label: Some(label),
+            size: FabSize::Extended,
+            ..Self::new(icon, on_press)
+        }
+    }
+
+    /// 换档（Small / Default / Medium / Extended）。
+    pub fn size(mut self, size: FabSize) -> Self {
+        self.size = size;
+        self
+    }
+
+    /// 强制视觉态（gallery 取证用；运行期不要调）。
+    pub fn state(mut self, state: Interaction) -> Self {
+        self.state = Some(state);
+        self
+    }
+}
+
+/// 画一颗 FAB。
+pub fn fab<'a, M: Clone + 'a>(ui: &'a Ui, spec: Fab<'a, M>) -> Element<'a, M> {
+    let size = spec.size;
+    let forced = spec.state.or(if spec.on_press.is_none() {
+        Some(Interaction::Disabled)
+    } else {
+        None
+    });
+    let ink = match forced {
+        // 禁用：38% 的内容色叠在容器上（与按钮族的容器档同一口径）
+        Some(Interaction::Disabled) => {
+            interaction::disabled_button_content(ui, Role::OnPrimaryContainer, true)
+        }
+        _ => ui.color(Role::OnPrimaryContainer),
+    };
+
+    let glyph = layout::fixed(
+        size.icon_px(),
+        size.icon_px(),
+        icons::view_at::<M>(spec.icon, ink, size.icon_px()),
+    );
+
+    let content: Element<'a, M> = match spec.label {
+        // 扩展态：图标 + 标签（起始内距 28、间距 8，规格卡实测值）
+        Some(label) => {
+            let label_style = TypeStyle {
+                weight: Weight::Medium,
+                ..TypeRole::BodyMedium.style()
+            };
+            let label_px = size.label_px();
+            row![
+                glyph,
+                text(label)
+                    .size(label_px)
+                    .font(ui.font_of(TypeStyle {
+                        size_px: label_px,
+                        ..label_style
+                    }))
+                    .color(ink),
+            ]
+            .spacing(size.gap_px())
+            .align_y(Alignment::Center)
+            .padding(Padding {
+                top: 0.0,
+                right: 28.0,
+                bottom: 0.0,
+                left: size.pad_start_px(),
+            })
+            .into()
+        }
+        None => container(glyph)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .align_x(Alignment::Center)
+            .align_y(Alignment::Center)
+            .into(),
+    };
+
+    let shape = size.shape();
+    let radius = size.radius_px();
+    let style = move |_theme: &iced::Theme, status: button::Status| {
+        let state = forced.unwrap_or_else(|| Interaction::from_status(status));
+        let background = match state.layer() {
+            // 状态层叠在容器色上（与按钮族同一条 `overlay_color` 口径）
+            Some(_) => interaction::overlay_color(
+                ui,
+                state,
+                Role::OnPrimaryContainer,
+                Role::PrimaryContainer,
+            )
+            .or(Some(ui.color(Role::PrimaryContainer))),
+            None => Some(ui.color(Role::PrimaryContainer)),
+        };
+        let text_color = if state.is_disabled() {
+            interaction::disabled_button_content(ui, Role::OnPrimaryContainer, true)
+        } else {
+            ui.color(Role::OnPrimaryContainer)
+        };
+
+        button::Style {
+            background: background.map(Background::Color),
+            text_color,
+            border: Border {
+                radius: iced::border::Radius::new(radius),
+                ..Border::default()
+            },
+            // 规格卡不画阴影；M3 的 FAB 高程靠容器色（rubric §7 的「L0/L1 不用阴影」同源）
+            shadow: Shadow::default(),
+            snap: true,
+        }
+    };
+
+    let width = if matches!(size, FabSize::Extended) {
+        // 扩展态是最小宽（160）：标签更长就撑开，短了就顶到最小宽
+        Length::Fixed(size.width_px())
+    } else {
+        Length::Fixed(size.width_px())
+    };
+
+    let element = button(content)
+        .width(width)
+        .height(Length::Fixed(size.height_px()))
+        .padding(Padding::default())
+        .style(style);
+
+    debug_assert!(radius > 0.0, "FAB 圆角必须来自 ShapeScale（{shape:?}）");
+    debug_assert!(
+        matches!(size, FabSize::Extended) || size.pad_start_px() == 0.0,
+        "只有扩展态有起始内距"
+    );
+
+    match spec.on_press {
+        Some(message) => element.on_press(message).into(),
+        None => element.into(),
+    }
+}
+
+#[cfg(test)]
+mod tests;
diff --git a/crates/app-iced/src/components/buttons/fab/tests.rs b/crates/app-iced/src/components/buttons/fab/tests.rs
new file mode 100644
index 0000000..26bb214
--- /dev/null
+++ b/crates/app-iced/src/components/buttons/fab/tests.rs
@@ -0,0 +1,40 @@
+//! FAB 的几何断言（四档尺寸/圆角/图标/内距，全部对着规格卡原值）。
+//!
+//! 抓得住：档位与规格卡错位（例如把 Default 写成 48）、圆角被写成半高、扩展态内距悄悄改成 M3 的 16。
+//! 抓不住：配色与状态层（那走 `interaction` 的既有测试）、以及图上好不好看（D30）。
+
+use unlucky_design::inkcat::size::FabSize;
+
+#[test]
+fn the_four_states_are_the_spec_sizes() {
+    for (size, width, height, radius) in [
+        (FabSize::Small, 40.0, 40.0, 12.0),
+        (FabSize::Default, 56.0, 56.0, 16.0),
+        (FabSize::Medium, 80.0, 80.0, 20.0),
+        (FabSize::Extended, 160.0, 56.0, 16.0),
+    ] {
+        assert_eq!(size.width_px(), width, "{size:?} 宽");
+        assert_eq!(size.height_px(), height, "{size:?} 高");
+        assert_eq!(size.radius_px(), radius, "{size:?} 圆角");
+    }
+    assert_eq!(FabSize::ALL.len(), 4);
+}
+
+#[test]
+fn only_the_extended_state_carries_a_label_and_its_inset() {
+    for size in [FabSize::Small, FabSize::Default, FabSize::Medium] {
+        assert_eq!(size.label_px(), 0.0, "{size:?} 不该有标签");
+        assert_eq!(size.pad_start_px(), 0.0);
+    }
+    assert_eq!(FabSize::Extended.label_px(), 15.0);
+    assert_eq!(FabSize::Extended.pad_start_px(), 28.0);
+    assert_eq!(FabSize::Extended.gap_px(), 8.0);
+}
+
+/// 图标随档放大（20 / 26 / 34），扩展态回到 24（它与标签同行，跟着文字尺度走）。
+#[test]
+fn the_glyph_grows_with_the_smaller_states() {
+    assert!(FabSize::Small.icon_px() < FabSize::Default.icon_px());
+    assert!(FabSize::Default.icon_px() < FabSize::Medium.icon_px());
+    assert_eq!(FabSize::Extended.icon_px(), 24.0);
+}
diff --git a/crates/app-iced/src/components/buttons/geometry.rs b/crates/app-iced/src/components/buttons/geometry.rs
index c9ddecd..6c54a94 100644
--- a/crates/app-iced/src/components/buttons/geometry.rs
+++ b/crates/app-iced/src/components/buttons/geometry.rs
@@ -25,6 +25,7 @@
 use iced::Padding;
 
 use unlucky_design::icons::IconSize;
+use unlucky_design::inkcat::size::ControlSize;
 use unlucky_design::spacing::Space;
 
 use crate::theme::{Ui, STROKE_PX};
@@ -44,29 +45,50 @@ pub struct Geometry {
     pub gap: f32,
     /// 描边宽度；`0` = 该式无描边。
     pub stroke: f32,
+    /// 尺寸档（决定高、圆角折算边、内距与标签字级）。
+    pub size: ControlSize,
 }
 
 impl Geometry {
-    /// 按变体 + 有没有前置图标求值（带图标时左内边距收到 16，右仍 24）。
+    /// 按变体 + 有没有前置图标求值（默认 **S 档 = 40 高**，产品页用的就是这一档）。
+    ///
+    /// `#[cfg(test)]`：产品路径一律走 [`Geometry::sized`]（`assemble` 里带上了尺寸档），
+    /// 这里只给单测一个「S 档」的便捷入口，留成产品 API 只会让 `dead_code` 响。
+    #[cfg(test)]
     pub fn of(ui: &Ui, variant: Variant, leading_icon: bool) -> Self {
+        Self::sized(ui, variant, leading_icon, ControlSize::S)
+    }
+
+    /// 按尺寸档求值（规格卡 `BUTTONS / XS - XL`）。
+    ///
+    /// 内距取 [`ControlSize::pad_x`]（规格卡没写内距，那是 `[估]` 的「半高向下取 4 栅格、封顶 48」
+    /// 推导值）；带前置图标时左侧再收 **4**（`Space::X1`）——药丸左半圆里图标要离弧远一点，
+    /// 与 M3 的「带图标左内距更小」是同一条观感规则。S 档因此是 **20 / 16 / 20**，
+    /// 而 M3 官方是 24 / 16 / 24：差 4，登记在 M229 报告里（规格卡没给内距，我们按它自己的
+    /// 半高规则推，而不是回到官方值——否则五档里只有 S 一种内距口径）。
+    pub fn sized(ui: &Ui, variant: Variant, leading_icon: bool, size: ControlSize) -> Self {
         let (_, _, border) = variant.roles();
+        let pad = size.pad_x();
         let start = if leading_icon {
-            ui.space(Space::X4)
+            pad - ui.space(Space::X1)
         } else {
-            ui.space(Space::X6)
+            pad
         };
 
         Self {
-            height: ui.metrics().control_height,
+            height: size.height_px(),
             padding: Padding {
                 top: 0.0,
-                right: ui.space(Space::X6),
+                right: pad,
                 bottom: 0.0,
                 left: start,
             },
+            // 图标盒固定 18（`IconSize::Button`）：规格卡五档按钮的图标都没单独写字号，
+            // 档位只放大容器与标签，不放大图标——那是按钮，不是 FAB。
             icon: IconSize::Button.px(),
             gap: ui.space(Space::X2),
             stroke: if border.is_some() { STROKE_PX } else { 0.0 },
+            size,
         }
     }
 }
diff --git a/crates/app-iced/src/components/buttons/mod.rs b/crates/app-iced/src/components/buttons/mod.rs
index 0686d89..5e68ff5 100644
--- a/crates/app-iced/src/components/buttons/mod.rs
+++ b/crates/app-iced/src/components/buttons/mod.rs
@@ -47,6 +47,7 @@ use unlucky_design::color::Role;
 use unlucky_design::component_map::Component;
 use unlucky_design::elevation::Elevation;
 use unlucky_design::icons::IconKind;
+use unlucky_design::inkcat::size::ControlSize;
 use unlucky_design::shape::ShapeScale;
 
 use crate::icons;
@@ -56,8 +57,10 @@ use super::interaction::Interaction;
 use super::layout;
 
 mod assemble;
+mod fab;
 mod geometry;
 
+pub use fab::{fab, Fab};
 pub use geometry::{Geometry, IconGeometry};
 
 use assemble::{assemble, style_closure, StyleSpec};
@@ -160,35 +163,47 @@ impl Variant {
     }
 }
 
-/// IconButton 的三种容器变体（12b §2.5）。
+/// IconButton 的**四式**（规格卡 `ICON BUTTONS / FILLED - TONAL - OUTLINED - PLAIN`）。
+///
+/// 规格卡画了四颗：实心 / 色调 / 描边 / 纯图标。12b §2.5 只有前三式（Standard / Filled / Tonal），
+/// M229 按规格卡把 Standard 拆成 **Plain**（纯图标）与 **Outlined**（1px 描边圆圈），
+/// `Standard` 这个名字保留为 `Plain` 的别名语义，避免既有调用点全改。
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
 pub enum IconVariant {
-    /// 标准：容器透明、图标 `OnSurfaceVariant`（各态图标色不变，12b 2.4）。
-    Standard,
+    /// 纯图标（规格卡 `PLAIN`）：容器透明、图标 `OnSurfaceVariant`（各态图标色不变，12b 2.4）。
+    Plain,
     /// 实心：`Primary` + `OnPrimary`。
     Filled,
     /// Tonal：`SecondaryContainer` + `OnSecondaryContainer`。
     Tonal,
+    /// 描边：透明容器 + 1px `Outline`（规格卡第三颗，M229 新增）。
+    Outlined,
 }
 
 impl IconVariant {
-    /// 三式全序（gallery 顺序）。
-    pub const ALL: [IconVariant; 3] = [
-        IconVariant::Standard,
+    /// 旧名字的别名：`Standard` = [`IconVariant::Plain`]（既有调用点不必改语义）。
+    #[allow(non_upper_case_globals)]
+    pub const Standard: IconVariant = IconVariant::Plain;
+
+    /// 四式全序（gallery 顺序 = 规格卡从左到右）。
+    pub const ALL: [IconVariant; 4] = [
         IconVariant::Filled,
         IconVariant::Tonal,
+        IconVariant::Outlined,
+        IconVariant::Plain,
     ];
 
     /// 稳定名字。
     pub const fn name(self) -> &'static str {
         match self {
-            IconVariant::Standard => "standard",
+            IconVariant::Plain => "plain",
             IconVariant::Filled => "filled",
             IconVariant::Tonal => "tonal",
+            IconVariant::Outlined => "outlined",
         }
     }
 
-    /// **禁用态图标色**：三式都是 `OnSurface` @0.38 —— A1
+    /// **禁用态图标色**：四式都是 `OnSurface` @0.38 —— A1
     /// （`StandardIconButtonTokens.DisabledColor` / `FilledIconButtonTokens.DisabledColor`）。
     pub(crate) const fn disabled_content(self) -> Role {
         Role::OnSurface
@@ -197,13 +212,14 @@ impl IconVariant {
     /// 色彩角色三元组（同 [`Variant::roles`] 的口径）。
     pub(crate) const fn roles(self) -> (Option<Role>, Role, Option<Role>) {
         match self {
-            IconVariant::Standard => (None, Role::OnSurfaceVariant, None),
+            IconVariant::Plain => (None, Role::OnSurfaceVariant, None),
             IconVariant::Filled => (Some(Role::Primary), Role::OnPrimary, None),
             IconVariant::Tonal => (
                 Some(Role::SecondaryContainer),
                 Role::OnSecondaryContainer,
                 None,
             ),
+            IconVariant::Outlined => (None, Role::OnSurfaceVariant, Some(Role::Outline)),
         }
     }
 }
@@ -220,6 +236,8 @@ pub struct Button<'a, M> {
     leading: Option<IconKind>,
     trailing: Option<IconKind>,
     state: Option<Interaction>,
+    /// 尺寸档（规格卡 `BUTTONS / XS - XL`）。产品默认 **S（40 高）**，与 M3 `control_height` 同值。
+    size: ControlSize,
 }
 
 impl<'a, M> Button<'a, M> {
@@ -231,6 +249,7 @@ impl<'a, M> Button<'a, M> {
             leading: None,
             trailing: None,
             state: None,
+            size: ControlSize::S,
         }
     }
 
@@ -242,9 +261,19 @@ impl<'a, M> Button<'a, M> {
             leading: None,
             trailing: None,
             state: None,
+            size: ControlSize::S,
         }
     }
 
+    /// 换尺寸档（`XS 32 / S 40 / M 56 / L 96 / XL 136`，圆角一律药丸）。
+    ///
+    /// 产品页只用 **S**（= M3 `control_height` 40）；M / L / XL 是规格卡的梯子档，给
+    /// 空态主行动与展示型入口留着，`--screen=gallery` 的矩阵会把五档一起拍出来。
+    pub fn size(mut self, size: ControlSize) -> Self {
+        self.size = size;
+        self
+    }
+
     /// 前置图标（12b 1.4：带图标时左内边距收到 16）。
     pub fn leading(mut self, kind: IconKind) -> Self {
         self.leading = Some(kind);
diff --git a/crates/app-iced/src/components/buttons/tests.rs b/crates/app-iced/src/components/buttons/tests.rs
index c21a610..c33467e 100644
--- a/crates/app-iced/src/components/buttons/tests.rs
+++ b/crates/app-iced/src/components/buttons/tests.rs
@@ -69,16 +69,20 @@ fn geometry_matches_the_reference_values() {
         20.0,
         "12b 1.2 full 圆角 = 高/2"
     );
-    assert_eq!(geometry.padding.left, 24.0, "12b 1.3 左 24");
-    assert_eq!(geometry.padding.right, 24.0, "12b 1.3 右 24");
+    // M229：内距取规格卡的 `ControlSize::pad_x`（S 档 = 20），不再是 12b 的 24。
+    assert_eq!(geometry.padding.left, 20.0, "S 档 pad_x 20");
+    assert_eq!(geometry.padding.right, 20.0, "S 档 pad_x 20");
     assert_eq!(geometry.padding.top, 0.0);
     assert_eq!(geometry.gap, 8.0, "12b 1.6 图标↔文字 8");
     assert_eq!(geometry.gap, ui.space(Space::X2));
     assert_eq!(geometry.stroke, 0.0, "实心按钮无描边");
 
     let with_icon = Geometry::of(&ui, Variant::Filled, true);
-    assert_eq!(with_icon.padding.left, 16.0, "12b 1.4 带图标左内边距 16");
-    assert_eq!(with_icon.padding.right, 24.0, "带图标右内边距不动");
+    assert_eq!(
+        with_icon.padding.left, 16.0,
+        "带图标左侧再收 4（20 − 4）：与 12b 1.4 的 16 恰好同值"
+    );
+    assert_eq!(with_icon.padding.right, 20.0, "带图标右内边距不动");
 
     let outlined = Geometry::of(&ui, Variant::Outlined, false);
     assert_eq!(outlined.stroke, STROKE_PX, "rubric G7 全站 1px");
diff --git a/crates/app-iced/src/components/feedback/geometry.rs b/crates/app-iced/src/components/feedback/geometry.rs
index 5ac3206..e65ccff 100644
--- a/crates/app-iced/src/components/feedback/geometry.rs
+++ b/crates/app-iced/src/components/feedback/geometry.rs
@@ -8,8 +8,8 @@
 //! | 12.2 | 线性颜色 | 激活 `Primary`、轨道 `SecondaryContainer` | 组件层取角色 |
 //! | 12.3 | 环形直径 / 厚度 / 环↔轨间隙 | **40 / 4 / 4** | [`CircularGeometry`] |
 //! | 12.4 | 不定态节奏 | 线性 **1750ms** 双段；环形 **6000ms**（弧长 0.1→0.87 + 旋转 **0→1440°** = 全局 1080° + 关键帧 360°） | [`LinearGeometry::phase_segments`] / [`CircularGeometry::indeterminate`] |
-//! | 14.1 | Snackbar 圆角 | **4**（`CornerExtraSmall`） | `Component::Snackbar.spec().shape` |
-//! | 14.3 | 单行 / 双行高 | **48 / 68** | `panel::SnackbarGeometry::height` |
+//! | 14.1 | Snackbar 圆角 | 规格卡 **16**（`inkcat::metrics::SNACKBAR`；官方 `CornerExtraSmall` 是 4，M229 换肤按规格卡） | `panel::SnackbarGeometry::radius` |
+//! | 14.3 | 单行 / 双行高 | 规格卡 **52** / **72**（+20；官方 48/68） | `panel::SnackbarGeometry::height_for` |
 //! | 14.4 | 文本水平内距 / 垂直内距 | **16** / **6** | `Space::X4` / `panel::SnackbarGeometry::pad_v` |
 //! | 14.4b | 外边距（距窗口边） | **12**（`[规格]`：AAR 里**没有**这个常数，见 G17-c） | `panel::SnackbarGeometry::margin` |
 //! | 14.x | 宽度上限 | **600**（`SnackbarKt.ContainerMaxWidth`） | `panel::SnackbarGeometry::max_width` |
diff --git a/crates/app-iced/src/components/feedback/panel.rs b/crates/app-iced/src/components/feedback/panel.rs
index 08b537d..e867e88 100644
--- a/crates/app-iced/src/components/feedback/panel.rs
+++ b/crates/app-iced/src/components/feedback/panel.rs
@@ -4,6 +4,7 @@
 //! （宽高/内距/圆角）。合在一个文件里会顶到 400 行红线（AGENTS.md §3-1）。
 
 use unlucky_design::component_map::Component;
+use unlucky_design::inkcat::metrics as inkcat;
 use unlucky_design::spacing::Space;
 
 use crate::theme::Ui;
@@ -33,18 +34,24 @@ pub struct SnackbarGeometry {
 
 impl SnackbarGeometry {
     /// 从令牌求值。
+    ///
+    /// M229 换肤把**高与圆角**改成规格卡口径（`inkcat::metrics::SNACKBAR`：340×**52**、rx=**16**）：
+    /// 官方 `SnackbarTokens` 是 48 高 + `CornerExtraSmall(4)`，规格卡画成 52/16 —— M228 已把这条
+    /// 差异登记为「换肤时取 `SNACKBAR`」。双行高仍按官方「每多一行 +20」推成 **72**（52 + 20），
+    /// 与单行同 delta；宽上限 600 与边距 12 不动（它们不在规格卡上）。
     pub fn of(ui: &Ui) -> Self {
-        let single_height = 48.0;
+        let spec = inkcat::SNACKBAR;
+        let single_height = spec.height;
         Self {
             min_width: 344.0,
             max_width: 600.0,
             single_height,
-            two_height: 68.0,
+            two_height: single_height + 20.0,
             margin: ui.space(Space::X3),
             pad_h: ui.space(Space::X4),
             pad_v: 6.0,
             gap: ui.space(Space::X2),
-            radius: Component::Snackbar.spec().shape.radius_px(single_height),
+            radius: spec.radius_px(),
         }
     }
 
diff --git a/crates/app-iced/src/components/feedback/probe.rs b/crates/app-iced/src/components/feedback/probe.rs
index bd88fe2..b130802 100644
--- a/crates/app-iced/src/components/feedback/probe.rs
+++ b/crates/app-iced/src/components/feedback/probe.rs
@@ -200,7 +200,7 @@ fn indeterminate_row(shot: &Shot, active: iced::Color, surface: iced::Color) ->
 
 /// §14：宽度上下限 + 单/双行高。
 fn check_snackbar(shot: &Shot, ui: &Ui) {
-    // 参考值写字面量（A1）：600 = SnackbarKt.ContainerMaxWidth，48/68 = SnackbarTokens。
+    // 参考值写字面量：600 = SnackbarKt.ContainerMaxWidth，52/72 = 规格卡（单行 52 + 每多一行 20）。
     let surface = ui.color(Role::Surface);
     let bar = ui.color(Role::InverseSurface);
 
@@ -242,12 +242,12 @@ fn check_snackbar(shot: &Shot, ui: &Ui) {
         "宿区 324 那格必须量到 300（组件没有 min-width，G17-d），实测 {widths:?}"
     );
     assert!(
-        heights.iter().any(|h| near(*h, 48)),
-        "14.3：单行高 48，实测高度集 {heights:?}"
+        heights.iter().any(|h| near(*h, 52)),
+        "规格卡：单行高 52，实测高度集 {heights:?}"
     );
     assert!(
-        heights.iter().any(|h| near(*h, 68)),
-        "14.3：双行高 68，实测高度集 {heights:?}"
+        heights.iter().any(|h| near(*h, 72)),
+        "双行高 72（52 + 20），实测高度集 {heights:?}"
     );
 
     // 14.6 动作色：`InversePrimary` 必须出现在提示条内（不是按钮家族的 OnSurfaceVariant）
diff --git a/crates/app-iced/src/components/feedback/snackbar.rs b/crates/app-iced/src/components/feedback/snackbar.rs
index 713dd49..fcf87ae 100644
--- a/crates/app-iced/src/components/feedback/snackbar.rs
+++ b/crates/app-iced/src/components/feedback/snackbar.rs
@@ -4,9 +4,9 @@
 //!
 //! | # | 项 | 值 | 落点 |
 //! |---|---|---|---|
-//! | 14.1 | 圆角 | **4**（`CornerExtraSmall`） | `Component::Snackbar.spec().shape` |
+//! | 14.1 | 圆角 | **16**（规格卡 `rx=16`；官方 `CornerExtraSmall` 是 4，M229 换肤按规格卡） | `inkcat::metrics::SNACKBAR` |
 //! | 14.2 | 容器色 | **`InverseSurface`**（高程 L3 是设计口头径，见下「不画阴影」） | [`Role::InverseSurface`] |
-//! | 14.3 | 高 | 单行 **48** / 双行 **68** | [`SnackbarGeometry::height`] |
+//! | 14.3 | 高 | 单行 **52**（规格卡 340×52；官方 48）/ 双行 **72**（+20） | [`SnackbarGeometry::height_for`] |
 //! | 14.4 | 内距 | 水平 **16** / 垂直 **6** / 文本↔动作 **8** | `Space::X4` / 6 / `Space::X2` |
 //! | 14.6 | 颜色 | 文本 `InverseOnSurface`、动作 **`InversePrimary`**、图标 24 `InverseOnSurface` | 组件层取角色 |
 //! | — | 宽度上限 | **600**（`SnackbarKt.ContainerMaxWidth`） | `max_width` |
@@ -75,7 +75,7 @@ pub struct Snackbar<'a, M> {
 }
 
 impl<'a, M> Snackbar<'a, M> {
-    /// 单行提示条（高 48）。
+    /// 单行提示条（高 52，规格卡口径）。
     pub fn new(text: &'a str) -> Self {
         Self {
             text,
diff --git a/crates/app-iced/src/components/feedback/tests.rs b/crates/app-iced/src/components/feedback/tests.rs
index 7ecc203..74e7b81 100644
--- a/crates/app-iced/src/components/feedback/tests.rs
+++ b/crates/app-iced/src/components/feedback/tests.rs
@@ -32,13 +32,18 @@ pub(super) fn ui(flavor: SchemeFlavor) -> Ui {
 
 // ---- §14 Snackbar -----------------------------------------------------------
 
-/// 14.3 / 14.1 / 宽度上限：48 / 68 / 4 / 600。
+/// 14.3 / 14.1 / 宽度上限：规格卡 52 / 72 / 16，上限 600。
 #[test]
 fn snackbar_heights_widths_and_radius_are_the_tokens() {
     let geometry = SnackbarGeometry::of(&ui(SchemeFlavor::Light));
-    assert_eq!(geometry.height_for(1), 48.0, "14.3 单行 48");
-    assert_eq!(geometry.height_for(2), 68.0, "14.3 双行 68");
-    assert_eq!(geometry.radius, 4.0, "14.1 圆角 4（CornerExtraSmall）");
+    // M229 换肤：高与圆角取规格卡（52 / 16），官方是 48 / `CornerExtraSmall(4)`。
+    assert_eq!(geometry.height_for(1), 52.0, "规格卡 340×52");
+    assert_eq!(
+        geometry.height_for(2),
+        72.0,
+        "双行 = 单行 + 20（同官方 delta）"
+    );
+    assert_eq!(geometry.radius, 16.0, "规格卡 rx=16（官方 4，登记差异）");
     assert_eq!(geometry.max_width, 600.0, "SnackbarKt.ContainerMaxWidth");
     assert_eq!(geometry.min_width, 344.0, "G17-d [估] 最小宽");
     assert!(geometry.min_width < geometry.max_width, "上下限必须有区间");
diff --git a/crates/app-iced/src/components/gallery/feedback.rs b/crates/app-iced/src/components/gallery/feedback.rs
index 7da2d75..3edc214 100644
--- a/crates/app-iced/src/components/gallery/feedback.rs
+++ b/crates/app-iced/src/components/gallery/feedback.rs
@@ -73,7 +73,7 @@ pub(super) fn section<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
     let mut body = column![heading(
         ui,
         "feedback · progress / snackbar / dialog / empty state",
-        "12b §7/§12/§14/§15：Linear 厚 4 圆角 full · Circular 40/4 · Snackbar 48/68 上限宽 600 · \
+        "规格卡 + 12b §7/§12/§15：Linear 厚 4 圆角 full · Circular 40/4 · Snackbar 52/72 圆角 16 上限宽 600 · \
          Dialog R28 pad24 宽 480 · EmptyState 项目自定[估]（官方无此组件）"
     )]
     .spacing(ui.space(Space::X3));
@@ -270,7 +270,7 @@ fn snackbar_block<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
         wide,
         caption(
             ui,
-            "Snackbar · 双行 68 + action InversePrimary + 关闭键（动作强制 hover 态）"
+            "Snackbar · 双行 72（52+20）+ action InversePrimary + 关闭键（动作强制 hover 态）"
         ),
         two_lines,
         caption(
diff --git a/crates/app-iced/src/components/gallery/mod.rs b/crates/app-iced/src/components/gallery/mod.rs
index f83897a..ea4f54b 100644
--- a/crates/app-iced/src/components/gallery/mod.rs
+++ b/crates/app-iced/src/components/gallery/mod.rs
@@ -48,7 +48,7 @@
 //! ULL_GALLERY_SECTION=selection  # 只渲染 selection 段（本 mission 的取证与 probe 用它）
 //! ```
 //!
-//! 取值：`all` / `buttons` / `divider` / `selection` / `inputs` / `feedback` / `navigation`。
+//! 取值：`all` / `buttons` / `sizes` / `divider` / `selection` / `inputs` / `feedback` / `navigation`。
 //! 语义是「**不构建**没被选中的段」（不是构建后隐藏）：`column` 里根本不 push 它，
 //! 于是该家族的 `view` 一行都不跑。未识别的值**回落 `all`** 并在 stderr 打一行提示
 //! （静默回落会让人拿错图还以为拍的是那一段）。
@@ -87,6 +87,7 @@ mod probe;
 #[cfg(test)]
 mod scan;
 mod selection;
+mod sizes;
 
 /// 段落过滤的环境变量名（语义见模块文档「段落过滤」）。
 pub const SECTION_ENV: &str = "ULL_GALLERY_SECTION";
@@ -95,6 +96,7 @@ pub const SECTION_ENV: &str = "ULL_GALLERY_SECTION";
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 struct Sections {
     buttons: bool,
+    sizes: bool,
     divider: bool,
     selection: bool,
     inputs: bool,
@@ -106,6 +108,7 @@ impl Sections {
     /// 五段全渲染（默认）。
     const ALL: Self = Self {
         buttons: true,
+        sizes: true,
         divider: true,
         selection: true,
         inputs: true,
@@ -117,6 +120,7 @@ impl Sections {
     fn only(name: &str) -> Option<Self> {
         let mut sections = Self {
             buttons: false,
+            sizes: false,
             divider: false,
             selection: false,
             inputs: false,
@@ -125,6 +129,7 @@ impl Sections {
         };
         match name {
             "buttons" => sections.buttons = true,
+            "sizes" => sections.sizes = true,
             "divider" => sections.divider = true,
             "selection" => sections.selection = true,
             "inputs" => sections.inputs = true,
@@ -150,7 +155,7 @@ impl Sections {
             return sections;
         }
         eprintln!(
-            "[gallery] {SECTION_ENV}={raw:?} 不是已知段（all|buttons|divider|selection|inputs|feedback|navigation），已回落 all"
+            "[gallery] {SECTION_ENV}={raw:?} 不是已知段（all|buttons|sizes|divider|selection|inputs|feedback|navigation），已回落 all"
         );
         Self::ALL
     }
@@ -160,6 +165,7 @@ impl Sections {
         let mut names = Vec::new();
         for (on, name) in [
             (self.buttons, "buttons"),
+            (self.sizes, "sizes"),
             (self.divider, "divider"),
             (self.selection, "selection"),
             (self.inputs, "inputs"),
@@ -215,8 +221,9 @@ pub fn view<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
             .font(ui.emphasized_font(TypeRole::TitleLarge))
             .color(ui.color(Role::OnSurface)),
         text(format!(
-            "M3 Expressive component base · flavor={} · 1180×760 @100% DPI · \
+            "M3 Expressive component base · board={} · flavor={} · 1180×760 @100% DPI · \
              focus 与 pressed 同为 10%（令牌口径，图上一样是对的）",
+            ui.board().name(),
             flavor_slug(ui)
         ))
         .size(page.size_px)
@@ -236,6 +243,9 @@ pub fn view<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
     if picked.buttons {
         sections = sections.push(buttons::section(ui));
     }
+    if picked.sizes {
+        sections = sections.push(sizes::section(ui));
+    }
     if picked.divider {
         sections = sections.push(divider_proof(ui));
     }
diff --git a/crates/app-iced/src/components/gallery/sizes.rs b/crates/app-iced/src/components/gallery/sizes.rs
new file mode 100644
index 0000000..c8ff24c
--- /dev/null
+++ b/crates/app-iced/src/components/gallery/sizes.rs
@@ -0,0 +1,123 @@
+//! 尺寸档矩阵：**按钮 XS~XL 五档** + **FAB 四态**（规格卡 `BUTTONS / XS - XL` 与
+//! `FAB / SMALL - DEFAULT - MEDIUM - EXTENDED`）。
+//!
+//! ## 为什么单开一段（而不是塞进 `buttons`）
+//!
+//! `buttons` 段是「五式 × 五态 + 图标四式」的 40 格矩阵，一屏（1180×760）本来就贴着折叠线；
+//! 五档梯子（最高 136）与四态 FAB（最宽 160）塞进去会被压到屏幕外——那样出的图**看不见**，
+//! 等于没拍。所以按「一段 = 一个能一屏判完的问题」拆开：
+//!
+//! ```text
+//! ULL_GALLERY_SECTION=sizes   # 本段：尺寸梯子 + FAB 四态
+//! ```
+//!
+//! ## 图上要能判什么
+//!
+//! 1. 五档高度递增、圆角全部是**半高**（药丸），标签字号跟着档位升（14/14/16/24/32）；
+//! 2. FAB 四态：40/56/80 三个方态 + 160×56 扩展态（图标 + 标签）；
+//! 3. 配色：FAB 一律 `PrimaryContainer` / `OnPrimaryContainer`（规格卡上四颗都是淡绿底深绿字）。
+//!
+//! 判不了：状态层（FAB 在这一段是静息态，五态矩阵在 `buttons` 段的按钮上验）、以及动效。
+
+use iced::widget::{column, row};
+use iced::{Element, Length};
+
+use unlucky_design::color::Role;
+use unlucky_design::icons::IconKind;
+use unlucky_design::inkcat::size::{ControlSize, FabSize};
+use unlucky_design::spacing::Space;
+use unlucky_design::typography::TypeRole;
+
+use crate::theme::Ui;
+
+use super::super::buttons::{self, fab, Button, Fab};
+use super::super::interaction::Interaction;
+use super::{heading, DemoMessage};
+
+/// 整段（标题 + 五档梯子 + 四态 FAB + 图例）。
+pub(super) fn section<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
+    let legend = ui.style(TypeRole::BodySmall);
+
+    let ladder = row(ControlSize::ALL
+        .iter()
+        .map(|size| sized(ui, *size))
+        .collect::<Vec<_>>())
+    .spacing(ui.space(Space::X4))
+    .align_y(iced::Alignment::Center);
+
+    let fabs = row(FabSize::ALL
+        .iter()
+        .map(|size| fab_cell(ui, *size))
+        .collect::<Vec<_>>())
+    .spacing(ui.space(Space::X4))
+    .align_y(iced::Alignment::Center);
+
+    column![
+        heading(
+            ui,
+            "sizes · buttons xs~xl + fab small~extended",
+            "规格卡：按钮 32/40/56/96/136（圆角 = 半高，标签 14/14/16/24/32 字重 500）；\
+             FAB 40/r12 · 56/r16 · 80/r20 · 160×56/r16（图标 20/26/34/24，扩展态内距 28、间距 8）"
+        ),
+        labelled(ui, "buttons xs - xl", ladder.into()),
+        labelled(ui, "fab small - extended", fabs.into()),
+        iced::widget::text(
+            "图例：产品页的按钮只用 S 档（40，= M3 control_height）；M/L/XL 留给空态主行动与展示型入口。\
+             FAB 四颗都是静息态，配色 PrimaryContainer / OnPrimaryContainer。",
+        )
+        .size(legend.size_px)
+        .font(ui.font_of(legend))
+        .color(ui.color(Role::OnSurfaceVariant)),
+    ]
+    .spacing(ui.space(Space::X2))
+    .into()
+}
+
+/// 一档 Filled 按钮（标签是档位名的大写：XS / S / M / L / XL。
+///
+/// **必须大写**：小写的 `l` 在 Inter/Segoe 里就是一根竖线，XL 会读成「x|」——第一版出图就是这么错的。
+fn sized<'a>(ui: &'a Ui, size: ControlSize) -> Element<'a, DemoMessage> {
+    let label: &'static str = match size {
+        ControlSize::Xs => "XS",
+        ControlSize::S => "S",
+        ControlSize::M => "M",
+        ControlSize::L => "L",
+        ControlSize::Xl => "XL",
+    };
+    buttons::filled(
+        ui,
+        Button::new(label, DemoMessage::Pressed("size")).size(size),
+    )
+}
+
+/// 一颗 FAB（扩展态带标签；静息态强制，避免光标位置影响出图）。
+fn fab_cell<'a>(ui: &'a Ui, size: FabSize) -> Element<'a, DemoMessage> {
+    let spec = if matches!(size, FabSize::Extended) {
+        Fab::extended(IconKind::Plus, "New", DemoMessage::Pressed("fab"))
+    } else {
+        Fab::new(IconKind::Plus, DemoMessage::Pressed("fab"))
+    }
+    .size(size)
+    .state(Interaction::Enabled);
+    fab(ui, spec)
+}
+
+/// 一行「小标题 + 内容」。
+fn labelled<'a>(
+    ui: &'a Ui,
+    label: &'a str,
+    content: Element<'a, DemoMessage>,
+) -> Element<'a, DemoMessage> {
+    let style = ui.style(TypeRole::LabelSmall);
+    column![
+        iced::widget::text(label)
+            .size(style.size_px)
+            .font(ui.font_of(style))
+            .color(ui.color(Role::OnSurfaceVariant)),
+        iced::widget::container(content)
+            .width(Length::Fill)
+            .padding(iced::Padding::from([ui.space(Space::X2), 0.0])),
+    ]
+    .spacing(ui.space(Space::X1))
+    .into()
+}
diff --git a/crates/app-iced/src/components/mod.rs b/crates/app-iced/src/components/mod.rs
index 8c26d97..266cf07 100644
--- a/crates/app-iced/src/components/mod.rs
+++ b/crates/app-iced/src/components/mod.rs
@@ -16,6 +16,7 @@
 //!   inputs/         ← 同上（§9/§20/§11/§8）
 //!   feedback/       ← 同上（§12/§14/§7/§15）
 //!   navigation/     ← 同上（§4/§6/§21/§16）
+//!   surfaces/       ← M229：ELEVATED CARD（规格卡 `CARD / DIALOG / SNACKBAR / LIST` 的第一格）
 //!   gallery/        ← 视觉验收 harness（`--screen=gallery`）
 //! ```
 //!
@@ -58,6 +59,7 @@ pub mod motion;
 pub mod navigation;
 pub mod scroll;
 pub mod selection;
+pub mod surfaces;
 
 #[cfg(test)]
 mod gate;
diff --git a/crates/app-iced/src/components/selection/geometry.rs b/crates/app-iced/src/components/selection/geometry.rs
index 3a6656e..33de7d8 100644
--- a/crates/app-iced/src/components/selection/geometry.rs
+++ b/crates/app-iced/src/components/selection/geometry.rs
@@ -26,6 +26,7 @@
 
 use unlucky_design::component_map::{Component, ComponentMetrics};
 use unlucky_design::icons::IconSize;
+use unlucky_design::inkcat::metrics as inkcat;
 use unlucky_design::spacing::Space;
 
 use crate::theme::Ui;
@@ -63,40 +64,39 @@ pub struct ControlGeometry {
 }
 
 impl ControlGeometry {
-    /// Checkbox：20×20 / 圆角 2 / 描边 2 / 状态层 Ø40（全部 `[源]`，见模块表）。
+    /// Checkbox：**18×18** / 圆角 **4** / 描边 2 / 状态层 Ø40（M229 取规格卡口径，见模块表）。
+    ///
+    /// 与官方 20×20 / 2dp 差 2px 与 2dp：规格卡画的是 `rect 18×18 rx4`，M228 的 `inkcat` 把这条
+    /// 差异登记为「换肤时取 `CHECKBOX`」。4 是 `ShapeScale` 的刻度值，所以走容器层不违反 D32。
     pub fn checkbox(ui: &Ui) -> Self {
         let metrics = metrics(Component::Checkbox);
+        let spec = inkcat::CHECKBOX;
         Self {
-            side: metrics.width,
-            stroke: metrics.stroke,
+            side: spec.width,
+            stroke: inkcat::CHECKBOX_STROKE,
             state_layer: metrics.state_layer,
             hit: ui.metrics().touch_target,
             gap: metrics.gap,
-            // 微控件层（D32）：2dp 不在 `ShapeScale` 刻度里，只能走 `ComponentRadius`。
-            // 传 20 拿不到值说明有人把它挪到容器层了——那是 D32 违规，`unwrap_or` 会悄悄
-            // 变成直角，所以这里用 `expect` 直接炸（比图画错好查）。
-            radius: metrics
-                .radius
-                .expect("Checkbox 的圆角必须在微控件层（ComponentSpec::micro_radius）")
-                .radius_px(metrics.width)
-                .expect("Checkbox 20dp ≤ 微控件上限 24dp"),
+            radius: spec.radius_px(),
             // Checkbox 没有内点（内点是 radio 的语言，§19.6 明令两者不许混用）
-            inner_dot: metrics.inner_dot,
+            inner_dot: 0.0,
         }
     }
 
-    /// Radio：20 / 环线 2 / 内点 10 / 状态层 Ø40；圆角是**真圆**（`ShapeScale::Full`）。
+    /// Radio：**18 Ø** / 环线 2 / 内点 **10** / 状态层 Ø40；圆角是**真圆**（`ShapeScale::Full`）。
     pub fn radio(ui: &Ui) -> Self {
         let metrics = metrics(Component::Radio);
+        let spec = inkcat::RADIO;
         Self {
-            side: metrics.width,
-            stroke: metrics.stroke,
+            side: spec.width,
+            stroke: inkcat::RADIO_RING,
             state_layer: metrics.state_layer,
             hit: ui.metrics().touch_target,
             gap: metrics.gap,
-            radius: Component::Radio.spec().shape.radius_px(metrics.width),
-            // 内点 **10 不是 12**（§19.2：12 是含描边前的名义值，绘制半径 = 12/2 − 2/2 = 5）
-            inner_dot: metrics.inner_dot,
+            radius: spec.radius_px(),
+            // 内点 **10**（§19.2：12 是含描边前的名义值，绘制半径 = 12/2 − 2/2 = 5）。
+            // 规格卡实测同样是 10，所以这里取 `inkcat::RADIO_DOT`。
+            inner_dot: inkcat::RADIO_DOT,
         }
     }
 
diff --git a/crates/app-iced/src/components/selection/tests.rs b/crates/app-iced/src/components/selection/tests.rs
index 3bb995b..a0fa6c1 100644
--- a/crates/app-iced/src/components/selection/tests.rs
+++ b/crates/app-iced/src/components/selection/tests.rs
@@ -45,15 +45,16 @@ fn hit_area_is_48_square_even_without_a_label() {
 fn checkbox_geometry_comes_from_the_token_layer() {
     let ui = ui();
     let g = ControlGeometry::checkbox(&ui);
-    assert_eq!(g.side, 20.0, "18.1：容器 20×20（ContainerWidth=18 是死值）");
-    assert_eq!(g.radius, 2.0, "18.1：圆角 2（ComponentRadius::Micro）");
+    // M229：取规格卡的 18×18 / rx4（官方 20×20 / 2dp，登记在 `inkcat` 模块）。
+    assert_eq!(g.side, 18.0, "规格卡 rect 18×18");
+    assert_eq!(g.radius, 4.0, "规格卡 rx=4（ShapeScale::ExtraSmall）");
     assert_eq!(g.stroke, 2.0, "18.2：未选中描边 2px");
     assert_eq!(g.state_layer, 40.0, "18.5：状态层 Ø40");
     assert_eq!(g.hit, 48.0, "18.9：命中区 48");
     assert_eq!(g.gap, 8.0, "18.9：框↔标签 8（[估] 团队口径）");
     assert_eq!(g.inner_dot, 0.0, "Checkbox 没有内点");
-    // 18.4：勾形横向端点跨度 = 0.8−0.2 = 0.6 × 20 = 12
-    assert!((g.check_span() - 12.0).abs() < 0.001, "18.4：勾横向 12dp");
+    // 18.4：勾形横向端点跨度 = 0.8−0.2 = 0.6 × 18 = 10.8（比例不变，边长换成规格卡的 18）
+    assert!((g.check_span() - 10.8).abs() < 0.001, "18.4：勾横向 10.8dp");
     // 方头外扩：每端 2/√2 ≈ 1.41 → 墨迹跨度 ≈ 14.8（参考值 12 是端点跨度，不是墨迹）
     let bleed = g.square_cap_bleed();
     assert!(
@@ -61,8 +62,8 @@ fn checkbox_geometry_comes_from_the_token_layer() {
         "方头外扩 1/√2×线宽"
     );
     assert!(
-        (g.check_span() + bleed * 2.0 - 14.83).abs() < 0.05,
-        "墨迹跨度 ≈14.83"
+        (g.check_span() + bleed * 2.0 - 13.63).abs() < 0.05,
+        "墨迹跨度 ≈13.63（10.8 + 2×1.41）"
     );
 }
 
@@ -71,9 +72,10 @@ fn checkbox_geometry_comes_from_the_token_layer() {
 fn radio_inner_dot_is_ten_not_twelve() {
     let ui = ui();
     let g = ControlGeometry::radio(&ui);
-    assert_eq!(g.side, 20.0, "19.1：外圈直径 20");
+    // M229：外圈取规格卡的 18 Ø（官方 20 Ø，登记在 `inkcat` 模块）。
+    assert_eq!(g.side, 18.0, "规格卡 r=9 ⇒ 直径 18");
     assert_eq!(g.stroke, 2.0, "19.1：环线 2px");
-    assert_eq!(g.radius, 10.0, "19.1：真圆（半径 = 边长/2）");
+    assert_eq!(g.radius, 9.0, "19.1：真圆（半径 = 边长/2）");
     assert_eq!(g.inner_dot, 10.0, "19.2：内点可视直径 10");
     assert_ne!(
         g.inner_dot, 12.0,
diff --git a/crates/app-iced/src/components/surfaces/elevated.rs b/crates/app-iced/src/components/surfaces/elevated.rs
new file mode 100644
index 0000000..e1c38df
--- /dev/null
+++ b/crates/app-iced/src/components/surfaces/elevated.rs
@@ -0,0 +1,126 @@
+//! **ELEVATED CARD**（规格卡 `CARD / DIALOG / SNACKBAR / LIST` 的第一个方框）。
+//!
+//! ## 规格卡原值（`DevDocs/artifacts/components-ink.svg`，`[spec]`）
+//!
+//! | 项 | 值 | 出处 |
+//! |---|---|---|
+//! | 方框 | 300×150、**rx=16**（`inkcat::metrics::CARD`） | `rect x=64 y=1312 rx=16` |
+//! | 底色 | **`SurfaceContainer`**（Ink 板上比画布 `Surface` 亮一档） | 规格卡卡底那一格的 `fill` |
+//! | 内边距 | **24**（文字 `x=88` − 框 `x=64`） | 同上 |
+//! | 描边 | **无**（`stroke="none"`） | 同上 |
+//! | 上标注 | **11 / 600**（`LabelSmall` + 半粗，字距 1） | `ELEVATED CARD` 那行 |
+//! | 标题 | **16 / 400**（`BodyLarge`） | `Night bridge, bright rails.` 那行 |
+//! | 副文案 | 13 / 400 → **14**（`BodyMedium`；13 落在 12/14 之间，按 `inkcat::type_scale` 取较大档） | `night / bridge / cat` 那行 |
+//!
+//! ## 与 `pages::frame::card`（描边卡）的分工
+//!
+//! - [`card`]：**靠层级差站立**的卡（无描边、`SurfaceContainer` 底、16 圆角）。规格卡的
+//!   `ELEVATED CARD` 就是这一档，实例页的元信息卡用它；
+//! - `pages::frame::card`：描边卡（`OutlineVariant` 1px + 卡片层底），大面积表单容器用它。
+//!
+//! 两种卡并存是**有意的**：规格卡只画了 elevated 一种，而桌面端的长表单需要「弱一点的容器」
+//! （满屏都是 16 圆角 + 容器底，分隔线会看起来像浮块）。哪种卡用在哪儿由本节决定，不是随手挑。
+
+use iced::widget::text::LineHeight;
+use iced::widget::{column, container, text};
+use iced::{Background, Border, Element, Length, Padding, Pixels};
+
+use unlucky_design::color::Role;
+use unlucky_design::spacing::Space;
+use unlucky_design::typography::{TypeRole, TypeStyle, Weight};
+
+use crate::theme::Ui;
+
+/// ELEVATED CARD 的内边距（规格卡 88 − 64 = **24**）。
+///
+/// 与 `LayoutMetrics::card_padding`（描边卡的 21）不是一回事：那个数服务长表单，这个是规格卡量出来的。
+pub const PAD: f32 = 24.0;
+
+/// 一个 ELEVATED CARD 方框（只管壳：底、圆角、内边距；**无描边**）。
+///
+/// 消息类型与被包的内容同型，所以它能被任何页面复用（实例页 / 外观页 / 账户页各用自己的
+/// `Message`）——这是「组件不 import 业务消息」那条契约的落地方式。
+pub fn card<'a, M: 'a>(ui: &'a Ui, content: impl Into<Element<'a, M>>) -> Element<'a, M> {
+    let shape = ui.card_shape();
+    container(content)
+        .width(Length::Fill)
+        .padding(Padding::from([PAD, PAD]))
+        .style(move |_theme| container::Style {
+            // 规格卡的卡底是 **surface-container**（不是 `surface-container-low`）：
+            // 层级靠与画布（`surface`）的 tone 差表达，不靠描边。
+            background: Some(Background::Color(ui.color(Role::SurfaceContainer))),
+            border: Border {
+                radius: ui.radius_dp(shape),
+                ..Border::default()
+            },
+            ..container::Style::default()
+        })
+        .into()
+}
+
+/// 一张规格卡的三段文字：上标注（可选）/ 标题 / 副文案（可选）。
+#[derive(Debug, Clone, Copy)]
+pub struct Texts<'a> {
+    /// 上标注（`ELEVATED CARD` 那种小字标签）。
+    pub overline: Option<&'a str>,
+    /// 标题（16/400）。
+    pub title: &'a str,
+    /// 副文案（14/400）。
+    pub support: Option<&'a str>,
+}
+
+/// 三段式内容（排版按规格卡：11/600 + 16/400 + 14/400，行间 4）。
+pub fn texts<'a, M: 'a>(ui: &'a Ui, parts: Texts<'a>) -> Element<'a, M> {
+    let mut stack = column![].spacing(ui.space(Space::X1));
+
+    if let Some(overline) = parts.overline {
+        stack = stack.push(role_text(
+            ui,
+            overline_style(),
+            overline,
+            Role::OnSurfaceVariant,
+        ));
+    }
+    stack = stack.push(role_text(
+        ui,
+        ui.style(TypeRole::BodyLarge),
+        parts.title,
+        Role::OnSurface,
+    ));
+    if let Some(support) = parts.support {
+        stack = stack.push(role_text(
+            ui,
+            ui.style(TypeRole::BodyMedium),
+            support,
+            Role::OnSurfaceVariant,
+        ));
+    }
+
+    stack.width(Length::Fill).into()
+}
+
+/// 上标注的排版（`LabelSmall` 11/16，字重 **600**：规格卡 `font-weight=600`；
+/// M3 的 `LabelSmall` 是 500，`emphasized` 是 700 —— 两个都不是 600，所以在这里显式给 600）。
+pub fn overline_style() -> TypeStyle {
+    TypeStyle {
+        weight: Weight::SemiBold,
+        ..TypeRole::LabelSmall.style()
+    }
+}
+
+fn role_text<'a, M: 'a>(
+    ui: &'a Ui,
+    style: TypeStyle,
+    content: &'a str,
+    role: Role,
+) -> Element<'a, M> {
+    text(content)
+        .size(style.size_px)
+        .line_height(LineHeight::Absolute(Pixels(style.line_height_px)))
+        .font(ui.font_of(style))
+        .color(ui.color(role))
+        .into()
+}
+
+#[cfg(test)]
+mod tests;
diff --git a/crates/app-iced/src/components/surfaces/elevated/tests.rs b/crates/app-iced/src/components/surfaces/elevated/tests.rs
new file mode 100644
index 0000000..74bff3a
--- /dev/null
+++ b/crates/app-iced/src/components/surfaces/elevated/tests.rs
@@ -0,0 +1,68 @@
+//! ELEVATED CARD 的几何/排版断言（对着规格卡原值，不看渲染结果）。
+//!
+//! 抓得住：圆角退回组件表的 12、内边距被换成 `card_padding`、上标注变成 500/700 这些「悄悄改数」。
+//! 抓不住：底色对不对（要看 `Ui::color(SurfaceContainer)` 的来源，那条由 `theme` 的色板测试守）、
+//! 以及卡在页面里好不好看（D30 视觉判定）。
+
+use super::*;
+use unlucky_design::shape::ShapeScale;
+
+const FAMILIES: crate::theme::Families = crate::theme::Families {
+    text: "Segoe UI Variable Text",
+    display: "Segoe UI Variable Display",
+    mono: "Cascadia Mono",
+};
+
+fn ui(flavor: unlucky_design::color::SchemeFlavor) -> Ui {
+    Ui::with_platform(
+        flavor,
+        unlucky_design::typography::Platform::Windows,
+        FAMILIES,
+    )
+}
+
+#[test]
+fn the_card_takes_the_spec_corner_and_padding() {
+    let ui = ui(unlucky_design::color::SchemeFlavor::Dark);
+    assert_eq!(ui.card_shape(), ShapeScale::Large, "规格卡 rx=16");
+    assert_eq!(ui.card_box().radius_px(), 16.0);
+    assert_eq!(PAD, 24.0, "规格卡文字 x=88 − 框 x=64");
+    // 4px 栅格（`spacing::GRID`）上：24 是，21（描边卡的 card_padding）不是——两者不许混用。
+    assert_eq!(PAD % unlucky_design::spacing::GRID, 0.0);
+}
+
+#[test]
+fn the_typography_matches_the_spec_rows() {
+    let style = overline_style();
+    assert_eq!(style.size_px, 11.0, "上标注 11px");
+    assert_eq!(style.weight, Weight::SemiBold, "上标注 600（不是 500/700）");
+
+    let title = TypeRole::BodyLarge.style();
+    assert_eq!(title.size_px, 16.0, "标题 16px");
+    assert_eq!(title.weight, Weight::Regular, "标题 400");
+
+    let support = TypeRole::BodyMedium.style();
+    assert_eq!(support.size_px, 14.0, "副文案 13 → 取较大档 14");
+    assert_eq!(support.weight, Weight::Regular);
+}
+
+/// 卡片是**靠层级差站立**的：底色必须是 `SurfaceContainer`（画布上一档），不是画布色本身。
+#[test]
+fn the_card_surface_sits_one_step_above_the_canvas() {
+    for board in unlucky_design::color::BrandBoard::ALL {
+        let scheme = board.scheme();
+        assert_ne!(
+            board.get(Role::SurfaceContainer),
+            board.get(Role::Surface),
+            "{}：卡底与画布同色，卡会「消失」",
+            board.name()
+        );
+        // 无描边：卡的存在感只能来自这一档色差，所以必须 > 1.0（差多少属观感，D30 判）。
+        let card_vs_canvas = scheme.contrast(Role::SurfaceContainer, Role::Surface);
+        assert!(
+            card_vs_canvas > 1.0,
+            "{}：卡底对画布 {card_vs_canvas:.3}:1，看不出层级",
+            board.name()
+        );
+    }
+}
diff --git a/crates/app-iced/src/components/surfaces/mod.rs b/crates/app-iced/src/components/surfaces/mod.rs
new file mode 100644
index 0000000..bb21590
--- /dev/null
+++ b/crates/app-iced/src/components/surfaces/mod.rs
@@ -0,0 +1,7 @@
+//! 面类家族（目前只有 **ELEVATED CARD**，规格卡 `CARD / DIALOG / SNACKBAR / LIST` 的第一格）。
+//!
+//! 为什么单开一个家族而不是塞进 `feedback`：`feedback` 是「系统对用户动作的回应」（进度 / 对话框 /
+//! snackbar / 空态），卡是**静态容器**，语义上属于版式而不是反馈。家族边界写在这里，后来加
+//! 「带描边卡 / 列表行药丸」时按语义归位，不要因为「都在同一个规格卡小节里」就合进 `feedback`。
+
+pub mod elevated;
diff --git a/crates/app-iced/src/pages/account/widgets.rs b/crates/app-iced/src/pages/account/widgets.rs
index d378036..7ef46a3 100644
--- a/crates/app-iced/src/pages/account/widgets.rs
+++ b/crates/app-iced/src/pages/account/widgets.rs
@@ -11,7 +11,6 @@ use iced::widget::{container, image, row, text};
 use iced::{Alignment, Background, Border, ContentFit, Element, Length, Pixels};
 
 use unlucky_design::color::Role;
-use unlucky_design::component_map::Component;
 use unlucky_design::elevation::MaterialLayer;
 use unlucky_design::icons::IconKind;
 use unlucky_design::shape::ShapeScale;
@@ -171,7 +170,7 @@ pub fn alert<'a>(
     .padding(ui.metrics().card_padding)
     .style(move |_theme| container::Style {
         background: Some(Background::Color(ui.layer(MaterialLayer::Card))),
-        border: ui.outlined(Component::OutlinedCard.spec().shape),
+        border: ui.outlined(ui.card_shape()),
         ..container::Style::default()
     })
     .into()
diff --git a/crates/app-iced/src/pages/appearance/section/mod.rs b/crates/app-iced/src/pages/appearance/section/mod.rs
index a769e6c..d4cf2b0 100644
--- a/crates/app-iced/src/pages/appearance/section/mod.rs
+++ b/crates/app-iced/src/pages/appearance/section/mod.rs
@@ -59,7 +59,6 @@ use iced::{
 };
 
 use unlucky_design::color::Role;
-use unlucky_design::component_map::Component;
 use unlucky_design::elevation::MaterialLayer;
 use unlucky_design::shape::ShapeScale;
 use unlucky_design::spacing::Space;
@@ -100,7 +99,7 @@ pub fn section<'a>(ui: &'a Ui, state: &'a State, lang: Lang) -> Element<'a, Mess
 
 /// 外观卡片：底色走 `ui.layer`（面板 α 的唯一来源），与其它页的卡片同源。
 fn card<'a>(ui: &'a Ui, content: impl Into<Element<'a, Message>>) -> Element<'a, Message> {
-    let spec = Component::OutlinedCard.spec();
+    let shape = ui.card_shape();
     let background = ui.layer(MaterialLayer::Card);
 
     container(content)
@@ -108,7 +107,7 @@ fn card<'a>(ui: &'a Ui, content: impl Into<Element<'a, Message>>) -> Element<'a,
         .padding(ui.metrics().card_padding)
         .style(move |_theme| container::Style {
             background: Some(Background::Color(background)),
-            border: ui.outlined(spec.shape),
+            border: ui.outlined(shape),
             ..container::Style::default()
         })
         .into()
diff --git a/crates/app-iced/src/pages/frame/pieces.rs b/crates/app-iced/src/pages/frame/pieces.rs
index 1a6b0f0..e9e1490 100644
--- a/crates/app-iced/src/pages/frame/pieces.rs
+++ b/crates/app-iced/src/pages/frame/pieces.rs
@@ -32,15 +32,19 @@ pub const SCROLLBAR_WIDTH: f32 = 6.0;
 /// 滑块离卡片内边的留白（2px，避免贴边）。
 pub const SCROLLBAR_MARGIN: f32 = 2.0;
 
-/// 描边卡片（占位：M75 的 `components` 会提供真正的 `OutlinedCard`）。
+/// 描边卡片（长表单容器）。圆角取**规格卡**的 16（`Ui::card_shape`），不是组件表的 12。
+///
+/// M229 换肤：规格卡 `CARD` 小节把卡片画成 `rx=16`，而 `component_map` 的 `OutlinedCard` 是
+/// `Medium(12)`（官方值）。M228 把这条差异登记为「换肤时取 `inkcat::metrics::CARD`」，这里就是那次取值；
+/// 组件表的值不动（它还服务别的面）。描边仍走 `OutlineVariant` 1px。
 pub fn card<'a>(ui: &'a Ui, content: impl Into<Element<'a, Message>>) -> Element<'a, Message> {
-    let spec = Component::OutlinedCard.spec();
+    let shape = ui.card_shape();
     container(content)
         .width(Length::Fill)
         .padding(ui.metrics().card_padding)
         .style(move |_theme| container::Style {
             background: Some(Background::Color(ui.layer(MaterialLayer::Card))),
-            border: ui.outlined(spec.shape),
+            border: ui.outlined(shape),
             ..container::Style::default()
         })
         .into()
diff --git a/crates/app-iced/src/pages/frame/tests.rs b/crates/app-iced/src/pages/frame/tests.rs
index c44de73..38f7fa2 100644
--- a/crates/app-iced/src/pages/frame/tests.rs
+++ b/crates/app-iced/src/pages/frame/tests.rs
@@ -36,13 +36,15 @@ fn empty_state_follows_the_12b_reference() {
     const { assert!(EMPTY_ICON_GLYPH < EMPTY_ICON_BLOCK) };
 }
 
+/// 卡片圆角取**规格卡**的 16（M229 换肤），组件表 `OutlinedCard` 的 12 只作为对照保留。
 #[test]
-fn card_uses_the_outlined_card_spec() {
-    let spec = Component::OutlinedCard.spec();
-    assert_eq!(spec.shape, ShapeScale::Medium);
-    assert_eq!(ui().radius_dp(spec.shape).top_left, 12.0);
-    assert_eq!(spec.text, TypeRole::TitleMedium);
-    assert_eq!(spec.support, Some(TypeRole::BodySmall));
+fn card_uses_the_spec_corner_not_the_component_table() {
+    let ui = ui();
+    assert_eq!(ui.card_shape(), ShapeScale::Large);
+    assert_eq!(ui.radius_dp(ui.card_shape()).top_left, 16.0);
+    // 组件表的官方值仍是 12（表不动，差异登记在 `inkcat` 模块与 M229 报告里）。
+    assert_eq!(Component::OutlinedCard.spec().shape, ShapeScale::Medium);
+    assert_eq!(ui.radius_dp(ShapeScale::Medium).top_left, 12.0);
 }
 
 #[test]
diff --git a/crates/app-iced/src/pages/instances/detail.rs b/crates/app-iced/src/pages/instances/detail.rs
index 31e99f2..6709efb 100644
--- a/crates/app-iced/src/pages/instances/detail.rs
+++ b/crates/app-iced/src/pages/instances/detail.rs
@@ -15,6 +15,7 @@ use unlucky_presenter::router::Route;
 use crate::app::components::buttons::{self, Button};
 use crate::app::components::divider;
 use crate::app::components::interaction::Interaction;
+use crate::app::components::surfaces::elevated;
 use crate::theme::Ui;
 use unlucky_design::icons::IconKind;
 
@@ -229,26 +230,18 @@ fn meta_grid<'a>(ui: &'a Ui, metrics: FrameMetrics, detail: &'a Detail) -> Eleme
     for chunk in detail.meta.chunks(columns) {
         let mut cells_row = row![].spacing(layout::META_GAP).width(Length::Fill);
         for cell in chunk {
-            let card = frame::card(
+            // M229：元信息卡 = 规格卡的 **ELEVATED CARD**（无描边、`SurfaceContainer` 底、
+            // 16 圆角、内距 24；上标注 11/600 + 值 16/400）。换肤前这里是描边卡。
+            let card = elevated::card(
                 ui,
-                column![
-                    frame::text_role(
-                        ui,
-                        TypeRole::LabelMedium,
-                        false,
-                        cell.label.as_str(),
-                        ui.color(Role::OnSurfaceVariant),
-                    ),
-                    frame::text_role(
-                        ui,
-                        TypeRole::BodyMedium,
-                        false,
-                        cell.value.as_str(),
-                        ui.color(Role::OnSurface)
-                    ),
-                ]
-                .spacing(ui.space(Space::X1))
-                .width(Length::Fill),
+                elevated::texts(
+                    ui,
+                    elevated::Texts {
+                        overline: Some(cell.label.as_str()),
+                        title: cell.value.as_str(),
+                        support: None,
+                    },
+                ),
             );
             cells_row = cells_row.push(container(card).width(Length::Fill));
         }
diff --git a/crates/app-iced/src/pages/logs/panel.rs b/crates/app-iced/src/pages/logs/panel.rs
index 64c401d..cab5e8b 100644
--- a/crates/app-iced/src/pages/logs/panel.rs
+++ b/crates/app-iced/src/pages/logs/panel.rs
@@ -18,7 +18,6 @@
 use iced::widget::{container, scrollable};
 use iced::{Background, Element, Length};
 
-use unlucky_design::component_map::Component;
 use unlucky_design::elevation::MaterialLayer;
 
 use crate::theme::Ui;
@@ -33,7 +32,7 @@ pub fn card<'a>(
     height: Length,
     content: impl Into<Element<'a, Message>>,
 ) -> Element<'a, Message> {
-    let shape = Component::OutlinedCard.spec().shape;
+    let shape = ui.card_shape();
 
     container(content)
         .width(Length::Fill)
diff --git a/crates/app-iced/src/pages/message.rs b/crates/app-iced/src/pages/message.rs
index 63d9676..bf13adc 100644
--- a/crates/app-iced/src/pages/message.rs
+++ b/crates/app-iced/src/pages/message.rs
@@ -8,6 +8,7 @@
 //! 同一条纪律）；app 层只做一次 `.map`。
 
 use unlucky_i18n::LangChoice;
+use unlucky_presenter::prefs::ThemeMode;
 use unlucky_presenter::router::Route;
 
 use super::appearance;
@@ -29,6 +30,11 @@ pub enum Message {
     Launch(String),
     /// 停止某实例（app 层翻成 `AppCommand::StopInstance`）。
     Stop(String),
+    /// 切主题档（M229：设置页「通用 → 主题」的 Ink / Silver / 跟随系统三档）。
+    ///
+    /// 载荷是 `ThemeMode` 而不是色板枚举：Ink / Silver 就是 `dark` / `light` 两侧的**产品名**，
+    /// 第三档 `auto` 由系统深浅落到对应色板。落盘键仍是 `appearance.theme_mode`。
+    Theme(ThemeMode),
     /// 外观项改动（设置页「外观」分组 → `App` 的状态与落盘）。
     ///
     /// 载荷是**用户请求值**（未钳位）：钳位与 CPU 档降级在 `appearance::alpha` 里做，
diff --git a/crates/app-iced/src/pages/settings/general.rs b/crates/app-iced/src/pages/settings/general.rs
index 4757b56..c44b083 100644
--- a/crates/app-iced/src/pages/settings/general.rs
+++ b/crates/app-iced/src/pages/settings/general.rs
@@ -29,9 +29,11 @@
 //! 3. **文案全部走 catalog**（[`Key`]），三档选项名跟着界面语言走（见 `catalog/general.rs`
 //!    的头注释：为什么不写语言自称）。
 //!
-//! ## 其余三行仍只读
+//! ## 主题行已接真控件（M229），另两行仍只读
 //!
-//! 主题 / 启动页 / 关闭按钮还没有后端（`pages::Action` 里是占位动作），所以它们是**只读行**；
+//! 主题三档（Ink / Silver / 跟随系统）在 M229 接成真控件：点一下换色板 + 落盘
+//! `appearance.theme_mode`（实现在 `general/theme.rs`，消息是 `pages::Message::Theme`）。
+//! 启动页 / 关闭按钮还没有后端（`pages::Action` 里是占位动作），仍是**只读行**；
 //! 但标签与取值已经进 catalog，中文界面下不会再冒出英文。
 //!
 //! 分组元数据只有一份（这里的 [`GROUP`]）：`settings/mod.rs` 的 `GROUPS` 直接引用它。
@@ -41,7 +43,6 @@ use iced::{Alignment, Background, Border, Element, Length, Padding, Shadow, Them
 
 use unlucky_design::color::{Role, StateLayer};
 use unlucky_design::icons::IconKind;
-use unlucky_design::shape::ShapeScale;
 use unlucky_design::spacing::Space;
 use unlucky_design::typography::TypeRole;
 use unlucky_i18n::catalog::Key;
@@ -52,16 +53,18 @@ use crate::pages::{frame, Language, Message};
 use crate::theme::Ui;
 
 use super::frame::{card, divider};
-use super::Group;
+use super::{Group, States};
+
+mod theme;
 
 /// General 分组（左列名固定英文：左列是**导航**，与导航轨同源，不进 catalog）。
 pub(super) const GROUP: Group = Group {
     name: "General",
     icon: IconKind::Settings,
     // 只给 harness（`pages_demo` 走 `appearance: None` 时）用的演示行：产品路径走 [`body`]。
-    // 语言那一行**不在**这里——它的值是要跟着语言变的，写死在静态表里就是用户看到的那条假值。
+    // 语言与主题那两行**不在**这里——它们的值跟着语言/档位变，写死在静态表里就是用户看到的假值
+    // （语言 M106 移出、主题 M229 移出）。
     rows: &[
-        ("Theme", "Follow system"),
         ("Startup page", "Instances"),
         ("Close button", "Exit to tray"),
     ],
@@ -69,7 +72,7 @@ pub(super) const GROUP: Group = Group {
 };
 
 /// 这一组的正文（**产品路径**）。
-pub(super) fn body<'a>(ui: &'a Ui, language: Language) -> Element<'a, Message> {
+pub(super) fn body<'a>(ui: &'a Ui, states: States<'a>, language: Language) -> Element<'a, Message> {
     let catalog = language.effective.catalog();
     let mut stacked = column![].spacing(0.0).width(Length::Fill);
     stacked = stacked.push(language_row(ui, language));
@@ -78,14 +81,22 @@ pub(super) fn body<'a>(ui: &'a Ui, language: Language) -> Element<'a, Message> {
     stacked = stacked.push(divider(ui));
     stacked = stacked.push(font_row(ui, language));
 
-    // M188：日志文件夹（路径 + 打开 + 复制路径）。放在「主题/启动页」之前——用户投诉
+    // M229：主题行接真控件（Ink / Silver / 跟随系统）。档位住在设置组的自有状态里
+    // （`language_appearance::State::theme`），与语言行同一个排版：标题 + 三枚互斥 chip + 一句说明。
+    stacked = stacked.push(divider(ui));
+    stacked = stacked.push(theme::view(
+        ui,
+        &catalog,
+        states.groups.language_appearance.theme,
+    ));
+
+    // M188：日志文件夹（路径 + 打开 + 复制路径）。放在「启动页/关闭按钮」之前——用户投诉
     // 「找不到崩溃日志」要的答案，不该埋在只读行后面。
     stacked = stacked.push(divider(ui));
     stacked = stacked.push(super::logs_row::folder_row(ui, &catalog));
 
-    // 主题 / 启动页 / 关闭按钮：还没有后端，只读；文案已经进 catalog。
+    // 启动页 / 关闭按钮：还没有后端，只读；文案已经进 catalog。
     for (label, value) in [
-        (Key::SettingsTheme, Key::SettingsThemeFollowSystem),
         (Key::SettingsStartupPage, Key::SettingsStartupInstances),
         (Key::SettingsCloseButton, Key::SettingsCloseToTray),
     ] {
@@ -290,14 +301,20 @@ fn setting_row<'a>(ui: &'a Ui, label: &'a str, value: &'a str) -> Element<'a, Me
 
 /// 一个互斥按钮（选中态 `SecondaryContainer`，未选中透明 + `OnSurfaceVariant`）。
 ///
-/// 与 `pages/appearance/section/mod.rs` 的 `choice` 同款，但文案来自 catalog（那份是英文基线）。
+/// 与 `pages/appearance/section/mod.rs` 的 `choice` 同款几何，但文案来自 catalog（那份是英文基线）。
+///
+/// **几何（M229）**：取规格卡的 chip（高 32、圆角 8、内距 16、未选中 1px `OutlineVariant`），
+/// 与同屏的主题三档 chips 完全同源——两行都是「并排的互斥筛选」，长得不一样会让读者以为是
+/// 两种控件（M229 第一版就是这样：语言 40 高药丸、主题 32 高方角，出图一眼就不齐）。
 fn chip<'a>(ui: &'a Ui, text: &'a str, selected: bool, choice: LangChoice) -> Element<'a, Message> {
-    let height = ui.metrics().control_height;
+    let box_ = unlucky_design::inkcat::metrics::CHIP;
+    let height = box_.height;
     let content_color = if selected {
         ui.color(Role::OnSecondaryContainer)
     } else {
         ui.color(Role::OnSurfaceVariant)
     };
+    let border_color = ui.color(Role::OutlineVariant);
 
     button(
         container(frame::text_role(
@@ -310,7 +327,10 @@ fn chip<'a>(ui: &'a Ui, text: &'a str, selected: bool, choice: LangChoice) -> El
         .align_y(Alignment::Center),
     )
     .height(height)
-    .padding(Padding::from([0.0, ui.space(Space::X3)]))
+    .padding(Padding::from([
+        0.0,
+        unlucky_design::inkcat::metrics::CHIP_PAD_X,
+    ]))
     .style(move |_theme: &IcedTheme, status| {
         let background = if selected {
             Some(Background::Color(ui.color(Role::SecondaryContainer)))
@@ -328,8 +348,13 @@ fn chip<'a>(ui: &'a Ui, text: &'a str, selected: bool, choice: LangChoice) -> El
             background,
             text_color: content_color,
             border: Border {
-                radius: ui.radius(ShapeScale::Full, height),
-                ..Border::default()
+                color: border_color,
+                width: if selected {
+                    0.0
+                } else {
+                    crate::theme::STROKE_PX
+                },
+                radius: ui.radius(box_.shape, height),
             },
             shadow: Shadow::default(),
             snap: true,
diff --git a/crates/app-iced/src/pages/settings/general/theme.rs b/crates/app-iced/src/pages/settings/general/theme.rs
new file mode 100644
index 0000000..88d14ef
--- /dev/null
+++ b/crates/app-iced/src/pages/settings/general/theme.rs
@@ -0,0 +1,161 @@
+//! 设置页「General → 主题」行：Ink / Silver / 跟随系统三档（M229）。
+//!
+//! 从 `general.rs` 拆出来的理由只有一条：加这三档之后那个文件 474 行（400 行硬线）。
+//! 拆法是「整段搬走 + 一个 `pub(super) fn row` 入口」，排版与 handler 一字未改。
+//!
+//! 三档的语义：**Ink = 深色主方案、Silver = 浅色主方案**，落盘取值仍是 `appearance.theme_mode`
+//! 的 `dark` / `light`；第三档「跟随系统」= `auto`，由系统深浅落到对应色板
+//! （`BrandBoard::for_flavor`）。所以这里**不新增配置键**，旧配置读进来语义也一致。
+
+use iced::widget::{button, column, container, row};
+use iced::{Alignment, Background, Border, Element, Length, Padding, Shadow, Theme as IcedTheme};
+
+use unlucky_design::color::{Role, StateLayer};
+use unlucky_design::inkcat::metrics as chipbox;
+use unlucky_design::spacing::Space;
+use unlucky_design::typography::TypeRole;
+use unlucky_i18n::catalog::{Catalog, Key};
+use unlucky_presenter::prefs::ThemeMode;
+
+use crate::pages::{frame, Message};
+use crate::theme::Ui;
+
+/// 三档全序（Ink / Silver / 跟随系统）：`ThemeMode` 在 presenter，声明序是 `Auto/Light/Dark`，
+/// 画出来的顺序按「深 → 浅 → 跟随」，所以这里另给一张表，不靠枚举声明序。
+pub(super) const THEME_MODES: [ThemeMode; 3] = [ThemeMode::Dark, ThemeMode::Light, ThemeMode::Auto];
+
+/// 主题行：标题 + 三档互斥 chip + 一句说明（排版与语言行同族）。
+pub(super) fn view<'a>(ui: &'a Ui, catalog: &Catalog, mode: ThemeMode) -> Element<'a, Message> {
+    let head = row![
+        container(frame::text_role(
+            ui,
+            TypeRole::BodyMedium,
+            false,
+            catalog.text(Key::SettingsTheme),
+            ui.color(Role::OnSurface),
+        ))
+        .width(Length::Fill)
+        .align_y(Alignment::Center),
+        frame::text_role(
+            ui,
+            TypeRole::LabelLarge,
+            true,
+            catalog.text(mode_label(mode)),
+            ui.color(Role::OnPrimaryFixedVariant),
+        ),
+    ]
+    .width(Length::Fill)
+    .align_y(Alignment::Center);
+
+    let chips = row(THEME_MODES
+        .iter()
+        .map(|choice| {
+            chip(
+                ui,
+                catalog.text(mode_label(*choice)),
+                *choice == mode,
+                *choice,
+            )
+        })
+        .collect::<Vec<_>>())
+    .spacing(ui.space(Space::X1))
+    .align_y(Alignment::Center);
+
+    column![
+        head,
+        chips,
+        frame::text_role(
+            ui,
+            TypeRole::BodySmall,
+            false,
+            catalog.text(Key::SettingsThemeHint),
+            ui.color(Role::OnSurfaceVariant),
+        ),
+    ]
+    .spacing(ui.space(Space::X1))
+    .width(Length::Fill)
+    .padding(Padding::from([ui.space(Space::X2), 0.0]))
+    .into()
+}
+
+/// 一档主题的选项名（Ink / Silver / 跟随系统）。
+fn mode_label(mode: ThemeMode) -> Key {
+    match mode {
+        ThemeMode::Dark => Key::SettingsThemeInk,
+        ThemeMode::Light => Key::SettingsThemeSilver,
+        ThemeMode::Auto => Key::SettingsThemeFollowSystem,
+    }
+}
+
+/// 一枚主题档位按钮（选中态 `SecondaryContainer`，未选中透明 + 1px `OutlineVariant`）。
+///
+/// 几何取规格卡的 chip（高 32、圆角 8，`inkcat::metrics::CHIP`）：主题三档是**可并排的筛选**，
+/// 不是主行动按钮，用 chip 档比语言行那枚 40 高药丸更贴规格卡。
+fn chip<'a>(ui: &'a Ui, text: &'a str, selected: bool, mode: ThemeMode) -> Element<'a, Message> {
+    let box_ = chipbox::CHIP;
+    let height = box_.height;
+    let content_color = if selected {
+        ui.color(Role::OnSecondaryContainer)
+    } else {
+        ui.color(Role::OnSurfaceVariant)
+    };
+    let border_color = ui.color(Role::OutlineVariant);
+    let stroke = crate::theme::STROKE_PX;
+
+    button(
+        container(frame::text_role(
+            ui,
+            TypeRole::LabelLarge,
+            selected,
+            text,
+            content_color,
+        ))
+        .align_y(Alignment::Center),
+    )
+    .height(height)
+    .padding(Padding::from([0.0, chipbox::CHIP_PAD_X]))
+    .style(move |_theme: &IcedTheme, status| {
+        let background = if selected {
+            Some(Background::Color(ui.color(Role::SecondaryContainer)))
+        } else if matches!(status, button::Status::Hovered | button::Status::Pressed) {
+            Some(Background::Color(ui.state_over(
+                StateLayer::Hover,
+                Role::OnSurface,
+                Role::Surface,
+            )))
+        } else {
+            None
+        };
+
+        button::Style {
+            background,
+            text_color: content_color,
+            border: Border {
+                color: border_color,
+                width: if selected { 0.0 } else { stroke },
+                radius: ui.radius(box_.shape, height),
+            },
+            shadow: Shadow::default(),
+            snap: true,
+        }
+    })
+    .on_press(Message::Theme(mode))
+    .into()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// 三档 = 两块板 + 一种跟随，顺序是深 → 浅 → 跟随（换序会让「Ink 在最左」这条观感失守）。
+    #[test]
+    fn the_three_modes_are_ink_silver_and_follow_system() {
+        assert_eq!(
+            THEME_MODES,
+            [ThemeMode::Dark, ThemeMode::Light, ThemeMode::Auto]
+        );
+        assert_eq!(mode_label(ThemeMode::Dark), Key::SettingsThemeInk);
+        assert_eq!(mode_label(ThemeMode::Light), Key::SettingsThemeSilver);
+        assert_eq!(mode_label(ThemeMode::Auto), Key::SettingsThemeFollowSystem);
+    }
+}
diff --git a/crates/app-iced/src/pages/settings/language_appearance.rs b/crates/app-iced/src/pages/settings/language_appearance.rs
index 2af25b2..f94b74b 100644
--- a/crates/app-iced/src/pages/settings/language_appearance.rs
+++ b/crates/app-iced/src/pages/settings/language_appearance.rs
@@ -21,10 +21,16 @@
 
 /// 语言 + 外观线的状态（**只归本线**）。
 ///
-/// 首版是空结构：这一条线还没有自己的运行期状态（外观那份状态是 `pages::appearance::State`，
-/// 归 M93，走 `States::appearance` 那条既有通道，不在这里）。加字段只改本文件。
+/// 外观那份运行期状态是 `pages::appearance::State`（M93），走 `States::appearance` 那条既有通道，
+/// 不在这里。本结构只装**分组自己的**档位：M229 起主题三档（Ink / Silver / 跟随系统）住这儿，
+/// 由 `app` 在启动与切换时同步（唯一写者见 `app/state/theme.rs::set_theme_mode`）。
+///
+/// 初值 `Auto`：harness / 演示路径没有配置可读，跟随系统正是出厂值。
 #[derive(Debug, Default)]
-pub struct State {}
+pub struct State {
+    /// 当前主题档（Ink = `Dark` / Silver = `Light` / 跟随系统 = `Auto`）。
+    pub theme: unlucky_presenter::prefs::ThemeMode,
+}
 
 /// 语言 + 外观线的消息（**只归本线**）。
 ///
diff --git a/crates/app-iced/src/pages/settings/mod.rs b/crates/app-iced/src/pages/settings/mod.rs
index 97680bf..ff25f01 100644
--- a/crates/app-iced/src/pages/settings/mod.rs
+++ b/crates/app-iced/src/pages/settings/mod.rs
@@ -358,7 +358,7 @@ fn section_columns<'a>(
         // 档位与生效语言不在 [`States`] 里，只能从 `pages::Language` 进来；它与 `appearance` 在不在场
         // 无关（harness 那条路径也画得出真控件）。
         let card = if index == GENERAL_GROUP {
-            general::body(ui, language)
+            general::body(ui, states, language)
         } else if index == UPDATE_GROUP {
             // M159：更新组读 presenter 快照（`view` 的 `update` 形参），与 General 同一条按下标分发。
             update::body(ui, update, language.effective)
diff --git a/crates/app-iced/src/pages/settings/tests/general_section.rs b/crates/app-iced/src/pages/settings/tests/general_section.rs
index 289eb15..ca38f34 100644
--- a/crates/app-iced/src/pages/settings/tests/general_section.rs
+++ b/crates/app-iced/src/pages/settings/tests/general_section.rs
@@ -17,20 +17,19 @@ use unlucky_design::icons::IconKind;
 use unlucky_i18n::LangChoice;
 use unlucky_i18n::{Key, Lang};
 
-/// 这一组的**静态演示行**：语言那一行已经换真控件，所以只剩三行。
+/// 这一组的**静态演示行**：语言（M106）与主题（M229）都已经换成真控件，所以只剩两行。
 ///
-/// 抓得住：①四条线并行合并时把别人的行粘到本文件；②语言行被「顺手」加回静态表——
-/// 那等于把用户看到的假值又写回去（它的值必须跟着语言变，静态表做不到）。
-/// 抓不住：真控件画出来长什么样（那是截图验收的事，见 `DevDocs/artifacts/m106/`）。
+/// 抓得住：①四条线并行合并时把别人的行粘到本文件；②语言/主题被「顺手」加回静态表——
+/// 那等于把用户看到的假值又写回去（它们的值必须跟着语言/档位变，静态表做不到）。
+/// 抓不住：真控件画出来长什么样（那是截图验收的事，见 `DevDocs/artifacts/m229/`）。
 #[test]
-fn the_general_group_keeps_theme_startup_and_close_as_static_rows() {
+fn the_general_group_keeps_only_the_two_rows_without_a_backend() {
     let rows: Vec<(&str, &str)> = general::GROUP.rows.to_vec();
     assert_eq!(
         rows,
         vec![
-            ("Theme", "Follow system"),
             ("Startup page", "Instances"),
-            ("Close button", "Exit to tray"),
+            ("Close button", "Exit to tray")
         ]
     );
 }
diff --git a/crates/app-iced/src/shell/mod.rs b/crates/app-iced/src/shell/mod.rs
index e726fc0..6d1e47c 100644
--- a/crates/app-iced/src/shell/mod.rs
+++ b/crates/app-iced/src/shell/mod.rs
@@ -7,7 +7,7 @@
 //! | 标题栏高度 | 16.2 桌面标题栏 **40**（登记偏离） | `LM.titlebar_height = 48`（M63 §1.4/R13 桌面档，令牌优先） |
 //! | 标题栏按钮 | 16.5 官方图标 **24** → 本项目 **20**（M86 项目偏离，用户点名「图标稍大」） | `icons::CAPTION_PX`（令牌 `TITLEBAR_CAPTION_ICON_PX`）+ `LM.titlebar_button_width = 46` |
 //! | 页头 | 16.1 官方 AppBar **64**；本项目 **56** | `LM.page_header_height = 56`（已有偏离登记） |
-//! | 卡片 | 3.x Outlined：**Medium(12)**、L0、`OutlineVariant` 1px、`SurfaceContainerLow` | `Component::OutlinedCard.spec()` + `STROKE_PX` |
+//! | 卡片 | 3.x Outlined，圆角取**规格卡 16**（`Large`；组件表 `OutlinedCard` 的官方值是 12）、`OutlineVariant` 1px、卡片层底 | `Ui::card_shape()` + `STROKE_PX` |
 //! | 字级 | 16.4 标题 `TitleLarge`；卡片 `TitleMedium` / `BodySmall` | `Ui::style` / `Ui::emphasized` |
 //!
 //! 导航轨在 [`nav`] 子模块里（12b §5 的判据表也在那边）。
diff --git a/crates/app-iced/src/theme.rs b/crates/app-iced/src/theme.rs
index 4d512db..35edc95 100644
--- a/crates/app-iced/src/theme.rs
+++ b/crates/app-iced/src/theme.rs
@@ -1,8 +1,20 @@
-//! 令牌 → iced 类型（`Color` / `Font` / `Border` / `Radius` / `Theme`）。
+//! # 令牌 → iced 类型（`Color` / `Font` / `Border` / `Radius` / `Theme`）。
 //!
 //! 本模块是**唯一**允许把 `unlucky-design` 的值翻成 iced 类型的地方（M61 §0）：组件层只调
 //! [`Ui`]，绝不出现色值/字号/半径/间距字面量（`tests/no_hardcoded_tokens.rs` 扫 `src/**`）。
 //!
+//! ## 两套来源：品牌色板（出厂）与取色方案（D38）
+//!
+//! M229 起 [`Ui::new`] 走 **品牌色板**（[`BrandBoard`]：Ink = 深色主方案 / Silver = 浅色主方案），
+//! `Scheme::baseline`（tone 派生）退回它本来的角色——D38 取色链的中性锚点。两条路径并列：
+//!
+//! - [`Ui::brand`]：出厂外观，色板自己决定深浅（[`BrandBoard::flavor`]）；
+//! - [`Ui::from_scheme`]：背景图 / 壁纸取色成功时接管 49 个角色（取色失败回落色板）；
+//! - [`Ui::baseline`]：老的 tone 派生口径，只给对照与测试用（产品路径不再默认走它）。
+//!
+//! 「跟随系统」是**设置层的第三种态**，不是第三套板：系统浅色 → Silver、系统深色 → Ink
+//! （[`BrandBoard::for_flavor`]）。色板始终只有两套。
+//!
 //! ## 为什么不用 `iced::theme::Base` 承载 49 个角色
 //!
 //! iced 的 `Palette` 只有 6 色，M3 有 49 个角色（M60 Q5）：真源是本模块的 [`Scheme`]，`Theme`
@@ -13,8 +25,9 @@ use iced::border::Radius;
 use iced::theme::Palette;
 use iced::{Border, Color, Font, Theme};
 
-use unlucky_design::color::{Role, Scheme, SchemeFlavor, StateLayer};
+use unlucky_design::color::{BrandBoard, Role, Scheme, SchemeFlavor, StateLayer};
 use unlucky_design::elevation::MaterialLayer;
+use unlucky_design::inkcat::metrics::{self as inkcat, SpecBox};
 use unlucky_design::shape::ShapeScale;
 use unlucky_design::spacing::{LayoutMetrics, Space};
 use unlucky_design::typography::{FontFamily, Platform, TypeRole, TypeStyle, Weight};
@@ -40,6 +53,8 @@ pub struct Families {
 #[derive(Debug, Clone)]
 pub struct Ui {
     scheme: Scheme,
+    /// 当前色板（Ink / Silver）。`from_scheme` 时取方案深浅对应的那块，`name()` 与图例用它。
+    board: BrandBoard,
     platform: Platform,
     metrics: LayoutMetrics,
     families: Families,
@@ -48,15 +63,28 @@ pub struct Ui {
 }
 
 impl Ui {
-    /// 按平台（由 `cfg!` 决定）与令牌基线方案求值。
+    /// 按平台（由 `cfg!` 决定）与**品牌色板**求值：深浅决定色板（浅 → Silver / 深 → Ink）。
+    ///
+    /// 这是产品出厂外观的唯一入口（M229）：`DesignTokens::brand(BrandBoard::for_flavor(flavor))`。
     pub fn new(flavor: SchemeFlavor, families: Families) -> Self {
         Self::with_platform(flavor, Platform::current(), families)
     }
 
     /// 显式指定平台（跨平台核对与测试用）。
     pub fn with_platform(flavor: SchemeFlavor, platform: Platform, families: Families) -> Self {
+        Self::with_board(BrandBoard::for_flavor(flavor), platform, families)
+    }
+
+    /// 按**指定色板**求值（色板自己决定深浅，见 [`BrandBoard::flavor`]）。
+    pub fn brand(board: BrandBoard, families: Families) -> Self {
+        Self::with_board(board, Platform::current(), families)
+    }
+
+    /// 指定色板 + 平台（截图与测试用）。
+    pub fn with_board(board: BrandBoard, platform: Platform, families: Families) -> Self {
         Self {
-            scheme: Scheme::baseline(flavor),
+            scheme: board.scheme(),
+            board,
             platform,
             metrics: LayoutMetrics::DESKTOP,
             families,
@@ -64,17 +92,30 @@ impl Ui {
         }
     }
 
+    /// tone 派生的 `Scheme::baseline` 口径（D38 取色链的中性锚点；产品路径不再默认走它）。
+    ///
+    /// 留成公开入口是为了对照与测试：`Ui::new(flavor)` 与它在**颜色上不同**，那是 M229 的换肤。
+    pub fn baseline(flavor: SchemeFlavor, families: Families) -> Self {
+        Self::from_scheme(Scheme::baseline(flavor), families)
+    }
+
     /// 当前深浅。
     pub fn flavor(&self) -> SchemeFlavor {
         self.scheme.flavor()
     }
 
-    /// 用**已解析的方案**构造求值器（D38：背景图 / 壁纸取色 → 49 个角色换掉 baseline）。
+    /// 当前色板（Ink / Silver）。
+    pub fn board(&self) -> BrandBoard {
+        self.board
+    }
+
+    /// 用**已解析的方案**构造求值器（D38：背景图 / 壁纸取色 → 49 个角色换掉色板）。
     ///
-    /// 追加式入口：`new` / `with_platform` 的行为一字未动（默认仍是 [`Scheme::baseline`]）；
-    /// 平台与骨架尺寸仍按当前环境求值——方案只带颜色。
+    /// 色板字段取方案深浅对应的那块（`Light → Silver` / `Dark → Ink`）：取色方案只换颜色，
+    /// 不改变「这一屏是深色还是浅色」，所以 `name()` 仍然说实话。
     pub fn from_scheme(scheme: Scheme, families: Families) -> Self {
         Self {
+            board: BrandBoard::for_flavor(scheme.flavor()),
             scheme,
             platform: Platform::current(),
             metrics: LayoutMetrics::DESKTOP,
@@ -150,6 +191,20 @@ impl Ui {
         Radius::new(shape.radius_px(side))
     }
 
+    /// **规格卡口径的卡片方框**（`ELEVATED CARD` / `CARD`，`inkcat::metrics::CARD`）。
+    ///
+    /// 与 `component_map` 的 `OutlinedCard = Medium(12)` 差 4：规格卡画的是 `rx=16`（Large），
+    /// M228 的 `inkcat` 模块把这条差异登记为「换肤时取 `CARD`」，M229 就是那次换肤。表值不动
+    /// （它还服务别的面），页面卡片统一从这里取。
+    pub fn card_box(&self) -> SpecBox {
+        inkcat::CARD
+    }
+
+    /// 卡片圆角档（= [`Self::card_box`] 的 `shape`，即 `ShapeScale::Large` = 16）。
+    pub fn card_shape(&self) -> ShapeScale {
+        self.card_box().shape
+    }
+
     /// 固定档圆角。`ShapeScale::Full` 必须走 [`Ui::radius`]（它没有绝对值）。
     pub fn radius_dp(&self, shape: ShapeScale) -> Radius {
         debug_assert!(
@@ -225,10 +280,14 @@ impl Ui {
     }
 
     /// `Theme::name()` 的取值（稳定字符串，改名要先在协作文档登记）。
+    ///
+    /// M229 起按**色板**取名（`ull-ink` / `ull-silver`）：换肤之后「深色」这个词不再等于
+    /// 「M3 深色 tone 派生」，名字必须能区分「是哪块板」。D38 取色方案仍叫它所属深浅的那块
+    /// （取色只换颜色，不换深浅）。
     pub fn name(&self) -> &'static str {
-        match self.flavor() {
-            SchemeFlavor::Light => "ull-m3-light",
-            SchemeFlavor::Dark => "ull-m3-dark",
+        match self.board {
+            BrandBoard::Ink => "ull-ink",
+            BrandBoard::Silver => "ull-silver",
         }
     }
 }
@@ -254,147 +313,4 @@ pub fn weight_of(weight: Weight) -> iced::font::Weight {
 }
 
 #[cfg(test)]
-mod tests {
-    use super::*;
-
-    const FAMILIES: Families = Families {
-        text: "Segoe UI Variable Text",
-        display: "Segoe UI Variable Display",
-        mono: "Cascadia Mono",
-    };
-
-    fn ui(flavor: SchemeFlavor) -> Ui {
-        Ui::with_platform(flavor, Platform::Windows, FAMILIES)
-    }
-
-    #[test]
-    fn theme_name_tracks_the_flavor() {
-        assert_eq!(ui(SchemeFlavor::Light).name(), "ull-m3-light");
-        assert_eq!(ui(SchemeFlavor::Dark).name(), "ull-m3-dark");
-        assert_ne!(
-            ui(SchemeFlavor::Light).theme().to_string(),
-            ui(SchemeFlavor::Dark).theme().to_string()
-        );
-    }
-
-    #[test]
-    fn canvas_card_overlay_follow_surface_containers() {
-        let ui = ui(SchemeFlavor::Light);
-        assert_eq!(ui.layer(MaterialLayer::Canvas), ui.color(Role::Surface));
-        assert_eq!(
-            ui.layer(MaterialLayer::Card),
-            ui.color(Role::SurfaceContainerLow)
-        );
-        assert_eq!(
-            ui.layer(MaterialLayer::Overlay),
-            ui.color(Role::SurfaceContainerHigh)
-        );
-    }
-
-    #[test]
-    fn radii_only_come_from_the_scale() {
-        let ui = ui(SchemeFlavor::Light);
-        // 卡片 Medium(12)：边长够大时就是 12
-        assert_eq!(ui.radius_dp(ShapeScale::Medium).top_left, 12.0);
-        assert_eq!(ui.radius_dp(ShapeScale::ExtraSmall).top_left, 4.0);
-        // 药丸 Full：按边长一半折算
-        assert_eq!(ui.radius(ShapeScale::Full, 32.0).top_left, 16.0);
-        // 不许超过边长一半
-        assert_eq!(ui.radius(ShapeScale::ExtraLarge, 20.0).top_left, 10.0);
-    }
-
-    #[test]
-    fn outlines_are_one_pixel_and_use_outline_variant() {
-        let ui = ui(SchemeFlavor::Light);
-        let border = ui.outlined(ShapeScale::Medium);
-        assert_eq!(border.width, STROKE_PX);
-        assert_eq!(border.width, 1.0, "rubric G7：全站 1px");
-        assert_eq!(border.color, ui.color(Role::OutlineVariant));
-        assert_eq!(border.radius.top_left, 12.0);
-    }
-
-    #[test]
-    fn emphasized_weights_are_the_official_ones() {
-        let ui = ui(SchemeFlavor::Light);
-        // title-small 的强调档是 700（官方 Emphasized）
-        assert_eq!(
-            ui.emphasized_font(TypeRole::TitleSmall).weight,
-            iced::font::Weight::Bold
-        );
-        // baseline 正文是 400
-        assert_eq!(
-            ui.font(TypeRole::BodyMedium).weight,
-            iced::font::Weight::Normal
-        );
-    }
-
-    #[test]
-    fn body_text_keeps_wcag_contrast_in_both_flavors() {
-        for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
-            let scheme = Scheme::baseline(flavor);
-            assert!(
-                scheme.contrast(Role::OnSurface, Role::Surface) >= 4.5,
-                "{flavor:?} 的正文对比度不够"
-            );
-            assert!(
-                scheme.contrast(Role::OnSecondaryContainer, Role::SecondaryContainer) >= 4.5,
-                "{flavor:?} 的选中态药丸对比度不够"
-            );
-        }
-    }
-
-    #[test]
-    fn every_role_maps_to_an_iced_color() {
-        for role in Role::ALL {
-            let color = ui(SchemeFlavor::Dark).color(role);
-            assert!((0.0..=1.0).contains(&color.a), "{role:?} 的 alpha 越界");
-        }
-    }
-
-    #[test]
-    fn state_layers_are_opaque_so_cpu_and_gpu_match() {
-        let ui = ui(SchemeFlavor::Light);
-        let hovered = ui.state_over(StateLayer::Hover, Role::OnSurface, Role::Surface);
-        assert_eq!(hovered.a, 1.0, "状态层必须给出不透明结果");
-        assert_ne!(hovered, ui.color(Role::Surface));
-    }
-
-    /// D38：配色方案必须真的换色；默认构造逐字段等于 baseline（防回流的那一半）。
-    /// 抓不住：取色好不好看、设置页是否真切过去（后者由 app 侧日志举证）。
-    #[test]
-    fn a_resolved_scheme_replaces_the_baseline_colours() {
-        use unlucky_design::palette::{resolve_source, CardKey, ImageInput};
-
-        // 4×4 的纯红图：种子彩度远高于门槛，必然走到「背景图取色」这一级。
-        let pixels = [0xC0_u8, 0x20, 0x20, 0xFF].repeat(16);
-        let input = ImageInput::pixels(&pixels, 4, 4);
-        let (scheme, provenance) =
-            resolve_source(Some(input), None, Some(CardKey::Sky), SchemeFlavor::Light);
-        assert_eq!(
-            provenance.level,
-            unlucky_design::palette::Level::BackgroundImage,
-            "纯红图必须取色成功（否则本测试的输入不合格）"
-        );
-
-        let tinted = Ui::from_scheme(scheme, FAMILIES);
-        let baseline = ui(SchemeFlavor::Light);
-        assert_ne!(
-            tinted.color(Role::Primary),
-            baseline.color(Role::Primary),
-            "取色方案必须换掉 primary"
-        );
-        // 深浅仍跟着方案走（方案自带 flavor），不会把 Light 变成 Dark。
-        assert_eq!(tinted.flavor(), SchemeFlavor::Light);
-        assert_eq!(tinted.name(), baseline.name());
-
-        // 默认构造不变：`with_platform` 与 baseline 逐块相等。
-        let explicit = Ui::from_scheme(Scheme::baseline(SchemeFlavor::Light), FAMILIES);
-        for role in Role::ALL {
-            assert_eq!(
-                explicit.color(role),
-                baseline.color(role),
-                "{role:?}：不传 scheme 时默认行为必须与改动前一致"
-            );
-        }
-    }
-}
+mod tests;
diff --git a/crates/app-iced/src/theme/tests.rs b/crates/app-iced/src/theme/tests.rs
new file mode 100644
index 0000000..d3de696
--- /dev/null
+++ b/crates/app-iced/src/theme/tests.rs
@@ -0,0 +1,207 @@
+//! `theme` 的单元测试（M229 从 `theme.rs` 纯搬移，守 400 行硬线：加双色板字段前该文件正好 400 行）。
+//!
+//! 内容一行未改，只把 `mod tests { … }` 的包裹层换成独立文件。
+
+use super::*;
+
+const FAMILIES: Families = Families {
+    text: "Segoe UI Variable Text",
+    display: "Segoe UI Variable Display",
+    mono: "Cascadia Mono",
+};
+
+fn ui(flavor: SchemeFlavor) -> Ui {
+    Ui::with_platform(flavor, Platform::Windows, FAMILIES)
+}
+
+#[test]
+fn theme_name_tracks_the_flavor() {
+    assert_eq!(ui(SchemeFlavor::Light).name(), "ull-silver");
+    assert_eq!(ui(SchemeFlavor::Dark).name(), "ull-ink");
+    assert_ne!(
+        ui(SchemeFlavor::Light).theme().to_string(),
+        ui(SchemeFlavor::Dark).theme().to_string()
+    );
+}
+
+#[test]
+fn canvas_card_overlay_follow_surface_containers() {
+    let ui = ui(SchemeFlavor::Light);
+    assert_eq!(ui.layer(MaterialLayer::Canvas), ui.color(Role::Surface));
+    assert_eq!(
+        ui.layer(MaterialLayer::Card),
+        ui.color(Role::SurfaceContainerLow)
+    );
+    assert_eq!(
+        ui.layer(MaterialLayer::Overlay),
+        ui.color(Role::SurfaceContainerHigh)
+    );
+}
+
+#[test]
+fn radii_only_come_from_the_scale() {
+    let ui = ui(SchemeFlavor::Light);
+    // 卡片 Medium(12)：边长够大时就是 12
+    assert_eq!(ui.radius_dp(ShapeScale::Medium).top_left, 12.0);
+    assert_eq!(ui.radius_dp(ShapeScale::ExtraSmall).top_left, 4.0);
+    // 药丸 Full：按边长一半折算
+    assert_eq!(ui.radius(ShapeScale::Full, 32.0).top_left, 16.0);
+    // 不许超过边长一半
+    assert_eq!(ui.radius(ShapeScale::ExtraLarge, 20.0).top_left, 10.0);
+}
+
+#[test]
+fn outlines_are_one_pixel_and_use_outline_variant() {
+    let ui = ui(SchemeFlavor::Light);
+    let border = ui.outlined(ShapeScale::Medium);
+    assert_eq!(border.width, STROKE_PX);
+    assert_eq!(border.width, 1.0, "rubric G7：全站 1px");
+    assert_eq!(border.color, ui.color(Role::OutlineVariant));
+    assert_eq!(border.radius.top_left, 12.0);
+}
+
+#[test]
+fn emphasized_weights_are_the_official_ones() {
+    let ui = ui(SchemeFlavor::Light);
+    // title-small 的强调档是 700（官方 Emphasized）
+    assert_eq!(
+        ui.emphasized_font(TypeRole::TitleSmall).weight,
+        iced::font::Weight::Bold
+    );
+    // baseline 正文是 400
+    assert_eq!(
+        ui.font(TypeRole::BodyMedium).weight,
+        iced::font::Weight::Normal
+    );
+}
+
+#[test]
+fn body_text_keeps_wcag_contrast_in_both_flavors() {
+    for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
+        let scheme = Scheme::baseline(flavor);
+        assert!(
+            scheme.contrast(Role::OnSurface, Role::Surface) >= 4.5,
+            "{flavor:?} 的正文对比度不够"
+        );
+        assert!(
+            scheme.contrast(Role::OnSecondaryContainer, Role::SecondaryContainer) >= 4.5,
+            "{flavor:?} 的选中态药丸对比度不够"
+        );
+    }
+}
+
+#[test]
+fn every_role_maps_to_an_iced_color() {
+    for role in Role::ALL {
+        let color = ui(SchemeFlavor::Dark).color(role);
+        assert!((0.0..=1.0).contains(&color.a), "{role:?} 的 alpha 越界");
+    }
+}
+
+#[test]
+fn state_layers_are_opaque_so_cpu_and_gpu_match() {
+    let ui = ui(SchemeFlavor::Light);
+    let hovered = ui.state_over(StateLayer::Hover, Role::OnSurface, Role::Surface);
+    assert_eq!(hovered.a, 1.0, "状态层必须给出不透明结果");
+    assert_ne!(hovered, ui.color(Role::Surface));
+}
+
+/// D38：配色方案必须真的换色；显式传 baseline 时逐字段等于 baseline。
+/// 抓不住：取色好不好看、设置页是否真切过去（后者由 app 侧日志举证）。
+#[test]
+fn a_resolved_scheme_replaces_the_baseline_colours() {
+    use unlucky_design::palette::{resolve_source, CardKey, ImageInput};
+
+    // 4×4 的纯红图：种子彩度远高于门槛，必然走到「背景图取色」这一级。
+    let pixels = [0xC0_u8, 0x20, 0x20, 0xFF].repeat(16);
+    let input = ImageInput::pixels(&pixels, 4, 4);
+    let (scheme, provenance) =
+        resolve_source(Some(input), None, Some(CardKey::Sky), SchemeFlavor::Light);
+    assert_eq!(
+        provenance.level,
+        unlucky_design::palette::Level::BackgroundImage,
+        "纯红图必须取色成功（否则本测试的输入不合格）"
+    );
+
+    let tinted = Ui::from_scheme(scheme, FAMILIES);
+    let board = ui(SchemeFlavor::Light);
+    assert_ne!(
+        tinted.color(Role::Primary),
+        board.color(Role::Primary),
+        "取色方案必须换掉 primary"
+    );
+    // 深浅仍跟着方案走（方案自带 flavor），不会把 Light 变成 Dark；色板名也仍说实话。
+    assert_eq!(tinted.flavor(), SchemeFlavor::Light);
+    assert_eq!(tinted.name(), board.name());
+
+    // 显式传 baseline 时逐块等于 baseline 口径（M229 之后产品默认不再是它，但这条通路必须诚实）。
+    let explicit = Ui::from_scheme(Scheme::baseline(SchemeFlavor::Light), FAMILIES);
+    let baseline = Ui::baseline(SchemeFlavor::Light, FAMILIES);
+    for role in Role::ALL {
+        assert_eq!(
+            explicit.color(role),
+            baseline.color(role),
+            "{role:?}：显式传 baseline 时颜色必须与 baseline 口径一致"
+        );
+    }
+}
+
+/// M229：`Ui::new` 走**品牌色板**（Ink 深 / Silver 浅），不再走 tone 派生的 `baseline`。
+///
+/// 抓得住：换肤没接上（色值仍是 baseline）、深浅映射反了（Light 拿到 Ink）。
+/// 抓不住：色板好不好看、页面有没有绕过 `Ui::color` 自己写色值（后者由 `no_hardcoded_tokens` 扫）。
+#[test]
+fn every_ui_is_built_from_a_brand_board() {
+    for (flavor, board) in [
+        (SchemeFlavor::Light, BrandBoard::Silver),
+        (SchemeFlavor::Dark, BrandBoard::Ink),
+    ] {
+        let evaluator = ui(flavor);
+        assert_eq!(evaluator.board(), board, "{flavor:?} 该用 {:?}", board);
+        assert_eq!(evaluator.name(), board_name(board));
+        for role in Role::ALL {
+            assert_eq!(
+                evaluator.color(role),
+                to_iced(board.get(role)),
+                "{flavor:?} 的 {role:?} 不是色板值"
+            );
+        }
+        // 与 tone 派生的 baseline 确实不同（否则「换肤」这件事没发生）。
+        let baseline = Ui::baseline(flavor, FAMILIES);
+        assert_ne!(
+            evaluator.color(Role::Primary),
+            baseline.color(Role::Primary),
+            "{flavor:?}：色板与 baseline 的 primary 撞了，换肤等于没接"
+        );
+        assert_eq!(evaluator.flavor(), flavor);
+    }
+}
+
+/// 显式选板时深浅跟着板走（`Ink = Dark` / `Silver = Light`），「跟随系统」不必另造一种板。
+#[test]
+fn picking_a_board_sets_the_flavor_from_the_board() {
+    let ink = Ui::with_board(BrandBoard::Ink, Platform::Windows, FAMILIES);
+    let silver = Ui::with_board(BrandBoard::Silver, Platform::Windows, FAMILIES);
+    assert_eq!(ink.flavor(), SchemeFlavor::Dark);
+    assert_eq!(silver.flavor(), SchemeFlavor::Light);
+    assert_ne!(ink.theme().to_string(), silver.theme().to_string());
+}
+
+/// 卡片方框走规格卡（`rx=16`），不是组件表的 `Medium(12)`。
+#[test]
+fn cards_take_the_spec_corner() {
+    let evaluator = ui(SchemeFlavor::Light);
+    assert_eq!(evaluator.card_shape(), ShapeScale::Large);
+    assert_eq!(evaluator.card_box().radius_px(), 16.0);
+    assert_eq!(
+        evaluator.outlined(evaluator.card_shape()).radius.top_left,
+        16.0
+    );
+}
+
+fn board_name(board: BrandBoard) -> &'static str {
+    match board {
+        BrandBoard::Ink => "ull-ink",
+        BrandBoard::Silver => "ull-silver",
+    }
+}
diff --git a/crates/i18n/src/catalog/general.rs b/crates/i18n/src/catalog/general.rs
index 54ccfd8..78f4c41 100644
--- a/crates/i18n/src/catalog/general.rs
+++ b/crates/i18n/src/catalog/general.rs
@@ -31,6 +31,15 @@ macro_rules! general_entries {
             SettingsLanguageEffective => ("Interface right now: {language}", "界面当前使用：{language}"),
             SettingsTheme => ("Theme", "主题"),
             SettingsThemeFollowSystem => ("Follow system", "跟随系统"),
+            // M229：主题三态改成「Ink / Silver / 跟随系统」——前两档就是两块品牌色板
+            // （Ink = 深色主方案 / Silver = 浅色主方案），落盘仍是 `appearance.theme_mode` 的
+            // `dark` / `light` / `auto` 三个值，不新增配置键。
+            SettingsThemeInk => ("Ink", "Ink（深色）"),
+            SettingsThemeSilver => ("Silver", "Silver（浅色）"),
+            SettingsThemeHint => (
+                "Ink is the dark scheme, Silver the light one. Follow system picks between them as Windows switches.",
+                "Ink 是深色主方案，Silver 是浅色主方案；跟随系统会随 Windows 的深浅在这两块之间切换。"
+            ),
             SettingsStartupPage => ("Startup page", "启动页"),
             SettingsStartupInstances => ("Instances", "实例"),
             SettingsCloseButton => ("Close button", "关闭按钮"),
diff --git a/crates/i18n/src/catalog/golden/tail_ai.rs b/crates/i18n/src/catalog/golden/tail_ai.rs
index 9cd5dcc..93ad7f8 100644
--- a/crates/i18n/src/catalog/golden/tail_ai.rs
+++ b/crates/i18n/src/catalog/golden/tail_ai.rs
@@ -186,6 +186,13 @@ pub(super) const ROWS: &[(&str, &str, &str)] = &[
     ("SettingsLanguageEffective", "Interface right now: {language}", "界面当前使用：{language}"),
     ("SettingsTheme", "Theme", "主题"),
     ("SettingsThemeFollowSystem", "Follow system", "跟随系统"),
+    ("SettingsThemeInk", "Ink", "Ink（深色）"),
+    ("SettingsThemeSilver", "Silver", "Silver（浅色）"),
+    (
+        "SettingsThemeHint",
+        "Ink is the dark scheme, Silver the light one. Follow system picks between them as Windows switches.",
+        "Ink 是深色主方案，Silver 是浅色主方案；跟随系统会随 Windows 的深浅在这两块之间切换。",
+    ),
     ("SettingsStartupPage", "Startup page", "启动页"),
     ("SettingsStartupInstances", "Instances", "实例"),
     ("SettingsCloseButton", "Close button", "关闭按钮"),