Twingate
近黑色基底、胶囊形控件与大字排版。
Index
近黑色基底、渐变展示与细线分隔。
页面以近黑色为基底，搭配白色文字。字体采用 Index、Inter。视觉特点包括渐变展示、细线分隔、居中构图、产品图像展示。适合参考的场景：效率工具官网、协作产品介绍页。
查看原始网站使用规范
建议采用
- 使用珊瑚到红色渐变（oklch 0.81 0.15 47.92 → oklch 0.69 0.26 16.93）专用于主 CTA——它是唯一暖色元素，且必须保持稀有性。
- 所有边框设为 1px，使用 Iris Border（#292a4d）或 Graphite（#202333）——禁止使用 2px 边框；系统依赖细线精度，而非边框粗细。
- 所有交互元素（按钮、导航、标签、输入框）均设置 30px 半径——胶囊形是标志性几何结构，而非圆角矩形。
- 卡片与面板使用 12–20px 半径——禁止使用 4px 或 8px；系统具有柔和、氛围感，而非尖锐或技术感。
- 在所有包含数字的场景中启用表格数字（'tnum'）——密集表格 UI 依赖数字对齐。
- 将饱和色映射至功能：电蓝色 = 进行中，弧紫罗兰 = 计划中，炭珊瑚 = 阻塞/高优先级，黄绿 = 已完成。禁止用于装饰用途。
- 保持卡片内边距为 12px，元素间距为 8px——系统信息密度高，非宽敞布局；留白通过区块间距（64px）实现，而非内部填充。
建议避免
- 禁止引入新的背景色——系统为亮度层级堆叠：深渊 → 夜幕 → 灰 蓝灰色 → 碳灰。新增表面层级将破坏深度结构。
- 禁止使用阴影实现立体感——设计依赖边框亮度与背景对比，而非投影阴影。卡片通过比画布更亮实现浮起，而非投射阴影。
- 禁止在单个视口内重复使用珊瑚 CTA——其稀有性正是其作为信号的核心功能。
- 禁止在小于 16px 的正文文本中使用 #ffffff 100% 不透明度——小字号文本应使用 #b4b4bb 或 #9b9ba4 作为次级/弱化内容，以维持层级。
- 禁止将蓝色/紫色/红色作为按钮填充背景——这些颜色仅用于功能点或标签；唯一填充按钮为珊瑚渐变。
- 禁止字间距大于 0.0150em 或小于 0.0030em——光学字间距已精确调校；任意间距会破坏几何节奏。
- 禁止使用浅色模式变体——系统本就为夜间设计；山景与深色 UI 是不可分割的整体。
