Pinterest Design System

瀑布流美学 · 视觉发现引擎 · 2026.02.18

4B+
Pins/Day
240M
Active Users
2:3
Aspect Ratio
Design Tokens

Pinterest 的设计语言围绕"视觉发现"展开，色彩鲜活、圆角柔和、卡片悬浮。

:root {
  --color-primary: #E60023; /* Pinterest Red */
  --radius-card: 16px; /* 柔和圆角 */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
  --grid-gap: 16px;
}
#E600
#111
#767
#f8f
#fff
Masonry Grid System

瀑布流布局是 Pinterest 的标志性设计，非对称网格创造视觉节奏。

.masonry-grid {
  column-count: 4;
  column-gap: 16px;
}

.pin-card {
  break-inside: avoid;
  border-radius: 16px;
  transition: transform 0.2s ease;
}
Design Philosophy
  • Image-First: 图片是绝对主角，内容大于容器
  • Discovery: 无限滚动鼓励探索而非决策
  • Warmth: 柔和圆角与温暖红色传递创意氛围
  • Inspiration: 设计服务于灵感的即时捕获
The Formula

Discovery = Image × Rhythm − Friction

发现之美 = 图片 × 节奏 - 阻隔