Counterprint

浅色基底、网格布局与细线分隔。
页面以浅色为基底,搭配近黑色文字。字体采用 Helvetica、GTStandard-M。视觉特点包括网格布局、细线分隔、摄影展示、分屏构图。适合参考的场景:商品详情页、品牌产品介绍页。
查看原始网站使用规范
建议采用
- 每个UI表面都保持纯白(#ffffff);绝不要引入卡片背景、灰色面板或带色调的表面。
- 所有边框都设为1px solid #e5e7eb;这是唯一的线条颜色,也是唯一的结构分隔手段。
- 分区标题采用Helvetica 700字重、20px,产品标题采用700字重、15px;其余所有文字使用400字重。
- 每个按钮都采用9999px圆角的无填充胶囊形,以白色为底,配1px的#1c1c1c边框和#1c1c1c文字。
- 保持6列产品网格,产品图像采用1:1正方形比例,图像的border-radius为0。
- 所有色彩和视觉活力都由产品摄影提供;不要为UI添加装饰插画、渐变或背景艺术。
- 内部间隙只使用4px和8px两种数值;24–48px保留给分区分隔。
建议避免
- 不要引入品牌强调色、CTA填充色或任何彩色UI元素;调色板刻意保持单色。
- 不要为卡片、按钮或图像添加阴影、模糊效果或抬升效果。
- 产品图像或产品卡片不要使用border-radius;只能采用清晰的0px直角。
- 不要在正文或标题中将Helvetica与第二种字体搭配;Helvetica是唯一的UI字体。
- 不要为产品卡片添加悬停变色、缩放变换或动画;它们保持静态。
- 任何分区标题的字号都不要超过20px;系统按紧凑目录的密度设计,而非营销页面的宏大表现。
- 不要将产品图像包在带内边距或背景的容器中;图像必须直接置于白色画布上。