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

Hugo & Marie

单色画廊目录:编辑摄影置于无限白色之上,由轻盈衬线字体框定。

Hugo & Marie 像单色策展画布:纯白负空间框住富有戏剧性的铺满边缘的编辑摄影,内容处于近黑墨色与纸白之间的张力中。字体承担全部个性:超细衬线展示字体(100 字重、100px)用于仪式感标题,像画廊墙面文字;克制的新无衬线 soehne(300/400 字重)负责导航至正文。界面拒绝装饰框架:没有填充按钮、彩色强调或阴影,导航是文字加箭头,徽章是细线胶囊形,分区用单像素线分隔。体系以作品集为先,艺术家的图像是唯一彩色场景,界面必须围绕它隐去。

查看原始网站

使用规范

建议采用

  • 所有导航和分区标题默认使用 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;更重字重会破坏克制的编辑语气。