品牌基线（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」，不说「凭证配置」）。
诚实：如实说「注册送 10 点试用点数」「失败自动退点」「首次安装点『仍要运行』」——不粉饰。
动词优先、句子式大小写：按钮说清「做完会发生什么」（「下载 .exe」而非「获取」）。
同一动作全程同名：按钮「充值」→ 结果提示也用「充值」。

6. 落地：CSS 变量（复制即用）

首页与 portal 落地时把下面这段放进共享样式（如 apps/portal/static/portal/brand.css），Bootstrap 主题变量指向这些值，各页只引用变量、不散写 hex：

: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。

5.8 KiB Raw Blame History Unescape Escape