Abel 网站预览
Abel 网站预览

Abel

白色基底、大幅摄影展示与等宽字体。

页面以白色为基底,搭配近黑色文字。字体采用 Founders Grotesk、Founders Grotesk Mono。视觉特点包括大幅摄影展示、等宽字体、宽松留白、单栏阅读排版。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 所有标题均使用 Founders Grotesk 字重 300——这种轻盈无衬线的笔触是品牌的编辑签名,绝不使用粗体或中粗体用于展示文本。
  • 所有按钮、链接、导航和区块标签均使用 Founders Grotesk Mono 12–14px 大写,字间距 +0.03em,等宽字体的语感使界面读作排版尾页。
  • 系统以 #030303 墨水和 #ffffff 纸张为基准;仅将 #f6eada 亚麻奶油色作为细微表面晕染或细线强调,绝不作为强烈填充块出现。
  • 每个区块提供 72px 的垂直留白;这种宽敞的密度是编辑风格的不可妥协要求。
  • 保持所有角落锐利——按钮、卡片、图片和输入框的圆角均为零,以维持印刷/编辑风格的质感。
  • 用全开版摄影大片与白色产品表面交替,营造画册节奏感。
  • 使用 28px 压缩的等宽显示(行高 0.92,字间距 -0.02em)用于区块级等宽标题,而非单独使用大号无衬线字体。

建议避免

  • 不要使用层叠、投影或任何深度效果——系统刻意保持平面;任何阴影都会破坏印刷纸张的幻觉。
  • 不要在界面配色中引入饱和色——所有色彩温度来自摄影,而非界面填充。
  • 不要在标题中使用 Founders Grotesk 字重 700 或 800——整个品牌调性建立在字重 300 的克制之上。
  • 不要使用句子大小写;所有功能等宽文本均为大写。
  • 不要在导航中使用大于 16px 的图标,或在辅助场景中使用大于 20px 的图标——系统以文本为核心,图标仅为辅助标记。
  • 不要用颜色填充按钮——按钮要么为全黑 #030303(主要状态),要么为透明描边下划线等宽文本(次要状态);不存在彩色按钮状态。
  • 不要为产品图片添加边框或背景——香氛瓶和生活方式照片直接浮现在画布上,无任何边框。