DESIGN TOKENS
为 Venture Client 界面定义的 Token 体系
面向「项目详情页」这类数据密集型企业界面：三层架构（基础层 → 语义层 → 组件层）， 双主题（浅色 / 深色），全部文字组合按 WCAG AA 校验。 本页所有样式均由该 Token 驱动——右上角切换主题即可验证语义层的价值。
层级 = 字号 × 颜色
字重封顶 700，禁用 800–950。日文粗字形发糊，层级应靠字号、颜色与留白建立。
语义优先
组件只消费语义层 token。主题切换、品牌换色只改语义映射，组件零改动。
4px 基准网格
所有间距、圆角、尺寸取刻度值，消灭 9 / 13 / 22px 之类的随手魔法数。
状态完备
每个交互组件必须定义 hover / active / focus-visible / disabled 四态。
01 · COLOR
色彩
主操作采用 shadcn/ui 式石墨黑，中性色 Zinc 纯灰阶承载文档式阅读；蓝色仅作链接点缀，选中/激活态一律用中性灰而非彩色高亮；警告色精炼为暖赭黄。点击任意色块复制 token 名。
品牌色 · Brand（仅链接 / 焦点点缀；主操作用石墨黑见中性色 900）
中性色 · Neutral（文字 / 背景 / 边框）
反馈色 · Feedback（前景色按浅底 ≥4.5:1 校验）
流程阶段色 · Phases（PHASES 导航：Discover → Adopt）
核心语义映射（组件只允许消费这一层）
02 · TYPOGRAPHY
字体
Latin 用 Inter，日文用 Noto Sans JP（旧版字体族保留）；金额、单据编号用等宽字体。9 级字阶覆盖从标签到页面标题，行高成对绑定。
Sans · 界面主字体
プロジェクト詳細 Project Detail
Inter + Noto Sans JP + Hiragino 兜底
Mono · 编号 / 金额
C-673-P-74162
￥500,000,000 · tabular-nums
字阶 · Type Scale
アパレルEC事業における合成消費者型リサーチ導入
3xl · 28/36 · Bold 700
页面标题（1处/页）
￥500,000,000
2xl · 22/30 · Bold 700 · tabular
指标数值 / 想定利益
プロジェクト詳細を整理しましょう
xl · 18/26 · Semibold 600
区块标题 / 抽屉标题
合成消費者・デジタルツイン専業
lg · 16/24 · Semibold 600
条目标题 / 卡片标题
発売前の受容性検証を高速・低コストで反復できる仕組みを整備し、商品企画と販促投資の意思決定精度を高める。長文は行間を広く取り、可読性を優先する。
md · 15/22+1.85行高 · Regular 400
长文正文（課題の深掘り等）
Agentと対話を開始
base · 14/20 · Regular 400
正文 / 按钮文字
コンセプトやクリエイティブの選別精度を評価する
sm · 13/18 · Regular 400
表格内容 / 辅助说明
最終データ更新： 2026/07/02 21:00
xs · 12/16 · Medium 500 · wide
标签 / 注释 / 眉题
字重 · 封顶 700
Project
400 regular
Project
500 medium
Project
600 semibold
Project
700 bold · MAX
旧版全站混用 650–950 五档字重，日文字形在 900+ 时发糊、层级反而失效；新体系仅 4 档，用字号与颜色区分层级。
03 · SPACING
间距
4px 基准网格，12 级刻度。旧版中 2 / 6 / 9 / 13 / 18 / 22 / 26px 等随手值全部归一到刻度。
常用组合语义
04 · RADIUS
圆角
旧版 5 / 6 / 8px 混用，归并为 6 级。原则：嵌套层级每深一层，圆角降一级。
05 · ELEVATION & Z-INDEX
阴影与层级
旧版几乎无投影语言（仅抽屉一处硬编码阴影）。新体系 5 级阴影 + 6 级 z-index，冷灰色调与中性色同源。
06 · MOTION
动效
4 档时长 + 3 条缓动曲线，服务「反馈快、入场顺、退场干脆」。抽屉建议 360ms ease-entrance 滑入；遵守 prefers-reduced-motion。
07 · COMPONENTS
组件库
30 个通用企业界面组件，100% 由 token 驱动，视觉语言对齐 shadcn/ui（石墨主操作、中性状态、克制的语义色）。既覆盖当前项目详情页的全部元素，也包含任意企业产品通用的表单控件、反馈、导航与覆盖层。Agent 对话提供单选 / 多选 / 自由输入三种 Ask-Question 卡片（参考 beautifului.dev），可直接点击体验。
hover 加深 / active 再加深 / focus-visible 显示 focus-ring / disabled 灰化。Tab 键试试焦点态。
| No. | 種別 | 評価観点 | 内容 |
|---|---|---|---|
| 1 | 機能要件 | コア技術の成熟度 | 合成消費者の回答が実際の調査結果とどの程度一致するか評価する |
| 2 | 機能要件 | 反復テスト速度 | 従来の2〜4週間に対し48時間以内まで短縮する |
| 3 | 非機能要件 | データ保護 | 個人情報・肖像の取り扱い、合成データの根拠説明を評価する |
まず案件の背景を確認します。今回の検討は、どの事業部のどの業務課題から始まっていますか。
検証の優先軸はどれですか？
連携対象のシステムはどれですか？（該当するものすべて）
補足したい背景や制約があれば記入してください。
案件詳細
Agentと対話してProjectの詳細を整理します
顧客背景、課題、経済効果、検証方針を会話の中で確認し、整理済みの案件詳細として反映します。
原生 input + accent-color/focus-ring，键盘可达；组合输入框用 focus-within。
情報
検証計画の下書きが自動保存されました。
注意
候補社数が20社を下回る可能性があります。
エラー
データ連携に失敗しました。再試行してください。
Dropdown Menu（surface-raised + shadow-md）
Modal（backdrop: rgb(2 6 23/50%)）
案件詳細を反映しますか？
検討体制・課題構造・経済効果・検証計画の4項目が上書きされます。
Avatar / Accordion
実現可能性の詳細を見る
単一ベンダーで全工程を完全代替することは困難。専業スタートアップ・既存大手・自社一次データの組み合わせが現実解。
08 · REFERENCE
Token 清单
由页面内嵌的 token 样式表实时解析生成（浅 / 深两列即两个主题的实际取值）。点击行复制 token 名。
| Token | Light | Dark | 层级 |
|---|
09 · ADOPTION
接入指引
① 替换全局样式
将 tokens.css 引入 app/layout.tsx（置于 globals.css 之前），globals.css 中的裸值逐项替换为对应语义 token。
② 约束写入规范
stylelint 禁止组件样式出现裸 hex / 非刻度间距；组件只允许引用语义层与组件层变量。
③ 多端分发
tokens.json 为 W3C DTCG 格式，可用 Style Dictionary 输出 CSS / SCSS / iOS / Android，保证多端一致。