Pinterest

version: alpha name: Pinterest-design-analysis description: | A photography-first discovery system organized around the Pinterest Red CTA, the masonry pin grid, and a soft warm-cream chrome that gets out of the imagery's way. The home page is a content-discovery tool wearing the chrome of a magazine publisher: 70px display headlines, friendly Pin Sans typography, fully-rounded pill buttons (16px) on a cream-tinted neutral palette, and a sticky red "Sign up" CTA that anchors every viewport. Pin imagery is the system's load-bearing visual element — square, portrait, and landscape pins tile in a column-based masonry grid where each tile is a fully-rounded 16px-radius card, separated by tight 8px gutters. The chrome is otherwise quiet: warm grays, true whites, and a single saturated red — no decorative gradients, no atmospheric backgrounds, no shadows beyond a soft modal scrim.

colors: primary: "#e60023" on-primary: "#ffffff" primary-pressed: "#cc001f" ink: "#000000" ink-soft: "#211922" body: "#33332e" charcoal: "#262622" mute: "#62625b" ash: "#91918c" stone: "#c8c8c1" hairline: "#dadad3" hairline-soft: "#e5e5e0" on-secondary: "#000000" secondary-bg: "#e5e5e0" secondary-pressed: "#c8c8c1" canvas: "#ffffff" surface-soft: "#fbfbf9" surface-card: "#f6f6f3" surface-elevated: "#ffffff" on-dark: "#ffffff" on-dark-mute: "rgba(255,255,255,0.7)" surface-dark: "#262622" focus-outer: "#435ee5" focus-inner: "#ffffff" accent-pressed-blue: "#617bff" accent-purple: "#7e238b" accent-purple-deep: "#6845ab" success-deep: "#103c25" success-pale: "#c7f0da" error: "#9e0a0a" error-deep: "#cc001f"

typography: display-xl: fontFamily: Pin Sans fontSize: 70px fontWeight: 600 lineHeight: 1.1 letterSpacing: -1.2px display-lg: fontFamily: Pin Sans fontSize: 44px fontWeight: 700 lineHeight: 1.15 letterSpacing: -0.8px heading-xl: fontFamily: Pin Sans fontSize: 28px fontWeight: 700 lineHeight: 1.2 letterSpacing: -1.2px heading-lg: fontFamily: Pin Sans fontSize: 22px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0 heading-md: fontFamily: Pin Sans fontSize: 18px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0 body-md: fontFamily: Pin Sans fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 body-strong: fontFamily: Pin Sans fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 body-sm: fontFamily: Pin Sans fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 body-sm-strong: fontFamily: Pin Sans fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 caption-md: fontFamily: Pin Sans fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 caption-sm: fontFamily: Pin Sans fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 link-md: fontFamily: Pin Sans fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 button-md: fontFamily: Pin Sans fontSize: 14px fontWeight: 700 lineHeight: 1 letterSpacing: 0 button-sm: fontFamily: Pin Sans fontSize: 12px fontWeight: 700 lineHeight: 1 letterSpacing: 0

rounded: none: 0px sm: 8px md: 16px lg: 32px full: 9999px

spacing: xxs: 4px xs: 6px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 64px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 6px 14px height: 40px button-primary-pressed: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.secondary-bg}" textColor: "{colors.on-secondary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 6px 14px height: 40px button-secondary-pressed: backgroundColor: "{colors.secondary-pressed}" textColor: "{colors.on-secondary}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-tertiary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-icon-circular: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 40px button-pill-on-image: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 8px 14px button-disabled: backgroundColor: "{colors.surface-card}" textColor: "{colors.ash}" rounded: "{rounded.md}" search-bar: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: 11px 15px height: 48px search-bar-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 11px 15px height: 44px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.md}" pin-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.md}" padding: 0px pin-card-large: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 0px pin-overlay-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 6px 12px filter-chip: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 8px 16px filter-chip-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.full}" category-tile: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.md}" padding: 16px feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-xl}" rounded: "{rounded.md}" padding: 32px feature-card-soft: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.heading-xl}" rounded: "{rounded.md}" padding: 32px modal-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px hero-cta-strip: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.heading-xl}" rounded: "{rounded.none}" padding: 48px 32px primary-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 64px footer-section: backgroundColor: "{colors.canvas}" textColor: "{colors.mute}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 32px 24px link-inline: textColor: "{colors.ink-soft}" typography: "{typography.link-md}"

概述

Pinterest's 营销 系统 is 围绕……构建 a single 指导性 principle: get out of the photograph's way. The chrome is a 安静 warm-cream neutral palette ({colors.surface-soft}, {colors.surface-card}, {colors.canvas}) carrying typography in Pinterest's 专有的 Pin Sans face, with Pinterest Red ({colors.primary} — #e60023) reserved 专门 for the "Sign up" CTA, the 激活-tab indicator, and the sticky top-nav anchor. Every other 表面 is allowed to fade behind the 图像内容 — pin 图块, 类别 图块, content thumbnails, profile shots — that constitutes the actual 产品.

The design 系统 has two distinct 表面 modes that alternate down the 主页: the 首屏/CTA chrome (cream surfaces, large 70px Pin Sans display 标题, 交替 left/right 照片-illustrated 特性 卡片) and the content masonry (a 列-based 网格 of 16px-圆角 pin 卡片 on {colors.surface-card} with no internal 内边距 — the pin is the 卡片). The 搜索结果页 is almost pure masonry: a tight 列 网格 of pin 图像内容 in mixed aspect ratios, with a small 筛选-chip strip at the top and the sticky red Sign-up CTA in the upper-right corner. The create.pinterest.com business 表面 inverts the 网格 back to a more 传统 编辑 布局 but 保持 every other 线条 of the 系统: Pin Sans, cream chrome, red CTA, 16px-圆角 pills.

The 系统's 标志性 gesture is shape geometry: 16px 圆角 ({rounded.md}) for nearly every 表面 — 按钮, inputs, pin 卡片, 特性 卡片 — and 32px 圆角 ({rounded.lg}) 专用于 pin-卡片-large and 模态框 卡片. There are exactly three 圆角 values in 激活 use: 16px, 32px, and pill (9999px). The 系统 never goes 扁平 (sharp corners) and never goes 圆角-medium — those two values are the entire shape vocabulary.

关键特征:

• Single-accent CTA: Pinterest Red ({colors.primary}) carries every primary action; everything else is monochrome
• Pin Sans 专有的 typography 贯穿 every 文本 role from {typography.display-xl} (70px) down to {typography.caption-sm} (12px) — no serif, no monospace anywhere
• Two-圆角 shape 系统: {rounded.md} (16px) for most 组件, {rounded.lg} (32px) for large 卡片 and modals, {rounded.full} for circular 元素
• Masonry pin 网格 as the 承重 visual 元素 — 列-based 布局 where each pin's natural aspect 比例 is preserved
• Warm-cream neutral chrome ({colors.surface-card} — #f6f6f3) that softly recedes behind 图像内容 without competing
• Sticky top nav with the always-red Sign-up CTA anchored in the upper-right 在每个断点
• 模态框 覆盖层 (login/signup) using a soft 遮罩 在……上方 the 页面 content 而非 a 导航 jump

颜色

来源页面: / (home), /search/pins/?q=bold lip (搜索 results), create.pinterest.com/ (creator 营销), create.pinterest.com/product-features/how-to-create-boards/ (creator 文章). The chrome palette is identical 贯穿 all four 页面.

品牌与点缀

• Pinterest Red ({colors.primary} — #e60023): the 品牌's only highly-saturated 颜色. Sign-up CTAs, sticky top-nav anchor, 激活状态 in tab strips, and the 品牌 字标.
• Pinterest Red 按下 ({colors.primary-pressed} — #cc001f): 按下状态 for the primary 按钮 — a single notch deeper than 品牌 red.

表面

• Canvas ({colors.canvas} — #ffffff): true white. The base 表面 for the primary nav, modals, 特性 卡片, and content 正文.
• Soft 表面 ({colors.surface-soft} — #fbfbf9): faintly cream-tinted off-white 用于 the 页面 正文 wash on the 主页 首屏.
• 表面 卡片 ({colors.surface-card} — #f6f6f3): warm-cream 卡片 and pin-图块 背景. Carries 类别 图块, 搜索-bar default fill, 按钮-secondary default, and pin-卡片 backgrounds.
• 次色 BG ({colors.secondary-bg} — #e5e5e0): the gray-cream 用于 {component.button-secondary} ("I already have an account") fill — a notch deeper than {colors.surface-card}.
• 次色 按下 ({colors.secondary-pressed} — #c8c8c1): 按下状态 for the secondary 按钮.
• 表面 Dark ({colors.surface-dark} — #262622): warm near-black used in the rare dark CTA strip on create.pinterest.com.
• Hairline ({colors.hairline} — #dadad3): 1px row dividers, 页脚 列 rules.
• Hairline Soft ({colors.hairline-soft} — #e5e5e0): lighter inline divider; doubles as the secondary-按钮 背景.

文本

• Ink ({colors.ink} — #000000): primary 标题, 按钮 文本, primary nav 链接.
• Ink Soft ({colors.ink-soft} — #211922): inline-链接 颜色 in 正文 prose. The 品牌's only "颜色" beyond Pinterest Red used in chrome — a near-black with a faint warm cast.
• 正文 ({colors.body} — #33332e): default 段落 文本 on {colors.canvas}.
• Charcoal ({colors.charcoal} — #262622): subtly softer 正文 where pure ink is too heavy.
• Mute ({colors.mute} — #62625b): 元数据 文本, 页脚 链接, secondary captions.
• Ash ({colors.ash} — #91918c): 禁用 按钮 文本, placeholder 文本 in inputs.
• Stone ({colors.stone} — #c8c8c1): least-emphasis utility 文本, 禁用-state borders.
• On Dark ({colors.on-dark} — #ffffff): primary 文本 on {colors.surface-dark}.

语义

• 错误 ({colors.error} — #9e0a0a): validation messages, destructive confirmation copy.
• 错误 Deep ({colors.error-deep} — #cc001f): deepened error 背景 where the regular error tone needs more contrast. Note: this 匹配 the primary-按下 value but in error context represents semantic destructiveness.
• 成功 Deep ({colors.success-deep} — #103c25): in-产品 success messaging.
• 成功 Pale ({colors.success-pale} — #c7f0da): pale success-pill 背景.
• 聚焦 Outer ({colors.focus-outer} — #435ee5): the 系统's 聚焦-ring blue — appears as a 2px outer 轮廓 around focused inputs and 按钮.
• 聚焦 Inner ({colors.focus-inner} — #ffffff): white inner gap inside the 聚焦-ring stack.

编辑 Accents (used 少量 inside content 图像内容 and 类别 badges)

• Accent 按下 Blue ({colors.accent-pressed-blue} — #617bff): 按下状态 for blue informational badges and 编辑 pin chips.
• Accent Purple ({colors.accent-purple} — #7e238b): 编辑 recommendation badge, in-产品 "Pinterest Predicts" callout.
• Accent Purple Deep ({colors.accent-purple-deep} — #6845ab): paired dark for purple lockups and "Performance+" iconography.

Typography

字体系列

Pin Sans is Pinterest's 专有的 geometric sans-serif used 贯穿 every 文本 role on every 页面. It carries weights 400 (regular), 500 (medium), 600 (semibold), and 700 (bold), and falls back 通过 a long stack — -apple-system → system-ui → Segoe UI → Roboto → Helvetica Neue → Arial plus emoji fallbacks. The face's 独特 trait is its tight letter-间距 at display sizes (-1.2px on {typography.display-xl} and {typography.heading-xl}), which 赋予 70px 标题 a confident, 友好 density 而非 the airy spread of more conventional display geometric sans faces.

层级

原则

The 系统 has an unusually steep 尺寸 jump 在……之间 display and 正文 — {typography.display-xl} (70px) drops directly to {typography.body-md} (16px) on the home 首屏 with no intermediate tier 在……之间. The negative tracking on the largest tiers (-1.2px / -0.8px) 创建 a tighter, more confident 标题 than a default geometric sans would deliver, and the 正文 copy sits at a generous 1.4 line-高度 to keep multi-line 描述 breathing.

字体替代说明

Pin Sans is 专有的. The closest open-source substitute is Inter (weights 400 / 500 / 600 / 700) — its geometry, x-高度, and metric balance match Pin Sans within ~3% at 正文 sizes. Manrope is a strong secondary substitute for the display tier where slightly tighter letterspacing helps the 70px 标题 feel weighted. Apply -1.2px tracking on the substitute at display sizes regardless of which substitute is chosen.

布局

间距系统

• 基础单位: 8px (with finer 4/6/7px steps available for tight inline gaps in pill 按钮 and chips).
• Tokens (front matter): {spacing.xxs} (4px) · {spacing.xs} (6px) · {spacing.sm} (8px) · {spacing.md} (12px) · {spacing.lg} (16px) · {spacing.xl} (24px) · {spacing.xxl} (32px) · {spacing.section} (64px).
• 通用 区块 rhythm: every 页面 in the set uses {spacing.section} (64px) as the 垂直 gap 在……之间 major content blocks. Pin grids use {spacing.sm} (8px) gutters 在……之间 图块 — the tightest 网格 gutter 在系统中, designed so 图像内容 effectively touches 贯穿 列.
• 模态框 内边距: {component.modal-card} uses 32px internal 内边距 ({spacing.xxl}) on all sides.

网格与容器

• 最大宽度: ~1280px content area at 桌面端 with 24px gutters (~48px at ultrawide).
• Pin masonry 网格: auto-fitting 列-based 布局 — 5–6 列 at ultrawide, 4 列 at 桌面端, 3 at 平板端, 2 at 移动端-landscape, 1 at 移动端. Each 图块 保留 its natural aspect 比例 (square / 2:3 / 3:4 / 4:5 portrait — never landscape 因为 pins are vertically-oriented). 间距 are {spacing.sm} (8px) 水平 and 垂直.
• Home 首屏 特性 row: 不对称 2-列 split where 文本 and 图像内容 alternate left/right down the 页面 (文本-left + 图像-right, then 图像-left + 文本-right, etc.).
• 页脚: 4-列 链接 网格 at 桌面端, collapsing to 2-up at 平板端, 1-up at 移动端.

留白理念

Whitespace is generous on the 营销表面 and tight on the 发现表面. The 主页 sits 区块 64px apart with 照片-illustrated 特性 卡片 using 32px internal 内边距, 而 the 搜索结果页 折叠为 an 8px-gutter masonry 网格 that 图块 图像内容 边到边. The 系统 呈现为 two tools sharing the same chrome: a magazine (首屏 / 特性 / CTA / 页脚) and a 搜索 engine (top nav / 筛选 row / pin 网格 / load more).

层次 & 深度

Pinterest's 系统 has effectively 无阴影 层次 in its content surfaces. Pin 卡片 sit 扁平 on the canvas; the only "层次" appears on the 模态框 layer where a 16px ambient 阴影 与……配对 a 50%-opacity 遮罩 lifts the 模态框 above the 页面 content.

装饰性深度

深度 comes 完全 from the 图像内容 itself, not from CSS effects:

• Pin 摄影 carries 电影感 深度 通过 composition (food 摄影, fashion close-ups, interior shots) — the design lets each 图块's 图像 speak 而非 adding chrome to it.
• 类别 图块 thumbnails in the 主页's 特性 行 use Pinterest's own pin 图像内容 as composition assets, 经常 with a small {component.pin-overlay-pill} ("Cherry red", "Preppy look", "Earthy space inspo") overlaid in the corner of the 图像.
• 模态框 遮罩 — a 50%-opacity dark 覆盖层 在……上方 the entire 页面 content when the login 模态框 opens, with a 16px ambient 阴影 underneath the 模态框 卡片 lifting it to the visual top.

形状

圆角比例

The 圆角 vocabulary is essentially three values: 16px for most things, 32px for big 卡片 and modals, and pill for circular 元素. There are no sharp-cornered 按钮 or sharp-cornered pin 卡片.

摄影几何

• Pin 图像内容: mixed aspect ratios — square (1:1), portrait (3:4, 2:3, 4:5), and rare landscape — preserved at their natural 比例 inside {rounded.md} (16px) corners on small 图块 and {rounded.lg} (32px) on large 特性 pins.
• 类别 图块 thumbnails: square (1:1) with {rounded.md} corners.
• 头像 circles: 32–48px at {rounded.full} for in-pin attribution and profile chips.
• 特性 卡片 图像内容: 通常 4:5 portrait on home-页面 类别 卡片, with the 照片 occupying ~60% of the 卡片 and the 标题 + CTA stacked beneath.

组件

未记录悬停状态 依据系统规范. Each spec covers 默认 and 激活/按下 only.

按钮

button-primary — the 通用 Pinterest CTA

• 背景 {colors.primary} (Pinterest Red), 文本 {colors.on-primary}, type {typography.button-md}, 内边距 6px 14px, 高度 ~40px, rounded {rounded.md} (16px).
• 用于 "Sign up", "Join Pinterest for free", "Get started" — every primary action 贯穿 every 表面 在系统中.
• 按下状态 lives in button-primary-pressed — 背景 降至 {colors.primary-pressed} (#cc001f).

button-secondary — gray-cream alternative

• 背景 {colors.secondary-bg} (#e5e5e0), 文本 {colors.on-secondary}, type {typography.button-md}, 内边距 6px 14px, 高度 ~40px, rounded {rounded.md}.
• "I already have an account", "Continue", "Cancel" — second-tier actions 与……配对 the red primary.
• 按下状态 lives in button-secondary-pressed — 背景 降至 {colors.secondary-pressed}.

button-tertiary — ghost 链接

• 背景 transparent, 文本 {colors.ink}, type {typography.button-md}, rounded {rounded.md}.
• 用于 low-emphasis actions inside dialogs ("Read the docs", "Learn more →" with a small chevron).

button-icon-circular — circular 图标 按钮

• 背景 {colors.surface-card}, 图标 {colors.ink}, rounded {rounded.full}, 尺寸 40px.
• Carousel paddles, 模态框 close 按钮, and small floating action 按钮 in pin 图像内容.

button-pill-on-image — small 覆盖层 pill on 摄影

• 背景 {colors.canvas}, 文本 {colors.ink}, type {typography.button-md}, rounded {rounded.full}, 内边距 8px 14px.
• The 标志性 "Cherry red" / "Preppy look" / "Earthy space inspo" 覆盖层 pill that 锚定 the corner of 类别-图块 pin 图像内容.

button-disabled

• 背景 {colors.surface-card}, 文本 {colors.ash} — 扁平 soft-cream.

筛选与标签芯片

filter-chip + filter-chip-active

• 默认: 背景 {colors.surface-card}, 文本 {colors.ink}, type {typography.button-md}, rounded {rounded.full}, 内边距 8px 16px.
• 激活: 背景 {colors.ink}, 文本 {colors.on-dark} — the chip flips fully inverted on selection.
• Used 贯穿 the 搜索结果页 筛选 strip ("Beauty makeup", "Lipstick", "编辑 makeup"...).

输入框与表单

text-input + text-input-focused

• 默认: 背景 {colors.canvas}, 文本 {colors.ink}, 1px solid {colors.ash}, type {typography.body-md}, 内边距 11px 15px, 高度 ~44px, rounded {rounded.md}.
• 聚焦: 2px {colors.ink} inner 边框 + 4px {colors.focus-outer} outer 轮廓 — the 标志性 double-ring 聚焦 signal.
• Used 贯穿 the login/signup 模态框 for email, password, birthdate, country fields.

search-bar + search-bar-focused

• 默认: 背景 {colors.surface-card}, 文本 {colors.ink}, type {typography.body-md}, 内边距 11px 15px, 高度 ~48px, rounded {rounded.full}.
• 聚焦: 相同尺寸, 背景 flips to {colors.canvas} with a 1px {colors.ash} 边框.
• Anchored in the center of the primary nav with a magnifier glyph at the left edge and "搜索 for ideas, fashion..." placeholder.

卡片与容器

pin-card — the standard masonry pin 图块

• 容器: 背景 {colors.surface-card}, rounded {rounded.md} (16px), 内边距 0.
• 布局: 全出血 图像 at the 卡片's natural aspect 比例 with no internal 内边距. Optional {component.pin-overlay-pill} anchored to one corner of the 图像, optional 32px circular 头像 with profile name in {typography.body-sm-strong} overlaid at the bottom-left.

pin-card-large — the home-页面 特性 pin

• Identical to pin-card but rounded {rounded.lg} (32px) — 用于 the large 编辑 pins that anchor home-页面 特性 行.

pin-overlay-pill — anchored chip on pin 图像内容

• 背景 {colors.canvas}, 文本 {colors.ink}, type {typography.button-sm}, rounded {rounded.full}, 内边距 6px 12px.
• Floats 在……上方 a pin's bottom-left or top-left corner with the 搜索-term 标签 that surfaces if the pin 匹配 a 搜索 ("Cherry red", "Preppy look", "Earthy space inspo").

category-tile

• 背景 {colors.surface-card}, rounded {rounded.md}, 内边距 16px.
• 3- or 4-up 网格 of small 类别 thumbnails inside the home-页面 "Bring your favorite ideas to life" 区块. Each 图块 包含 a 类别 图标 or composition photograph + a short 标签 in {typography.body-strong}.

feature-card + feature-card-soft

• Standard: 背景 {colors.canvas}, rounded {rounded.md}, 内边距 32px. Pairs a 4:5 portrait pin 图像 (left or right) with a {typography.heading-xl} 标题 + 正文 copy + {component.button-primary} red CTA.
• Soft: 背景 {colors.surface-card} for the 交替-row variant where the cream 表面 is needed to break up content.

modal-card — login/signup 覆盖层

• 背景 {colors.canvas}, rounded {rounded.lg} (32px), 内边距 32px.
• 布局: 标题 in {typography.heading-lg} ("Welcome to Pinterest"), subtitle in {typography.body-md}, stacked {component.text-input} fields (Email, Password, Birthdate, Country), primary {component.button-primary} "Continue", small "Already a member? Log in" 链接 below.
• Floats 在……上方 a 50%-opacity 遮罩 covering the entire 页面 content with a 16px ambient 阴影.

hero-cta-strip — dark CTA strip on create.pinterest.com

• 背景 {colors.surface-dark}, 文本 {colors.on-dark}, type {typography.heading-xl}, 内边距 48px 32px, rounded {rounded.none}.
• Sits at the top of the creator 营销 页面 with a single {component.button-primary} red CTA on the right.

导航

primary-nav

• 背景 {colors.canvas}, 文本 {colors.ink}, 高度 ~64px, type {typography.body-strong}, rounded {rounded.none}, with a 1px {colors.hairline} bottom 线条 on inner 页面 (no 线条 on the home 首屏).
• 布局 (桌面端 home): Pinterest red 字标 at left + "Explore" 链接, centered {component.search-bar}, right cluster ("About / Businesses / Create / Log in" + the always-red {component.button-primary} "Sign up" CTA).
• 布局 (搜索 results): Pinterest red P-logo at left, centered 搜索 bar with the 激活 query, right cluster ("Log in" + red Sign-up 按钮).

Top Nav (移动端)

• Hamburger 菜单 图标 at left, P-logo at center, 搜索-glyph + Sign-up CTA at right. 搜索 bar collapses into the magnifier 图标 and 扩展至 全宽 when tapped.

页脚

footer-section

• 背景 {colors.canvas}, 文本 {colors.mute} in {typography.body-sm}, 内边距 32px 24px, rounded {rounded.none}, with a 1px {colors.hairline} top 线条.
• 布局: 4-列 链接 网格 (Get the app — iOS / Android · Quick 链接 — Explore / Shop / Users / Collections / Shopping · Pinterest for · About — Privacy / Terms / Help Center) with 列 headers in {typography.body-sm-strong} and 链接 lists in {typography.body-sm} {colors.mute}.
• Bottom row: Pinterest red 字标 + "© 2026 Pinterest" in {typography.caption-sm} {colors.mute}.

行内

link-inline — 正文-prose anchor 链接

• {colors.ink-soft} 文本 with no underline by default. Pinterest's only "颜色" beyond 品牌 red on chrome — a near-black warm tint used inline to differentiate 链接 from 正文 without 颜色 contrast.

推荐与避免

Do

• Reserve {colors.primary} (Pinterest Red) for primary CTAs, the 激活-tab indicator, and the 品牌 字标 only. It is never 装饰性.
• Use {rounded.md} (16px) on every inter激活 元素 and standard 卡片; reserve {rounded.lg} (32px) for large pin 卡片 and modals; reserve {rounded.full} for circular 元素 (搜索 bar, chips, avatars).
• Stage every pin 图像 inside a {component.pin-card} with no internal 内边距 — the photograph IS the 卡片.
• Stack content 区块 at {spacing.section} (64px) rhythm; tighten pin grids to {spacing.sm} (8px) gutters so 图像内容 effectively touches.
• Use {component.pin-overlay-pill} to anchor a 搜索-term tag in the corner of a 类别-图块 pin photograph — the 系统's 标志性 装饰性 gesture.
• Build hierarchy from 字体 字重 (400 → 600 → 700) and 尺寸, not from 颜色 tinting. 正文 stays {colors.body} regardless of 区块 context.
• Apply -1.2px letter-间距 on {typography.display-xl} and {typography.heading-xl}. The negative tracking is part of the 品牌 voice.

Don't

• Don't use sharp-cornered 按钮 or 卡片. There are no {rounded.none} inter激活 元素 在系统中.
• Don't introduce drop 阴影 on 卡片. The only 阴影 在系统中 is the 16px ambient 在……下方 {component.modal-card}.
• Don't pad {component.pin-card} internally. The 图像 is 全出血; 元数据 sits 在……上方 the 图像 as an 覆盖层 pill, not below it.
• Don't replace {colors.primary} with another red. The 品牌 red is precise — #e60023.
• Don't use {colors.ink-soft} (the 正文-prose 链接 tint) outside of inline 正文 anchor 链接. It is not a chrome 颜色.
• Don't introduce a third 圆角 value 在……之间 16px and 32px. The 系统 jumps directly from md to lg with nothing in 在……之间.

响应式行为

断点

触控目标

All inter激活 元素 meet WCAG AA (≥ 44×44px). {component.button-primary} and {component.button-secondary} sit at ~40px 高度 with 14px 水平 内边距 (effective ~40×80px tappable). {component.search-bar} sits at 48px. {component.text-input} sits at 44px. {component.filter-chip} is ~36–40px 高度 with 16px 内边距 — extends to 44px tappable via inline 内边距. {component.button-icon-circular} is exactly 40×40 with extended hit-target 内边距 to 48×48 inside the parent.

折叠策略

• 主色 nav: 桌面端 水平 cluster → 平板端 hamburger 抽屉 at 768px. The red Sign-up CTA stays visible 在每个断点.
• 搜索 bar: 桌面端 centered (~480px wide) → 平板端 compressed (~320px) → 移动端 折叠为 a magnifier 图标 that 扩展至 a 全宽 覆盖层 on tap.
• Pin masonry 网格: 5/6-up → 4-up → 3-up → 2-up → 1-up at 1920, 1024, 768, and 480px. 间距 drop from 8px to 6px on 移动端.
• Home 特性 row: 桌面端 交替 left/right 2-列 → 平板端 垂直 stack with 文本 above 图像 → 移动端 单列 with 全出血 图像.
• 模态框: 桌面端 centered ~480px-wide 卡片 → 移动端 全宽 sheet with rounded {rounded.lg} top-only and bottom-anchored CTA.
• 区块内边距: {spacing.section} (64px) 桌面端 → 48px 平板端 → 32px 移动端.
• 首屏 标题: {typography.display-xl} (70px) at 桌面端, scaling 56px / 44px / 36px down the breakpoint stack.
• 页脚: 4-up 链接 列 → 2-up at 平板端 → full accordion at 移动端 (each 页眉 becomes a tap-to-expand row).

图像行为

• Pin 图像内容 保留 natural aspect 比例 在每个断点; the 列 count changes, not the aspect.
• 类别 图块 thumbnails maintain 1:1 贯穿 all sizes.
• 首屏 特性 图像内容 uses art-direction crops on 移动端 (4:5 portrait → square) so the subject stays centered when the 布局 折叠为 单列.
• All non-critical 图像内容 is lazy-loaded as the user scrolls into the next 网格 row.

迭代指南

1. 聚焦 on ONE 组件 at a time. Pull its YAML entry and verify every property resolves.
2. Reference 组件 names and tokens directly ({colors.primary}, {component.button-primary-pressed}, {rounded.md}) — do not paraphrase.
3. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically.
4. Add new variants as separate 组件 entries (-pressed, -disabled, -focused) — do not bury them inside prose.
5. 默认 正文 to {typography.body-md}; reach for {typography.body-strong} for emphasis; reserve {typography.display-xl} strictly for top-of-页面 首屏 标题.
6. Keep {colors.primary} scarce — at most one Pinterest-red CTA per fold (counting nav, 首屏, and 特性-卡片 CTAs together).
7. When introducing a new 组件, ask whether it can be expressed with the existing pin-卡片 + 16px-圆角 + cream-表面 vocabulary before adding new tokens. The 系统's strength is that it almost never needs new ones.

已知缺口

• 移动端 screenshots 未采集 — responsive behavior synthesizes Pinterest's known 移动端 pattern (hamburger 抽屉, 单列 网格, 首屏 downscale) from 桌面端 evidence and the 记录的 breakpoint stack.
• 悬停 states 未记录 by 系统 policy.
• Pin-detail close-up (single pin 覆盖层) is not in the 采集的 set — the in-产品 Pin detail view (with comments, related pins, save board picker) likely introduces 组件 未记录 here.
• Authenticated chrome (logged-in home 信息流, board 页面, profile 页面) not in the 采集的 页面 — the 采集的 surfaces are the logged-out 营销 and 搜索 experience.
• Pinterest 移动端 app screens not 在系统中 记录的 here — this is the web-only chrome.
• 表单 validation states (success / error inline messages) 未记录; only the focused-state field is 采集的.