01 カラー・トークン
结构色 + 唯一强调色 + 阶段数据色 + 语义色。全站仅 1 个交互强调色（Venture Azure）；阶段色只用于编码阶段数据，永不作装饰；中性色统一 Slate 冷灰。
構造色（Slate 中性系）
ブランドと唯一のアクセント
フェーズ色（データエンコーディング · 白字对比全部 ≥ 4.5:1）
| 规则 | 说明 |
|---|---|
深色 → 填充 | 阶段深色仅用于：阶段导轨段填充、列头文字、tag 文字（配 tint 底） |
tint → 背景 | tint 仅用于：列头底、tag 底、选中态底。永不作大面积装饰 |
非色単独编码 | 阶段永远同时呈现 名称+序号+数字——色彩不是唯一信息通道（色弱可读） |
セマンティック色
02 タイポグラフィ
IBM Plex Sans JP（日文/界面）+ IBM Plex Mono（数字/代码/时间戳）。字号 8 档刻度，系统下限 12px（评审 FR-01：现网存在 687 处 8–10px 文字）。所有数字 tabular-nums。
| 属性 | 定義 |
|---|---|
font-family | 界面 --sans / 数字·コード·日時 --mono |
line-height | 正文 1.7 / 表格 1.5 / 标题 1.25–1.3 |
font-weight | 400 正文 · 500 强调/按钮 · 600 标题 · 700 仅 KPI 数值与 logo |
数値 | tabular-nums 右对齐；金额 ¥1,964,385,000；日期 2026/10/21 12:52 等宽 |
行長 | 段落 max-width: 66ch（长文本不再全宽铺开） |
03 余白・角丸・影
4px 基数间距刻度；3 档圆角；2 档带色相阴影（禁外发光）。卡片策略：能用发丝线分组就不用卡片，只有悬浮层与看板卡片使用阴影。
04 ボタン
5 变体 × 3 尺寸。规则：每视图至多 1 个 Primary；危险操作只用 danger（且必须过确认模态）；文案具体化（「この編集を保存する」而非「保存」）；active 态下沉 1px 模拟物理按压。
.btn-primary / secondary / ghost / danger / danger-ghostopacity .45 + cursor:not-allowed，且 title 说明原因（例: 未保存时「Purchaseフェーズへ進む」置灰）。.btn-sm 30px / .btn 38px / .btn-lg 44pxhover / active / disabled / focus-visibleoutline: 2px solid var(--accent); outline-offset: 2px（评审 FR-05：现网 focus-visible 规则为 0 条）。05 アイコン
统一 lucide 风格线性图标：stroke-width 1.75、round cap/join、两档尺寸（导航 17px / 操作 15-18px）。禁止 emoji 与混用图标库。以下为当前用集（点击 toast 显示名称）：
06 フォームコントロール
Label 恒在输入框上方（禁止 placeholder 兼职 label）；helper 在下、错误贴源；输入高 38px；聚焦环统一。四个基础控件 + 状态全集：
.inputborder-color: var(--accent) + 0 0 0 3px var(--accent-tint)。.select / .check / .switch07 ドロップダウン・メニュー
三种形态：① 菜单按钮（工具栏动作）② 行尾 ⋯ 菜单（表格行操作——危险项红字+分隔线置底）③ 确认选择菜单（单选带勾）。展开动画 translateY(-4px)→0 + fade，Escape/外点关闭，键盘可达。
08 チップ・タグ・バッジ
Filter chip（可按压，aria-pressed）用于筛选；tag（只读）用于角色/状态语义；badge（mono 数字）用于计数。点击下方 chip 体验按压态：
09 フェーズコンポーネント
VCM 的核心组件。三态：done（深色填充·可回看）/ current（深色填充+「現在」chip+白色下划线）/ future（灰·disabled+title 理由）。真 button 实现、aria-current="step"、键盘可达（评审 FR-07/FR-10）。
.phase-rail / .phase-seg10 テーブル
语义 table；表头 12px 大写+次表面底；行高 56px（≥44px 命中区）；数字列 mono 右对齐；行操作走 ⋯ 菜单；行 hover 微底色；移动端转卡式行（data-label 提供 pseudo 标签）。点击表头体验排序态：
| ユーザー ↕ | ロール | 想定効果 ↕ | 経過日数 |
|---|---|---|---|
齋齋藤 雅剛 | システム管理者 | ¥420,000,000 | 67 |
高高橋 佳子 | PM | ¥1,050,000,000 | 38 |
西西村 英二 | 閲覧者 | — | 12 |
| 属性 | 定義 |
|---|---|
行高 | 56px（触控命中 ≥44px，修复现网 20-24px 链接） |
数字列 | .num = mono + tabular-nums + 右对齐 |
表头截断 | 长表头 min-width + 平假名换行，禁 ellipsis 截断（FR-15） |
斑马纹 | 不用斑马纹，用行 hover 底色 + 发丝线（更安静） |
11 フィードバック — モーダル / トースト / 状態
危险操作双闸门（⋯菜单→确认模态）；toast 底部居中 4.2s 自动消失、带具体结果文案；骨架屏与真实布局同构；空态=插画+一句话+行动按钮。以下全部可现场触发：
ネットワークを確認し再試行してください（ERR_0x2F）
12 モーション
MOTION_INTENSITY 6（Fluid CSS 区间）：唯一缓动 cubic-bezier(0.16,1,0.3,1)（出栈感）；三档时长；只动 transform/opacity；prefers-reduced-motion 全量关闭（现网为 0 条支持）。
| トークン | 値 | 用途 |
|---|---|---|
--dur-1 | 140ms | hover / active / chip 按压 |
--dur-2 | 260ms | 菜单展开 / 面板切换 / 模态进入 |
--dur-3 | 420ms | 列表入场（stagger 60ms/项） |
--ease | cubic-bezier(.16,1,.3,1) | 全站唯一缓动（spring 风格出栈） |
@keyframes rise | 8px 上移淡入 | 卡片/行入场，animation-delay: calc(var(--i) * 70ms) |
breathe / shimmer / sweep | 2.4s / 1.4s / 1.8s | 状态点呼吸 / 骨架扫光 / KPI 一次性扫光 |
13 FR トレーサビリティ
本规范对《VCM STG 设计评审报告 2026-10-27》15 条 FR 的覆盖情况。FR-02（段落重复渲染）为工程 bug，不在设计规范范围。
| FR | 评审发现 | 规范落点 | 演示位置 |
|---|---|---|---|
FR-01 | 687 处 8–10px 微型文字 | §02 字号 8 档、下限 12px | 02 |
FR-03 | MFAリセット 无确认 | §07 ⋯菜单 + §11 确认模态双闸门 | 用户管理 |
FR-04 | 375px 横向溢出 1758px | 断点表：<1024 侧栏抽屉、<900 网格降列、<768 单列 | 任意页 375px |
FR-05 | 175 个 <44px 目标、focus-visible 0 条 | §04 命中区 ≥38px、全站统一焦点环 | 04 |
FR-06 | 管理功能埋于用户菜单 | 侧栏「管理」分组一级可达 | 仪表盘 |
FR-07 | 阶段条 div 不可键盘操作 | §09 真 button + aria-current + 禁用理由 | 案件详情 |
FR-08 | H1 双标准（14px vs 32px） | §02 列表页 22 / 详情页 28 两档 | 02 |
FR-09 | 数字无 tabular-nums | §02 数字规则（mono+右对齐） | 10 |
FR-10 | 阶段色白字 2.9:1 | §01 五档 AA 阶段色 | 01 |
FR-11 | 空态仅「全 0 件」 | §11 空态=插画+文案+行动 | 空状態演示 |
FR-12 | DOM 53k px 无虚拟化 | 卡片 line-clamp 2 行 + 阶段折叠交互模式 | 仪表盘 |
FR-13 | Agent 与主系统断裂 | §01 色板 + Agent CTA 用主系统品牌（深藏青渐变） | Agent カード |
FR-14 | logo aria-label 未翻译等 | i18n 规则：aria-label 一并入翻译键 | — |
FR-15 | 表头截断 / PM 卡不可点 | §10 表头规则；看板卡片全链接化 | 10 |