OpenDesign·你的设计资产库

网页参考

Launchdarkly

基于网格的深色界面，搭配粗体白色文字与鲜明的霓虹黄强调色，突出控制感与速度感。

Developer ToolsDark ModeProductivityBold TypographyClean

封面待补录，可通过原站查看设计。

01

设计气质 DNA

LaunchDarkly运行时控制AI 开发功能标记降低风险

一个为工程团队打造的高性能仪表盘，用于管理复杂的 AI 与软件系统。

02

色彩

#d4ff2eAccent
#ffffffInk
#939598Ink soft
#0c0c0cBG
#191919BG soft
#2e2e2eBG quiet
#414042Muted
rgba(255,255,255,0.15)Line

高对比度深色模式，采用深邃的黑色、清晰的白色，以及单一的霓虹黄作为强调色，以实现最佳可读性与聚焦度。

03

字体

geometric-sans · grotesque-sans · monospace

  • display72px · 500
  • h148px · 500
  • h232px · 500
  • body16px · 400
  • small14px · 400
  • mono14px · 400

使用 geometric-sans 字体呈现大型、有冲击力的标题。 · 使用 grotesque-sans 字体确保正文可读性。 · 展示文本保持紧凑的字间距，以增强粗体效果。

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px

基于 4px 基础网格，为大型卡片和区块提供充裕的内边距。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 999px

使用 1px solid rgba(255,255,255,0.15) 作为卡片的微妙边界。

0px 0px 0px 1px inset rgba(0, 0, 0, 0) · 0px 4px 16px 0px rgba(0, 0, 0, 0.15)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

内容居中，置于深色背景之上，背景带有基于网格的图案。

07

动效与交互

200msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

按钮与卡片上的微妙悬停过渡效果。 · 交互元素上的缩放变换效果。

微妙的背景色偏移与轻微的缩放变换。 · 通过过渡效果提供即时反馈。

08

组件

  • button 高对比度的胶囊形按钮，主要操作使用霓虹黄背景；次要操作使用轮廓或透明样式。
  • card 深色圆角卡片，带有微妙的 1px 边框和圆角。
  • chip 用于标签和标记的小型圆形容器。
  • input 深色背景的输入框，带有微妙的边框。
  • hero 全宽深色区块，使用超大字体和网格背景。

09

文案语气与禁用清单

  • 语气 直接、专业且具权威性，面向工程与产品负责人。
  • 标题风格 简短有力、以收益为导向的句子。
  • 按钮文案 清晰、行动导向的号召性用语，例如“预约演示”。
  • 避免使用明亮的背景——截图显示主题以深色为主。
  • 避免使用多种强调色——截图显示仅使用单一的霓虹黄作为主要强调色。
  • 避免使用衬线字体——截图显示仅使用无衬线和等宽字体。
  • 避免使用狭小、局促的间距——截图显示卡片和区块中使用了充裕的内边距。
  • 避免使用厚重的投影——截图显示使用了非常微妙、近乎扁平的层次效果。
  • 避免使用俏皮的插画——截图显示使用了抽象的技术性网格图案和图表。
  • 避免: 非行业标准的术语。
  • 避免: 过于随意或戏谑的语言。
  • 避免: 被动语态。

10

包内真实截图

Launchdarkly — 桌面首屏（hero）
桌面首屏（hero）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Launchdarkly — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

LaunchDarkly 的设计 DNA 是一个为工程与产品团队打造的高性能深色模式界面。它使用深邃的黑色背景 (#0c0c0c) 搭配清晰的白色文字 (#ffffff)，以及单一的、高饱和度的霓虹黄 (#d4ff2e) 用于主要的行动号召。字体上依赖 geometric-sans 和 grotesque-sans 类别以营造干净、技术感，展示文本采用紧凑的字间距。关键设计规则包括：绝不使用亮色主题，将强调色限制为单一的霓虹黄，并基于 4px 网格保持充裕且一致的间距。整体美学克制、专业，并专注于清晰度与控制感。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。