Grafbase 网站预览
Grafbase 网站预览

Grafbase

工程蓝图置于冷调大理石上

Grafbase呈现为干净冷静、近单色调的开发者工具:白色画布配炭灰文字,只有一级灰色表面,界面本身没有彩色干扰。系统的温暖感和提示全部来自薄荷绿到青色的渐变公告栏,以及产品截图中柔和的薄荷绿和青色淡染。排版将唯一字体家族Inter推向不同极端:90px展示字号、600字重和-0.05em字间距,40px标题采用500字重,正文则是平静的16px。组件像方格纸:6px按钮圆角、20px卡片圆角、极细的1px边框,几乎没有阴影。整体像工程构造,而非装饰,是恰好以网站形式出现的API控制台。

查看原始网站

使用规范

建议采用

  • 所有主要文字和主要操作按钮都使用Graphite Ink(#1b1b1b);绝不为CTA引入彩色品牌色。
  • 显示标题设置为 90px Inter 600 字重,字间距 -4.5px;标题设置为 40px Inter 500 字重,字间距 -1px。负字间距是标志性特征——禁止归零。
  • 所有矩形按钮设置 6px 圆角,胶囊形按钮设置 40px,所有卡片和大内容面板设置 20px。
  • 界面在白色 #ffffff 和 #eaeaea 表面保持完全单色。仅将森林绿到青绿渐变保留于公告栏。
  • 次要文本和辅助说明使用 Steel(#60646c),三级元数据使用 Ash(#7c7c7c)——禁止引入新灰度。
  • 产品模型展示和集成图块使用冷色三元组(Mint Signal、Moss、Sky),让色彩身份存在于产品内部,而非营销界面框架上。
  • 仅在主要按钮和提升预览面板上应用单层阴影 rgba(0,0,0,0.15) 0px 4px 20px 0px——禁止叠加多层阴影。

建议避免

  • 禁止在界面中引入饱和的强调色——系统本意为 99% 无彩色。
  • 禁止使用纯黑色(#000000);应使用 Graphite Ink(#1b1b1b),其在冷灰背景上更柔和。
  • 不要引入第二种字体;Inter是系统字体,从13px说明文字到90px展示文字均使用它。
  • 禁止在显示和标题文本上将字间距设为 0——-4.5px / -1px 的负字间距是使大字号显得工程化而非网络化的关键。
  • 禁止在透明描边按钮、卡片或导航组件上添加阴影——阴影仅属于主要操作按钮和首屏预览面板。
  • 不要为悬停或激活状态引入新颜色的按钮变体;改用轻微降低不透明度,或细微的bg-gray-100样式。
  • 禁止将绿色到青绿渐变置于除顶部公告栏之外的任何位置——该渐变是单次信号,非可复用表面。