Incommonwith 网站预览
Incommonwith 网站预览

Incommonwith

近白色基底、衬线字形与大幅摄影展示。

页面以近白色为基底,搭配深红色文字。字体采用 Mier A、Caslon Ionic。视觉特点包括衬线字形、大幅摄影展示、宽松留白、扁平表面。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有文字、边框和链接都使用牛血色 #4a0a05。这是唯一彩色,必须承担每个单词、线条和交互元素。
  • 品类名称、期刊标题和文字标志使用 24px 的 Caslon Ionic 衬线,所有正文、导航和界面文字则搭配 13-18px 的 Mier A 无衬线。
  • 摄影从边缘到边缘填满容器,圆角为 0px,内边距为 0px。图像必须满幅,绝不加框或圆角。
  • 导航行和相关元素之间使用 12px 间距;主要区块之间为 64px,让摄影拥有呼吸空间。
  • 页面背景设为暖奶油色 #fafaf9,绝不使用纯 #ffffff。温暖灰白对纸张质感不可缺少。
  • 产品品类采用带小型箭头控件的水平滚动轮播,而不是分页网格或筛选器。
  • 期刊卡片的日期戳,以独立列中的小型侧栏标签呈现,而不是叠在图像上的徽章或胶囊。

建议避免

  • 不要使用实心彩色按钮。系统完全由文字链接驱动,带轮廓或下划线的 #4a0a05 文字链接是唯一操作样式。
  • 图像、卡片或面板不要添加圆角。只有 9999px 的胶囊标签可以圆润,其他元素全部保持直角。
  • 不要用投影制造悬浮效果。纵深来自摄影与暖色温,绝不来自 box-shadow。
  • 不要使用纯白 #ffffff 背景,始终采用 #fafaf9 或 #f8f7f1。温暖感就是品牌。
  • 不要在牛血色之外引入强调色。配色刻意保持狭窄,加入蓝、绿或其他色相会破坏编辑设计的连贯性。
  • 不要使用系统字体,也不要替换 Caslon/Mier 组合。衬线与无衬线的张力,就是品牌文字身份。
  • 正文不要居中,也不要采用大型展示标题。系统左对齐且克制,标题是 24px,而不是 48px+。