# MeetNote Design System > 基于风格库 **10 BrandKit Purple** 改造 + Notion/Linear 应用骨架 > 亮色 · 工具应用 · 长文阅读优先 > 2026-04-13 锁定（风格 11 已废弃，理由：落地页导向不匹配工具场景） --- ## 设计哲学 **干净、克制、像 Notion / Linear 一样可以看一下午不累。** - ❌ 不做：花哨渐变、3D 动效、品牌感过强的装饰 - ✅ 保留：oklch 色彩空间、Surface 层级系统、Desktop/Mobile 双端骨架 - ✅ 改造：品牌紫 → 中性蓝紫（更 Linear 理性）、加应用状态色（转写中/已完成） --- ## Tokens（MeetNote 版） ```css :root { /* 背景层级（沿用 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); /* 次级区域 */ --foreground: oklch(0.15 0.02 260); /* 主文字 近黑 */ --muted-foreground: oklch(0.50 0.02 260); /* 次级文字 */ --muted: oklch(0.94 0.01 260); /* 主色 - 候选 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); /* 淡底 */ /* 边框 */ --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); /* 状态色（应用必需，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); /* 信息 蓝 */ /* 深色点缀（Onboarding 欢迎页 + 空态插画用） */ --brand-dark: oklch(0.13 0.02 260); --brand-dark-soft: oklch(0.20 0.02 260); --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: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', 'Sarasa Mono SC', ui-monospace, monospace; ``` **选择理由**： - **Inter**：BrandKit 原版用，中英混排公认平衡点，字宽匀称适合后台工具 - **Noto Sans SC**：中文 fallback，Google 免费，Tailwind 默认栈兼容 - **Geist Mono**：时间戳/文件名用，字形清晰 | 用途 | 大小 | 字重 | 行高 | |---|---|---|---| | 页面标题 | 24px | 600 | 1.3 | | 会议标题 | 18px | 600 | 1.4 | | 正文 / 转写文本 | 15px | 400 | **1.75**（长读优先）| | 时间戳 / 元信息 | 13px | 500 | — | | 角标 / 标签 | 11px | 500 | — | --- ## 布局骨架（Desktop） BrandKit 原版是 **左侧导航 + 右侧内容区**，完美匹配我们需求： ``` ┌─────────┬────────────────────────────────────┐ │ │ │ │ MeetNote│ Page Content │ │ │ │ │ 📤 上传 │ │ │ 📋 会议 │ │ │ 🔍 搜索 │ │ │ │ │ │ ───── │ │ │ ⚙ 设置 │ │ │ 👤 │ │ └─────────┴────────────────────────────────────┘ 侧栏 240px（collapsed 64px）· 主区 flex-1 · 圆角 rounded-2xl ``` **Mobile** (<768px)：底部 Tab Bar 代替侧栏（BrandKit 原版已实现） ``` ┌──────────────────────────┐ │ │ │ Page Content │ │ │ │ │ │ │ ├──────────────────────────┤ │ 📤 📋 🔍 ⚙ │ └──────────────────────────┘ ``` --- ## 三个核心页面线框（亮色） ### Page 1: 上传页 `/upload` ``` ┌───────────────────────────────────────────────────┐ │ │ │ 新建会议 │ │ 把手机录好的音频拖进来 │ │ │ │ ╭────────────────────────────────────────╮ │ │ │ │ │ │ │ ↑ │ │ │ │ │ │ │ │ 拖拽音频文件到这里 │ │ │ │ 或 点击选择文件 │ │ │ │ │ │ │ │ 支持 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% │ │ 15 MB/s · 还需 3 秒 │ ╰────────────────────────────────────────╯ ``` **视觉要点** - 拖拽区：`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%，B 项目 │ │ │ │ 进入测试阶段，下周聚焦上线准备... │ │ │ │ │ │ │ │ #周会 #进度 #排期 │ │ │ ╰───────────────────────────────────────╯ │ │ │ │ ─── 昨天 · 2026-04-12 ───────────── │ │ │ │ ╭───────────────────────────────────────╮ │ │ │ 产品 Review │ │ │ │ 16:00 · 52min │ │ │ │ 🟢 已完成 │ │ │ │ 讨论 Q2 产品路线图，确定三个重点... │ │ │ ╰───────────────────────────────────────╯ │ │ │ └──────────────────────────────────────────────────┘ ``` **卡片样式** - `bg-surface-elevated border border-border rounded-2xl p-5` - hover：`border-primary/30 shadow-sm` - 状态徽章：圆点 + 文字，颜色用 `--success / --warning / --danger / --info` **状态机** | 状态 | 圆点 | 文字 | 背景变化 | |---|---|---|---| | `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 · 张三 李四 王总 │ ├──────────────────────────────────────────────────────┤ │ ▶ ━━━━━━●━━━━━━━━━━━━━━━━ 00:21 / 1:23:44 │ │ 1x ⚙ │ ├─────────────────────────┬────────────────────────────┤ │ │ │ │ [转写] [总结] [⬇] │ ╭── ⭐ 要点 ──────────╮ │ │ │ │ • 三档定价方案已确定 │ │ │ [00:00] 张三 ▸ │ │ • 客户接受 Pro 档位 │ │ │ 大家好，今天主要是 │ │ $29/mo │ │ │ 对齐一下 Q2 的定价 │ │ • 合同细节待补 │ │ │ 方案，pipeline 基本 │ ╰───────────────────────╯ │ │ 已经 ready 了 │ │ │ │ ╭── ✅ 待办 ──────────╮ │ │ [00:15] 李四 ▸ │ │ ☐ 张三：周五前出 │ │ │ OK, 我这边准备了三个 │ │ 合同草稿 │ │ │ 档位的方案，分别是... │ │ ☐ 李四：下周一发 │ │ │ │ │ 定价 deck │ │ │ [01:30] 王总 ▸ │ ╰───────────────────────╯ │ │ 我觉得 Pro 档的 SLA │ │ │ 需要再明确一下... │ ╭── 🎯 决议 ──────────╮ │ │ │ │ ✓ 采用三档定价 │ │ │ ... │ │ ✓ Pro 档给客户 10% │ │ │ │ │ 折扣 │ │ │ │ ╰───────────────────────╯ │ │ │ │ │ │ ╭── # 关键词 ────────╮ │ │ │ │ #定价 #Q2 #客户 │ │ │ │ │ #合同 #Pro档位 │ │ │ │ ╰───────────────────────╯ │ └─────────────────────────┴────────────────────────────┘ 主区左侧 60% 转写 · 右侧 40% 总结四卡 ``` **视觉要点** - 总结四卡：`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, 我这边准备... │ └──────────────────────┘ ``` --- ## 组件复用策略 **直接抄**（源码 `sources/10-brandkit-purple/src/components/ui/`）： - 全部 56 个 shadcn 组件（button / card / progress / badge / tabs / tooltip / sonner / dialog / drawer / sheet / table / skeleton / ...） **改造参考**（`components/brandkit/`）： - `brandkit-app.tsx` → 主应用 shell（导航 + 路由） - `desktop-views.tsx` → 7 个桌面页面实现 - `mobile/` → 5 个移动端页面 - `onboarding-screen.tsx` → Onboarding 左深右浅（MVP 不用，v2 首次使用引导可抄） **丢弃**（MeetNote 不需要）： - Warehouse / Styles / Assets / Camera / Brand Generation 相关业务组件 --- ## 动效原则 - 页面切换：`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 四档，MVP 可选） - 暗色模式：v2（已预留 `.dark` token） - 字重不低于 400（亮色背景细字难读） --- ## 锁定清单 | 项 | 决策 | 说明 | |---|---|---| | 风格基座 | **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（亮色 + 蓝紫中性主色），确认