# 受 Pinterest 启发的设计系统

> Category: 媒体与消费
> 视觉发现。红色点缀，瀑布流网格，图片优先。

## 1. 视觉主题与氛围

Pinterest 的网站是一块温暖、充满灵感的画布，将视觉发现体验打造得如同生活方式杂志。设计基于柔和、略带暖意的白色背景，以 Pinterest 红（`#e60023`）作为唯一醒目的品牌点缀色。与大多数科技平台的冷蓝色调不同，Pinterest 的中性色系带有明显的暖色调——灰色偏向橄榄/沙色（`#91918c`、`#62625b`、`#e5e5e0`），而非冷钢色，营造出温馨、手工感十足的氛围，让人忍不住想要浏览下去。

字体使用 Pin Sans——一款定制专属字体，拥有宽泛的备用字体栈（包含日文字体），体现了 Pinterest 的全球影响力。在展示级别（70px，字重 600），Pin Sans 打造出宽大、亲切的标题。在较小尺寸下，系统保持紧凑：按钮 12px，说明文字 12–14px。CSS 变量命名体系（`--comp-*`、`--sema-*`、`--base-*`）揭示了一套精密的三层设计 token 架构：组件层、语义层和基础层 token。

Pinterest 的特色在于其慷慨的圆角系统（12px–40px，加上圆形的 50%）以及带暖色调的按钮背景。次要按钮（`#e5e5e0`）呈现出明显的暖沙色调，而非冷灰色。主要红色按钮使用 16px 圆角——圆润但不是药丸形。结合暖色徽章背景（`hsla(60,20%,98%,.5)`——微妙的暖黄色调）以及以摄影为主导的版面，最终呈现出一种手工感、个性化的设计，而非企业化、千篇一律的风格。

**关键特征：**
- 带橄榄/沙色中性色的暖白色画布——温馨，而非冷峻
- Pinterest 红（`#e60023`）作为唯一醒目的点缀色——从不低调，始终自信
- Pin Sans 定制字体，配备全球备用字体栈（含 CJK）
- 三层 token 架构：`--comp-*` / `--sema-*` / `--base-*`
- 暖色次要表面：沙灰色（`#e5e5e0`）、暖色徽章（`hsla(60,20%,98%,.5)`）
- 慷慨的圆角：标准 16px，大容器最高 40px
- 摄影内容优先——图钉/图像是主要视觉元素
- 深近紫色文字（`#211922`）——温暖，带一丝梅红色

## 2. 色彩调色板与用途

### 主品牌色
- **Pinterest 红**（`#e60023`）：主要 CTA、品牌点缀——醒目、自信的红色
- **绿色 700**（`#103c25`）：`--base-color-green-700`，成功/自然点缀
- **绿色 700 悬停**（`#0b2819`）：`--base-color-hover-green-700`，按下的绿色

### 文字色
- **梅黑色**（`#211922`）：主要文字——带梅红色调的暖近黑色
- **纯黑**（`#000000`）：次要文字、按钮文字
- **橄榄灰**（`#62625b`）：次要描述，低调文字
- **暖银色**（`#91918c`）：`--comp-button-color-text-transparent-disabled`，禁用文字，输入框边框
- **白色**（`#ffffff`）：深色/彩色表面上的文字

### 交互色
- **焦点蓝**（`#435ee5`）：`--comp-button-color-border-focus-outer-transparent`，焦点环
- **性能紫**（`#6845ab`）：`--sema-color-hover-icon-performance-plus`，性能功能
- **推荐紫**（`#7e238b`）：`--sema-color-hover-text-recommendation`，AI 推荐
- **链接蓝**（`#2b48d4`）：链接文字颜色
- **Facebook 蓝**（`#0866ff`）：`--facebook-background-color`，社交登录
- **按下蓝**（`#617bff`）：`--base-color-pressed-blue-200`，按下状态

### 表面与边框
- **沙灰色**（`#e5e5e0`）：次要按钮背景——温暖，手工感
- **暖亮色**（`#e0e0d9`）：圆形按钮背景，徽章
- **暖色调**（`hsla(60, 20%, 98%, 0.5)`）：`--comp-badge-color-background-wash-light`，微妙的暖色徽章背景
- **雾色**（`#f6f6f3`）：浅色表面（50% 不透明度）
- **禁用边框**（`#c8c8c1`）：`--sema-color-border-disabled`，禁用边框
- **悬停灰**（`#bcbcb3`）：`--base-color-hover-grayscale-150`，悬停边框
- **深色表面**（`#33332e`）：深色区域背景

### 语义色
- **错误红**（`#9e0a0a`）：复选框/表单错误状态

## 3. 字体规则

### 字体家族
- **主字体**：`Pin Sans`，备用字体：`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`

### 层次结构

| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
|------|------|------|--------|-------------|----------------|-------|
| 展示主标题 | Pin Sans | 70px (4.38rem) | 600 | normal | normal | 最大视觉冲击力 |
| 区块标题 | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | 负字间距 |
| 正文 | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | 标准阅读 |
| 加粗说明 | Pin Sans | 14px (0.88rem) | 700 | normal | normal | 强调元数据 |
| 说明 | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | 小字，标签 |
| 按钮 | Pin Sans | 12px (0.75rem) | 400 | normal | normal | 按钮标签 |

### 原则
- **紧凑字号体系**：字号范围 12px–70px，跨度显著——大多数功能性文字为 12–16px，营造密集的应用感信息层次。
- **暖色字重分布**：标题 600–700，正文 400–500。无超轻字重——文字始终感觉有分量。
- **标题负字间距**：28px 标题的 -1.2px 字间距创造出温馨、亲近的区块标题感。
- **单一字体家族**：Pin Sans 承担所有排版——未检测到次要展示或等宽字体。

## 4. 组件样式

### 按钮

**主要红色按钮**
- 背景：`#e60023`（Pinterest 红）
- 文字：`#000000`（黑色——在红色上的对比度是个不寻常的选择）
- 内边距：6px 14px
- 圆角：16px（圆润但非药丸形）
- 边框：`2px solid rgba(255, 255, 255, 0)`（透明）
- 焦点：通过 CSS 变量实现的语义边框 + 轮廓

**次要沙色按钮**
- 背景：`#e5e5e0`（暖沙灰色）
- 文字：`#000000`
- 内边距：6px 14px
- 圆角：16px
- 焦点：相同的语义边框系统

**圆形操作按钮**
- 背景：`#e0e0d9`（暖亮色）
- 文字：`#211922`（梅黑色）
- 圆角：50%（圆形）
- 用途：图钉操作、导航控件

**幽灵/透明按钮**
- 背景：透明
- 文字：`#000000`
- 无边框
- 用途：第三级操作

### 卡片与容器
- 以摄影为主的图钉卡片，慷慨的圆角（12px–20px）
- 大多数卡片无传统盒阴影
- 白色或暖雾色背景
- 部分图片容器有 8px 白色厚边框

### 输入框
- 邮箱输入框：白色背景，`1px solid #91918c` 边框，16px 圆角，11px 15px 内边距
- 焦点：通过 CSS 变量实现的语义边框 + 轮廓系统

### 导航
- 白色或暖色背景上的简洁顶部栏
- Pinterest logo + 搜索栏居中
- 导航链接 Pin Sans 16px
- 活跃状态使用 Pinterest 红色点缀

### 图片处理
- 图钉式瀑布流网格（Pinterest 标志性版面）
- 图片圆角：12px–20px
- 摄影作为主要内容——每个图钉都是一张图片
- 精选图片容器有 8px 白色厚边框

## 5. 版面原则

### 间距系统
- 基础单位：8px
- 刻度：4px、6px、7px、8px、10px、11px、12px、16px、18px、20px、22px、24px、32px、80px、100px
- 大跳跃：32px → 80px → 100px 用于区块间距

### 网格与容器
- 图钉内容使用瀑布流网格（标志性版面）
- 居中内容区块，充裕的最大宽度
- 全宽深色页脚
- 搜索栏作为主要导航元素

### 留白哲学
- **灵感密度**：瀑布流网格将图钉紧密排列——内容密度本身就是价值主张。留白存在于区块之间，而非网格内部。
- **上方呼吸，下方密集**：主角/特色区块获得充裕的内边距；图钉网格紧凑而沉浸。

### 圆角体系
- 标准（12px）：小卡片，链接
- 按钮（16px）：按钮、输入框、中等卡片
- 舒适（20px）：特色卡片
- 大（28px）：大容器
- 区块（32px）：标签元素，大面板
- 主角（40px）：主角容器，大型特色块
- 圆形（50%）：操作按钮，标签指示器

## 6. 层次与阴影

| 层级 | 处理方式 | 用途 |
|-------|-----------|-----|
| 扁平（0 级）| 无阴影 | 默认——图钉依靠内容而非阴影 |
| 微妙（1 级）| 最小阴影（来自 token） | 悬浮叠层，下拉菜单 |
| 焦点（无障碍）| `--sema-color-border-focus-outer-default` 环 | 焦点状态 |

**阴影哲学**：Pinterest 使用极少的阴影。瀑布流网格依靠内容（摄影）创造视觉趣味，而非依靠提升效果。深度来自表面颜色的温暖感和容器的慷慨圆角。

## 7. 应做与不应做

### 应做
- 使用暖中性色（`#e5e5e0`、`#e0e0d9`、`#91918c`）——橄榄/沙色调是品牌标识
- 仅将 Pinterest 红（`#e60023`）用于主要 CTA——它醒目且唯一
- 专一使用 Pin Sans——一种字体统揽一切
- 应用慷慨的圆角：按钮/输入框 16px，卡片 20px+
- 保持瀑布流网格的密集感——内容密度就是价值
- 使用暖色徽章背景（`hsla(60,20%,98%,.5)`）实现微妙的暖色调
- 主要文字使用 `#211922`（梅黑色）——比纯黑更温暖

### 不应做
- 不要使用冷灰色中性色——始终保持暖色/橄榄色调
- 不要使用纯黑（`#000000`）作为主要文字——使用梅黑色（`#211922`）
- 不要使用药丸形按钮——16px 圆角是圆润的，但不是药丸形
- 不要添加厚重阴影——Pinterest 设计上是扁平的，深度来自内容
- 不要在卡片上使用小圆角（<12px）——慷慨的圆角是核心
- 不要引入额外的品牌色——红色+暖中性色就是完整的色彩体系
- 不要使用细字重——Pin Sans 最低 400

## 8. 响应式行为

### 断点
| 名称 | 宽度 | 主要变化 |
|------|-------|-------------|
| 移动端 | <576px | 单列，紧凑布局 |
| 大移动端 | 576–768px | 2 列图钉网格 |
| 平板 | 768–890px | 扩展网格 |
| 小桌面 | 890–1312px | 标准瀑布流网格 |
| 桌面 | 1312–1440px | 完整布局 |
| 大桌面 | 1440–1680px | 扩展网格列 |
| 超宽屏 | >1680px | 最大网格密度 |

### 折叠策略
- 图钉网格：5+ 列 → 3 → 2 → 1
- 导航：搜索栏 + 图标 → 简化移动端导航
- 特色区块：并排 → 堆叠
- 主角：70px → 按比例缩小
- 页脚：深色多列 → 堆叠

## 9. 智能代理提示指南

### 快速颜色参考
- 品牌色：Pinterest 红（`#e60023`）
- 背景色：白色（`#ffffff`）
- 文字色：梅黑色（`#211922`）
- 次要文字：橄榄灰（`#62625b`）
- 按钮表面：沙灰色（`#e5e5e0`）
- 边框色：暖银色（`#91918c`）
- 焦点色：焦点蓝（`#435ee5`）

### 示例组件提示
- "创建一个主角区块：白色背景。标题使用 70px Pin Sans 字重 600，梅黑色（#211922）。红色 CTA 按钮（#e60023，16px 圆角，6px 14px 内边距）。次要沙色按钮（#e5e5e0，16px 圆角）。"
- "设计一个图钉卡片：白色背景，16px 圆角，无阴影。摄影填充顶部，下方 16px Pin Sans 字重 400 描述文字，颜色 #62625b。"
- "制作一个圆形操作按钮：#e0e0d9 背景，50% 圆角，#211922 图标。"
- "创建一个输入框：白色背景，1px solid #91918c，16px 圆角，11px 15px 内边距。焦点：通过语义 token 实现蓝色轮廓。"
- "设计深色页脚：#33332e 背景。白色 Pinterest 手写体 logo。12px Pin Sans 链接，颜色 #91918c。"

### 迭代指南
1. 随处使用暖中性色——橄榄/沙灰色，绝不用冷钢色
2. Pinterest 红仅用于 CTA——醒目且唯一
3. 按钮/输入框 16px 圆角，卡片 20px+——慷慨但非药丸形
4. Pin Sans 是唯一字体——UI 紧凑 12px，展示 70px
5. 摄影承载设计——UI 保持温暖而简约
6. 文字使用梅黑色（#211922）——比纯黑更温暖