Baggu 网站预览
Baggu 网站预览

Baggu

如同阳光照亮的奶油纸印刷目录:唯一温暖米白表面上,黑色文字与产品摄影承担全部表现,唯一绿色轻声说“new”。

Baggu像一本编辑式产品目录:唯一温暖奶油画布、黑色文字与细线边框,产品摄影占据视口的90%。界面几乎完全无彩色,一种温暖米白表面、一种真正纯黑,以及一种用于次级元数据的低饱和暖灰。唯一彩色元素是中等绿色,只留给“New Arrivals”标签和成功状态,作为安静信号,而非品牌色。排版定制且紧凑,新grotesque字体采用12–18px、紧密字间距,并启用风格替代字形,文字靠近基线,使产品卡片像印刷价格标签。布局图像优先、文字其次,满幅编辑式三联图、5列产品网格,以及带说明标签的分类图块。密度紧密,奶油表面却让整体有呼吸空间。

查看原始网站

使用规范

建议采用

  • 每个背景都采用#f6f4ee,绝不用纯#ffffff;暖意是标志性特征。
  • 文字只采用studioPro或Söhne/Inter Tight的12–18px;系统没有展示字号,标题存在于图像中。
  • 所有studioPro实例都应用font-feature-settings: 'case', 'ss02' 0, 'ss03', 'ss06', 'ss07', 'ss08', 'ss09。
  • #298018只用于“New Arrivals”标签与成功徽章;一种颜色承担一种职责。
  • 每个按钮采用24px border-radius,输入框4px,所有图像和卡片零圆角。
  • 首屏和网格中的产品摄影从边到边铺开,不留栏间距;奶油画布是唯一呼吸空间。
  • 所有边框和图标均采用1px纯#000000,绝不用灰色,也不柔化。

建议避免

  • 不要引入额外品牌色、强调色相或渐变;调色板只有三种中性色和一种绿色。
  • 字号不要大于18px;系统没有展示字号,视觉分量来自700字重的文字标志和产品图像。
  • 不要添加box-shadow、投影或抬升卡片表面;奶油画布本身就是抬升系统。
  • 任何地方都不要使用#ffffff;它会破坏温暖印刷纸的幻觉。
  • 产品图像不要采用圆角,也不要添加内部卡片背景;图块平贴在奶油表面上。
  • 绿色(#298018)不要用于CTA、按钮或装饰元素;它只用于元数据。
  • letter-spacing不要大于0或小于-0.025em;紧密字间距形成印刷感。