Turso 网站预览
Turso 网站预览

Turso

服务器机房中的终端发光效果——钢架机柜上的一盏薄荷绿 LED 灯。

Turso 采用深空开发控制台的视觉风格:近黑色画布带有微妙的青色调,一个鲜明的薄荷绿作为系统‘开机’信号,另配一个电光紫用于 测试版/实验性场景的标注。界面保持安静且以文字为主——白色文本在深色背景上承载内容——而色彩仅作为功能性的强调,用于标题、标签、主要操作按钮以及界定产品卡片的细线边框。组件呈现出轻盈的终端感:胶囊形按钮、带有单像素渐变边框的薄边卡片、带有等宽字体特征的代码片段,以及无阴影的扁平表面。整体风格如同由熟悉终端操作的人所设计的基础设施产品——克制、自信,且毫无争议地偏暗。

查看原始网站

使用规范

建议采用

  • 将 #4ff7d1 作为唯一主要操作背景色和品牌调性色彩——每个视口区块仅设置一个 CTA。
  • 所有按钮和标签的圆角半径设为 9999px;代码块使用 12px,产品卡片使用 16px。
  • 全局保留 -0.025em 字间距;在显示尺寸下收紧(72px 时为 -1.8px)。
  • 通过在扁平的 #121b1f 背景上添加 1px 颜色边框(#4ff7d1 或 #a21caf)来区分产品卡片——绝不使用阴影。
  • 仅在首屏展示标题中使用 Inter 字重 800;产品卡片标题使用 600-700,其余内容使用 400-500。
  • 将 #d946ef 紫色限定于 测试版 标签、靠近代码的按钮以及自托管产品卡片——绝不作为通用辅助色使用。
  • 保持 80px 的区块间距和 40px 的卡片内边距作为阅读舒适度的节奏基准,适用于深色模式。

建议避免

  • 禁止引入阴影或层叠高光——深度仅来自表面色调变化和彩色边框。
  • 禁止将 #4ff7d1 用于正文或长段落文本——薄荷绿仅用于标题、链接和 CTA 背景。
  • 禁止在同一表面元素上同时使用薄荷绿和紫罗兰色;二者代表不同的产品版本,必须严格隔离。
  • 禁止使用除以下四个值以外的圆角:9999px、24px、16px、12px。禁止使用 4px 或 8px 圆角。
  • 禁止正文文本低于 #86898c ——任何更暗的颜色在深色画布上都会导致对比度不足。
  • 除产品卡片外,任何边框均不可使用彩色——UI 分割线保持为 #283945。
  • 禁止引入额外的辅助色——仅以薄荷绿与紫罗兰色的双色系统构成品牌语言。