Integrated Biosciences 网站预览
Integrated Biosciences 网站预览

Integrated Biosciences

近白色基底、等宽文字标注与紧密字距。

页面以近白色为基底,搭配深青绿色文字。字体采用 Aspekta、Roboto Mono。视觉特点包括等宽文字标注、紧密字距、扁平表面、分屏构图。适合参考的场景:AI 工具官网、产品能力介绍页。

查看原始网站

使用规范

建议采用

  • 所有展示与正文文本均使用 Aspekta 字重 400 —— 从不使用粗体、中等粗体或斜体。层级仅通过大小和字间距实现。
  • 将生物发光青色(#cef79e)在箭头按钮上精确填充 40×40px,在标签点上为 6px 直径。绝不将该点缀放大至超过微表面尺寸。
  • 字间距按比例设置:158px 时为 -0.03em,89–111px 时为 -0.02em,36–42px 时为 -0.006em,16–19px 时为 -0.001em。正是字间距使单字重在极端尺寸下仍能保持可读性。
  • 所有分隔线与卡片边框均使用 1px 细线,亮色背景用 #c9cbbe,暗色背景用 #4d5757。绝不使用更粗的边框,也绝不使用阴影营造深度。
  • 将 Roboto Mono 保留用于导航项、区块计数(01/02)、出版标签、日期和按钮文字。绝不用于标题或超过标签长度的正文内容。
  • 保持 80–120px 的垂直区块间距。系统具有呼吸感 —— 压缩会破坏实验室仪器的平静氛围。
  • 每个操作必须配对其反向表面:亮背景上使用深灰按钮(#222f30 填充),暗背景上使用白按钮(#ffffff 填充)。绝不将生物发光青色作为主要按钮背景。

建议避免

  • 绝不引入 Aspekta 的其他字重或任何无衬线字体用于标题。单字重系统是品牌的标识 —— 增加粗体会破坏这一特性。
  • 绝不将 #cef79 作为正文、大区域、渐变或首屏叠加背景使用。该点缀仅限于微尺度,有其原因。
  • 绝不添加盒阴影、投影阴影或任何抬升效果。深度仅来自色彩对比和边框。
  • 绝不使用纯 #000000 作为内容区域 —— 仅保留用于页脚。内容暗色表面为 #222f30,带有绿色底调。
  • 绝不将暖中性色(#e7e8e1、#c9cbbe)用于暗色区域。这些颜色在深渊黑背景下会消失,破坏表面层级结构。
  • 绝不将图片置于无圆角容器(最小半径 12px)或未经过暗色科学处理之外。生活方式摄影会破坏实验室仪器语言的语境。
  • 绝不使用多个强调色。系统的强大之处在于单色纪律加一个信号。引入第二个色彩会稀释品牌的视觉张力。