Bauhaus Clock 网站预览
Bauhaus Clock 网站预览

Bauhaus Clock

近白色基底、磨砂表面与大字排版。

页面以近白色为基底,搭配近黑色文字。字体采用 系统无衬线字体。视觉特点包括磨砂表面、大字排版、紧密字距、居中构图。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 以 Gallery Gray(#eef0f2)作为默认画布,使用 Porcelain(#ffffff)作为证言和悬浮导航表面的颜色。
  • 首屏标语使用 ui-sans-serif 600 字重,字号 96px/96px,字间距 -1.2px。
  • 主要区块标题使用 ui-sans-serif 600 字重,字号 60px/64px,字间距 -1px。
  • 媒体框和卡片使用 30px 圆角;购买控件使用 100px 圆角,类胶囊元素使用 9999px 圆角。
  • 标准评论瓷砖保持精确 30px 内边距,紧凑内容行之间保持 15px 间距。
  • 仅将 Dial Teal(#a1e5e4)、Mint Glass(#d5efef)和 Evergreen Dial(#00753e)用于孤立的产品展示表面或文本高亮。
  • 使用轻量悬浮条阴影配方,包含 blur(9px),rgba(0,0,0,0.1) 0 1px 2px 0,以及 0.5px 边框阴影。

建议避免

  • 不要将整个页面的画布替换为纯白色,保持 Gallery Gray(#eef0f2)作为基础背景。
  • 不要使用方形卡片角;卡片和产品媒体均使用 30px 圆角。
  • 不要将每个内容区块都置于抬升的卡片中;标准白色卡片无阴影。
  • 不要使用饱和的青色或绿色作为通用按钮填充;仅在产品展示表面中使用 Dial Teal(#a1e5e4)和 Evergreen Dial(#00753e)。
  • 不要将大标题设置在 600 字重以上或增加宽字间距;在 40px 时使用 -0.2px,60px 时使用 -1px,96px 时使用 -1.2px。
  • 不要使用通用蓝色浏览器链接样式;页脚链接使用 Graphite(#4a4e52)或 70% Instrument Ink。
  • 不要将时钟影像扁平化为明亮的目录摄影;保留黑色背景、模糊的青色照明和机械特写氛围。