Twingate 网站预览
Twingate 网站预览

Twingate

近黑色基底、胶囊形控件与大字排版。

页面以近黑色为基底,搭配白色文字。字体采用 TT Hoves Light、TT Hoves Medium。视觉特点包括胶囊形控件、大字排版、紧密字距、分屏构图。适合参考的场景:开发者工具官网、API 服务介绍页。

查看原始网站

使用规范

建议采用

  • 所有48px及以上展示标题都使用300字重(TT Hoves Light),轻如低语的字重是标志性特征。
  • #eef35f(Live Wire)用于任一屏幕中唯一的主要CTA,以及最大标题中的一个强调词。
  • 所有大文字采用紧凑负字间距:68px时为-0.018em,随字号缩小,到14px时为0。
  • 所有按钮、徽标和胶囊标签块都使用50px(胶囊形)圆角。
  • 产品卡片和图片容器采用12px圆角,输入框与较小交互元素采用8px。
  • 通过明暗层叠(#000000 → #0e0f11 → #141617 → #1d2023)区分表面,不使用投影。
  • Signal Violet(#b6abff)仅用于正文中的行内品牌强调,以及顶部入门辅助栏。

建议避免

  • 绝不用投影表现高度,系统通过内嵌极细高亮和层叠深色表面表达深度。
  • 每个视口绝不出现超过一个填充黄绿色CTA,它是单一操作强调。
  • 正文绝不低于14px,也不使用300字重;轻字重仅用于大幅展示。
  • 绝不添加装饰性渐变;系统是带彩色强调的平面深色,而非光泽质感。
  • 深色表面上绝不使用纯黑(#000000)文字;文字始终应为白色或银色调(最低为#cfcfd3)。
  • 按钮绝不打破50px胶囊惯例,描边或无填充变体也必须使用完整胶囊圆角。
  • 绝不引入暖色或多彩处理的摄影;所有影像均为单色、矢量或UI截图。