Hugo & Marie 网站预览
Hugo & Marie 网站预览

Hugo & Marie

白色基底、大幅摄影展示与细线分隔。

页面以白色为基底,搭配近黑色文字。字体采用 saol-display、soehne。视觉特点包括大幅摄影展示、细线分隔、衬线字形、大字排版。适合参考的场景:设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • 所有导航和分区标题默认使用 soehne 300 字重;界面框架不默认使用 400 或更高字重。
  • 仪式感展示场景采用 saol-display,100 字重、100px、0.95 行高;不用于低于 48px 的文字。
  • 所有按钮和链接都是文字加箭头(→),不使用填充矩形;体系没有填充按钮。
  • 9999px 圆角仅用于徽章;卡片、图像和输入框等其他元素保持 0px。
  • 内容分区使用 1px solid #0a0a0a 细线分隔,而非空白间距或阴影。
  • 卡片和内容块的唯一表面色为白色(#ffffff),不以带色、米白或灰填充分组。
  • 图像用作分区锚点时从边缘到边缘铺开,不加边框、内边距或圆角。

建议避免

  • 不要引入彩色强调、品牌色或装饰渐变;体系严格无彩色,添加彩色会破坏编辑约定。
  • 不要使用 box-shadow、drop-shadow 或任何抬升效果;深度由图像延展和细线表达,而非阴影。
  • 正文或导航不使用 soehne-mono;它仅用于徽章标签和小型元信息。
  • 正文尺寸(14–22px)不使用 saol-display,它仅为展示字体;正文由 soehne 承担。
  • 卡片、图像或输入框不加 border-radius;所有非徽章元素默认均为 0px。
  • 按钮或交互元素不使用填充背景色;文字链接与细线按钮是唯一交互模式。
  • 界面文字的 soehne 字重不超过 400;更重字重会破坏克制的编辑语气。