Twingate
近黑色基底、胶囊形控件与大字排版。
Umbrel
近黑色基底、大幅摄影展示与胶囊形控件。
页面以近黑色为基底。字体采用 Inter、Inter Display。视觉特点包括大幅摄影展示、胶囊形控件、渐变展示、分屏构图。适合参考的场景：开发者工具官网、API 服务介绍页。
查看原始网站使用规范
建议采用
- 页面背景必须使用 #000000，禁止引入偏黑、蓝调或暖调的底色；绝对的黑色才是设计的核心。
- 将 #e3a081 Ember Peach 仅用于标题中情感强烈的词汇（始终作为结尾名词，而非动词）以及 '新品' 标签文字；禁止用作按钮填充或边框颜色。
- 将 #5351f3 Twilight Violet 仅用于直接购买动作的填充按钮背景；禁止用于文字、边框或非商业用途的UI。
- 在所有文字节点中，将Inter的font-feature-settings设为'blwf', 'cv03', 'cv04', 'cv09', 'cv11'；单层的'a'和卷曲的'l'是品牌语气的一部分，不是可随意开关的风格选择。
- 在所有大于 16px 的字号中应用负字间距：14px 时为 -0.01em，20px 时为 -0.02em，48px 时为 -0.03em；16px 及以下正文保持正常字间距。
- 所有按钮、输入框和胶囊控件的圆角均设为 24px —— 胶囊形状是品牌标志性特征，而非泛泛的‘圆角’设计；仅在徽章或导航胶囊等完全圆形元素中使用 99px。
- 在首屏产品摄影上施加负偏移阴影（x 和 y 方向均为 -12px），使阴影向上并向左延伸，营造出‘产品本身发光’的视觉效果。
建议避免
- 禁止引入第三种辅助色 —— 系统本为双色体系（温暖桃色用于叙事，冷调紫罗兰用于商业场景）；任何额外色彩都会破坏色彩控制原则。
- 禁止使用蓝调或冷灰中性色替代温暖灰（#61635d，#797985）—— 这些灰调中微妙的橄榄色调，是防止黑色界面显得冷冰冰的关键。
- 不要为文字、按钮或默认卡片添加渐变；渐变仅用于应用商店图块系统和结尾的氛围横幅。
- 不要将 'umbrelOS' 使用大写 —— 产品平台名称刻意采用小写，以体现其作为平台而非设备的属性，类比于 'macOS' 或 'webOS' 的命名惯例。
- 不要给Void背景上的产品卡片添加可见边框；图像与画布的对比已足以划分边界，边框会让设计显得杂乱。
- 不要使用高不透明度的纯黑阴影；两种阴影配方（rgba(0,0,0,0.24)和rgba(104,65,13,0.23)）都刻意保持柔和，暖棕色配方将阴影与品牌强调色关联起来。
- 不要在按钮内添加图标，或在导航中使用图标（除本地化旗帜和小型品牌标识）—— 接口依赖字体而非符号来传递层级关系。
