精選 · 開放 · 免費

Launchdarkly

一個基於網格的深色介面，搭配粗體白色排版與鮮明的霓虹黃強調色，強調控制與速度。

Developer ToolsDark ModeProductivityBold TypographyClean

Launchdarkly 網站截圖

↓ 下載設計系統包 (16 MB)在 OpenDesign 中開啟

原站: https://launchdarkly.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

LaunchDarklyruntime controlAI 開發feature flags降低風險

一個用於管理複雜 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 作為可讀性高的內文。 · 維持 display text 緊湊的字距，以增強粗體感。

04

間距

4px

8px

12px

16px

24px

32px

48px

64px

96px

以 4px 為基準網格，大型卡片與區塊使用充足的 padding。

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

按鈕與卡片上細微的 hover 過渡效果。 · 互動元素上的縮放變換。

細微的背景色調變化與輕微的縮放變換。 · 透過過渡效果提供即時回饋。

08

組件

button 高對比的膠囊型按鈕，主要操作使用霓虹黃背景；次要操作使用外框或透明背景。
card 深色圓角卡片，帶有細微的 1px 邊框與圓角。
chip 小型、圓角的容器，用於標籤與標記。
input 深色背景的輸入欄位，帶有細微邊框。
hero 全寬深色區塊，搭配超大尺寸排版與網格背景。

09

文案語氣與禁用清單

語氣直接、技術性且具權威感，面向工程與產品領導者。
標題風格 簡短、有力且以效益為導向的句子。
按鈕文案 清晰、以行動為導向的行動呼籲，例如「預約演示」。

不要使用明亮的背景 — 截圖顯示以深色主題為主。
不要使用多種強調色 — 截圖顯示僅使用單一主要的霓虹黃強調色。
不要使用襯線字體 — 截圖顯示僅使用無襯線與等寬字體。
不要使用狹窄、擁擠的間距 — 截圖顯示卡片與區塊使用充足的 padding。
不要使用厚重的投影 — 截圖顯示非常細微、近乎平坦的層次感。
不要使用俏皮的插圖 — 截圖顯示抽象的技術性網格圖案與圖表。
避免: 非業界標準的術語。
避免: 過於隨意或俏皮的語言。
避免: 被動語態。

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 與 grotesque 無襯線字體類別，營造出乾淨、技術性的感覺，display text 採用緊湊的字距。關鍵設計規則包括：絕不使用淺色主題、將強調色限制在單一的霓虹黃，並基於 4px 網格維持充足、一致的間距。整體美學是內斂、專業，並專注於清晰度與控制。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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