受 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

层次结构

原则

• 紧凑字号体系：字号范围 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. 层次与阴影

阴影哲学：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. 响应式行为

断点

折叠策略

• 图钉网格：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）——比纯黑更温暖