122 lines
5.8 KiB
Markdown
122 lines
5.8 KiB
Markdown
# 品牌基线（Brand Tokens）
|
||
|
||
> cmhub 的视觉单一真相源。首页、用户端（portal）、后台（admin 部分）、桌面端（品牌层）都引用本文；**一致的是这套 token（色/字/logo/术语/语气），布局按各自的活儿来**。
|
||
> 取自选定的首页原型 `prototypes/cmhub-homepage-v1.svg`（「生成台」方向）。
|
||
|
||
## 0. 一句话定位
|
||
|
||
cmhub 有双重身份——**AI 生成** ＋ **按点数计费**。视觉主线就用两种颜色编码这两件事：**靛蓝＝生成**，**琥珀＝点数**。
|
||
|
||
## 1. 配色（Color）
|
||
|
||
| Token | Hex | 角色 / 用途 |
|
||
| --- | --- | --- |
|
||
| `--cm-paper` | `#F5F7FB` | 页面背景（冷调纸白，**不是** cream） |
|
||
| `--cm-card` | `#FFFFFF` | 卡片 / 面板 |
|
||
| `--cm-ink-strong` | `#161C2B` | 大标题 |
|
||
| `--cm-ink` | `#1A2030` | 正文主色 |
|
||
| `--cm-ink-soft` | `#5A6478` | 次要文字 / 说明 |
|
||
| `--cm-faint` | `#8A93A6` | 弱文字 / 占位 |
|
||
| `--cm-line` | `#DCE1EC` | 分隔线 / 描边 |
|
||
| **`--cm-indigo`** | `#5B4BEF` | **生成 / AI / 主行动**（主按钮、链接、强调） |
|
||
| `--cm-indigo-deep` | `#3A2FB0` | 靛蓝渐变深端 |
|
||
| **`--cm-amber`** | `#E8A02D` | **点数 / 额度 / 价值**（点数数字、计量、价格标签） |
|
||
| `--cm-amber-ink` | `#C9821A` | 琥珀文字（浅底上可读的深琥珀） |
|
||
| `--cm-mint` | `#3FCB7E` | 成功 / 生成完成（**克制使用**，只做状态点/对勾） |
|
||
| `--cm-chip-indigo` | `#ECEBFF` | 靛蓝浅底 chip |
|
||
| `--cm-chip-amber` | `#FBEFD9` | 琥珀浅底 chip |
|
||
| `--cm-band-1` | `#1B1740` | 深色计费段渐变（起） |
|
||
| `--cm-band-2` | `#2A1E5E` | 深色计费段渐变（止） |
|
||
|
||
**用色纪律**：
|
||
- 靛蓝和琥珀**各司其职**，别混用（琥珀专属点数/价值，靛蓝专属生成/行动）。
|
||
- 整页浅色，深色只用在**计费段**一处，给长页面重心和呼吸。
|
||
- mint 只点缀「成功/在线」，不当主色。
|
||
|
||
## 2. 字体（Type）
|
||
|
||
**字体栈**：
|
||
|
||
```
|
||
拉丁展示/正文：'Space Grotesk', system-ui, sans-serif
|
||
中文：'PingFang SC','Microsoft YaHei','Noto Sans SC', sans-serif
|
||
等宽（点数/SHA256/API Key/代码/端点）：'JetBrains Mono','SFMono-Regular',Consolas, monospace
|
||
```
|
||
|
||
**类型阶梯（桌面基准）**：
|
||
|
||
| 角色 | 字号 / 字重 | 备注 |
|
||
| --- | --- | --- |
|
||
| H1 / Hero | 56–58 / 700 | 字距 `-1.5px` |
|
||
| 区块标题 | 38 / 700 | 字距 `-0.8px` |
|
||
| 卡片标题 | 22 / 700 | |
|
||
| 引导语 lead | 19 / 400 | `--cm-ink-soft` |
|
||
| 正文 | 15.5 / 400 | |
|
||
| eyebrow / 标签 | 13 / 600 | 字距 `+3~4px`，`--cm-indigo` |
|
||
| 数据 / 等宽 | 14 / 500 | 点数、校验值、Key、端点用等宽 |
|
||
|
||
**规矩**：点数、SHA256、API Key、接口端点一律**等宽字体**——它们是「可复制的精确值」，等宽传达这一点。
|
||
|
||
## 3. Logo / 图标
|
||
|
||
- **Wordmark**：计量 glyph ＋ `cmhub`（700）。glyph = **三根递增的竖条，最后一根琥珀色**，隐喻「点数计量」。
|
||
- **圆角**：小元素 `14px`，大卡片 `20px`。
|
||
- **图标**：几何线性，描边 `2–2.4px`，靛蓝/琥珀，圆角端点。
|
||
|
||
## 4. 术语（用词一致，跨端统一）
|
||
|
||
界面用词是导航系统，各端必须一致。
|
||
|
||
| 概念 | ✅ 用 | ❌ 别用 |
|
||
| --- | --- | --- |
|
||
| 计费单位 | **点数** | 积分 / 额度 / credit（对外文案不用） |
|
||
| 对外模型标识 | **能力别名**（如 `title-standard`） | 模型名 / SKU（不暴露给用户） |
|
||
| 两个操作 | **生成标题** / **生成主图（改图）** | 文生图/AI 画图（口径不统一） |
|
||
| 鉴权凭证 | **API Key** | 密钥 / token（对外统一叫 API Key） |
|
||
| 加点 | **充值** | 付费 / 购买点数 |
|
||
| 扣/退 | **扣点** / **退点** | 扣费 / 退款（退款专指钱） |
|
||
|
||
## 5. 语气（Voice）
|
||
|
||
- **说人话**：按用户看得懂的说，不用系统术语（说「管理 API Key」，不说「凭证配置」）。
|
||
- **诚实**：如实说「注册送 100 点试用点数」「失败自动退点」「首次安装点『仍要运行』」——不粉饰。
|
||
- **动词优先、句子式大小写**：按钮说清「做完会发生什么」（「下载 .exe」而非「获取」）。
|
||
- **同一动作全程同名**：按钮「充值」→ 结果提示也用「充值」。
|
||
|
||
## 6. 落地：CSS 变量（复制即用）
|
||
|
||
首页与 portal 落地时把下面这段放进共享样式（如 `apps/portal/static/portal/brand.css`），Bootstrap 主题变量指向这些值，**各页只引用变量、不散写 hex**：
|
||
|
||
```css
|
||
:root{
|
||
--cm-paper:#F5F7FB; --cm-card:#FFFFFF;
|
||
--cm-ink-strong:#161C2B; --cm-ink:#1A2030; --cm-ink-soft:#5A6478; --cm-faint:#8A93A6;
|
||
--cm-line:#DCE1EC;
|
||
--cm-indigo:#5B4BEF; --cm-indigo-deep:#3A2FB0;
|
||
--cm-amber:#E8A02D; --cm-amber-ink:#C9821A;
|
||
--cm-mint:#3FCB7E;
|
||
--cm-chip-indigo:#ECEBFF; --cm-chip-amber:#FBEFD9;
|
||
--cm-band-1:#1B1740; --cm-band-2:#2A1E5E;
|
||
--cm-radius:14px; --cm-radius-lg:20px;
|
||
--cm-font-cjk:'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
|
||
--cm-font-latin:'Space Grotesk',system-ui,sans-serif;
|
||
--cm-font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
|
||
--cm-btn:linear-gradient(#6455F2,#4335CF);
|
||
--cm-thread:linear-gradient(#5B4BEF,#E8A02D);
|
||
}
|
||
```
|
||
|
||
## 7. 应用范围
|
||
|
||
| 界面 | 一致要求 |
|
||
| --- | --- |
|
||
| **首页**（T-606） | 全套 token，视觉即原型 v1 |
|
||
| **用户端 portal**（dashboard/记录/充值/API Key） | **同套 token**，与首页一致（避免落地页精致、控制台朴素的割裂）——见 T-606 验收 |
|
||
| **django-admin** | 主要靠 Django 自带 + 中文化（T-602/603）；不强求，但主色/logo 可选对齐 |
|
||
| **桌面端 cmbot** | **品牌层对齐**（logo、主色靛蓝×琥珀、术语），UI 布局按桌面工具习惯，**渐进靠拢、单独排期** |
|
||
|
||
## 关联
|
||
|
||
- 首页原型：`prototypes/cmhub-homepage-v1.svg`（选定）、`cmhub-homepage-v2.svg`（开发者页参考）。
|
||
- 任务：`06-tasks.md` T-606。
|