Home 网站预览
Home 网站预览

Home

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

页面以近黑色为基底。局部操作控件以黄绿色强调。字体采用 Font Roobert。视觉特点包括大幅摄影展示、大字排版、分屏构图、满幅色块。适合参考的场景：商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • #b7ff2c只用于填充CTA按钮、无填充操作边框和激活或勾选状态，绝不要用于正文、装饰背景或大面积表面。
  • 每个容器，包括按钮、卡片、导航、弹窗和图像，都采用6px border-radius，保持统一锐利感。
  • 展示标题设为Roobert 700、110px和0.85行高；低于1.0的行距是标志性的紧缩处理。
  • 页面背景默认#111111，卡片和弹窗采用#1f1f21作为提高一个层级的表面。
  • 将满幅深色摄影与Pure White（#ffffff）悬浮卡片配对，形成海报式层叠。
  • #e5e5e5边框只用于反转后的白色表面语境；深色表面上改用#28282a或#707072。
  • 正文设为Roobert 400、16px和1.50行高，深色表面上使用Pure White。

建议避免

  • 不要引入第二种彩色；系统是单色加唯一青柠色，添加蓝、红或任何其他色相都会破坏信号。
  • 不要采用0px或12px+ border-radius；6px圆角是系统锐利却不生硬的身份。
  • 展示标题行高不要设为1.2或更高；0.85-1.00的压缩让文字具有标牌感。
  • 不要使用超过导航栏2px模糊的投影；平面感是刻意的。
  • 标题、副标题或正文不要使用青柠色（#b7ff2c）；它只用于操作。
  • 深色表面的边框不要采用#e5e5e5，因为它过亮；只将其保留给白色卡片语境。
  • 按钮或卡片不要在没有表面容器的情况下直接放在摄影上；悬浮卡片需要白色或炭灰背景才能清晰辨认。

相似设计语言