Gumroad 网站预览
Gumroad 网站预览

Gumroad

近白色基底、紧密字距与细线分隔。

页面以近白色为基底。字体采用 ABC Favorit。视觉特点包括紧密字距、细线分隔、扁平表面、分屏构图。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 始终使用 ABC Favorit 字体搭配 'ss04' 和 'ss11' 特性设置——这些变体是品牌调性的组成部分。
  • 将页面背景设为 #f4f4f0,所有卡片表面设为 #ffffff,搭配 1px #d1d5dc 边框;禁止使用阴影来分隔层级。
  • 主要操作按钮为实心 #000000,白色文字,4px 圆角——系统中唯一的填充按钮。
  • 所有 30px 及以上显示字体均需带有负字间距,达到 96px 时为 -2.4px;字间距是设计美学的一部分。
  • 仅将粉红硬币 (#ff90e8) 作为吉祥物使用,或作为黄/绿/猩红/粉红笔色调中的一个元素;禁止用作按钮背景。
  • 区块间垂直节奏为 40–48px,UI 元素间间距为 12–16px;首屏区域水平页面边距为 58px。
  • 产品卡片为 16px 圆角(产品图块),特性卡片为 24px 圆角(特性卡片),按钮、输入框和导航胶囊控件为 4px 或 9999px 圆角——禁止使用中间值。

建议避免

  • 不要为卡片、按钮或导航添加盒阴影;系统仅通过细线 #d1d5dc 边框表达深度。
  • 不要引入渐变——配色完全为扁平化;色彩仅以实心填充形式出现。
  • 不要使用蓝色、紫色或任何超出奶油/黑色/粉红/黄色/青柠/猩红色系的色调。
  • 不要创建彩色的行动号召(CTA)——黑色是唯一填充按钮颜色;次要操作以透明描边 #d1d5dc 表现。
  • 不要将正文文字设为小于 14px,或在全界面中使用除 ABC Favorit(或其等宽字体替代)之外的任何字体。
  • 不要将底色设为纯 #ffffff;温暖的 #f4f4f0 奶油色才是让系统感觉像草稿本而非空白应用壳的关键。
  • 不要将辅助色(#ffc900、#f1f333、#dc341e)作为组件的完整背景使用——它们仅作为小色块和行内标点存在。