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

A-WARE

如同温暖羊皮纸上的药剂室编辑式跨页。一张高山运动员的药剂室跨页中,奶油纸、黑色墨迹、唯一青铜印章,以及深色玻璃罐体,悬浮在充裕留白中。

A-WARE采用编辑式药剂室安静的语言:广阔米白羊皮纸表面、黑色墨迹排版,以及只作为功能标点出现的唯一温暖青铜强调色。界面几乎完全无彩色,奶油画布、近黑文字和细线,让产品摄影——明亮虚空前的深色哑光罐体——承担视觉分量。窄体展示字体轻声传达权威,而非高声表达;正文采用干净grotesk字体,标签使用0.10em全大写宽字间距,唤起制药式精确感。组件稀少且几何化,无填充胶囊按钮、细黑分隔线、像被钉在页面上般悬浮的产品卡片,几乎没有抬升。每个屏幕都应像从高端运动科学杂志上撕下的一页。

查看原始网站

使用规范

建议采用

  • 所有交互元素,包括按钮和标签,都采用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。