Home 网站预览
Home 网站预览

Home

荧光笔背后的瑞士大报。

Traffic Productions像一张被拖到网页上的字体海报:浅灰画布以黑色极细线框定,唯一的荧光黄像记号笔一样发挥作用,唯一字体Suisse被推至108px展示字号,并采用强烈的负字间距。系统拒绝柔软感:没有阴影,没有圆润表面(胶囊按钮除外),没有渐变;除了作为原始素材处理的单色摄影,也没有装饰影像。布局采用有格线的编辑式网格,内容位于细黑矩形中,像印刷字体样本册中的条目。黄色强调绝不只是装饰,而始终用于标注、高亮或标记操作。信息密度紧凑,字号尺度极端,整体像一份恰好可以滚动的瑞士制作公司大报。

查看原始网站

使用规范

建议采用

  • 每个文字元素都使用Suisse,不使用第二种字体、系统字体或衬线强调字体。
  • 展示标题设为108px、0.96行高及-0.04em字间距;绝不为了“改善可读性”而增大行高,紧凑感就是品牌识别。
  • #fff824仅作为荧光标记使用,出现在标签条、文字高亮和按钮填充中,绝不用于大面积表面背景填充。
  • 内容块以1px Ink(#151515)边框和0px圆角框定;系统建立在带格线的矩形上,而非带阴影的卡片上。
  • 700字重仅用于标签、导航项和页脚链接,正文与标题保持400。
  • 间距保持紧凑:元素间隔20px,标签条内部内边距2-4px,有框区块之间40-48px。
  • 除胶囊按钮(9999px)外,每个表面都使用0px圆角;系统默认采用棱角分明的形状。

建议避免

  • 不要引入第二种强调色;系统是单色调加一种黄色,任何其他色相都会破坏荧光标记的逻辑。
  • 不要使用box-shadow、drop-shadow或任何形式的高度效果;系统是平坦、有格线的印刷品。
  • 标题或正文强调不要使用粗体(700),改用字号、字间距或黄色高亮。
  • 图片、卡片或画框不要使用圆角;系统中唯一的曲线是9999px胶囊按钮。
  • 不要使用全彩摄影;图片应为单色或去饱和度处理,让黄色保持页面中唯一的彩色标记。
  • 不要添加渐变、模糊或玻璃拟态;画布是哑光纸面,而非屏幕。
  • 不要增大展示字号的行高;108px时使用0.96是正确的,放松行距会破坏字体形成的密实整体。