Superlative 网站预览
Superlative 网站预览

Superlative

工业产品手册置于工作室玻璃之后。一个暗房展示柜,其中硬件、标签与超大标题共享一个连续、几乎无重的平面。

Superlative 采用工业设计手册的语言风格:温暖的奶油色画布、戏剧性的深色产品摄影,以及大尺寸的编辑级展示字体,其表现方式更像印刷目录而非SaaS落地页。几乎所有的UI都是单色——视觉趣味来自一个温暖的 余烬 色调强调,呼应硬件本身的LED指示灯,从不通过装饰性渐变或插画实现。组件刻意稀疏且近乎锐利——细1px边框、紧致3px按钮圆角、15px间距——产品与排版本身便在说话。采用紧缩的全大写标签并搭配宽字间距,形成一种排版接线图,如同工程示意图一般标识屏幕上每一个元素。

查看原始网站

使用规范

建议采用

  • 所有标签、标签和元数据字符串均使用 SL-Regular-Condensed 15px 全大写,字间距设为 0.08em,这是该系统的标志性排版手法。
  • 在 SL-Light 字体中以 400 字重渲染 90px 的展示标题,绝不使用粗体;在展示尺寸下采用的轻量级字重,是品牌最鲜明的表达。
  • 所有按钮使用 3px 圆角,徽章使用 15px 圆角;其余所有元素(卡片、图片、容器)保持 0px 圆角——整个系统几乎完全锐利。
  • 将 #e66f27 保留用于 LED 状态、激活状态或单图标强调——绝不可作为填充、渐变或大面积使用。
  • 将页脚和链接列表以 15px 间距的紧密垂直列堆叠,如同硬件后板规格板的布局方式。
  • 由产品摄影承载所有色彩信息;周边UI必须严格保持无彩色。
  • 仅使用 #000000(在浅色背景上)或 #ffffff(在深色背景上)的 1px 边框作为唯一结构分隔——不使用阴影,也不为分隔添加填充。

建议避免

  • 除 #e66f27 外,绝不引入饱和的品牌色——该系统本质上是单色的。
  • 绝不使用粗体或中粗字重用于标题;在 90px 大小下使用 400 字重是刻意的选择。
  • 绝不使用大于 15px 的圆角——任何更柔和的圆角都会破坏工业产品类比。
  • 绝不添加阴影、光晕或渐变用于层级区分——分隔仅来自背景色变化和 1px 边框。
  • 绝不将压缩字体用于超过几词的正文内容;其 0.08em 字间距和全大写处理使其在段落长度下无法阅读。
  • 绝不使用填充色的行动号召按钮——所有操作始终是带有白边或 #141414 色的透明描边按钮。
  • 绝不使用引入新色彩的插画或图标集;图标应保持当前区块文字颜色的线稿风格。