A-dam

近白色基底、大幅摄影展示与胶囊形控件。
页面以近白色为基底,搭配近黑色文字。字体采用 GT Walsheim Pro、Arial。视觉特点包括大幅摄影展示、胶囊形控件、大字排版、分屏构图。适合参考的场景:品牌电商首页、商品展示页。
查看原始网站使用规范
建议采用
- 使用 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% 为中性色;仅靠一条钴蓝条和几个微小的晨光黄星星承载所有色彩强调