Ashleyandco 网站预览
Ashleyandco 网站预览

Ashleyandco

近白色基底、衬线字形与细线分隔。

页面以近白色为基底,搭配深灰色文字。字体采用 Neue Haas Grotesk Text、Martina Plant。视觉特点包括衬线字形、细线分隔、分屏构图、非对称构图。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 页面背景设为温暖奶油色(#f6f3f0)——在页面层级绝不使用纯白色;白色仅保留于高阶表面。
  • 所有展示标题使用 Martina Plant 42px 字重 500,字间距 0.014em;行高保持在 ~1.10。
  • 导航、按钮及分类标签使用 Neue Haas Grotesk Text 11px 字重 500,全大写,字间距 0.023em——这种微调字间距的全大写标签风格是系统的标志性设计。
  • 各主要区块之间顶部和底部间距保持 80px;充足的负空间是核心设计元素。
  • 所有操作以 Ink Charcoal(#3c3c3c)色的下划线文本链接呈现;绝不使用填充色按钮作为主要操作。
  • 所有图片保持 0px 圆角,且在容器内满幅铺满;设计系统中不存在任何圆角影像。
  • 使用单一 1px 边框,采用 Stone Border(#dedfdb)或 Carbon Black(#000000)颜色用于结构分隔线;系统内任何位置均不使用阴影。

建议避免

  • 绝不引入色彩到界面——整个 UI 必须保持无彩色;色彩仅存在于摄影中。
  • 绝不使用粗体或中等粗体字重;字体调性仅限 400 与 500,其中 500 保留用于强调时刻。
  • 绝不为卡片、按钮、弹窗或图片添加圆角;唯一检测到的圆角(10px)用于零散次要元素,不应扩展至核心组件。
  • 绝不使用阴影来表示层级;应依赖奶油底色上的白色突显与 1px 边框来实现。
  • 绝不将正文或长篇描述居中对齐;所有编辑文本均左对齐,每列最大宽度为 ~500–600px。
  • 绝不使用全大写正文或在 Neue Haas Grotesk Text 中使用大尺寸展示;无衬线字体仅用于 11–24px 的功能性 UI,24px 为上限。
  • 绝不将装饰元素、渐变或图标叠加在摄影之上;图片应为满幅铺满状态,且保持简洁清晰。