A-WARE 网站预览
A-WARE 网站预览

A-WARE

白色基底、胶囊形控件与细线分隔。

页面以白色为基底,搭配近黑色文字。字体采用 plantin、practice。视觉特点包括胶囊形控件、细线分隔、摄影展示、分屏构图。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有交互元素,包括按钮和标签,都采用32px border-radius;胶囊形是品牌的交互标志。
  • 所有全大写标签都保持0.10em letter-spacing,可采用lab-mono 12px或practice 14px;这种字间距像药品标识。
  • #a77a41 Bronze Seal只留给奖项徽章和产品本身的封印标记;绝不要用于UI按钮、文字或背景。
  • 正文设为practice 400/16–18px,字间距-0.02em;轻微收紧是编辑式感受不可缺少的部分。
  • 任何介绍产品或功能组的分区都采用#f7f5ee Parchment;白色用于内容,羊皮纸色用于展示。
  • 凡标为new、limited或vegan-hybrid的产品,都配旋转-10°的斜向lab-mono标签。
  • 让产品摄影承载色彩和氛围;首屏图像上绝不要叠加渐变、色调或色洗。

建议避免

  • 不要使用彩色填充按钮;包括CTA在内,每个操作都是黑色轮廓的Ghost Pill。
  • 不要引入额外强调色;整个系统是无彩色加唯一Bronze Seal。
  • 卡片或容器不要使用厚重投影;产品只通过柔和弥散阴影悬浮。
  • 标题不要使用高于600的粗字重;品牌通过plantin 300与practice 600轻声传达权威。
  • 不要用灰色背景打破白色与Parchment的双色表面系统;内容区域只使用这两种颜色。
  • 文字、链接或悬停状态不要使用Bronze Seal;它是实体封印的比喻,而非交互强调。
  • 正文段落不要居中或右对齐;编辑式正文始终左对齐,max-width为640–720px。