D.S. & DURGA 网站预览
D.S. & DURGA 网站预览

D.S. & DURGA

骨白纸上印刷的独立香氛杂志——一片温暖的奶油底色,黑色墨水与超大字号文字共同表达。

D.S. & Durga 如同印在骨白纸上的独立香氛大报。整个系统为温暖单色:一张暖奶油色画布、用于所有文字与分隔线的黑色墨水,以及仅作为条带之间安静色调变化的灰玫瑰次级表面。排版承担主要表现力——Sofia Pro 被推向两端,120px、800 字重的厚实展示字体用作编辑式首屏标题,400 字重的纤细字体用于实用标签,戏剧性的尺寸反差仿佛时尚杂志跨页。摄影主导视觉:暗调背景上的满幅产品照、撕纸拼贴和超大物体裁切直接放在奶油色画布上,没有卡片外框或边线。组件精简到最低限度——没有带背景的按钮、圆角容器或阴影;唯一的交互暗示是细黑箭头和带字间距的大写文字。网站更像艺术物件或印刷目录,而非典型电商体验。

查看原始网站

使用规范

建议采用

  • 仅使用三种颜色:黑色墨水(#000000)、骨白(#f2e9de)和尘粉玫瑰(#ddc9c0)。绝不引入任何彩色强调——该系统刻意保持无彩色暖调。
  • 将 Sofia Pro 推向极致:800 字重在 60-120px 用于展示,400 字重在 12-16px 用于正文。12px 与 120px 之间的尺寸对比构成标志性节奏。
  • 所有组件、图片和表面均使用 0px 圆角。锐利的边角强化了印刷杂志的视觉风格。
  • 导航项和实用标签使用大写,字间距设为 0.05em。仅在 60px 及以上的大尺寸展示文字中保留 -0.05em 字间距,以收紧厚重字重。
  • 让产品摄影实现全幅溢出,不加卡片边框、不加内边距框架、不加阴影。骨白底色本身就是容器。
  • 仅使用虚影文字按钮作为唯一交互样式——大写带字间距的黑色文字,无背景填充,无边框,无圆角。
  • 保持 10px 元素间距和 20px 组件内边距作为基本空间节奏;让区块级空白(50-60px)营造编辑上的呼吸空间。

建议避免

  • 绝不添加彩色强调色——无蓝色链接,无红色促销标签,无绿色成功状态。该系统是单色设计,而非技术限制。
  • 任何 UI 元素的圆角绝不超过 0px。不使用胶囊形按钮,不使用圆角卡片,不使用圆形头像——整体风格是印刷页面,而非应用界面。
  • 绝不使用阴影、内边框或渐变。深度仅来自 #f2e9de 与 #ddc9c0 之间的表面色调变化,以及黑色摄影与奶油底色之间的对比。
  • 绝不给按钮填充实体背景色。虚影文字样式(大写、带字间距、悬停时加下划线)是唯一可接受的交互处理方式。
  • 绝不使用两种以上字体。Sofia Pro 在所有字重和字号下构成整个排版系统——引入第二字体家族将破坏编辑一致性。
  • 绝不将正文文字设置在 12px 以下,或在小字号下使用小于 1.43 的行高。紧凑、密集的排版保持了目录/小册子的密度感。
  • 绝不将图像置于有边框的卡片或框架容器内。图片直接呈现在骨白底色上——空白间距和相邻表面色调是唯一的分隔方式。