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截图。