Twingate
近黑色基底、胶囊形控件与大字排版。
Better Stack
近黑色基底、胶囊形控件与圆角卡片。
页面以近黑色为基底，搭配浅蓝色文字。字体采用 Helvetica Now Text、Helvetica Now Display。视觉特点包括胶囊形控件、圆角卡片、渐变展示、紧密字距。适合参考的场景：技术产品首页、开发工具说明页。
查看原始网站使用规范
建议采用
- 卡片、输入框和分隔线的默认边框色使用#939db8；它是系统的结构边框。
- 紫蓝渐变（linear-gradient(353deg, #5b63d3, #7c87f7)）只用于主要CTA；一种渐变只承担一个任务。
- 导航和填充按钮采用内嵌白色高光（rgba(255,255,255,0.25) 0 1px 3px inset），形成1px顶部边缘光。
- 标题采用Helvetica Now Display 500字重，而非700；权威来自精确，而非重量。
- 所有字号统一保持-0.01em letter-spacing；字间距是系统身份的一部分。
- 正文启用字体特性“ss01”、“ss03”、“ss04”和“ss19”，展示文字额外启用“salt”和“ss02”；它们塑造有辨识度的字形。
- 通过表面色调（#0f101a → #151621 → #1f2433）定义深度，而非投影。
建议避免
- 不要使用投影表现抬升；系统只采用内嵌高光和表面对比。
- 不要将长春花蓝（#98a4f7）作为填充按钮背景；它属于链接和渐变色标。
- 正文或导航文字不要使用700字重；UI最高为500，700只保留给强调。
- 不要引入新的彩色；10%色彩丰富度的预算已经全部用于紫蓝强调。
- 卡片或按钮不要采用0-4px的锐利圆角；卡片为16px，按钮为9999px，输入框为10px。
- 卡片表面不要采用画布色（#0f101a）；卡片至少要达到#151621，才能与背景区分。
- 不要使用鲜亮或饱和的文字颜色；文字只能为白色、#c9d3ee或#646e87。
