Superlative 网站预览
Superlative 网站预览

Superlative

近白色基底、大字排版与细线分隔。

页面以近白色为基底,搭配近黑色文字。字体采用 SL-Light (custom: Superlative Light)、SL-Regular (custom: Superlative Regular)。视觉特点包括大字排版、细线分隔、单栏阅读排版、大幅摄影展示。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • 所有标签、标签和元数据字符串均使用 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 色的透明描边按钮。
  • 绝不使用引入新色彩的插画或图标集;图标应保持当前区块文字颜色的线稿风格。