Twingate 网站预览
Twingate 网站预览

Twingate

带有紫罗兰和黄绿色信号灯的午夜控制室。整个界面位于近黑虚空中,两种强调色像状态LED一样在仪表板组件间脉动,克制、有工程感、略带未来气息,却不炫耀。

Twingate如同一间午夜指挥中心:几乎纯黑的画布层叠炭灰表面,电光紫罗兰和黄绿色作为实时信号强调,而非装饰。系统以安静、轻字重的排版表达:大标题采用TT Hoves Light及紧凑负字间距,正文采用TT Hoves Regular,让字体结构承担分量,颜色则作为功能性标点。组件具有仪表板感:胶囊按钮、代替投影的极细内嵌高亮,以及圆润但不柔软的8–12px圆角,更像工程硬件而非柔软材料。最终形成一套深色、安全级的界面,更像控制台而非营销页面,每个彩色时刻都值得占据屏幕空间。

查看原始网站

使用规范

建议采用

  • 所有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截图。