arte* 网站预览
arte* 网站预览

arte*

暖白色基底、大幅摄影展示与胶囊形控件。

页面以暖白色为基底,搭配橙色文字。字体采用 Poppins、Parafina。视觉特点包括大幅摄影展示、胶囊形控件、圆角卡片、大字排版。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 所有展示文字和标题都使用 Parafina,或替代字体 Bricolage Grotesque,字重为 500;既不高于 500,也不低于 500。单一字重处理是标志性特征。
  • 首屏叠加文字使用 Citron Beam #e8e359,直接置于满幅自然摄影上。黄绿色与森林绿的对比,是品牌最容易识别的视觉场景。
  • 展示文字的行高设为 0.80–0.90。紧压的行高不可缺少;不要用 1.2+ 行高让展示标题变得疏朗。
  • Harvest Copper 正文中的行内文字强调使用 Morning Glory #7997ff。强调来自颜色,而非字重或样式变化。
  • 所有正文和列表文字默认使用 Harvest Copper #ab5700。这是品牌的墨色,而不是黑色或灰色。
  • 所有交互元素,包括按钮、链接和菜单触发器,都使用 31px 圆角,不是 9999px,也不是 8px。31px 的柔和胶囊形就是系统圆角。
  • 满幅编辑摄影作为表面层,并将展示文字直接叠加其上。不要在照片上再放一个承载文字的方框。

建议避免

  • 标题不要使用 Arial、Helvetica 或任何系统字体。极大字号的 Parafina 是品牌主要身份。
  • 正文不要使用黑色 #000000 或深灰色。Harvest Copper #ab5700 才是默认墨色。
  • 卡片或按钮不要添加投影、模糊或悬浮效果。纵深来自摄影与留白,而非阴影。
  • 内容不要采用紧密的 12 列卡片网格。编辑区块应以单列区块和大型展示文字自然流动。
  • Parafina 的字重不要超过 500,不加粗,也不使用极黑字重。展示文字始终只有一种字重。
  • 页面背景不要使用蓝色或灰色。Wheat Cream #e5dccd 是唯一画布。
  • 首屏摄影不要添加渐变叠层、暗角效果或文字背景方框。Citron Beam 文字直接置于图像上。