Twingate
近黑色基底、胶囊形控件与大字排版。
ChatGPT
白色基底、细线分隔与扁平表面。
页面以白色为基底，搭配近黑色文字。字体采用 -apple-system-body。视觉特点包括细线分隔、扁平表面、分屏构图、文字主导。适合参考的场景：AI 工具官网、产品能力介绍页。
查看原始网站使用规范
建议采用
- 所有主要文本和图标使用炭笔墨水（#0d0d0d）——正文文本绝不用纯黑色（#000）；仅在按下状态、提示框和遮罩层中使用纯黑色（#000）
- 元素间距设为6px，区块间距设为24px；节奏来源于一致的6/10/16/24递增关系，而非随意间距
- 保持整个界面无彩色——不使用品牌蓝色、不使用绿色状态、不使用红色错误。状态变化通过字重、填充遮罩和位置传达，而非色彩变化
- 所有按钮、侧边栏项目和卡片均使用10px圆角，仅登录操作按钮打破了这一规则，采用完整胶囊状圆角。
- 系统内所有文本使用字体堆栈（-apple-system, system-ui, BlinkMacSystemFont）渲染。禁止加载自定义网页字体
- 通过1px细线边框（#0000001a）表达层级感，绝不使用阴影。系统在本质上是平面的
- 所有悬停状态使用#0000000d（5%黑色遮罩）——界面有呼吸感，不会闪烁
建议避免
- 禁止引入任何彩色强调色——界面本意为灰阶，加入品牌色彩会破坏‘色彩=数据’的信号，而非装饰
- 禁止使用阴影表达层级。仅使用细线边框；阴影会让平面实用界面显得浮夸
- 禁止将按钮文本或图标设为纯黑色（#000000）；使用#0d0d0d以实现18.5:1的柔和对比度。纯黑色仅用于反色表面
- 禁止在同组控件中混合使用胶囊形半径和10px半径——每类控件应统一使用单一半径并保持一致
- 禁止在UI中使用大于24px的文本；显示层级刻意保持低调，以维持界面对话感，而非宣传感
- 默认状态下导航行禁止添加背景填充——界面外围元素应退居背景，直到悬停时才显现
- 禁止加载自定义网页字体；系统字体在加载时间和无障碍性方面具有优势，而非妥协
