Twingate
近黑色基底、胶囊形控件与大字排版。
N8n
近黑色基底、渐变展示与分屏构图。
页面以近黑色为基底，搭配白色文字。局部操作控件以橙色强调。字体采用 geomanist、geomanist-book。视觉特点包括渐变展示、分屏构图、居中构图、产品图像展示。适合参考的场景：产品介绍页、品牌展示页。
查看原始网站使用规范
建议采用
- 仅使用 #0e0918 作为页面背景——绝不替换为纯 #000000 或中性深灰；紫色底色对整个配色系统至关重要；
- 仅将 余烬 渐变（linear-gradient(30deg, rgb(253,137,37), rgb(255,12,0)）应用于主要 CTA 按钮——将其用于装饰元素会削弱其焦点作用；
- 在 48–54px 显示标题中，将 geomanist 300 字重设置为行高 0.88，字间距为 -0.018em 到 -0.020em；这种紧凑堆叠是刻意设计的；
- 使用内嵌盒阴影（rgba(255,255,255,0.1) 1px inset + rgba(255,142,93,0.3) 底部内嵌）替代透明背景卡片的边框属性；
- 保持卡片表面为 rgb(26,22,36) 或 rgb(27,23,40)——恰好比基础虚空高一个可见层级；存在三个明确的表面层级：页面 → 卡片 → 提升的面板；
- 按钮和输入框使用 8px 圆角，标准卡片使用 16px，大功能面板使用 24px——根据组件规模正确应用对应层级；
- 仅将 Electric Current 渐变（linear-gradient(141deg, #077ac7, #6b21ef)）用于链接下划线、聚焦环和画布连接线——它传递交互和数据流动的信号；
建议避免
- 绝不使用暖色或中性深灰（#1a1a1a, #222, #333）作为表面——所有表面必须带有紫色底色，以区别 n8n 的深色与普通深色模式；
- 绝不使用 geomanist 700 或 800 字重——字体系统刻意限制在 300 和 400；重字重会破坏克制的视觉风格；
- 绝不将正文文本置于 #ffffff 且在正常阅读尺寸下——应使用 #d1cece 或 #e5e7eb；纯白色在 15–16px 时会与紫黑色背景产生刺眼反差；
- 永远不要为卡片的层级效果使用外扩阴影（外置 box-shadows）——层级感应通过背景色的逐级变化来表达，而不是通过阴影的抬升
- 绝不将 余烬 渐变用作区块或横幅的背景填充——它仅出现在交互式 CTA 按钮上；
- 绝不将 9999px 圆角应用于卡片或区块容器——胶囊形 圆角（9999px）仅保留用于标签、状态指示器和圆形图标包装器；
- 绝不以合作伙伴/客户品牌的色彩展示其标志——社交证明行中的所有标志必须为单色 #d1cece，以避免配色污染
