CHAIBOY 网站预览
CHAIBOY 网站预览

CHAIBOY

近黑色基底、大幅摄影展示与细线分隔。

页面以近黑色为基底,搭配白色文字。字体采用 Neue Haas Grotesk TP 55 Roman。视觉特点包括大幅摄影展示、细线分隔、宽松留白、网格布局。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 页面背景全局使用 #000000;仅当需要真正表面抬升且不破坏单色语言时,才出现 #131313。
  • 所有界面文字使用 Neue Haas Grotesk 55 Roman 400 字重,且启用 font-feature-settings: 'case' 以确保全大写形式在排版上准确无误。
  • 仅使用四个已记录的字号——11、14、18、54——来构建层级。不使用高于400的字重。
  • 主要文字、细线边框以及分隔区域的1px边框使用 #ffffff;仅当标签需要明显后退时,才使用 #afafaf。
  • 所有按钮、卡片、芯片和输入框的圆角保持4px——系统仅有一个圆角值,不应被覆盖或更改。
  • 让产品或专题摄影承担视觉重量;金属元素应完全不可见。黑色背景中用1px白色边框框住首屏图像。
  • 主要区域(公告、导航、页脚)之间使用1px实线 #ffffff 细线边框分隔,而非仅通过背景色变化或内边距实现。

建议避免

  • 不要引入任何色彩——无品牌强调色、无语义红/绿/蓝、无悬停色调。该系统在本质上是单色的。
  • 不要使用高于400的字重,也不要添加斜体。字重对比不作为层级工具提供。
  • 不要使用阴影、渐变或发光效果。所有表面为纯黑色;深度仅来自细线边框和摄影本身。
  • 不要使用大于4px的圆角。胶囊形控件、完全圆润的形状和大弧度均不属于此系统。
  • 导航链接、主流程中的按钮及购物车均不可使用背景或填充。唯一带边框的可交互形状是边框芯片,且它仅应出现在公告栏中。
  • 不要为链接添加下划线,也不要在悬停时改变其颜色。文本链接仅通过位置、上下文和光标来区分。
  • 不要将文字大小设为小于11px,也不使用居中的正文内容。小字号文字始终为大写,紧密行距,左对齐排列。