OhDada 网站预览
OhDada 网站预览

OhDada

暖白色基底、细线分隔与满幅色块。

页面以暖白色为基底,搭配深橙色文字。字体采用 GrandSlang-Roman、Neue Haas Grotesk Display。视觉特点包括细线分隔、满幅色块、衬线字形、大幅摄影展示。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 仅使用 GrandSlang-Roman 字重 100 作为标志和标题文字 —— 严禁加粗或大于 72px
  • 交替使用奶油白 (#e6e0d9) 和薰衣草石 (#b7b3be) 作为满幅区块背景,以营造节奏感,而不引入新色彩
  • 为所有主要区块设置 115px 的上/下内边距,以保持画廊墙的呼吸感
  • 将所有正文和导航文字设置为 Neue Haas Grotesk 字重 400–500,鞍棕色 (#5d3a19),字号 16–17px
  • 链接和交互元素使用 1px 鞍棕色下边框,而非填充背景
  • 所有组件(卡片、按钮、图片和产品框)的圆角均为 0px —— 边缘保持锐利
  • 让产品摄影成为唯一引入额外色彩的来源(蓝色、雕塑中的白色);界面本身仅使用三种色调

建议避免

  • 禁止使用渐变、阴影或立体效果 —— 系统设计为平面化
  • 禁止任何元素使用圆角;0px 半径是编辑风格的结构性特征
  • 禁止在配色中引入第四种颜色 —— 鞍棕色、奶油白和薰衣草石是完整的色彩语汇
  • 不要将GrandSlang-Roman设置在58px以下或除100粗细以外的任何字重;在小尺寸下它会失去其特色
  • 禁止为主要操作使用填充背景按钮;应使用带棕色边框的轮廓链接样式
  • 禁止正文文字居中对齐 —— 整个布局始终左对齐,包括首屏区域
  • 禁止添加悬停动画、颜色过渡或动态效果 —— 界面读感如同印刷画册