# TVU Branding · 速查

> **目的**：人 + AI 接入 TVU 项目时一站式查"TVU 品牌是什么颜色 / Logo / 字体"
> **真源 token**：`src/tokens/variables.css`（dark + light mode 完整变量定义）
> **本文件作用**：把 token 表 + 应用场景 + Logo 用法编织成一页可读速查；权威以 `variables.css` 为准

---

## ⚡ 1 秒速查：TVU 品牌色

| 模式 | 主品牌 | Hover | Disable | 用途 |
|---|---|---|---|---|
| **Dark**（默认消费产品 UI） | **`#2fb54e`** | `#41c760` | `#1a652c` | 按钮 / 强调 / 选中态 / 标题强调 |
| **Light** | `#299f45` | `#00ac39` | `#8fcc9d` | 同上，浅色场景 |
| **Logo**（独立保留） | `#56AF31` / `#50B848` | — | — | 仅 TVU / TS logo 本身 |

**最常用**：`#2fb54e` — 写 Marp 主题 / mockup 强调色 / 文档配色示例 一律用这个。

---

## 完整 Token 表

来自 `src/tokens/variables.css`（节选）。**实际应用时引用 token 不要 hardcode hex**（CSS 用 `var(--brand)` / 图形软件创建 Color Style）。

### Dark Mode（默认）

| Token | Hex | 语义 |
|---|---|---|
| `--brand` | `#2fb54e` | 主品牌色 |
| `--brand-hover` | `#41c760` | hover 高亮 |
| `--brand-disable` | `#1a652c` | 禁用态深绿 |
| `--brand-match` | `#0b2b13` | 最深匹配色（与品牌色搭配的极深背景）|
| `--msg-bg-brand` | `#19311e` | 品牌色背景（subtle elevation）|
| `--green-bg` | `var(--brand-match)` | 别名 |
| `--text-primary-btn` | `#ffffff` | 品牌色按钮上的文字 |

### Light Mode

| Token | Hex |
|---|---|
| `--brand` | `#299f45` |
| `--brand-hover` | `#00ac39` |
| `--brand-disable` | `#8fcc9d` |
| `--brand-match` | `#f1fbf3` |
| `--msg-bg-brand` | `#daf2df` |

---

## Logo 颜色（独立于 token）

TVU / TS Logo 保留固定品牌色 `#56AF31` / `#50B848`，**不**用 `--brand` token。

**Why**: Logo 是品牌识别核心，跨主题切换（dark/light/print/印刷）必须保持一致；UI 强调色可以随主题切换，Logo 不能。

**适用范围**：
- TVU logo SVG/PNG（详见 `src/icons/raw.ts`）
- TS Streaming logo
- 印刷 / 物料 / 名片

**反模式**：把 Logo 改成 `--brand` token——主题切换时 Logo 颜色跟着变，破坏品牌识别。

---

## 应用场景对照

| 场景 | 用什么 |
|---|---|
| Marp 主题 / 幻灯片 | `#2fb54e`（dark mode）|
| Mockup 强调色 | `var(--brand)` token，从 TVU library 拿，**不 hardcode hex** |
| PRD / 文档示例图 | `#2fb54e` 或 logo green |
| PPTX / PDF / Slack 卡片 | `#2fb54e` |
| 印刷物料 / 名片 / 海报 | Logo green `#56AF31` |
| 按钮 hover 态 | `#41c760` |
| 禁用按钮 | `#1a652c` |
| 选中行 left rail | `var(--brand)`（TVU library `selected indicator` component）|

---

## How to Verify（写代码 / 写文档前的 reflex）

涉及任何"TVU 品牌色"的 hex 写出前，**必须**先：

```bash
# 拿真值（grep 真源）
grep -E "brand" tvu-design-system/src/tokens/variables.css | grep "#"

# 在 sibling 项目中（cwd 不在 tvu-design-system）
grep -E "brand" /path/to/tvu-design-system/src/tokens/variables.css | grep "#"
```

**Why this matters**: 2026-05-21 实证 — AI 凭印象写 `#1f4e8c`（蓝）作为 TVU 品牌色，污染 6 文件。真值 `#2fb54e` 早就在真源里，**一行 grep 就能拿**。

**详细规则**：见 `tvu-design-system/.claude/skills/consumer-product-conventions/SKILL.md` Rule 2。

---

## 字体（占位段）

> 待补：TVU 标准字体规范（中英文家族、weight 表、Marp 主题用字体）
>
> 当前 `tvu-dark.css` Marp 主题用：
> - Sans: `-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif`
> - Mono: `'JetBrains Mono', 'SF Mono', 'Menlo', monospace`

---

## 反模式（致命错误）

| ❌ 反模式 | ✅ 正确做法 |
|---|---|
| 把品牌色当成蓝色（深蓝 / 靛蓝 / 海军蓝任意 hex） | 查 token，TVU 是**绿色** `#2fb54e` |
| 不查 token 就 hardcode hex（colour drift） | 引用 `var(--brand)` token；如必须 hex 先 grep 真源 |
| 用 Bootstrap / Material default primary | 不一定是 TVU 品牌色，必查 |
| 混淆 logo 色 `#56AF31` 与 brand token `#2fb54e` | Logo 用 logo 色；UI 用 `--brand` |
| 改了品牌色没同步 `BRANDING.md` | 改 token 同时改本文件 + 通知 consumer maintainer |

---

> **维护**：本文件由 TVU 设计系统 maintainer 与 token 真源同步更新。
> **变更协议**：改本文件 → 检查 `src/tokens/variables.css` 是否同步 → 通知所有 consumer maintainer。