ai-learning-platform/docs/design-tokens.md

Design Token — 宇之然 UI 规范

统一 Web (Next.js) 和 Mobile (Vue) 的设计语言。

色彩系统

语义色板 (CSS Variables)

Token	浅色	深色	用途
--background	0 0% 100%	222.2 84% 4.9%	页面背景
--foreground	222.2 84% 4.9%	210 40% 98%	主要文字
--card	0 0% 100%	222.2 84% 4.9%	卡片/面板背景
--muted	210 40% 96.1%	217.2 32.6% 17.5%	次级背景（消息气泡、标签底）
--muted-foreground	215.4 16.3% 46.9%	215 20.2% 65.1%	次级文字（描述、辅助信息）
--accent	210 40% 96.1%	217.2 32.6% 17.5%	Hover/激活背景
--border	214.3 31.8% 91.4%	217.2 32.6% 17.5%	边框/分割线
--ring	207 100% 38%	207 58% 52%	Focus 环
--primary (brand-600)	207 100% 38%	207 58% 52%	品牌主色（按钮/链接）

Tailwind 映射

/* 禁止使用的旧颜色 */
text-gray-*    → text-foreground / text-muted-foreground
bg-gray-*      → bg-card / bg-muted / bg-accent
border-gray-*  → border-border

/* 品牌色阶梯 */
brand-50  ~ #f0f7ff   背景 tint
brand-100 ~ #e0effe   标签背景
brand-600 ~ #0070c4   主色（按钮/链接）

Mobile (Vue) 对应

Mobile 使用 uni-app，CSS 变量命名相同，在 App.vue 定义：

/* mobile/src/App.vue */
page {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --muted: #f5f5f5;
  --muted-foreground: #666666;
  --border: #e5e5e5;
  --brand: #0070c4;
}

间距系统

Token	值	用途
page padding	px-4 sm:px-6 lg:px-8	页面级内边距
card padding	p-4 sm:p-6	卡片内边距
section gap	gap-4 md:gap-6	卡片/区块间距
content max-w	max-w-7xl	内容页宽度
text max-w	max-w-3xl	法律/文本页宽度

圆角

Token	值	用途
--radius	0.75rem (12px)	基础圆角
rounded-xl	12px	卡片圆角
rounded-2xl	16px	大圆角容器
rounded-lg	8px	按钮/输入框
rounded-full	9999px	标签/徽章

排版

层级	类名	字体大小	用途
H1	text-3xl font-bold	30px/1.2	页面标题
H2	text-xl font-semibold	20px/1.4	区块标题
H3	text-lg font-semibold	18px/1.4	卡片标题
Body	text-sm	14px/1.5	正文
Caption	text-xs	12px/1.5	辅助文字
Mono	text-sm font-mono	14px	代码

组件模式

PageLayout — 页面容器

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div className="mb-8">
    <h1 className="text-3xl font-bold text-foreground">标题</h1>
    <p className="mt-2 text-muted-foreground">描述</p>
  </div>
  {/* 内容 */}
</div>

Card — 卡片容器

<div className="bg-card rounded-2xl border border-border p-6">
  {/* 内容 */}
</div>

StatCard — 统计数字卡片

<div className="bg-card rounded-xl border border-border p-6">
  <div className="text-sm text-muted-foreground mb-1">标签</div>
  <div className="text-2xl font-bold text-foreground">数值</div>
</div>

FormField — 表单字段

<div>
  <label className="block text-sm font-medium text-foreground mb-1">标签</label>
  <input className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-background text-foreground" />
</div>

Mobile (Vue) 迁移清单

文件	状态	备注
mobile/src/styles/variables.css	✅ 新建	完整 Design Token CSS 变量定义
mobile/src/App.vue	✅ 已修复	使用 var(--muted) / var(--foreground)
mobile/src/pages/sandbox/index.vue	✅ 已修复	参考页面，全部替换为 CSS 变量
其余 16 个页面	⏳	按 sandbox 模式全局替换硬编码颜色

Mobile 迁移对照表

旧值	新值
#fff / white	var(--card)
#f5f5f5	var(--muted)
#333	var(--foreground)
#666 / #999	var(--muted-foreground)
#4f8cff	var(--brand)
#e0effe	var(--brand-light)
#f0f0f0 / #e5e5e5	var(--border)
12rpx border-radius	var(--radius)

此文档在 UI 变更时同步更新。