@ant-design/cli 6.4.2 → 6.4.4

package/README.md

@@ -4,7 +4,7 @@
 
 <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="Ant Design" width="72">
 
-<h1>@ant-design/cli</h1>
+<h1>Ant Design CLI</h1>
 
 **Ant Design on your command line.**<br>
 Query component knowledge, analyze project usage, and guide migrations — fully offline.
@@ -41,8 +41,8 @@ npx skills add ant-design/ant-design-cli    # install as an agent skill
 - 🤖 **Agent-optimized** — `--format json` on every command. Structured errors with codes and suggestions. Clean stdout/stderr separation.
 - 🌍 **Bilingual** — Every component name, description, and doc has both English and Chinese. Switch with `--lang zh`.
 - 🔮 **Smart matching** — Typo `Buttn`? The CLI suggests `Button` using Levenshtein distance, with first-letter preference.
-- 🧩 **15 commands** — From prop lookup to project-wide lint, from design token queries to cross-version API diffing.
-- 🔌 **MCP server** — `antd mcp` starts a stdio server for native IDE integration (Claude Desktop, Cursor).
+- 🧩 **17 commands** — From prop lookup to project-wide lint, from design token queries to cross-version API diffing.
+- 🔌 **MCP server** — `antd mcp` starts a stdio server for native IDE integration (Claude Code, Cursor, VS Code, etc.).
 
 <br>
 
@@ -84,6 +84,19 @@ Works with [Claude Code](https://claude.ai/code), [Cursor](https://cursor.sh), [
 
 For IDEs that support [Model Context Protocol](https://modelcontextprotocol.io), the CLI can run as an MCP server:
 
+```json
+{
+  "mcpServers": {
+    "antd": {
+      "command": "npx",
+      "args": ["-y", "@ant-design/cli", "mcp"]
+    }
+  }
+}
+```
+
+Or if you have the CLI installed globally (`npm i -g @ant-design/cli`):
+
 ```json
 {
   "mcpServers": {
@@ -97,7 +110,7 @@ For IDEs that support [Model Context Protocol](https://modelcontextprotocol.io),
 
 To pin a specific antd version, add `"--version", "5.20.0"` to the `args` array.
 
-This exposes 7 tools (`antd_list`, `antd_info`, `antd_doc`, `antd_demo`, `antd_token`, `antd_semantic`, `antd_changelog`) and 2 prompts (`antd-expert`, `antd-page-generator`) for native IDE integration.
+This exposes 8 tools (`antd_list`, `antd_info`, `antd_doc`, `antd_demo`, `antd_token`, `antd_design_md`, `antd_semantic`, `antd_changelog`) and 2 prompts (`antd-expert`, `antd-page-generator`) for native IDE integration.
 
 <br>
 
@@ -109,6 +122,7 @@ antd info Button                    # Component props, types, defaults
 antd doc Button                     # Full markdown documentation
 antd demo Select basic              # Runnable demo source code
 antd token DatePicker               # Design Token values (v5+)
+antd design.md                      # Design-language document (design.md)
 antd semantic Table                 # classNames / styles structure
 antd changelog 4.24.0 5.0.0 Select  # API diff across versions
 antd doctor                         # Diagnose project issues
@@ -117,6 +131,8 @@ antd usage ./src                    # Analyze antd imports in project
 antd lint ./src                     # Check deprecated APIs & best practices
 antd migrate 3 4                    # v3 → v4 migration guide
 antd migrate 4 5 --apply ./src      # Agent-ready migration prompt
+antd mcp                            # Start MCP server for IDE integration
+antd upgrade                        # Upgrade CLI to latest version
 ```
 
 <br>
@@ -132,6 +148,7 @@ antd migrate 4 5 --apply ./src      # Agent-ready migration prompt
 | [`antd doc <Component>`](#antd-doc-component) | Full markdown documentation for a component |
 | [`antd demo <Component> [name]`](#antd-demo-component-name) | Runnable demo source code (TSX) |
 | [`antd token [Component]`](#antd-token-component) | Global or component-level Design Tokens |
+| [`antd design.md`](#antd-designmd) | Design-language document (`design.md`) for AI design tools |
 | [`antd semantic <Component>`](#antd-semantic-component) | Semantic `classNames` / `styles` structure with usage examples |
 | [`antd changelog`](#antd-changelog-v1-v2-component) | Changelog entries, version ranges, or cross-version API diff |
 
@@ -152,6 +169,13 @@ antd migrate 4 5 --apply ./src      # Agent-ready migration prompt
 | [`antd bug`](#antd-bug) | File a bug to ant-design/ant-design with auto-collected environment info |
 | [`antd bug-cli`](#antd-bug-cli) | File a bug to ant-design/ant-design-cli |
 
+### 🔧 CLI Management
+
+| Command | Description |
+|---|---|
+| [`antd mcp`](#antd-mcp) | Start MCP stdio server for IDE agent integration |
+| [`antd upgrade`](#antd-upgrade) | Upgrade the CLI to the latest version |
+
 <br>
 
 ---
@@ -233,6 +257,18 @@ antd token                          # global tokens (colorPrimary, borderRadius,
 antd token Button                   # component-level tokens
 ```
 
+### `antd design.md`
+
+Output the antd **design-language document** (`design.md`) — a curated description of antd's default light theme, conformant with the [google-labs-code/design.md](https://github.com/google-labs-code/design.md) spec. Where `antd token` lists individual token names, `antd design.md` describes the design language as a whole (color/typography/spacing/radius values plus the principles behind them), so AI design tools (Figma Make, Stitch, etc.) and agents can consume antd's design language directly.
+
+```bash
+antd design.md                      # design.md for the detected version
+antd design.md --version 6.4.0      # design.md for a specific version
+antd design.md --format json        # { doc }
+```
+
+`design.md` is **major-grained** (antd rewrites it only across major releases), so it is resolved by major version. A `design.md` is currently published only for **antd v6** — requesting a major without one (v3/v4/v5) returns `UNSUPPORTED_VERSION_FEATURE`. It mirrors the canonical `DESIGN.md` published at [`https://ant.design/design.md`](https://ant.design/design.md).
+
 ### `antd semantic <Component>`
 
 ```bash
@@ -389,6 +425,52 @@ antd bug-cli --title "info command crashes on v4"
 antd bug-cli --title "..." --submit
 ```
 
+### `antd mcp`
+
+Start an MCP (Model Context Protocol) stdio server for IDE agent integration. Exposes 8 tools and 2 prompts for native IDE integration (Claude Code, Cursor, VS Code, Codex, etc.).
+
+```bash
+antd mcp                                # start with auto-detected version
+antd mcp --version 5.20.0 --lang zh     # pin version and language
+```
+
+Configuration:
+
+```json
+{
+  "mcpServers": {
+    "antd": {
+      "command": "npx",
+      "args": ["-y", "@ant-design/cli", "mcp"]
+    }
+  }
+}
+```
+
+**MCP Tools (8):** `antd_list`, `antd_info`, `antd_doc`, `antd_demo`, `antd_token`, `antd_design_md`, `antd_semantic`, `antd_changelog`
+
+**MCP Prompts (2):** `antd-expert`, `antd-page-generator`
+
+### `antd upgrade`
+
+Upgrade the CLI itself to the latest version published on npm. Automatically detects which package manager installed the CLI (npm, yarn, pnpm, bun, cnpm, utoo) and runs the corresponding upgrade command.
+
+```bash
+antd upgrade                        # upgrade to latest version
+```
+
+<details>
+<summary>Example output</summary>
+
+```text
+Upgrading @ant-design/cli: v6.4.3 → v6.4.4
+Running: npm install -g @ant-design/cli@latest
+... (passthrough package manager output) ...
+Successfully upgraded to v6.4.4
+```
+
+</details>
+
 <br>
 
 ## ⚙️ Global Flags

package/README.zh-CN.md

@@ -4,7 +4,7 @@
 
 <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="Ant Design" width="72">
 
-<h1>@ant-design/cli</h1>
+<h1>Ant Design CLI</h1>
 
 **命令行上的 Ant Design。**<br>
 查询组件知识、分析项目用量、指导版本迁移 — 完全离线。
@@ -41,7 +41,7 @@ npx skills add ant-design/ant-design-cli    # 安装为 Agent Skill
 - 🤖 **Agent 优化** — 所有命令支持 `--format json`。结构化错误码与修复建议。stdout/stderr 严格分离。
 - 🌍 **双语输出** — 每个组件名、描述和文档均有中英文。通过 `--lang zh` 切换。
 - 🔮 **智能纠错** — 输入 `Buttn`？CLI 基于 Levenshtein 距离建议 `Button`，优先匹配首字母相同的候选。
-- 🧩 **15 条命令** — 从 Prop 查询到项目级 Lint，从 Design Token 到跨版本 API 对比。
+- 🧩 **17 条命令** — 从 Prop 查询到项目级 Lint，从 Design Token 到跨版本 API 对比。
 - 🔌 **MCP 服务** — `antd mcp` 启动 stdio 服务，原生集成 Claude Desktop、Cursor 等 IDE。
 
 <br>
@@ -95,7 +95,7 @@ Agent 会自动完成 `npm install`、`npx skills add`，并开始使用 CLI。
 
 如需固定 antd 版本，在 `args` 数组中添加 `"--version", "5.20.0"`。
 
-提供 7 个工具（`antd_list`、`antd_info`、`antd_doc`、`antd_demo`、`antd_token`、`antd_semantic`、`antd_changelog`）和 2 个提示词（`antd-expert`、`antd-page-generator`）。
+提供 8 个工具（`antd_list`、`antd_info`、`antd_doc`、`antd_demo`、`antd_token`、`antd_design_md`、`antd_semantic`、`antd_changelog`）和 2 个提示词（`antd-expert`、`antd-page-generator`）。
 
 支持 [Claude Code](https://claude.ai/code)、[Cursor](https://cursor.sh)、[Codex](https://openai.com/codex)、[Gemini CLI](https://github.com/google-gemini/gemini-cli) 等所有兼容 [skills](https://github.com/nicepkg/agent-skills) 协议的 Agent。
 
@@ -109,6 +109,7 @@ antd info Button                    # 组件 Props、类型、默认值
 antd doc Button                     # 完整 Markdown 文档
 antd demo Select basic              # 可运行的 Demo 源码
 antd token DatePicker               # Design Token 值（v5+）
+antd design.md                      # 设计语言文档（design.md）
 antd semantic Table                 # classNames / styles 结构
 antd changelog 4.24.0 5.0.0 Select  # 跨版本 API 差异对比
 antd doctor                         # 诊断项目配置问题
@@ -117,6 +118,8 @@ antd usage ./src                    # 分析项目中的 antd 导入
 antd lint ./src                     # 检查废弃 API 和最佳实践
 antd migrate 3 4                    # v3 → v4 迁移指南
 antd migrate 4 5 --apply ./src      # 生成 Agent 迁移提示
+antd mcp                            # 启动 MCP 服务，供 IDE 集成
+antd upgrade                        # 升级 CLI 到最新版本
 ```
 
 <br>
@@ -132,6 +135,7 @@ antd migrate 4 5 --apply ./src      # 生成 Agent 迁移提示
 | [`antd doc <Component>`](#antd-doc-component) | 组件完整 Markdown 文档 |
 | [`antd demo <Component> [name]`](#antd-demo-component-name) | 可运行的 Demo 源码（TSX） |
 | [`antd token [Component]`](#antd-token-component) | 全局或组件级 Design Token |
+| [`antd design.md`](#antd-designmd) | 设计语言文档（`design.md`），供 AI 设计工具消费 |
 | [`antd semantic <Component>`](#antd-semantic-component) | 语义化 `classNames` / `styles` 结构及用法示例 |
 | [`antd changelog`](#antd-changelog-v1-v2-component) | Changelog 条目、版本范围或跨版本 API 对比 |
 
@@ -152,6 +156,13 @@ antd migrate 4 5 --apply ./src      # 生成 Agent 迁移提示
 | [`antd bug`](#antd-bug) | 向 ant-design/ant-design 报告 Bug，自动收集环境信息 |
 | [`antd bug-cli`](#antd-bug-cli) | 向 ant-design/ant-design-cli 报告 Bug |
 
+### 🔧 CLI 管理
+
+| 命令 | 说明 |
+|---|---|
+| [`antd mcp`](#antd-mcp) | 启动 MCP stdio 服务，供 IDE Agent 集成 |
+| [`antd upgrade`](#antd-upgrade) | 升级 CLI 到最新版本 |
+
 <br>
 
 ---
@@ -233,6 +244,18 @@ antd token                          # 全局 Token（colorPrimary、borderRadius
 antd token Button                   # 组件级 Token
 ```
 
+### `antd design.md`
+
+输出 antd **设计语言文档**（`design.md`）—— 对 antd 默认 Light 主题的精心编写的描述，遵循 [google-labs-code/design.md](https://github.com/google-labs-code/design.md) 规范。`antd token` 列举单个 Token 名称，而 `antd design.md` 整体描述设计语言（颜色 / 字体 / 间距 / 圆角的取值及其背后的设计原则），可被 AI 设计工具（Figma Make、Stitch 等）和 Agent 直接消费。
+
+```bash
+antd design.md                      # 输出当前检测版本的 design.md
+antd design.md --version 6.4.0      # 指定版本的 design.md
+antd design.md --format json        # { doc }
+```
+
+`design.md` 按**大版本**区分（antd 只在大版本升级时重写它），因此按 major 解析。目前**仅 antd v6** 提供 `design.md` —— 查询没有该文档的大版本（v3/v4/v5）会返回 `UNSUPPORTED_VERSION_FEATURE`。它与发布在 [`https://ant.design/design.md`](https://ant.design/design.md) 的官方 `DESIGN.md` 保持一致。
+
 ### `antd semantic <Component>`
 
 ```bash
@@ -389,6 +412,52 @@ antd bug-cli --title "info 命令在 v4 组件上崩溃"
 antd bug-cli --title "..." --submit
 ```
 
+### `antd mcp`
+
+启动 MCP（Model Context Protocol）stdio 服务，供 IDE Agent 集成。提供 8 个工具和 2 个提示词，支持 Claude Desktop、Cursor 等 IDE 原生集成。
+
+```bash
+antd mcp                                # 使用自动检测的版本启动
+antd mcp --version 5.20.0 --lang zh     # 指定版本和语言
+```
+
+IDE 配置（`claude_desktop_config.json`）：
+
+```json
+{
+  "mcpServers": {
+    "antd": {
+      "command": "antd",
+      "args": ["mcp"]
+    }
+  }
+}
+```
+
+**MCP 工具（8 个）：** `antd_list`、`antd_info`、`antd_doc`、`antd_demo`、`antd_token`、`antd_design_md`、`antd_semantic`、`antd_changelog`
+
+**MCP 提示词（2 个）：** `antd-expert`、`antd-page-generator`
+
+### `antd upgrade`
+
+升级 CLI 自身到 npm 上发布的最新版本。自动检测安装 CLI 的包管理器（npm、yarn、pnpm、bun、cnpm、utoo）并执行对应的升级命令。
+
+```bash
+antd upgrade                        # 升级到最新版本
+```
+
+<details>
+<summary>示例输出</summary>
+
+```text
+正在升级 @ant-design/cli: v6.4.3 → v6.4.4
+执行: npm install -g @ant-design/cli@latest
+... (包管理器输出透传) ...
+成功升级到 v6.4.4
+```
+
+</details>
+
 <br>
 
 ## ⚙️ 全局参数

package/data/design-v6.md

@@ -0,0 +1,288 @@
+---
+name: Ant Design
+description: Enterprise-grade React UI design system from Ant Group, built around the values Natural, Certain, Meaningful, and Growing.
+colors:
+  primary: '#1677FF'
+  success: '#52C41A'
+  warning: '#FAAD14'
+  error: '#FF4D4F'
+  info: '#1677FF'
+  blue: '#1677FF'
+  purple: '#722ED1'
+  cyan: '#13C2C2'
+  green: '#52C41A'
+  magenta: '#EB2F96'
+  red: '#F5222D'
+  orange: '#FA8C16'
+  yellow: '#FADB14'
+  volcano: '#FA541C'
+  geekblue: '#2F54EB'
+  gold: '#FAAD14'
+  lime: '#A0D911'
+  surface: '#FFFFFF'
+  surface-container: '#FAFAFA'
+  surface-layout: '#F5F5F5'
+  on-surface: '#1F1F1F'
+  on-surface-variant: '#595959'
+  on-surface-disabled: '#BFBFBF'
+  outline: '#D9D9D9'
+  outline-variant: '#F0F0F0'
+typography:
+  display-lg:
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
+    fontSize: 38px
+    fontWeight: '600'
+    lineHeight: 46px
+  headline-lg:
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
+    fontSize: 30px
+    fontWeight: '600'
+    lineHeight: 38px
+  headline-md:
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: 32px
+  headline-sm:
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+  title-lg:
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
+    fontSize: 16px
+    fontWeight: '600'
+    lineHeight: 24px
+  title-md:
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
+    fontSize: 14px
+    fontWeight: '600'
+    lineHeight: 22px
+  body-lg:
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: 24px
+  body-md:
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 22px
+  body-sm:
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
+    fontSize: 12px
+    fontWeight: '400'
+    lineHeight: 20px
+  code:
+    fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace"
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 20px
+rounded:
+  none: 0px
+  sm: 2px
+  md: 4px
+  DEFAULT: 6px
+  lg: 8px
+  xl: 16px
+  full: 9999px
+spacing:
+  unit: 4px
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  control-height: 32px
+components:
+  button-primary:
+    backgroundColor: '{colors.primary}'
+    textColor: '#FFFFFF'
+    typography: '{typography.body-md}'
+    rounded: '{rounded.DEFAULT}'
+    height: 32px
+    padding: 0 15px
+  button-primary-hover:
+    backgroundColor: '#4096FF'
+  button-primary-active:
+    backgroundColor: '#0958D9'
+  button-default:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.on-surface}'
+    typography: '{typography.body-md}'
+    rounded: '{rounded.DEFAULT}'
+    height: 32px
+    padding: 0 15px
+  button-default-hover:
+    textColor: '#4096FF'
+  input-field:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.on-surface}'
+    typography: '{typography.body-md}'
+    rounded: '{rounded.DEFAULT}'
+    height: 32px
+    padding: 4px 11px
+  input-field-focus:
+    backgroundColor: '{colors.surface}'
+  select-field:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.on-surface}'
+    typography: '{typography.body-md}'
+    rounded: '{rounded.DEFAULT}'
+    height: 32px
+    padding: 0 11px
+  card:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.on-surface}'
+    rounded: '{rounded.lg}'
+    padding: 24px
+  modal:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.on-surface}'
+    rounded: '{rounded.lg}'
+    padding: 20px 24px
+  menu-item-selected:
+    backgroundColor: '#E6F4FF'
+    textColor: '{colors.primary}'
+    typography: '{typography.body-md}'
+  tabs-tab-active:
+    textColor: '{colors.primary}'
+    typography: '{typography.body-md}'
+  table-header:
+    backgroundColor: '{colors.surface-container}'
+    textColor: '{colors.on-surface}'
+    typography: '{typography.title-md}'
+    padding: 16px
+  tag:
+    backgroundColor: '{colors.surface-container}'
+    textColor: '{colors.on-surface}'
+    typography: '{typography.body-sm}'
+    rounded: '{rounded.md}'
+    padding: 0 7px
+  tooltip:
+    backgroundColor: 'rgba(0, 0, 0, 0.85)'
+    textColor: '#FFFFFF'
+    typography: '{typography.body-md}'
+    rounded: '{rounded.md}'
+    padding: 6px 8px
+  dropdown-item-hover:
+    backgroundColor: '{colors.surface-container}'
+    textColor: '{colors.on-surface}'
+---
+
+## Overview
+
+This document describes the default light theme of **Ant Design v6**. The system follows semantic versioning: major releases (v5 → v6) signal an overhaul of the design language, while minor and patch releases keep this document stable. Refer to [CHANGELOG.en-US.md](https://github.com/ant-design/ant-design/blob/master/CHANGELOG.en-US.md) for the per-release token drift inside a major.
+
+Ant Design is the open-source design system Ant Group uses to ship enterprise software — primarily mid- and back-office consoles, dashboards, and operational tools. The system was created in 2015 to give large product teams a shared, opinionated foundation so they could ship dense, data-rich interfaces without re-deciding the basics on every screen.
+
+Four values guide every decision in the system:
+
+- **Natural.** The interface follows established conventions; nothing surprises a returning user. Patterns that already exist in operating systems and prior generations of enterprise software are preferred over novel inventions.
+- **Certain.** Users always know what state they're in, what their inputs did, and what the next step is. Hover, focus, loading, and error states are explicit and consistent.
+- **Meaningful.** Visual emphasis is reserved for action. Decoration that does not communicate is removed.
+- **Growing.** The system scales from small forms to dense tables to multi-tenant admin consoles without losing coherence.
+
+## Customization
+
+Every value in the YAML front-matter above is a **default** produced by `defaultAlgorithm` — the light theme. The system is designed to be re-skinned without editing this file or overriding individual tokens by hand.
+
+Three layers of customization exist:
+
+1. **Seed token overrides.** Pass `theme.token` to `ConfigProvider` to replace any seed. The six color seeds (`colorPrimary`, `colorSuccess`, `colorWarning`, `colorError`, `colorInfo`, plus the neutral base) each expand automatically through `@ant-design/colors` into a ten-step gradient covering background tint, hover, active, and outline variants — change the seed, and the entire derived palette moves with it. Spacing, radius, and font-size seeds work the same way.
+
+2. **Algorithm switching.** Set `theme.algorithm` to swap the entire derivation logic. `darkAlgorithm` derives a dark surface ladder, inverted text alphas, and adjusted shadow values from the same seeds — do not invert colors manually; the algorithm accounts for non-linear gradient stops that flat inversion cannot reproduce. `compactAlgorithm` reduces control heights and spacing while preserving the same palette.
+
+3. **Component-level overrides.** `theme.components.Button` (or any component's token namespace) can override a single component's derived tokens without affecting others — for example, changing the Button border radius without touching Input or Select.
+
+## Colors
+
+The palette is built from six functional seeds: a single **primary** brand color and five semantic states (`success`, `warning`, `error`, `info`, plus the neutral background). Each seed expands automatically through `@ant-design/colors` into a ten-step gradient covering background tint, hover, active, and outline variants — change the seed, and the entire derived palette moves with it.
+
+`#1677FF` was chosen as the primary because blue reads as trustworthy and focused without the corporate flatness of a darker navy or the playfulness of a saturated cyan. It also remains legible against both white and pale-grey surfaces — the two surfaces enterprise consoles use most.
+
+Neutral text and overlays in the runtime token system are expressed as `rgba(0, 0, 0, α)` rather than flat grey hex values. The reason is overlay: when text sits above a tinted card or a colored cell highlight, an opaque grey breaks the tint, while a transparent black blends naturally. The four standard alpha steps are `0.88` (primary text, exported here as `#1F1F1F`), `0.65` (secondary text, `#595959`), `0.45` (tertiary / description text), and `0.25` (placeholder / disabled, `#BFBFBF`). The hex values listed in this document are the equivalent composited result on a white surface, suitable for static export targets that require hex; downstream consumers that support alpha should prefer the `rgba()` form from `@ant-design/cssinjs`.
+
+The thirteen preset colors (`blue`, `purple`, `cyan`, `green`, `magenta`, `red`, `orange`, `yellow`, `volcano`, `geekblue`, `gold`, `lime`, plus the same brand `blue`) are reserved for tagging, charts, and categorical visualization — never for primary UI affordances. Use functional colors (`success`/`warning`/`error`/`info`) for status, and reserve `primary` for the single most important action on each screen.
+
+## Typography
+
+The base font size is **14 px**, not 16. Enterprise consoles trade legibility headroom for information density — a 1440 px-wide window has to comfortably fit a sidebar, a header, a data table with eight columns, and a detail pane. At 14 px, a row of body copy reaches the eye-saccade sweet spot of ~75 characters at the column widths these layouts demand.
+
+The font stack prioritizes the OS UI font in order: Apple's `-apple-system`, then `BlinkMacSystemFont`, then Windows' `Segoe UI`, then Android/ChromeOS' `Roboto`, then `Helvetica Neue`, then `Arial`, with `Noto Sans` covering Linux. Emoji fallbacks are kept short. The code font uses `SFMono-Regular`, `Consolas`, `Liberation Mono`, `Menlo`, and `Courier` in the same order.
+
+Only **two font weights** appear in product UI: 400 (body, controls, menu items, tab labels) and 600 (`fontWeightStrong` — headings, table headers, and any title-grade typography). Thin (100–300), bold (700+), and italics are not used in interface chrome — they fight the calm, certain tone the system targets. Italics are acceptable only inside long-form documentation prose. Visual emphasis on selected/active states comes from color and stroke (border, underline), not weight.
+
+## Layout
+
+All spacing snaps to a **4 px grid**. The six-step spacing scale (`unit`, `xs`, `sm`, `md`, `lg`, `xl` → 4 / 4 / 8 / 16 / 24 / 32 px) covers every gap, gutter, and inset in the system. Magic numbers — `padding: 11px`, `gap: 13px` — do not appear in token-driven code; the input field's 11 px horizontal padding exists only because the design pre-dates the 4 px grid and a one-pixel migration would shift millions of existing screens.
+
+Surfaces use a **three-layer model**:
+
+1. **`bg-layout`** (`#F5F5F5`) — the page background. It surrounds and contains everything else.
+2. **`bg-container`** (`#FFFFFF`) — the surface for cards, panels, tables, and forms. This is where most content lives.
+3. **`bg-elevated`** (`#FFFFFF`, same hex as `bg-container`) — the surface for modals, dropdowns, popovers. Distinguished from `bg-container` not by color but by shadow.
+
+Never hard-code `#FFF` or `#FAFAFA` in product code. Read the token. The three-layer model is what lets a dark-mode algorithm flip the surface ladder without breaking layouts.
+
+## Elevation & Depth
+
+Ant Design is **flat-first**. Borders and tonal contrast carry hierarchy. Shadows appear only on surfaces that genuinely float above their context.
+
+Four shadow tiers exist (CSS variables `--ant-box-shadow-tertiary`, `--ant-box-shadow-secondary`, `--ant-box-shadow`, `--ant-box-shadow-popover-arrow`). In ascending strength:
+
+- **Tertiary** — inset hairline, used for input internal stroke.
+- **Default** — `0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px 0 rgba(0,0,0,0.02)` — for raised cards and floating action surfaces.
+- **Secondary** — `0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)` — for modals, drawers, and dropdowns.
+- **Popover arrow** — used only for the small triangular pointer on tooltip and popover arrows.
+
+Motion uses three durations and a small library of cubic-bezier easings, all exposed as tokens:
+
+- `motionDurationFast` — 0.1 s, for state changes (hover, focus, press).
+- `motionDurationMid` — 0.2 s, for component-internal transitions (collapse, fade).
+- `motionDurationSlow` — 0.3 s, for surface-level changes (modal enter, drawer slide).
+
+Easings are pre-defined: `motionEaseInOut`, `motionEaseOut`, `motionEaseIn`, `motionEaseOutBack`, `motionEaseOutCirc`, etc. Do not pick a `transition-timing-function` arbitrarily. If the design need does not match an existing easing, use `motionEaseInOut` and move on.
+
+## Shapes
+
+The default corner radius is **6 px**. It is round enough to read as modern and friendly, but small enough that a 32-pixel-tall button still presents a clean, almost-rectangular silhouette suitable for dense forms.
+
+By component class:
+
+- **Controls** (button, input, select, dropdown trigger) — 6 px (`rounded.DEFAULT`).
+- **Surfaces** (card, modal, drawer, notification) — 8 px (`rounded.lg`).
+- **Tags and small chips** — 4 px (`rounded.md`).
+- **Tooltip and popover** — 4 px (`rounded.md`).
+
+Full-pill (`rounded.full`, 9999 px) is reserved for circular avatars, badges, and dots — not for buttons or tags. Square (0 px) is reserved for tables and the inner edges of segmented controls. Mixing radii on adjacent elements is a smell: a card with 8 px corners should not contain a button with 16 px corners.
+
+## Components
+
+Twelve component archetypes capture most of the system's surface area. Each entry below maps to the token references in the YAML front-matter.
+
+- **Button (primary)** — the single dominant action per screen. Solid `primary` fill, white text, 32 px tall, 6 px radius. Hover lightens the fill to `#4096FF`; active darkens to `#0958D9`. Do not stack two `primary` buttons in one decision.
+- **Button (default)** — secondary actions. Transparent background on a white surface, dark text, 1 px outline border. Hover changes text color to `#4096FF`; the border tints to match.
+- **Input field** — 32 px tall to match buttons. Subtle 1 px outline border; focus state thickens the border to `primary` and adds an inset glow. Placeholder text uses `on-surface-disabled`.
+- **Select** — visually identical to Input. The trigger reads as an input until interacted with.
+- **Card** — the workhorse container. White surface, 8 px radius, default shadow tier. Internal padding is 24 px on all sides; nested controls maintain 16 px gaps.
+- **Modal** — same surface and radius as Card, but uses the secondary shadow tier and is centered on a `rgba(0, 0, 0, 0.45)` mask. Body padding is 20 px top/bottom × 24 px left/right.
+- **Menu (selected item)** — `#E6F4FF` background, `primary` text. This is the single visual cue for "you are here" in navigation.
+- **Tabs (active tab)** — `primary` text and a 2 px `primary` underline. Inactive tabs are `on-surface-variant`. No background fill on tabs at any state.
+- **Table (header row)** — `surface-container` background, `title-md` typography (14 px / 600). Body rows alternate on hover only, not by default — the system trusts users to read dense data without zebra striping.
+- **Tag** — small categorical label. 4 px radius, 12 px font, low-saturation pastel fills from the preset palette. Never use a tag for a critical state — use Alert or Badge.
+- **Tooltip** — high-contrast inverse surface: `rgba(0,0,0,0.85)` background, white text. Always positioned by the framework, never manually pinned.
+- **Dropdown menu (item hover)** — `surface-container` fill on hover, no text-color change. The hover affordance is enough.
+
+## Do's and Don'ts
+
+- **Do** use the four design values as a tie-breaker. When two approaches conflict, the one that produces a more certain, more legible state for the user wins.
+- **Don't** stack two `primary`-colored buttons on the same surface. Pick one. Demote the rest to `default`.
+- **Do** read surfaces from `colors.surface`, `colors.surface-container`, and `colors.surface-layout`. They reflect the three-layer model.
+- **Don't** hard-code `#FFFFFF` or `#FAFAFA`. The hex is incidental; the role is what matters.
+- **Do** use `motionDurationMid` (0.2 s) for any component-level transition you cannot find a more specific token for.
+- **Don't** invent custom `cubic-bezier` curves. Use the named easings.
+- **Do** reserve the preset color palette (`blue` through `lime`) for tags, charts, and categorical visualization.
+- **Don't** mint accent colors outside the preset palette for one-off UI surfaces. If a screen seems to need one, the design probably needs a different layout instead.
+- **Do** snap every gap, inset, and gutter to the 4 px grid through the spacing scale.
+- **Don't** use magic numbers in product code. If the scale lacks a step you need, the design needs revisiting, not a one-pixel override.