diff --git a/.memory/design-system.md b/.memory/design-system.md index fa1d8a3..7cce6b2 100644 --- a/.memory/design-system.md +++ b/.memory/design-system.md @@ -1,17 +1,18 @@ # MeetNote Design System -> 基于风格库 **11 Dark Dev SaaS** 改造 + Linear 应用骨架 -> 关键差异：原风格是落地页导向，本项目是**工具应用**，布局和密度都要改 +> 基于风格库 **10 BrandKit Purple** 改造 + Notion/Linear 应用骨架 +> 亮色 · 工具应用 · 长文阅读优先 +> 2026-04-13 锁定（风格 11 已废弃，理由：落地页导向不匹配工具场景） --- ## 设计哲学 -**冷静、克制、长时间看不累。** 会议复盘是 1-2 小时注视的场景，必须避免炫技。 +**干净、克制、像 Notion / Linear 一样可以看一下午不累。** -- ❌ 不做：炫酷 hero 网格、pricing、testimonial、Framer Motion 大动效 -- ✅ 保留：暗色基调、毛玻璃 Bento 卡、荧光青绿 accent、shadcn/ui 组件库 -- ✅ 微调：主色降饱和（避免过度赛博感），字体换 DM Sans + Noto Sans SC（中英混排更稳） +- ❌ 不做：花哨渐变、3D 动效、品牌感过强的装饰 +- ✅ 保留：oklch 色彩空间、Surface 层级系统、Desktop/Mobile 双端骨架 +- ✅ 改造：品牌紫 → 中性蓝紫（更 Linear 理性）、加应用状态色（转写中/已完成） --- @@ -19,277 +20,344 @@ ```css :root { - /* 背景 - 沿用风格 11 */ - --background: 210 11% 7%; /* #0f1211 深灰绿黑 */ - --foreground: 160 14% 93%; /* #e7eceb 浅灰绿白 */ + /* 背景层级（沿用 BrandKit 的 Surface 系统） */ + --background: oklch(0.985 0.005 260); /* 极浅灰蓝底 */ + --surface: oklch(0.985 0.005 260); /* = background */ + --surface-elevated: oklch(1 0 0); /* 卡片/弹窗 纯白 */ + --surface-muted: oklch(0.96 0.01 260); /* 次级区域 */ - /* 主色 - 降饱和（从 96% → 65%），冷静绿取代荧光青 */ - --primary: 165 65% 65%; /* 冷静绿 */ - --primary-foreground: 160 8% 6%; - --primary-dark: 165 70% 45%; - --primary-light: 165 40% 80%; + --foreground: oklch(0.15 0.02 260); /* 主文字 近黑 */ + --muted-foreground: oklch(0.50 0.02 260); /* 次级文字 */ + --muted: oklch(0.94 0.01 260); - /* 状态色 - 新增（应用必需） */ - --success: 150 60% 55%; /* 已完成 */ - --warning: 38 90% 60%; /* 转写中 */ - --danger: 0 72% 60%; /* 失败 */ - --info: 210 80% 65%; /* 信息 */ + /* 主色 - 候选 A 蓝紫中性（从 BrandKit 紫 310° 移到 275°，饱和降低） */ + --primary: oklch(0.58 0.18 275); /* 理性蓝紫 */ + --primary-foreground: oklch(0.98 0 0); + --primary-light: oklch(0.68 0.15 275); /* hover */ + --primary-subtle: oklch(0.95 0.03 275); /* 淡底 */ - /* 层级 - 沿用 */ - --muted: 240 2% 16%; - --muted-foreground: 160 14% 93% / 0.7; - --muted-foreground-light: 160 14% 93% / 0.5; + /* 边框 */ + --border: oklch(0.92 0.01 260); + --border-strong: oklch(0.86 0.01 260); /* 强化边框（列表分割） */ + --input: oklch(0.92 0.01 260); + --ring: oklch(0.58 0.18 275); - /* 卡片 - 毛玻璃（沿用） */ - --card: 220 17% 98% / 0.01; - --card-foreground: 160 14% 93%; - --card-blur: blur(8px); + /* 状态色（应用必需，BrandKit 原版没给全） */ + --success: oklch(0.65 0.16 155); /* 已完成 绿 */ + --warning: oklch(0.72 0.15 75); /* 转写中 琥珀 */ + --danger: oklch(0.60 0.22 25); /* 失败 红 */ + --info: oklch(0.65 0.12 230); /* 信息 蓝 */ - /* 边框 - 白色 8% 透明 */ - --border: 240 100% 100% / 0.08; + /* 深色点缀（Onboarding 欢迎页 + 空态插画用） */ + --brand-dark: oklch(0.13 0.02 260); + --brand-dark-soft: oklch(0.20 0.02 260); - /* 语义 */ - --ring: 165 65% 65%; - --radius: 0.5rem; + --radius: 1rem; /* 大圆角（BrandKit 特征，温和 SaaS 感） */ +} + +/* 暗色模式（v2 预留，MVP 不做） */ +.dark { + --background: oklch(0.14 0.01 260); + --surface-elevated: oklch(0.18 0.01 260); + --surface-muted: oklch(0.22 0.01 260); + --foreground: oklch(0.95 0.005 260); + --muted-foreground: oklch(0.65 0.01 260); + --border: oklch(0.28 0.01 260); + --primary: oklch(0.70 0.18 275); + --primary-foreground: oklch(0.14 0.01 260); } ``` ## 字体 ```css ---font-sans: 'DM Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif; ---font-mono: 'JetBrains Mono', 'Sarasa Mono SC', ui-monospace, monospace; +--font-sans: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif; +--font-mono: 'Geist Mono', 'JetBrains Mono', 'Sarasa Mono SC', ui-monospace, monospace; ``` -| 用途 | 大小 | 字重 | -|---|---|---| -| 页面标题 | 24px | 600 | -| 会议标题 | 18px | 500 | -| 正文/转写 | 15px | 400 (行高 1.75) | -| 时间戳/标签 | 13px | 500 | -| 角标 | 11px | 500 | +**选择理由**： +- **Inter**：BrandKit 原版用，中英混排公认平衡点，字宽匀称适合后台工具 +- **Noto Sans SC**：中文 fallback，Google 免费，Tailwind 默认栈兼容 +- **Geist Mono**：时间戳/文件名用，字形清晰 -**转写全文**用 1.75 行高，长时间阅读最舒服。 +| 用途 | 大小 | 字重 | 行高 | +|---|---|---|---| +| 页面标题 | 24px | 600 | 1.3 | +| 会议标题 | 18px | 600 | 1.4 | +| 正文 / 转写文本 | 15px | 400 | **1.75**（长读优先）| +| 时间戳 / 元信息 | 13px | 500 | — | +| 角标 / 标签 | 11px | 500 | — | --- -## 布局骨架 +## 布局骨架（Desktop） -**Linear 式应用 shell**，不是落地页： +BrandKit 原版是 **左侧导航 + 右侧内容区**，完美匹配我们需求： ``` -┌─────────────────────────────────────────────┐ -│ [侧栏 240px] [主内容区 flex-1] │ -│ │ -│ logo ┌──── page content ────┐ │ -│ │ │ │ -│ 📤 上传 │ │ │ -│ 📋 会议列表 │ │ │ -│ 🔍 搜索(v2) │ │ │ -│ │ │ │ -│ ───── │ │ │ -│ ⚙ 设置 │ │ │ -│ └───────────────────────┘ │ -└─────────────────────────────────────────────┘ +┌─────────┬────────────────────────────────────┐ +│ │ │ +│ MeetNote│ Page Content │ +│ │ │ +│ 📤 上传 │ │ +│ 📋 会议 │ │ +│ 🔍 搜索 │ │ +│ │ │ +│ ───── │ │ +│ ⚙ 设置 │ │ +│ 👤 │ │ +└─────────┴────────────────────────────────────┘ -响应式： - < 768px → 侧栏变底部 tab bar - ≥ 768px → 侧栏固定左侧 +侧栏 240px（collapsed 64px）· 主区 flex-1 · 圆角 rounded-2xl +``` + +**Mobile** (<768px)：底部 Tab Bar 代替侧栏（BrandKit 原版已实现） + +``` +┌──────────────────────────┐ +│ │ +│ Page Content │ +│ │ +│ │ +│ │ +├──────────────────────────┤ +│ 📤 📋 🔍 ⚙ │ +└──────────────────────────┘ ``` --- -## 三个核心页面线框 +## 三个核心页面线框（亮色） ### Page 1: 上传页 `/upload` ``` -┌─────────────────────────────────────────────────┐ -│ │ -│ 新建会议 │ -│ 手机录好后直接拖进来 │ -│ │ -│ ╭───────────────────────────────────────╮ │ -│ │ │ │ -│ │ ⬆ │ │ -│ │ │ │ -│ │ 拖拽音频文件到这里 │ │ -│ │ 或 点击选择文件 │ │ -│ │ │ │ -│ │ 支持 m4a · mp3 · wav · mp4 · opus │ │ -│ │ 单文件最大 500 MB │ │ -│ │ │ │ -│ ╰───────────────────────────────────────╯ │ -│ │ -│ 会议标题（可选，不填用文件名） │ -│ ┌─────────────────────────────────────┐ │ -│ │ 例：与客户对齐定价 │ │ -│ └─────────────────────────────────────┘ │ -│ │ -│ 参与人（可选，帮助总结质量） │ -│ ┌─────────────────────────────────────┐ │ -│ │ 张三, 李四, 客户王总 │ │ -│ └─────────────────────────────────────┘ │ -│ │ -│ [取消] [开始上传 →] │ -│ │ -└─────────────────────────────────────────────────┘ +┌───────────────────────────────────────────────────┐ +│ │ +│ 新建会议 │ +│ 把手机录好的音频拖进来 │ +│ │ +│ ╭────────────────────────────────────────╮ │ +│ │ │ │ +│ │ ↑ │ │ +│ │ │ │ +│ │ 拖拽音频文件到这里 │ │ +│ │ 或 点击选择文件 │ │ +│ │ │ │ +│ │ 支持 m4a · mp3 · wav · mp4 · opus │ │ +│ │ 单文件最大 500 MB │ │ +│ │ │ │ +│ ╰────────────────────────────────────────╯ │ +│ (虚线框 border-dashed border-border │ +│ hover:border-primary hover:bg-primary-subtle) │ +│ │ +│ 会议标题（可选） │ +│ ┌──────────────────────────────────────┐ │ +│ │ 例：与客户对齐定价 │ │ +│ └──────────────────────────────────────┘ │ +│ │ +│ 参与人（可选，提升总结质量） │ +│ ┌──────────────────────────────────────┐ │ +│ │ 张三, 李四, 客户王总 │ │ +│ └──────────────────────────────────────┘ │ +│ │ +│ [取消] [开始上传 →] │ +│ │ +└───────────────────────────────────────────────────┘ -上传中状态： - ╭───────────────────────────────────────╮ - │ 📄 meeting-2026-04-13.m4a (87 MB) │ - │ ████████████░░░░░░░░ 62% 15MB/s │ - │ 还需 3 秒 │ - ╰───────────────────────────────────────╯ +上传中状态（文件已选）： + ╭────────────────────────────────────────╮ + │ 📄 meeting-2026-04-13.m4a 87 MB │ + │ ████████████░░░░░░░░ 62% │ + │ 15 MB/s · 还需 3 秒 │ + ╰────────────────────────────────────────╯ ``` -**关键细节**： -- 拖拽区用虚线边框 `border-foreground/15`，hover 变 primary -- 文件列队可多选，一次传多个（排队处理） -- 分片进度用 shadcn Progress，底色 `muted`，填充 `primary` +**视觉要点** +- 拖拽区：`bg-surface-elevated border-2 border-dashed border-border rounded-2xl p-16` +- Hover：`border-primary bg-primary-subtle` +- 按钮：主按钮 `bg-primary text-primary-foreground rounded-full`（BrandKit 全圆按钮） +- 大圆角 `rounded-2xl` 是 BrandKit 核心特征，全站统一 --- ### Page 2: 会议列表 `/` （首页） ``` -┌─────────────────────────────────────────────────┐ -│ 会议记录 + 新建 │ -│ │ -│ ━━━ 今天 · 2026-04-13 ━━━ │ -│ │ -│ ╭─────────────────────────────────────╮ │ -│ │ 🎙 与客户对齐定价 │ │ -│ │ 14:30 1h 23min │ │ -│ │ ● 转写中 3/5 片 │ │ -│ │ ▓▓▓▓▓▓░░░░ 60% │ │ -│ ╰─────────────────────────────────────╯ │ -│ │ -│ ╭─────────────────────────────────────╮ │ -│ │ 🎙 团队周会 │ │ -│ │ 10:00 45min · 张三 李四 王五 │ │ -│ │ ✓ 已完成 │ │ -│ │ │ │ -│ │ "本周关键进展：A 项目完成 80%..." │ │ -│ │ #周会 #进度 #排期 │ │ -│ ╰─────────────────────────────────────╯ │ -│ │ -│ ━━━ 昨天 · 2026-04-12 ━━━ │ -│ │ -│ ╭─────────────────────────────────────╮ │ -│ │ 🎙 产品 Review │ │ -│ │ 16:00 52min │ │ -│ │ ✓ 已完成 │ │ -│ │ "讨论 Q2 产品路线图，确定三个重点..." │ │ -│ ╰─────────────────────────────────────╯ │ -│ │ -└─────────────────────────────────────────────────┘ +┌──────────────────────────────────────────────────┐ +│ 会议记录 [+ 新建会议] │ +│ │ +│ ─── 今天 · 2026-04-13 ───────────── │ +│ │ +│ ╭───────────────────────────────────────╮ │ +│ │ 与客户对齐定价 │ │ +│ │ 14:30 · 1h 23min │ │ +│ │ │ │ +│ │ 🟠 转写中 3/5 片 │ │ +│ │ ▓▓▓▓▓▓░░░░ 60% │ │ +│ ╰───────────────────────────────────────╯ │ +│ │ +│ ╭───────────────────────────────────────╮ │ +│ │ 团队周会 │ │ +│ │ 10:00 · 45min · 张三 李四 王五 │ │ +│ │ │ │ +│ │ 🟢 已完成 │ │ +│ │ │ │ +│ │ 本周关键进展：A 项目完成 80%，B 项目 │ │ +│ │ 进入测试阶段，下周聚焦上线准备... │ │ +│ │ │ │ +│ │ #周会 #进度 #排期 │ │ +│ ╰───────────────────────────────────────╯ │ +│ │ +│ ─── 昨天 · 2026-04-12 ───────────── │ +│ │ +│ ╭───────────────────────────────────────╮ │ +│ │ 产品 Review │ │ +│ │ 16:00 · 52min │ │ +│ │ 🟢 已完成 │ │ +│ │ 讨论 Q2 产品路线图，确定三个重点... │ │ +│ ╰───────────────────────────────────────╯ │ +│ │ +└──────────────────────────────────────────────────┘ ``` -**卡片状态**： -| 状态 | 徽章 | 颜色 | -|---|---|---| -| `pending` | ⏳ 排队中 | muted-foreground | -| `uploading` | ⬆ 上传中 X% | info | -| `transcribing` | ● 转写中 X/Y 片 | warning | -| `summarizing` | ● 总结中 | warning | -| `done` | ✓ 已完成 | success | -| `failed` | ✗ 失败（重试） | danger | +**卡片样式** +- `bg-surface-elevated border border-border rounded-2xl p-5` +- hover：`border-primary/30 shadow-sm` +- 状态徽章：圆点 + 文字，颜色用 `--success / --warning / --danger / --info` -**完成状态**的卡片自动展示总结前 2 行 + 关键词标签，无需点进去也能快速定位。 +**状态机** +| 状态 | 圆点 | 文字 | 背景变化 | +|---|---|---|---| +| `pending` | ⚪ muted-foreground | 排队中 | — | +| `uploading` | 🔵 info | 上传中 X% | 进度条 | +| `transcribing` | 🟠 warning | 转写中 X/Y 片 | 进度条 | +| `summarizing` | 🟠 warning | 总结中 | pulse 动画 | +| `done` | 🟢 success | 已完成 | 展示总结前 2 行 + 关键词 | +| `failed` | 🔴 danger | 失败 · 重试 | 红色边框 | + +完成态的卡片自动显示**总结前 2 行 + 关键词 tag**，列表页就能快速定位，不用点进去。 --- ### Page 3: 会议详情 `/meetings/[id]` ``` -┌────────────────────────────────────────────────────┐ -│ ← 与客户对齐定价 ⋯ │ -│ 2026-04-13 14:30 · 1h 23min · 张三 李四 王总 │ -├────────────────────────────────────────────────────┤ +┌──────────────────────────────────────────────────────┐ +│ ← 与客户对齐定价 ⋯ │ +│ 2026-04-13 14:30 · 1h 23min · 张三 李四 王总 │ +├──────────────────────────────────────────────────────┤ │ ▶ ━━━━━━●━━━━━━━━━━━━━━━━ 00:21 / 1:23:44 │ -│ 1x 2x │ -├─────────────────────────┬──────────────────────────┤ -│ │ │ -│ [转写] [总结] [下载] │ ╭── ⭐ 要点 ──────╮ │ -│ │ │ • 三档定价方案 │ │ -│ [00:00] 张三 ▸ │ │ 已确定 │ │ -│ 大家好，今天主要是 │ │ • 客户接受 Pro │ │ -│ 对齐一下 Q2 的定价 │ │ 档位 $29/mo │ │ -│ 方案，pipeline 基本 │ │ • ... │ │ -│ 已经 ready 了 │ ╰──────────────────╯ │ -│ │ │ -│ [00:15] 李四 ▸ │ ╭── ✅ 待办 ──────╮ │ -│ OK, 我这边准备了三个 │ │ ☐ 张三：周五前 │ │ -│ 档位的方案，分别是... │ │ 出合同草稿 │ │ -│ │ │ ☐ 李四：下周一 │ │ -│ [01:30] 王总 ▸ │ │ 发送定价 deck │ │ -│ 我觉得 Pro 档的 SLA │ │ ☐ ... │ │ -│ 需要再明确一下... │ ╰──────────────────╯ │ -│ │ │ -│ ... │ ╭── 🎯 决议 ──────╮ │ -│ │ │ ✓ 采用三档定价 │ │ -│ │ │ ✓ Pro 档给客户 │ │ -│ │ │ 10% 折扣 │ │ -│ │ ╰──────────────────╯ │ -│ │ │ -│ │ ╭── # 关键词 ────╮ │ -│ │ │ #定价 #Q2 │ │ -│ │ │ #客户 #合同 │ │ -│ │ │ #Pro档位 │ │ -│ │ ╰──────────────────╯ │ -└─────────────────────────┴──────────────────────────┘ +│ 1x ⚙ │ +├─────────────────────────┬────────────────────────────┤ +│ │ │ +│ [转写] [总结] [⬇] │ ╭── ⭐ 要点 ──────────╮ │ +│ │ │ • 三档定价方案已确定 │ │ +│ [00:00] 张三 ▸ │ │ • 客户接受 Pro 档位 │ │ +│ 大家好，今天主要是 │ │ $29/mo │ │ +│ 对齐一下 Q2 的定价 │ │ • 合同细节待补 │ │ +│ 方案，pipeline 基本 │ ╰───────────────────────╯ │ +│ 已经 ready 了 │ │ +│ │ ╭── ✅ 待办 ──────────╮ │ +│ [00:15] 李四 ▸ │ │ ☐ 张三：周五前出 │ │ +│ OK, 我这边准备了三个 │ │ 合同草稿 │ │ +│ 档位的方案，分别是... │ │ ☐ 李四：下周一发 │ │ +│ │ │ 定价 deck │ │ +│ [01:30] 王总 ▸ │ ╰───────────────────────╯ │ +│ 我觉得 Pro 档的 SLA │ │ +│ 需要再明确一下... │ ╭── 🎯 决议 ──────────╮ │ +│ │ │ ✓ 采用三档定价 │ │ +│ ... │ │ ✓ Pro 档给客户 10% │ │ +│ │ │ 折扣 │ │ +│ │ ╰───────────────────────╯ │ +│ │ │ +│ │ ╭── # 关键词 ────────╮ │ +│ │ │ #定价 #Q2 #客户 │ │ +│ │ │ #合同 #Pro档位 │ │ +│ │ ╰───────────────────────╯ │ +└─────────────────────────┴────────────────────────────┘ + +主区左侧 60% 转写 · 右侧 40% 总结四卡 ``` -**关键细节**： -- 左右两栏，左 60% 转写，右 40% 总结四卡 -- 手机端：转写/总结 tab 切换，一次一个 -- 转写每段时间戳可点击 → 音频跳转到对应位置 -- 总结四卡用 Bento 毛玻璃样式（从风格 11 继承） -- 顶部播放器固定 sticky，滚动不消失 -- 右上 ⋯ 菜单：重命名、换引擎重转、删除、导出 MD +**视觉要点** +- 总结四卡：`bg-surface-elevated border border-border rounded-2xl p-5`，四张独立卡垂直排列，不再用 Bento 毛玻璃（亮色下毛玻璃不好看） +- 转写每段：说话人 + 时间戳 + 文本，时间戳**可点击跳转音频** +- 顶部播放器 `sticky top-0`，滚动不消失 +- 每段最大宽度 `max-w-[680px]`（≈ 78 字/行，阅读黄金比例） +- 手机端：转写/总结 Tab 切换，一次一个 + +**Mobile 详情页** +``` +┌──────────────────────┐ +│ ← 与客户对齐定价 │ +│ 14:30 · 1h 23min │ +├──────────────────────┤ +│ ▶ ━━●━━━━━━ 0:21 │ +├──────────────────────┤ +│ [转写] [总结] │ +├──────────────────────┤ +│ 张三 [00:00] │ +│ 大家好，今天主要... │ +│ │ +│ 李四 [00:15] │ +│ OK, 我这边准备... │ +└──────────────────────┘ +``` --- -## 组件清单（复用风格 11 源码） +## 组件复用策略 -**直接抄**（无需改）： -- `components/ui/*` 全部 56 个 shadcn 组件 → copy-paste -- `components/animated-section.tsx` → 页面入场动画包装 +**直接抄**（源码 `sources/10-brandkit-purple/src/components/ui/`）： +- 全部 56 个 shadcn 组件（button / card / progress / badge / tabs / tooltip / sonner / dialog / drawer / sheet / table / skeleton / ...） -**改造**（参考不抄）： -- `components/bento/*` → 看毛玻璃实现，改造成总结四卡 -- `components/header.tsx` → 改造成应用顶栏（不要 Landing 导航） +**改造参考**（`components/brandkit/`）： +- `brandkit-app.tsx` → 主应用 shell（导航 + 路由） +- `desktop-views.tsx` → 7 个桌面页面实现 +- `mobile/` → 5 个移动端页面 +- `onboarding-screen.tsx` → Onboarding 左深右浅（MVP 不用，v2 首次使用引导可抄） -**丢弃**（MVP 不要）： -- `hero-section.tsx` `pricing-section.tsx` `testimonial-*.tsx` `faq-*.tsx` `cta-section.tsx` `footer-section.tsx` +**丢弃**（MeetNote 不需要）： +- Warehouse / Styles / Assets / Camera / Brand Generation 相关业务组件 --- ## 动效原则 -- 页面切换 `fade-in 200ms` -- 卡片入场 `stagger 50ms` delay -- 状态变化 `200ms ease-out` -- **禁止**：3D 翻转、视差滚动、粒子效果（应用不是 Landing） +- 页面切换：`fade 200ms ease-out` +- 卡片入场：`stagger 50ms` delay（最多 10 个，超过不做动画） +- 状态变化：`transition-colors 200ms` +- 转写中状态：圆点 `animate-pulse` +- **禁止**：3D 翻转、视差、粒子、Hover 大幅位移 —— 工具应用要稳 --- -## 无障碍 & 长时阅读 +## 长时阅读优化 -- 对比度 ≥ WCAG AA（暗底白字自然满足） -- 转写正文最大宽度 `max-w-[680px]`（≈ 78 字/行，阅读最优） -- 字体大小可在设置里调（14/15/16/18 四档） -- 可选切换亮色（v2，MVP 暗色 only） +- 对比度 ≥ WCAG AA（近白底近黑字天然满足） +- 转写正文 `max-w-[680px]`（78 字/行） +- 字体大小可在设置调（14/15/16/18 四档，MVP 可选） +- 暗色模式：v2（已预留 `.dark` token） +- 字重不低于 400（亮色背景细字难读） --- -## 微调确认清单 +## 锁定清单 -| 项 | 原风格 11 | MeetNote 版 | 需要你拍板 | -|---|---|---|---| -| 主色饱和度 | 96% 荧光青 | 65% 冷静绿 | ⚠️ 决定 | -| 字体 | system font | DM Sans + Noto Sans SC | ⚠️ 决定 | -| 布局 | Landing（全宽 hero） | Linear 式（侧栏+主区） | ✅ 推荐 | -| 总结四卡样式 | Bento 毛玻璃 | 继承 Bento 毛玻璃 | ✅ 推荐 | -| 亮色模式 | 无 | v2 再加 | ✅ 推荐 | +| 项 | 决策 | 说明 | +|---|---|---| +| 风格基座 | **10 BrandKit Purple**（改造）| scene=应用，Notion/Linear 对标最准 | +| 色调 | **亮色**（暗色 v2 预留）| 长文阅读主流 | +| 主色 | **蓝紫中性** oklch(0.58 0.18 275) | 从原版紫 310° 移到 275°，降饱和 | +| 字体 | **Inter + Noto Sans SC** | 中英混排平衡 | +| 圆角 | **1rem / 2rem**（大圆角）| BrandKit 特征保留 | +| 按钮 | 全圆 rounded-full | BrandKit 特征保留 | +| 布局 | 左侧栏 + 主区 · Mobile 底 Tab | BrandKit 原版已做 | +| 总结卡 | 四张独立卡（不用毛玻璃）| 亮色下纯白卡最干净 | +| 状态色 | success/warning/danger/info | 应用必需，自定义添加 | + +## 历史决策 + +- 2026-04-13 20:XX · ~~初选 11 Dark Dev SaaS~~ → 判定场景不符（落地页导向），废弃 +- 2026-04-13 20:XX · 重选 10 BrandKit Purple（亮色 + 蓝紫中性主色），确认