Pinterest 网站预览
Pinterest 网站预览

Pinterest

白色基底、分屏构图与非对称构图。

页面以白色为基底,搭配近黑色文字。字体采用 Pin Sans。视觉特点包括分屏构图、非对称构图、居中构图、满幅色块。适合参考的场景:音视频产品介绍页、媒体内容展示页。

查看原始网站

使用规范

建议采用

  • Pin Red(#e60023)是页面唯一的填充按钮颜色,绝不替换成橙色、珊瑚色或任何其他暖色相。
  • 所有控件(按钮、输入框、搜索、标签块)的圆角严格设为16px,所有图片卡片为20-40px;这种圆角梯度是系统柔和感的标志。
  • 展示标题采用50-70px、字重900及-0.037em字间距;先让字号与字重承担层级,再考虑颜色。
  • 画布保持白色(#ffffff),Linen(#e5e5e0)仅用于整条区块带的交替,绝不用于单张卡片。
  • 首屏照片卡片旋转角度在±6°至±12°之间,以形成剪贴簿深度;平直网格会破坏氛围。
  • 装饰性强调(Lavender Veil、Ember Coral、Halo Yellow)只放在插画式模拟表面内,绝不用于导航、按钮或边框。
  • 两行展示标题的第二行使用Lavender Veil、900字重的斜体,这是品牌标志性的强调处理。

建议避免

  • 除填充CTA、标志或激活状态外,不要使用Pin Red;过度使用会削弱它的力量。
  • 正文不要使用Charcoal(#000000),改用Ink Plum(#211922),以获得柔和且符合品牌的近黑色。
  • 不要为按钮、卡片或导航添加阴影;深度来自圆角、旋转和重叠,而非高度效果。
  • 按钮或导航不要使用Link Cobalt(#2b48d4),它严格只用于行内内容链接。
  • 正文不要低于16px;辅助文案的最小功能字号为14px,12px仅用于说明文字。
  • 不要引入渐变、辉光或玻璃拟态,系统刻意保持平坦与哑光。
  • 单一表面中不要组合超过两种装饰强调色;页面应像平静画廊,而非马赛克。