# Shift 视觉设计规范（DESIGN）

> 版本：1.3.1 ｜ 更新：2026-08-03（网站 favicon 由深墨方底应用图标改回透明背景彩色主标，PNG 兜底同步重导出）
> 本文件是 Shift 视觉的唯一规范源。Logo 资产：[`docs/design/logo/`](design/logo/)（README 已声明现行/弃用清单）
> 基调：**亮色活力消费风**（2026-06 已确认，报纸风被否决）——面向普通打工人/副业人群，亲和、直给、有行动感；与 TruePick 的「研究档案感」刻意区分。
> 上位原则：Logo 使用前先拆「图形 icon」与「背景色」两层，禁止连底整块贴。

---

## 一、Logo

### 1.1 主标：6×6 三色圆点阵

**唯一源文件**：[`design/logo/shift-icon.svg`](design/logo/shift-icon.svg)

**含义**：36 个圆点组成一个完整的信息矩阵。白色网格点代表尚未验证的可能（浅色背景上融入纸面，深色背景上显形），黄色代表正在试验的信号，珊瑚橙构成前进中的 `S` 路径——Shift 帮用户从大量方向中找到值得试的一条。

**构成**（viewBox 400×400）：
| 层 | 规格 |
|----|------|
| 基础点阵 | 6×6 圆点矩阵，圆心间距 58px，圆点半径 24px |
| 三色角色 | 网格白 `#FFFFFF` / 信号黄 `#FFC627` / Shift 珊瑚橙 `#FF4B2E` |
| 核心字形 | 珊瑚橙圆点构成 `S` 的主路径，黄色作为换挡与试验信号 |
| 安全区 | 四周至少保留半个圆点直径，不裁切外圈圆点 |

### 1.2 母版与应用图标

- 彩色主标背景透明、双态可用：浅色背景显示橙 `S` 与黄信号（白网格融入纸面），深色与图片背景显示完整矩阵；纯反白场景使用 `shift-icon-reverse.svg`；
- 单色印刷使用 `shift-icon-mono-ink.svg`，深色单色场景使用 `shift-icon-mono-white.svg`；
- 网站导航 logo 使用反白点阵（深色头部），**favicon 使用透明背景彩色主标 `shift-icon.svg`**（浅色标签页显橙 S 与黄信号、深色标签页显完整矩阵）；头像与应用图标默认使用深墨应用图标 `Shift.svg`；
- 社交活动场景可使用珊瑚橙反白应用图标 `shift-app-orange.svg`；
- 禁止：把圆点改成方点、改变排列或配色位置、添加描边/渐变/投影、拉伸为非正方形。
- 旧资产（信天翁吉祥物、logo-shift.svg 等）已弃用，见 logo 目录 README。

## 二、色板

> 产品 UI 色板继续沿用现有变量；Logo 新增三种专用核心色，UI 主色是否整体迁移另行评审。

| 角色 | 变量 | 值 | 用法 |
|------|------|----|------|
| **Shift 珊瑚橙** | Logo 专用 | `#FF4B2E` | 标志主路径、活动场景应用图标 |
| **信号黄** | Logo 专用 | `#FFC627` | 试验、换挡和信号节点 |
| **网格白** | Logo 专用 | `#FFFFFF` | 未验证可能、矩阵留白点（深色背景显形、浅色背景融入纸面） |
| 产品品牌橙 | `--v-primary` | `#FF593C` | 主按钮、关键链接、强调；暂保留现有 UI 值 |
| 深橙（交互态） | `--v-primary-d` | `#E0552B` | 按钮 hover/按下 |
| **暖纸白（背景）** | `--v-bg` | `#FCFAF6` | 页面背景、透明母版的首选承载色 |
| 卡白 | `--v-card` | `#FFFFFF` | 卡片、弹层 |
| 暖墨 | `--v-ink` | `#1A1814` | 标题、正文 |
| 暖灰 | `--v-muted` | `#6F675B` | 次要文字、说明 |
| 柔边 | `--v-soft` | `#ECE5D8` | 边框、分隔 |
| 活力黄 | `--v-yellow` | `#F7C948` | 点缀/标签/图表第 2 色 |
| 沉静青 | `--v-teal` | `#2E8B83` | 点缀/标签/图表第 3 色 |
| 梅紫 | `--v-plum` | `#7E4E86` | 点缀/图表第 4 色 |

**测评语义色（建议，评级体系上线时定稿）**：靠谱=沉静青、谨慎/有条件=活力黄、避坑=深橙 `#C43A1F`（新增变量 `--v-danger`）。语义色一旦启用即从「装饰」升格为「判定」，与 FOUNDATION「靠真实测评筛掉坑」直接挂钩，不得挪作装饰。

**对比度**：`#1A1814` on `#FCFAF6` ≈ 15:1 ✓；`#FF593C` on `#FCFAF6` ≈ 3.2:1——橙只用于**大字/按钮/图形**，不做小号正文色；橙底上文字用白 `#FFFFFF`（≈ 3.5:1，配 600 字重及以上）。

## 三、字体

两套字体已自托管（`app/static/fonts/`），角色分工：

| 层 | 字体栈 | 用途 |
|----|--------|------|
| **标题+正文（唯一）** | `"Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif` | 全站所有文字（含情怀文案/创始人的话/长文导语）。消费级产品的干净直给；标题 700、强调 500-600、正文 400 |
| **数据等宽** | `"JetBrains Mono", "SF Mono", monospace` | 收益数字、评分、时间投入等测评数据（数字是 Shift 的证据，等宽让它像仪表读数） |

> 2026-08 起取消衬线字体（Source Han Serif / Noto Serif SC）：品牌表达统一为黑体直给，语气靠措辞与字重区分，不再靠字体切换。

规格基线：正文 16px/1.7；H1 32-40px；移动端正文不小于 15px。数字优先真实精确（¥3,217 而不是「约 3 千」），呼应「只写真的」。

## 四、组件基调（与现 vibrant.css 一致，升格为规范）

- **圆角 18px**（`--v-radius`）+ **暖色软阴影**（`--v-shadow`）——消费级的柔和，和 TruePick 的硬边像素刻意相反；
- **主按钮**：品牌橙底 + 白字 + 圆角 18，hover 加深至 `--v-primary-d`；一屏至多一个橙色主按钮（行动指令要唯一）；
- **副业卡片**：卡白底 + 柔边框，关键数据（月收益/上手周期/风险）用等宽字体前置——数据先于故事；
- **标签/徽章**：黄/青/梅三色小圆角标签，饱和底浅字或浅底深字，不混用超过 3 个色；
- **图表**：主橙 + 黄/青/梅四色循环，背景保持暖纸白；
- 页宽：内容区 1080-1200px（库/列表型产品比 Doxa 的单栏论文页宽）。

## 五、落地清单

- [x] `vibrant.css` 已有 `--v-*` 变量体系（本规范即其正式文档）
- [ ] 评审产品 UI 主色是否从 `#FF593C` 对齐至 Logo 珊瑚橙 `#FF4B2E`
- [x] 导航栏使用反白点阵 logo；favicon 使用透明背景彩色主标 `shift-icon.svg`，PNG 兜底（16/32/48 + apple-touch 180）由透明母版导出（2026-08-03 自深墨方底改回透明）
- [ ] 新增 `--v-danger:#C43A1F`（避坑语义色，评级功能上线时启用）
- [ ] 站点标题字重与按钮唯一性走查（每屏一个橙主按钮）

---

*关联：[`FOUNDATION.md`](../FOUNDATION.md)（初心：像创业者一样经营你自己）｜ 公司品牌全景见记忆 miranbit-brand-system 与 Figma「Doxa-Logo」文件*

> **2026-08-01 待定稿提案**：小尺寸（≤40px）白点降噪的紧凑变体与对比预览板见 [`design/logo/_preview/`](design/logo/_preview/)，确认后写入母版并重生成位图。