Turso

近黑色基底、胶囊形控件与渐变展示。
页面以近黑色为基底,搭配白色文字。字体采用 Inter。视觉特点包括胶囊形控件、渐变展示、细线分隔、等宽字体。适合参考的场景:技术产品首页、开发工具说明页。
查看原始网站使用规范
建议采用
- 将 #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。
- 禁止引入额外的辅助色——仅以薄荷绿与紫罗兰色的双色系统构成品牌语言。