Incommonwith 网站预览
Incommonwith 网站预览

Incommonwith

牛血墨色的编辑工作室:暖奶油页面、阳光下的室内摄影,以及唯一深勃艮第墨色,像精细凸版印刷一样承担每个单词、边框和链接。

In Common With 像一本印刷设计季刊,而不是店铺:暖奶油白纸张 #fafaf9 构成画布,满幅黄金时刻室内摄影承担视觉分量,唯一深牛血墨色 #4a0a05 则用于每个文字元素、边框和链接。字体系统将用于 24px 标题的古典 Caslon Ionic 衬线,与用于正文、导航和界面的新无衬线 Mier A 搭配;这种文学性张力反复出现在首屏叠加文字、品类名称和期刊标题中。布局从容,满幅首屏、侧栏日期戳、横向产品轮播和宽裕负空间,都让摄影引领视线。表面平坦、角落锐利,没有阴影;纵深来自摄影与暖色温,绝不来自悬浮效果。

查看原始网站

使用规范

建议采用

  • 所有文字、边框和链接都使用牛血色 #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+。