Twingate
近黑色基底、胶囊形控件与大字排版。
Retool
近黑色基底、胶囊形控件与渐变展示。
页面以近黑色为基底，搭配暖白色文字。字体采用 saansFont、pxGroteskFont。视觉特点包括胶囊形控件、渐变展示、大字排版、紧密字距。适合参考的场景：开发者工具官网、API 服务介绍页。
查看原始网站使用规范
建议采用
- 所有新页面和区块的默认页面背景使用 #151515 — 从不使用纯黑色 (#000000) 或白色。
- 所有显示文本和大标题（48px 及以上）均使用 saansFont 300 字重，字间距在 -0.020em 到 -0.022em 之间 — 这种压缩、轻量的组合是标志性的标题处理方式。
- 仅在「预约演示」、「免费开始」等胶囊型 CTA 按钮上使用 9999px 圆角，其他按钮一律使用 0px 圆角 — 二元圆角语法是刻意设计的。
- 所有主要文本、主要边框和填充型 CTA 背景均使用 #e9ebdf（羊皮纸） — 这种温暖的偏白是系统中唯一的「亮色」。
- 通过背景 #242424 对画布 #151515 进行叠加（无阴影）提升卡片层级 — 可选添加 1px 实线 #3f403d 边框以增强定义。
- 所有眉题标签、导航项和微型UI文字采用pxGroteskFont 400、12-14px和+0.013em字间距，与saansFont正文区分。
- 仅在全视口首屏区域应用首屏径向渐变（从左下角琥珀-红锈色逐渐过渡至透明，覆盖在 #151515 上） — 不应用于内部内容面板。
建议避免
- 从不使用饱和的色彩（#518dd2 蓝色，#e8765 红珊瑚，#9874d2 紫色）作为界面元素 — 它们仅存在于动态闪烁文字和插画/3D 渲染中。
- 从不为卡片或面板添加阴影 — 阴影破坏了扁平材质表面系统；应使用背景明度变化替代。
- 从不同时在一行中使用方角按钮和胶囊按钮 — 选择一种上下文并保持一致（导航使用胶囊，内联内容使用方角/透明描边）。
- 从不设置大于 32px 的标题文本使用 570 字重 — 粗体字重仅用于小标签；大文本必须使用 300 或 380 字重。
- 从不使用纯白色 (#ffffff) 作为文本或背景颜色 — 本系统中的所有「白色」均为羊皮纸 (#e9ebdf)，带有温暖的灰绿调。
- 从不提升区块背景的饱和度超过柔和的青绿色晕染（#185849, #0e352c） — 整个页面在一眼望去时应呈现近乎无彩色的视觉效果。
- 从不为按钮设置 1px 到 7px 之间的圆角值 — 该系统仅使用 0px 或 9999px 作为按钮形状。
