SuperMush 网站预览
SuperMush 网站预览

SuperMush

近白色基底、大幅摄影展示与大字排版。

页面以近白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 Founders Grotesk、GT Planar。视觉特点包括大幅摄影展示、大字排版、扁平表面、网格布局。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 每个交互按钮、输入框和胶囊标签都采用50px border-radius;胶囊是标志性特征。
  • #2f59f8只用于主要操作填充、激活导航状态、图标强调和链接下划线。
  • 大标题锚定40–48px与紧密1.04–1.17行高,像块状贴纸,而非段落。
  • 产品摄影在分区交界处满幅展示,绝不内缩到文字旁的卡片中。
  • 小字、促销标签和元数据采用GT Planar 10–14px,Founders Grotesk留给正文和标题。
  • 每个分区都锚定Bone画布(#f5f4f1)或Paper(#ffffff),避免引入第三种中性表面。
  • Volt Lime横带每个滚动深度最多出现一次,作为荧光笔强调,而非背景。

建议避免

  • #ff632a绝不要作为按钮填充或CTA背景,Ember Orange只属于产品和零售商横带。
  • 绝不要用投影抬升,深度通过Bone → Paper → Volt → Ember背景色阶表达。
  • 正文绝不要低于14px,12px只用于GT Planar法律或脚注元数据。
  • 单个分区绝不要使用超过三种颜色,系统依靠克制的三色标点,而非彩虹表面。
  • 主要操作按钮绝不要打破50px圆角,无填充变体也保持胶囊形。
  • 绝不要使用系统字体或退回Helvetica/Arial,始终采用Founders Grotesk或GT Planar。
  • 绝不要连续叠放两个满幅照片分区,二者之间始终穿插白色或彩色横带。