DD Agent Design Tokens
来源 src/styles.css + src/aui.css（spec §6.1，基准 v9.14）。规范文档见 design.md。点击色卡可复制色值；demo 均为可交互实样式。
2026-11-04 修订：浮层类（下拉/popover/modal/drawer）去描边外框 → Elevation 阴影分级（§04）；tabs 同步 demo v9.15.4 终态（§12）。
01設計原則
黑白即品牌主操作 / active / 当前节点一律 ink 黑填充白字，不用彩色按钮。
彩色有纪律红 = 错误/×，amber = 审批专用，其余彩色仅用于案件阶段（低饱和）。
平面优先 · 浮层浮起控件/卡片靠 1px 描边分层；浮层（下拉・popover・modal・drawer）一律无边框，用 elevation 阴影表达层级（2026-11-04）。
mono = 数据徽章、编号、时间戳、来源、工具名用 mono；正文与按钮用 sans。
active = 黑底白字一切可选中项的选中态统一这一种语言。
可读下限 11px可读文本 ≥ .74rem；键盘 focus-visible 2px 黑框；动效尊重 reduced-motion。
02カラー
点击色卡复制 HEX。核心 8 token + 阶段色 6 + 语义保留色。红/amber 语义不挪用（v8.3 纪律）。
核心色板 :root
案件阶段色 --st-*（v8.3，低饱和进度暗示）
作成済
収集中
準備完了
分析中
分析完了
納品済
.stage-dot 8px · .stage-topline 3px
语义保留色（不设 token，写死在组件里）
| 值 | 语义 | 示例 |
|---|
#B45309 | 審査待ち / 要確認 / 新增项 — 审批专用 | 承認待ち 要確認 NEW |
#FEF8EF / #FFF7ED | amber 底 tint | 新增行底 · warn 行底 · pending 点阵底 |
#B91C1C | 错误 / × / dealbreaker | × 必須 |
#FEF2F2 | red 底 tint | 表格 dealbreaker 行底 |
#047857 | 已填写 / OK | 記入済 |
#10B981 | 完成（点） | 章完成点 |
文字层级实样
ink 主文字 #0A0A0A — 一级可读文本
ink-2 次级文字 #57534E — 说明、标签、辅助句
ink-3 三级 meta #A8A29E — 时间戳、来源、占位（.85rem）
03タイポグラフィ
根字号 15px，body line-height 1.6，大标题 letter-spacing -.01em。字重只用 400/500/600/700。
--sans Inter · Noto Sans JP/SC · Hiragino · Yu Gothic · PingFang SC · Microsoft YaHei
--mono ui-monospace · IBM Plex Mono · Menlo — 徽章/编号/时间/来源/工具名
1.35rem / 700 · h1案件一覧
1.05rem / 600DD Agent（logo / headline-dark）
.95–1rem / 600カード見出し・強調テキスト
.86–.92rem / 400表・チャット本文・ナビ項目の標準サイズ
.8–.85rem / 400ボタン・チップ・フォームラベル
.74rem（下限）メタ・ヘルプテキスト（a11y 下限 ≈11px, v9.11）
mono .72remCH-03 · 2026-11-03 · src: 財務計画.xlsx
04角丸・線・影
圆角阶梯
描边规则
描边只用于控件与分隔线（按钮/输入/卡片/tab）。浮层类（下拉・popover・modal・drawer・tooltip・toast）不加外框，用阴影分层 — 见下节 Elevation。
常规 — 1px solid --line
卡片、输入框、分隔线
强调 — 1px solid --line-strong
active tab、主按钮、审批卡
虚线 — 1px dashed --ink-3
占位 / 建议 / 可追加（dropzone 为 2px）
amber 1.5px
仅 .st-pending 审批待卡片
阴影层级（Elevation）— 浮层无边框，靠阴影浮起
2026-11-04 方向：减少线条样式。下拉/popover/modal/drawer 不再描边，改分级阴影；hard-offset（4px 4px 0）退役。token 拟落地 styles.css。
--shadow-1 · 下拉 / 菜单
贴触发器的小浮层：pj-menu · lang-menu · cm-vmenu
--shadow-2 · popover / 悬浮卡
独立浮层：bell-panel · cm-pop · cm-ptip
--shadow-3 · modal / dialog
最重一层，配 45% 遮罩
--shadow-drawer · 右滑 drawer
方向性投影（左缘渐隐）
focus ring（非浮层，保留）
composer / prompt-bar 聚焦唯一柔光
05レイアウト
| 度量 | 值 |
|---|
| 侧栏 | 240px · collapsed 60px · ≤768px drawer 化 |
| 内容区 | max-width 1200px · padding 32px 40px（≤1380px 收为 24px 28px） |
| portal 容器 | 720px（回答页 wide 1440px） |
| 卡片内边距 | 18px（.card）· 紧凑卡 12–14px |
| grid gap | 16px（.grid）· chap-grid 12px |
| 工作台三栏 | rail 262px / chat 弹性 / sub-stream 340px（3 档收窄，≤1160px 浮层） |
| 微交互时长 | .12–.15s ease · drawer/侧栏 .15–.2s |
06ボタン
radius 8px · padding 8px 16px · :active 下沉 1px · 黑底场景内主按钮反转为白底黑字。
.icon-btn（30px, aria-expanded 时黑底）· .prompt-send（28px 圆）
07チップ・バッジ・タグ
胶囊系默认 mono/灰框；active 全部黑底白字。check-chip 与 fchip 可点击试态。
可交互 chips
静态标签
AB
差戻し自社
mono データ
資料収集中
準備完了
納品済
責任者協作閲覧者
web_search ×3read_file ×12
tools 15 件
未設定NUMBERNEW
未受領提案
レビュー段階
要確認記入済任意
08カード
.card 基础卡
白底 · 1px --line · radius 10px · padding 18px。hover 黑框的是 .proj-card / .chap-card。
.proj-card
hover 黑框 + 顶部 3px 阶段色条；.locked 降透明不可点。
法務確認 △v1
承認待ち — 1.5px amber 框
.card.editing
编辑态：黑框 + sunken ring（3px 外扩）。
09テーブル
th 黑底线 + .8rem 600 灰字；行 hover sunken；dealbreaker 行整行红底；.pj-tbl 用外框圆角包裹。
| 章 | 評価 | 根拠 |
|---|
| 市場分析 | B | findings#12 · TAM 試算 |
| 法務リスク | × | findings#31 · 特許係争中 |
| 財務計画 | A | findings#07 · 3ヶ月実績 |
企業価値¥480M
出資比率15.0%
譲渡制限3年
.mini-table — 圆角包裹的 key-value 行列；
.qa-tr — grid 表格（head sunken 底）；
.src — mono .75rem 来源行
10フォーム
控件统一 8px 圆角 --line 框，focus 黑框 outline:none；必填 label 带红色 *；错误红框；单位后缀一体框。
11チャット・エージェント
用户 = 黑气泡右对齐；agent = 白灰框左对齐；过程行（thinking/tools）mono 二级开示；composer focus 柔和 ring。
この企業のバリュエーション根拠を要約して
直近の財務実績と類似案件から、¥420–480M のレンジを提示しています。出所は findings#07 と findings#12 です。
read_file ×4web_search ×2
6 件 · 42s
財務三表を解析中…
findings を検索中…
承認リクエストNDA締結のうえ資料請求を実行します。
⌗ market-scansub-agentRUN
12ナビゲーション
侧栏 nav（sunken 底 · active 白底）
Tabs（v9.15.4 终态：文字按钮 + 浅灰 hover + active 下横线）
概要タブの内容。
チャットタブの内容。
成果物タブの内容。
变体/遗留：ListReview 页 .lr-tabs 仍为旧文件夹页签（底线+黑框三边）；聊天过程块 .think-tab 为微型下划线变体。
Stepper
1案件登録
2リスト確認
3対話
4分析
分段控件
Timeline
10-20案件作成
10-25資料受理
11-01分析中
—納品
Accordion（details.acc）
財務計画 CH-03
summary 600 · open 时 head 下加灰线；body .85rem 灰字。
市場分析 CH-01
ネイティブ details/summary 実装。
13浮層・状態・進捗
.modal
白卡无边框 + shadow-3，遮罩 rgba(10,10,10,.45)，宽 520px。drawer 同语言（shadow-drawer 方向投影，640px 右滑，遮罩 .28）。
通知（.bell-panel）
shadow-2 · 无边框浮层
コピーしました（.toast 黑底白字）
进度 / 状态点
.dg-dot 48px 状态条 2×2：done 黑 / running 黑框呼吸 / pending amber
14アバター・その他
田Alex堀+2
.mav 24px 叠放 -7px · owner 黑底 · .mav-n 虚线=未接受
AC.tenant-avatar / .pj-oava 26px 黑底白字（.off 虚线=無担当）
📄
資料をドロップ
2px 虚线 · hover 黑框黑字
NDA締結済の案件のみ表示されます（1px 虚线说明框）
ヘッドライン — 黒帯強調（1.05rem/600）