Fingerprint 网站预览
Fingerprint 网站预览

Fingerprint

近白色基底、紧密字距与细线分隔。

页面以近白色为基底,搭配近黑色文字。字体采用 Inter、JetBrains Mono。视觉特点包括紧密字距、细线分隔、扁平表面、分屏构图。适合参考的场景:开发者工具官网、API 服务介绍页。

查看原始网站

使用规范

建议采用

  • 使用 #f35b22 作为唯一填充按钮的颜色——绝不引入第二种填充按钮颜色
  • 每个标题中仅有一个词采用行内橙色高亮:将最重要的名词设为#f35b22,其余部分保持#141415。
  • 在所有Inter文字中,将Calt和Liga字体特性设为0,以保留工程化、非装饰性的字形特征。
  • 所有全大写眉题标签都采用JetBrains Mono 11px、500字重和0.88px字间距。
  • 按钮、导航项和徽章使用 4px 圆角;卡片和代码面板使用 12px 圆角;仅在大功能区块中使用 16px 圆角
  • 每个主要行动号召(CTA)都需搭配一个透明描边的次要按钮——在导航或首屏中绝不单独展示主要 CTA
  • 任何代码或终端内容的背景均使用 #141415 或 #2e2e2c——代码块绝不能出现在奶油色底面上

建议避免

  • 不要添加四个已定义的抬升设计变量之外的投影;系统采用细线边框和内嵌高亮,而非悬浮阴影。
  • 不要在非代码/终端场景中使用语法高亮颜色(#88d2c3、#8bc5f3、#c678dd)——这些颜色源自IDE配色,而非装饰用途
  • 不要引入第二种强调色——橙色是系统中唯一的色彩语调
  • 不要在深色背景上使用 #f35b22 而未测试对比度——橙色是针对亮面进行调校的
  • 不要将正文文字设置在 Inter 低于 14px 或 JetBrains Mono 低于 12px——字体层级有明确下限
  • 不要将圆角设置超过 16px——该系统刻意保持低圆角,而非胶囊形
  • 不要使用渐变——系统为扁平设计;若需深度,应使用内嵌高亮 + 圆角 12px 的模式替代