精选 · 开放 · 免费

Launchdarkly

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

Developer ToolsDark ModeProductivityBold TypographyClean
Launchdarkly 网站截图
↓ 下载设计系统包 (16 MB)在 OpenDesign 中打开

原站: https://launchdarkly.com

📦 浏览包内文件 →

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

使用 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

组件

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 — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko