Instrument 网站预览
Instrument 网站预览

Instrument

白色基底、大字排版与衬线字形。

页面以白色为基底,搭配近黑色文字。字体采用 Instrument-Sans、Instrument-Serif。视觉特点包括大字排版、衬线字形、圆角卡片、网格布局。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 所有功能性UI都采用Instrument-Sans 400字重;绝不要引入粗字重,系统像一台单一字重机器。
  • 每个交互元素,包括导航、按钮、筛选小标签和徽章,都采用999px圆角;胶囊是唯一的交互形状。
  • Instrument-Serif只保留给64px的编辑式陈述,绝不能出现在导航、标签或正文中。
  • 文字标志设为352px、0.85行高和-0.05em字间距,使其从边到边延伸,越过容器栏间距。
  • 徽章、元数据和导航等全部小型全大写标签,字号保持11–12px,字间距0.05em–0.11em,感觉应像印刷说明。
  • 所有深色表面和文字都使用#070708,而非#000000;细微暖意让系统不显得像冰冷数字界面。
  • 首屏或功能区块反转为满幅#070708,然后回到#ffffff;页面通过二元明度变化呼吸。

建议避免

  • 不要引入任何饱和色;系统色彩丰富度为0%,加入色相会破坏编辑式纪律。
  • 主要操作不要采用填充按钮背景;所有CTA都是描边胶囊或文字链接。
  • 不要使用shadow或drop-shadow效果;深度来自表面反转(#070708与#ffffff),绝非模糊。
  • 正文字号不要低于14px或高于23px;body-sm与subheading之间的范围是主要工作区间。
  • 卡片、图像或内容块的圆角只采用24px;混用圆角会破坏胶囊加24px的两形状系统。
  • 同一视口不要叠放衬线字体与大型展示无衬线字体;文字标志独占自己的屏幕。
  • 不要使用#000000或纯白;#070708的暖意与#ffffff的轻微奶油色感,才是系统实际的语气。