Ashleyandco 网站预览
Ashleyandco 网站预览

Ashleyandco

低语般的药房风格编辑——温暖奶油底页,一个衬线标题如香水广告般漂浮,其余元素则退入静默。

Ashley & Co 以静谧美感的编辑风格呈现:温暖奶油底色,近黑色墨水字体,以及以柔和玫瑰与石质水洗效果呈现的摄影。界面几乎完全无色彩——色彩仅存在于影像中,绝不会用于按钮、边框或文字。两种字体承担主要排版任务:一种精致的衬线字体(Martina Plant)用于类似杂志引语的展示场景,另一种无衬线字体(Neue Haas Grotesk Text)用于所有实用内容。组件轻盈无重:细线边框、无阴影、除画布本身外无填充。留白是核心设计元素—— 宽松 80px 区块间距和非网格化错位,营造出翻阅咖啡桌书籍而非浏览店铺的体验。导航采用极细的全大写、字间距调整的字母;行动号召(CTA)为带细下划线的文本链接。整体效果克制、药房式奢华,自信得足以让产品摄影和衬线标题承载整个品牌。

查看原始网站

使用规范

建议采用

  • 页面背景设为温暖奶油色(#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 为上限。
  • 绝不将装饰元素、渐变或图标叠加在摄影之上;图片应为满幅铺满状态,且保持简洁清晰。