CURATED · OPEN · FREE

Launchdarkly

A dark, grid-based interface with bold white typography and sharp neon-yellow accents, emphasizing control and speed.

Developer ToolsDark ModeProductivityBold TypographyClean
Launchdarkly screenshot
↓ Download design system (16 MB)Open in OpenDesign

Visit: https://launchdarkly.com

📦 Browse pack contents →

01

Identity DNA

LaunchDarklyruntime controlAI developmentfeature flagsde-risking

A high-performance dashboard for engineering teams managing complex AI and software systems.

02

Color

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

High-contrast dark mode with deep blacks, crisp whites, and a singular neon-yellow accent for maximum readability and focus.

03

Typography

geometric-sans · grotesque-sans · monospace

Use geometric-sans for large, impactful headlines. · Use grotesque-sans for readable body text. · Maintain tight letter-spacing on display text to enhance boldness.

04

Spacing

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

4px base grid with generous padding for large cards and sections.

05

Surfaces

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

1px solid rgba(255,255,255,0.15) for subtle card boundaries.

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

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Centered content on dark backgrounds with a grid-based background pattern.

07

Motion & Interaction

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

Subtle hover transitions on buttons and cards. · Transform scales on interactive elements.

Subtle background color shifts and slight transform scales. · Immediate feedback with transition effects.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

11

System prompt

LaunchDarkly's design DNA is a high-performance, dark-mode interface built for engineering and product teams. It uses a deep black background (#0c0c0c) with crisp white text (#ffffff) and a singular, high-chroma neon-yellow accent (#d4ff2e) for primary calls to action. The typography relies on geometric and grotesque sans-serif categories for a clean, technical feel, with tight letter-spacing on display text. Critical design rules include: never use a light theme, limit accents to the singular neon-yellow, and maintain generous, consistent spacing based on a 4px grid. The overall aesthetic is restrained, professional, and focused on clarity and control.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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