Custo 网站预览
Custo 网站预览

Custo

枪灰色展厅搭配宏伟文字。一个沉静的灰绿色展厅,仅靠一个深色物体和 57px 字体完成表达。

Custo 以工业产品画廊的形式运作:温暖的枪灰色画布承载实体产品,而超大尺寸的展示文字作为主要视觉装饰。该系统严格保持无色——零色相色彩——让深色阳极处理的信箱和单一无衬线字体的几何重量承载全部品牌个性。每个屏幕在宽裕的负空间与一个宏伟的文字陈述之间取得平衡,品牌标识反复出现,如同近似建筑结构的元素。表面平整且哑光;深度通过产品自身的反光体现,而非通过投影阴影或渐变实现。

查看原始网站

使用规范

建议采用

  • 将 57px 的展示文字标识置于 Paper White 背景上,直接定位在 Canvas Gunmetal #9ea29f 首屏区域,使文字看起来成为产品轮廓的一部分,而非悬停其上。
  • 所有交互元素均使用 1px 边框,采用 Obsidian #000000 或 Paper White #ffffff,禁止在按钮或卡片上使用填充、渐变或阴影。
  • 仅将 31.35px 的胶囊圆角应用于主要操作按钮('立即订购');其他所有输入项、卡片和次级按钮均使用 8px 圆角。
  • 保持内容区块之间 110px 的垂直间距,并在 Canvas Gunmetal 与 Paper White 之间交替,以营造画廊节奏感。
  • 正文文字保持 19px / 1.42,仅将 30px 以上尺寸用于实际的板块标题——禁止将展示尺寸用于正文或 UI 标签。
  • 产品摄影素材需以 Anodized Graphite #4b514d 背景呈现,使信箱材质与 UI 表面共享相同的灰度值。
  • 在所有 PP Neue Montreal 文字中启用 "kern" 和 "liga" OpenType 特性,以在大尺寸展示中保留几何间距。

建议避免

  • 禁止引入任何色相色彩——按钮、强调色或状态指示中不得使用蓝色、红色、绿色或紫色;该系统刻意保持无色。
  • 禁止在卡片、按钮或图片上使用投影阴影、内阴影或发光效果;深度仅来自枪灰色与白色之间的交替。
  • 禁止将 57px 的展示文字置于压缩、斜体或不同字体家族中——仅限 PP Neue Montreal Medium 400 作为唯一展示语调。
  • 禁止使用超过 1px 的边框;整个系统依赖细线结构,更粗的边框会破坏画廊氛围。
  • 禁止将主要操作按钮设为实心填充——所有行动号召(CTA)保持透明描边/轮廓状态,以确保枪灰色画布始终可见。
  • 禁止在满幅区域使用除 Canvas Gunmetal、Paper White 或 Anodized Graphite 之外的背景颜色。
  • 禁止打破 4px 间距基准;所有内边距和间距值必须为 4 的整数倍(18、20、24、32、40)