---
title: "LaunchDarkly design system"
variant: extended
source: https://launchdarkly.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/launchdarkly-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# LaunchDarkly · Design System

> Dark control panels meet vivid, playful product color.

**Theme:** dark · **Industry:** devtools · **Source:** https://launchdarkly.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

LaunchDarkly’s homepage pairs a near-black frame and oversized typography with broad, bright product panels. Vivid lime, orange, blue, and pink accents mark actions and feature illustrations, while the recurring rounded cards make complex software controls approachable.

## North star

Use near-black framing and generous pale panels to make bold product UI the focal point, then reserve vivid accents for meaningful controls and feature cues.

## Overview

The page alternates a near-black canvas (#191919) with large off-white panels (#f8f8f8), creating a strong frame around the product story. Dark sections carry centered or left-aligned white headings; the main feature sequence sits inside a spacious pale panel with a large lead statement and repeated horizontal feature rows. Headings use a heavy, compact sans with tight line spacing, while body copy stays smaller and quieter. Thin charcoal rules divide content rather than shadows. Bright lime anchors important actions and numbered controls; orange, blue, and pink appear as selective feature cues and colorful product artwork. Screenshots, dashboard mockups, and bold abstract shapes keep the technical narrative visual. Rounded panels and media soften the otherwise crisp grid. The overall rhythm is comfortable and deliberate: generous section breaks, clear two-column splits, and compact text beside prominent visuals.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Control Charcoal | `#191919` | `--color-control-charcoal` | brand | Main page canvas and dark section background; also appears in dark text and outlines. |
| Panel Ivory | `#f8f8f8` | `--color-panel-ivory` | surface | Large feature, testimonial, and product panels; primary light text on dark sections. |
| Muted Graphite | `#414042` | `--color-muted-graphite` | neutral | Muted footer and supporting text against dark backgrounds. |
| Cool Mist | `#d1d6d9` | `--color-cool-mist` | neutral | Quiet supporting copy and card text on dark surfaces. |
| Rule Charcoal | `#2c2c2c` | `--color-rule-charcoal` | neutral | Thin card borders and understated dividers on dark sections. |
| Electric Citron | `#ddff46` | `--color-electric-citron` | accent | High-visibility demo CTA and lime graphic accents. |
| Signal Tangerine | `#ff9d29` | `--color-signal-tangerine` | accent | CodeControl CTA and occasional orange feature emphasis. |
| Spring Green | `#95eb90` | `--color-spring-green` | accent | Start of a green gradient used in decorative footer artwork. |
| Volt Green | `#adf63d` | `--color-volt-green` | accent | Middle stop of a decorative gradient, most visible in the footer. |
| Pale Lime Glow | `#eafca1` | `--color-pale-lime-glow` | accent | Light terminal stop in the decorative footer gradient. |
| Deep Ink | `#0c0c0c` | `--color-deep-ink` | neutral | Occasional dark heading or text detail, not the main page canvas. |
| Absolute Black | `#000000` | `--color-absolute-black` | surface | Small areas of deep card, footer, and section backgrounds. |
| Raised Charcoal | `#212121` | `--color-raised-charcoal` | surface | Subtle alternate dark section or surface, close to the main canvas. |
| Periwinkle Signal | `#7084ff` | `--color-periwinkle-signal` | accent | Rare link color, notably the event registration link. |
| Agent Blue | `#405bff` | `--color-agent-blue` | accent | AgentControl button and occasional blue emphasis. |
| Lime Marker | `#c7fa4c` | `--color-lime-marker` | accent | Numbered feature marker and isolated lime control detail. |

### Semantic aliases

`--color-canvas` → `#191919` (Control Charcoal) · `--color-surface` → `#f8f8f8` (Panel Ivory) · `--color-surface-2` → `#212121` (Raised Charcoal) · `--color-surface-3` → `#000000` (Absolute Black) · `--color-text` → `#f8f8f8` (Panel Ivory) · `--color-text-muted` → `#191919` (Control Charcoal) · `--color-text-subtle` → `#414042` (Muted Graphite) · `--color-border` → `#2c2c2c` (Rule Charcoal) · `--color-accent` → `#ff9d29` (Signal Tangerine) · `--color-accent-2` → `#95eb90` (Spring Green) · `--color-accent-3` → `#adf63d` (Volt Green) · `--color-on-accent` → `#191919` (Control Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f8f8f8` | `#191919` | 16.56:1 | AAA |
| `#f8f8f8` | `#212121` | 15.16:1 | AAA |
| `#f8f8f8` | `#000000` | 19.77:1 | AAA |
| `#191919` | `#f8f8f8` | 16.56:1 | AAA |
| `#191919` | `#212121` | 1.09:1 | fail |
| `#191919` | `#000000` | 1.19:1 | fail |
| `#414042` | `#191919` | 1.71:1 | fail |
| `#414042` | `#f8f8f8` | 9.71:1 | AAA |
| `#414042` | `#212121` | 1.56:1 | fail |
| `#414042` | `#000000` | 2.04:1 | fail |

### Gradients

- `linear-gradient(160deg, rgb(149, 235, 144), rgb(173, 246, 61) 50%, rgb(234, 252, 161))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| bodyFont | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, links, labels, and buttons | Inter |
| headingFont3 | `--font-display` | webfont | 700, 600 | Display headings and page section titles | Space Grotesk |

- **bodyFont:** Sans-serif with regular through bold weights; body copy is compact, while uppercase eyebrow labels use expanded tracking.
- **headingFont3:** Bold or semibold sans-serif; large headings use tight line height and noticeably negative tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.476, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 112px | 600 | 1.2 | 0 | — | headingFont3 | Oversized campaign or display headlines. |
| h1 | 80px | 700 | 1 | -0.025em | — | headingFont3 | Primary hero headline in the pale feature panel. |
| h2 | 64px | 700 | 1 | -0.05em | — | headingFont3 | Major section headlines, especially dark product sections. |
| h3 | 56px | 600 | 1 | -0.05em | — | headingFont3 | Subsection and editorial feature headings. |
| h4 | 40px | 700 | 1.2 | 0 | — | headingFont3 | Smaller feature and content-card titles. |
| body | 16px | 400 | 1.5 | -0.03em | — | bodyFont | Main explanatory copy beside product visuals. |
| caption | 14px | 400 | 1.5 | 0 | — | bodyFont | Small supporting notes and image captions. |
| nav | 16px | 400 | 1.5 | 0 | — | bodyFont | Header navigation and footer navigation links. |
| link | 14px | 500 | 1.5 | 0 | — | bodyFont | Compact text links and secondary actions. |
| eyebrow | 14px | 500 | 1.5 | 0.129em | uppercase | bodyFont | Uppercase labels above section or feature headings. |

OpenType features in use: `"dlig"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 8, 10, 12, 16, 20, 24, 31, 32, 56, 88 px.
- Section rhythm 88px · element gap 24px · card padding 24px · max content width 1416px.

The page uses a centered content frame with a measured maximum width of 1416px and comfortable density. Its dominant feature area is a pale, rounded panel: a wide lead column sits beside a stacked sequence of product rows. Subsequent dark sections alternate between centered headlines, two-column feature splits, media-led cards, and multi-column resources. Sections keep a measured 88px rhythm, with 24px between related elements and 24px card padding. Alignment shifts intentionally between centered statements and left-aligned product storytelling.

## Shape & elevation

- Radius: button `12px` · card `16px` · media `12px` · xs `8px` · sm `12px` · md `16px` · lg `24px` · xl `32px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The visual system is mostly flat: no measured shadows are used. Separate cards with thin #2c2c2c borders on dark surfaces or clear contrast against the pale panels. Layer product UI over colorful illustration backdrops when needed, keeping controls visibly distinct without adding heavy effects.

## Imagery

Product screenshots and dashboard mockups are framed as rounded panels, often with vivid lime, blue, or warm gradient backdrops. Decorative illustrations use oversized abstract sweeps, stickers, and bright shapes rather than realistic 3D rendering. Customer photography appears in a testimonial card, cropped within its own rounded media area. Preserve readable UI detail while treating screenshots as product proof, not generic decoration.

## Components

### Announcement strip

A slim dark message bar sits above the navigation, with compact event copy, a colored registration link, and a close affordance.

### Primary CTA

The demo action uses Electric Citron (#ddff46) with dark text; measured button corners are square on this CTA.

### Feature row

Thin horizontal rules separate feature titles, short explanatory copy, a Learn more action, and a product mockup.

### Product card

Dark product panels sit against pale or dark backgrounds, with rounded media and concise feature copy.

### Feature tabs

Pill-like outlined labels name platform capabilities; measurements show card radii from 8px to 16px.

### Customer story

A pale, rounded testimonial panel combines a headline, quote, customer attribution, metric, and framed photo.

### Resource cards

A compact multi-column group pairs bold, colorful illustrations with small headings and supporting links.

### Measured component styles

- **Primary button** (“Learn about CodeControl”): background #ff9d29 · text #191919 · border 1px solid #191919 · radius 12px · padding 10px 12px 10px 16px · 500 18px bodyFont
- **Secondary button** (“Book a demo”): background #ddff46 · text #191919 · radius 0px · padding 8px 24px · 500 16px bodyFont
- **Link** (“Check out the blog. Blog Read about Laun”): transparent background · text #ffffff · radius 0px · padding 8px · 400 16px bodyFont
- **Card** (“Feature Flags”): transparent background · text #d1d3d4 · border 1px solid #2c2c2c · radius 8px · padding 24px · 400 18px bodyFont
- **Navigation item** (“Platform Solutions Resources Developers ”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px bodyFont

## Do

- Keep #191919 as the dominant framing canvas.
- Use #f8f8f8 for broad, high-contrast content panels.
- Reserve #ddff46 for prominent actions and key markers.
- Use orange, blue, and pink as selective feature signals.
- Separate dense feature rows with fine horizontal rules.
- Let product screenshots carry meaningful visual detail.

## Don't

- Do not replace the restrained palette with many competing accents.
- Do not place every section on the same background color.
- Do not add heavy drop shadows to otherwise flat cards.
- Do not crowd the product mockups with oversized body copy.
- Do not use the bright gradient as a general page background.
- Do not treat illustration-only colors as core interface colors.

## Agent prompt

Build a new LaunchDarkly-style page with a near-black Control Charcoal (#191919) canvas and broad Panel Ivory (#f8f8f8) content surfaces. Use a heavy, tightly tracked geometric sans for major headings and a clean sans for navigation, body copy, labels, and actions. Structure the page with a clear centered frame, generous section breaks, and alternating two-column product stories and dark editorial sections. Use fine Rule Charcoal (#2c2c2c) dividers, flat surfaces, and rounded media or cards. Give key actions Electric Citron (#ddff46); use Signal Tangerine (#ff9d29) and Agent Blue (#405bff) sparingly for specific features. Frame crisp product screenshots with bright illustrative accents, but keep controls and copy readable. Preserve contrast, whitespace, and a deliberate hierarchy rather than adding extra decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Slim top strip with a centered event message and close control. | event promotion, dismissible notice | dark strip, compact link |
| 2 | feature-grid | Large pale two-column panel with a lead headline and vertically stacked feature rows. | feature navigation, learn more actions, product proof | off-white panel, horizontal rules, color-backed mockups |
| 3 | hero | Full-width dark section with a centered headline and large abstract art. | positioning statement | dark canvas, bright decorative sweep |
| 4 | feature-split | Two-column feature section pairing a dark product panel with a capability list. | capability browsing, product explanation | dark card, outlined feature pills, orange CTA |
| 5 | feature-split | Mirrored two-column feature layout with capability pills and a dark content card. | capability browsing, agent-control discovery | dark card, outlined pills, blue emphasis |
| 6 | video | Two-column media card with an explanatory text block and dashboard preview. | play video, platform overview | dark rounded card, dashboard preview, lime play button |
| 7 | integrations | Centered section title above paired resource cards and a wide prompt example. | browse tutorials, explore agent tools, copy prompt | dark canvas, bright abstract artwork, copy control |
| 8 | testimonials | Logo rail beside a large pale customer-story panel. | customer proof, story navigation | logo stack, light testimonial card, photo and metric |
| 9 | content-feed | Four-column set of compact resource cards on a dark surface. | open blog, browse docs, watch content, find events | illustrated tiles, small link-led cards |
| 10 | cta | Broad, brightly colored closing call-to-action area divided into three columns. | conversion prompt, multiple next steps | vivid lime field, contrasting action cards |
| 11 | navigation | Full-width link strip with four product and conversion destinations. | quick navigation, product discovery | four linked tiles, contrasting color blocks |
| 12 | footer | Three-column footer with newsletter copy, grouped links, and legal details. | newsletter signup, site navigation, legal navigation | grouped link lists, form field, dark text |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/launchdarkly-com