Josh Warner 网站预览
Josh Warner 网站预览

Josh Warner

近黑色基底、细线分隔与宽松留白。

页面以近黑色为基底,搭配近白色文字。字体采用 Inter Display。视觉特点包括细线分隔、宽松留白、扁平表面、大幅摄影展示。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 深色虚空上的所有文字使用 Bone(#f0f0f0),不使用与暖米白色板冲突的纯白。
  • 每个交互按钮、徽章、导航项和头像都使用 100px border-radius;胶囊形是标志性几何形态。
  • 全部文字保持 Inter Display 400 字重,不引入粗体或半粗体;仅靠尺寸与间距建立层级。
  • 所有文字使用 0.04em letter-spacing;一致的正字间距使轻盈文字可读,并赋予体系审慎、精确的感觉。
  • Live Wire(#08ff00)仅用于可用性状态圆点;它是唯一彩色,不出现在其他位置。
  • 页面背景使用 Void(#0f0f0f),而非纯黑;近黑减少 OLED 拖影,并提供细微画布深度。
  • 图像容器采用 4px border-radius,全部交互元素采用 100px,保持尖角与圆润的双重关系。

建议避免

  • 除 Live Wire 绿之外不引入任何新强调色;体系有意单色,额外色相会破坏画廊虚空。
  • 卡片或表面不以投影抬升;深度来自作品本身或表面色调变化,而非阴影堆叠。
  • 标题不加粗,也不使用 500+ 字重;整个字体体系在 400 下呼吸,增重会扰乱扁平、均衡的质感。
  • 按钮、导航项或徽章不使用尖角(<12px);胶囊形几何就是视觉身份。
  • 卡片或表面背景不使用纯黑(#000000),它仅用于细线边框和边缘;表面采用 Void(#0f0f0f)。
  • 正文不低于 14px,也不超过 40px;字体尺度有意压缩,偏离会破坏编辑克制。
  • 界面元素不添加渐变、发光或铺色;视觉能量来自 3D/摄影内容,而非界面装饰。