Langbase 网站预览
Langbase 网站预览

Langbase

近黑色基底、渐变展示与细线分隔。

页面以近黑色为基底,搭配近白色文字。字体采用 GeistSans、GeistMono。视觉特点包括渐变展示、细线分隔、扁平表面、分屏构图。适合参考的场景:AI 服务首页、产品演示介绍页。

查看原始网站

使用规范

建议采用

  • 所有主要按钮和幽灵按钮都使用 9999px 圆角。胶囊是系统的形态标志。
  • 所有字号的 GeistSans 都设置 -0.025em 字间距,GeistMono 展示字号则设置 -0.3em。字间距是品牌的一部分。
  • 每个页面都以 Console Charcoal #232324 画布为基础,Nav Ink #0e0e10 只留给顶部导航色带。
  • 极光渐变只以破碎横条形式出现在首屏或功能区块中,绝不用作按钮填充、文字颜色或容器背景。
  • 严格遵守 4px 间距网格,即 4、8、12、16、24、32、40、48、64,没有例外。
  • 通过 #181818 的下沉表面,而非阴影表达纵深。输入框和深色按钮应像压入画布,而非浮在其上。
  • 最大的展示场景使用 60-72px 的 GeistMono,并搭配 -0.3em 字间距,让它像终端,而不是海报。

建议避免

  • 按钮、链接或图标不要引入任何彩色。配色有 99% 为无彩色,极光是唯一例外,而且只用于装饰。
  • 除主要 CTA 上唯一的 1px 轻微阴影外,不要使用其他阴影。纵深来自色调下沉,而非抬升。
  • 页面或区块背景不要使用 #000000。它只留给最深的交互状态和反转文字。
  • 不要打破 4px 网格,也不要创造 4、12、100、9999px 之外的圆角。圆角尺度是封闭的。
  • 极光渐变不要用作文字填充、边框或图标描边。它只以破碎横条形式出现。
  • 不要引入第二种强调色、品牌红或成功绿。系统没有彩色功能配色,状态通过字重和不透明度传达。
  • 不要使用多色或实心图标。只采用 1.5px 的单色轮廓图标,颜色为白或灰。