A-dam 网站预览
A-dam 网站预览

A-dam

清晨海浪映衬精心陈列的产品货架——一个轻盈通透的画布,诚实的基础款与海洋色调的摄影自然表达。

A-dam 通过一种安静、诚恳的视觉语言表达:清晨天空的米白与暖灰调构成一个干净的货架场景,产品如同标本般陈列其中。深海军蓝(#000e1f)为所有文本表面提供沉稳权威的锚定,而单一饱和蓝(#0000c5)仅出现在公告栏——这是对整体沉静调性中的一声刻意强调。GT Walsheim Pro 字重 900 且字号 70px,行高 1.00,赋予展示标题以存在感而不喧宾夺主,紧密的行高使大字号呈现出图形化块面。胶囊形按钮(30px 半径)与扁平化产品卡片营造出亲切、可接近的界面,其中影像——满幅海滩摄影、材质平铺图、简洁的产品图——承载了情感分量。

查看原始网站

使用规范

建议采用

  • 使用 GT Walsheim Pro 字重 900,字号 70px / 1.00 用于展示标题——紧密的行高使大字号读作一个图形块面
  • 所有按钮、输入框、标签和胶囊链接的圆角半径设为 30px——胶囊形状是系统的触觉标识
  • 保持产品卡片为扁平状态:无边框、无阴影、无圆角,仅以白色表面呈现于晨雾底色画布上
  • 使用中海海军蓝(#000e1f)用于所有主要文本和填充按钮——绝不让正文内容降级为灰泥灰(Slate Gray)以满足强调需求
  • 将深钴蓝(#0000c5)仅用于公告栏表面及微小强调时刻——它是一种强调,而非填充
  • 使用细线云纱(#e6e7e9)边框用于卡片边框、图片框和列表分隔线——这是系统中最常使用的颜色
  • 将晨光黄(#fff48d)专用于星级评分填充——绝不作为按钮背景、区块填充或文字颜色使用

建议避免

  • 不要为产品卡片、分类卡片或按钮添加阴影——该系统刻意无阴影
  • 不要为 GT Walsheim 修改字间距——其内置字距是设计的一部分;仅在需要特定光学修正时才可覆盖
  • 不要将深钴蓝用于正文或大面积填充——它应仅出现在 32-40px 的公告条带中
  • 不要引入矩形按钮圆角——30px 车轮形是按钮唯一的形态
  • 不要在深海军蓝上叠加深海军蓝而无足够对比度分隔——系统依赖于亮色于暗色、暗色于亮色的配对
  • 不要使用系统 Arial 或无衬线字体替代 GT Walsheim 用于展示或标题角色——应回退至 Outfit 或 Inter,以保留几何感的温暖
  • 不要用色彩填满页面——调色板 95% 为中性色;仅靠一条钴蓝条和几个微小的晨光黄星星承载所有色彩强调