Twingate
近黑色基底、胶囊形控件与大字排版。
Mapbox
近黑色基底、胶囊形控件与非对称构图。
页面以近黑色为基底，搭配白色文字。局部操作控件以蓝色强调。字体采用 Cera Pro。视觉特点包括胶囊形控件、非对称构图、居中构图、大字排版。适合参考的场景：产品介绍页、品牌展示页。
查看原始网站使用规范
建议采用
- 将 #007afc 专用于主要交互元素（CTA 按钮、激活标签、需要高强度强调的文字链接）—— 严禁作为装饰性填充或背景晕染使用。
- 所有胶囊形按钮和过滤标签均设置 100px 的 borderRadius；仅对徽章和辅助元素保留 4–6px 的半径。
- 首屏和展示标题使用 Cera Pro 700 字重，搭配 -0.02em 字间距（68px 时为 -1.36px，44px 时为 -0.88px）—— 在展示尺寸下，字重不得低于 700。
- 使用全大写 Cera Pro 字体，字号 10–12px，搭配 +0.70em 至 +1.00em 字间距，用于章节标签、徽章文字和分类标记。
- 通过四步暗色系（#0e1012 → #15171b → #1c1f24 → #23262d）分层叠加表面；严禁使用阴影来暗示内容层之间的深度。
- 在地图瓦片、视频嵌入和图片块的底部边缘应用内嵌阴影 rgb(14,16,18) 0px -175px 175px -75px，使其融入 #0e1012 页面背景。
- 合作伙伴/品牌标志在 #a0aaba 色值上于 #0e1012 背景上呈现 — 无颜色，无特殊处理 — 保持合作伙伴栏在视觉上从属于产品本身。
建议避免
- 按钮的半径绝不可在 6px 到 12px 之间 — 系统仅使用胶囊形（100px）、卡片（24px）、芯片（12px）或锐利辅助控件（4–6px）；中间值会破坏整体节奏。
- 绝不可引入第二个色彩强调色 — 橙色、紫色、青色或任何其他色调均违反单一信号在黑暗中的原则（Signal Blue #007afc）。
- 绝不可将正文或副标题设为白色（#ffffff）—— 正文使用 #a0aaba，图注使用 #8b96aa；全白仅保留用于标题和交互标签。
- 绝不可将卡片或区块置于白色或浅色背景上 — 所有内容均存在于 #0e1012 至 #15171b 的暗色范围内；浅色表面仅出现在嵌入地图瓦片内部。
- 绝不可在大于 24px 的标题中使用 Cera Pro 400 字重 — 副标题层级最低使用 500 字重，标题-lg 和展示层级必须使用 700 字重。
- 绝不可应用彩色阴影 — 唯一允许的阴影是媒体块上的单色 #0e1012 内嵌晕染。
- 绝不可在区块之间添加装饰边框或分隔线 — 垂直节奏由间距和表面色彩变化营造，而非由横线构成。
