kangwan/meetnote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: switch base style from 11 Dark Dev SaaS to 10 BrandKit Purple

Browse Source 
- Reason: style 11 is landing-page oriented, mismatch for tool app
- Pick 10 BrandKit Purple (scene=app, Notion/Linear parallel)
- Light mode locked (long-form reading), dark mode reserved for v2
- Primary color: shift from BrandKit purple 310° to neutral blue-purple 275° oklch(0.58 0.18 275)
- Keep Inter + Noto Sans SC for mixed zh-en typography
- Rewrite all three page wireframes for light theme
- Inherit BrandKit's Surface layer system and large rounded corners

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kang
2026-04-13 18:51:54 +08:00
parent 0b966c63ef
commit 160de60ac0
1 changed files with 278 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

428
.memory/design-system.md
View File

@@ -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,99 +20,126 @@
```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] │
┌─────────┬────────────────────────────────────┐
│ │ │
│ MeetNote│ Page Content │
│ │ │
│ 📤 上传 │ │
│ 📋 会议 │ │
│ 🔍 搜索 │ │
│ │ │
│ ───── │ │
│ ⚙ 设置 │ │
│ 👤 │ │
└─────────┴────────────────────────────────────┘
侧栏 240px（collapsed 64px）· 主区 flex-1 · 圆角 rounded-2xl
```
**Mobile** (<768px)：底部 Tab Bar 代替侧栏（BrandKit 原版已实现）
```
┌──────────────────────────┐
│ │
│ logo ┌──── page content ────┐ │
│ │ │ │
│ 📤 上传 │ │ │
│ 📋 会议列表 │ │ │
│ 🔍 搜索(v2) │ │ │
│ │ │ │
│ ───── │ │ │
│ ⚙ 设置 │ │ │
│ └───────────────────────┘ │
└─────────────────────────────────────────────┘
响应式：
< 768px → 侧栏变底部 tab bar
≥ 768px → 侧栏固定左侧
│ Page Content │
│ │
│ │
│ │
├──────────────────────────┤
│ 📤 📋 🔍 ⚙ │
└──────────────────────────┘
```
---
## 三个核心页面线框
## 三个核心页面线框（亮色）
### Page 1: 上传页 `/upload`
```
┌─────────────────────────────────────────────────┐
┌───────────────────────────────────────────────────┐
│ │
│ 新建会议 │
│ 手机录好后直接拖进来 │
│ 把手机录好的音频拖进来 │
│ │
│ ╭───────────────────────────────────────╮ │
│ ╭────────────────────────────────────────╮ │
│ │ │ │
│ │ ⬆ │ │
│ │ ↑ │ │
│ │ │ │
│ │ 拖拽音频文件到这里 │ │
│ │ 或 点击选择文件 │ │
@@ -119,177 +147,217 @@
│ │ 支持 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 ━━━ │
│ ─── 今天 · 2026-04-13 ───────────── │
│ │
│ ╭─────────────────────────────────────╮ │
│ │ 🎙 与客户对齐定价 │ │
│ │ 14:30 1h 23min │ │
│ │ ● 转写中 3/5 片 │ │
│ │ ▓▓▓▓▓▓░░░░ 60% │ │
│ ╰─────────────────────────────────────╯ │
│ │
│ ╭─────────────────────────────────────╮ │
│ │ 🎙 团队周会 │ │
│ │ 10:00 45min · 张三 李四 王五 │ │
│ │ ✓ 已完成 │ │
│ ╭───────────────────────────────────────╮ │
│ │ 与客户对齐定价 │ │
│ │ 14:30 · 1h 23min │ │
│ │ │ │
│ │ 🟠 转写中 3/5 片 │ │
│ │ ▓▓▓▓▓▓░░░░ 60% │ │
│ ╰───────────────────────────────────────╯ │
│ │
│ ╭───────────────────────────────────────╮ │
│ │ 团队周会 │ │
│ │ 10:00 · 45min · 张三 李四 王五 │ │
│ │ │ │
│ │ 🟢 已完成 │ │
│ │ │ │
│ │ 本周关键进展：A 项目完成 80%，B 项目 │ │
│ │ 进入测试阶段，下周聚焦上线准备... │ │
│ │ │ │
│ │ "本周关键进展：A 项目完成 80%..." │ │
│ │ #周会 #进度 #排期 │ │
│ ╰─────────────────────────────────────╯ │
│ ╰───────────────────────────────────────╯ │
│ │
│ ━━━ 昨天 · 2026-04-12 ━━━ │
│ ─── 昨天 · 2026-04-12 ───────────── │
│ │
│ ╭─────────────────────────────────────╮ │
│ │ 🎙 产品 Review │ │
│ │ 16:00 52min │ │
│ │ ✓ 已完成 │ │
│ │ "讨论 Q2 产品路线图，确定三个重点..." │ │
│ ╰─────────────────────────────────────╯ │
│ ╭───────────────────────────────────────╮ │
│ │ 产品 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 · 张三 李四 王总 │
├────────────────────────────────────────────────────┤
├──────────────────────────────────────────────────────┤
│ ▶ ━━━━━━●━━━━━━━━━━━━━━━━ 00:21 / 1:23:44 │
│ 1x 2x │
├─────────────────────────┬──────────────────────────┤
│ 1x ⚙ │
├─────────────────────────┬────────────────────────────┤
│ │ │
│ [转写] [总结] [下载] │ ╭── ⭐ 要点 ──────╮ │
│ │ │ • 三档定价方案 │ │
│ [00:00] 张三 ▸ │ │ 已确定 │ │
│ 大家好，今天主要是 │ │ • 客户接受 Pro │ │
│ 对齐一下 Q2 的定价 │ │ 档位 $29/mo │ │
│ 方案，pipeline 基本 │ │ • ... │ │
│ 已经 ready 了 │ ╰──────────────────╯ │
│ │ │
│ [00:15] 李四 ▸ │ ╭── ✅ 待办 ──────╮ │
│ OK, 我这边准备了三个 │ │ ☐ 张三：周五前 │ │
│ 档位的方案，分别是... │ │ 出合同草稿 │ │
│ │ │ ☐ 李四：下周一 │ │
│ [01:30] 王总 ▸ │ │ 发送定价 deck │ │
│ 我觉得 Pro 档的 SLA │ │ ☐ ... │ │
│ 需要再明确一下... │ ╰──────────────────╯ │
│ │ │
│ ... │ ╭── 🎯 决议 ──────╮ │
│ [转写] [总结] [⬇] │ ╭── ⭐ 要点 ──────────╮ │
│ │ │ • 三档定价方案已确定 │ │
│ [00:00] 张三 ▸ │ │ • 客户接受 Pro 档位 │ │
│ 大家好，今天主要是 │ │ $29/mo │ │
│ 对齐一下 Q2 的定价 │ │ • 合同细节待补 │ │
│ 方案，pipeline 基本 │ ╰───────────────────────╯ │
│ 已经 ready 了 │ │
│ │ ╭── ✅ 待办 ──────────╮ │
│ [00:15] 李四 ▸ │ │ ☐ 张三：周五前出 │ │
│ OK, 我这边准备了三个 │ │ 合同草稿 │ │
│ 档位的方案，分别是... │ │ ☐ 李四：下周一发 │ │
│ │ │ 定价 deck │ │
│ [01:30] 王总 ▸ │ ╰───────────────────────╯ │
│ 我觉得 Pro 档的 SLA │ │
│ 需要再明确一下... │ ╭── 🎯 决议 ──────────╮ │
│ │ │ ✓ 采用三档定价 │ │
│ │ │ ✓ Pro 档给客户 │ │
│ │ │ 10% 折扣 │ │
│ │ ╰──────────────────╯ │
│ ... │ │ ✓ Pro 档给客户 10% │ │
│ │ │ 折扣 │ │
│ │ ╰───────────────────────╯ │
│ │ │
│ │ ╭── # 关键词 ────╮ │
│ │ │ #定价 #Q2 │ │
│ │ │ #客户 #合同 │ │
│ │ │ #Pro档位 │ │
│ │ ╰──────────────────╯ │
└─────────────────────────┴──────────────────────────┘
│ │ ╭── # 关键词 ────────╮ │
│ │ │ #定价 #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（亮色 + 蓝紫中性主色），确认