LaunchDarkly 网站预览
LaunchDarkly 网站预览

LaunchDarkly

霓虹控制室——一个黑暗驾驶舱,紫蓝色信号在炭黑色面板中脉动。

LaunchDarkly 是一个午夜控制室:深炭黑色画布,仅以冷紫蓝色作为唯一的色彩语调,白色文字如控制台输出般锐利突出。界面密集且技术性强,却不会显得杂乱——它借鉴了开发工具的视觉语言(等宽代码、面板网格、胶囊形输入控件),并以自信的营销外壳包裹其中。紫到蓝的渐变(#405bff → #7084ff)作为品牌的电子脉搏,出现在辉光、首屏文字、激活状态以及装饰性晕染中,而非使用平涂填充。组件采用胶囊状圆润(30-60px 半径为主导),边框为近黑色背景上的细线白色,通过辉光而非阴影传达抬升层次。

查看原始网站

使用规范

建议采用

  • 所有按钮、标签和卡片使用 30px 半径——这种胶囊状圆润是该品牌的不可妥协标准
  • 顶部导航胶囊控件及任何全宽胶囊容器使用 60px 半径
  • 首屏标题的后半部分使用 Signal Violet(#7084ff)来划分信息:‘是什么’(白色)与‘为何重要’(紫蓝色)
  • 嵌入式产品截图渲染为纯白色面板,置于黑暗画布上——这种对比传递出‘这是真实工作空间’的信号
  • 使用 #405bff → #7084ff 线性渐变,角度 179deg,作为卡片和首屏文字背后的环境高光
  • 正文文字设为 16-18px 字号,字重 400,白色在炭黑色背景上显示——绝不低于 14px 以保证在暗色背景下的可读性
  • SDK 名称、代码和技术标识符使用等宽字体;等宽字体的声音是开发工具身份的一部分。

建议避免

  • 用户界面组件不要使用方形角或小半径(4-8px)——这会破坏胶囊状语言的统一性
  • 不要使用阴影来表现抬升层次——应使用辉光(rgba(64,91,255,0.25) 或 rgba(112,132,255,0.19))替代,以保持品牌调性
  • 不要引入额外的强调色——整个系统为单色加紫蓝色调;加入绿色、红色或黄色会削弱核心信号
  • 主要行动按钮不要使用白色或灰色——Voltage Blue(#405bff)是唯一正确的填充色
  • 正文或功能列表不要居中对齐——只有标题和首屏区块居中,其余一律左对齐
  • 显示类标题不要使用 1.5 以上的行高——保持紧凑(1.0-1.09)以便文字形成一个完整、紧密的块状结构
  • 页面不要出现暗色产品截图——真实的产品界面始终为明亮/白色,从而形成页面的核心视觉张力