# Launchdarkly · Design system migration spec

> Source: https://launchdarkly.com  ·  Curated by OpenDesign  ·  en

> This site exemplifies a modern, premium developer tool aesthetic, balancing technical precision with bold visual impact.

## 1. Identity DNA

LaunchDarkly's design system operates as a high-performance dashboard for engineering teams managing complex AI and software systems. The interface strips away decorative excess to prioritize runtime control and clarity, with a visual language built for speed and precision.

**One-liner:** A dark, grid-based interface with bold white typography and sharp neon-yellow accents, emphasizing control and speed.
**Keywords:** LaunchDarkly · runtime control · AI development · feature flags · de-risking
**Analogy:** A high-performance dashboard for engineering teams managing complex AI and software systems.

## 2. Color

The palette is a study in high-contrast dark mode: deep blacks provide the canvas, crisp whites deliver information, and a singular neon-yellow accent commands attention for primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0c0c0c` | main background |
| `--bg-soft` | `#191919` | card background |
| `--bg-quiet` | `#2e2e2e` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#939598` | secondary text |
| `--muted` | `#414042` | placeholder |
| `--muted-soft` | `#abadae` | weak hint |
| `--accent` | `#d4ff2e` | single accent |
| `--line` | `rgba(255,255,255,0.15)` | divider |

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

This strict chromatic discipline ensures maximum readability and focuses the user's attention on what matters.

## 3. Typography

The type system pairs geometric sans-serif for impactful, large-scale headlines with a grotesque sans-serif for readable body copy. Tight letter-spacing on display text reinforces the bold, technical character.

- **Display:** geometric-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 500 | -1.5px | Hero headlines and major section headers |
| h1 | 48px | 1.1 | 500 | -1px | Secondary section headings |
| h2 | 32px | 1.2 | 500 | -0.5px | Tertiary section headings |
| body | 16px | 1.5 | 400 | 0px | Standard body text and descriptions |
| small | 14px | 1.4 | 400 | 0px | Captions and helper text |
| mono | 14px | 1.4 | 400 | 0px | Code snippets and data labels |

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

## 4. Spacing

A 4px base grid underpins the entire layout, creating a consistent rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with generous padding for large cards and sections.

## 5. Surfaces

Surfaces are defined by subtle depth, achieved through 1px inset shadows and borders that separate dark cards from the darker background. The elevation is restrained, almost flat, to maintain a clean, non-distracting environment.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 0px 0px 1px inset rgba(0, 0, 0, 0)
  - 0px 4px 16px 0px rgba(0, 0, 0, 0.15)
- **Borders:** 1px solid rgba(255,255,255,0.15) for subtle card boundaries.

## 6. Layout

The layout skeleton is a centered column of content set against dark backgrounds. A grid-based pattern in the background provides subtle structure and technical texture without competing with foreground elements.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is minimal and purposeful, serving as functional feedback rather than decoration. Subtle hover transitions and transform scales on interactive elements provide immediate, non-intrusive acknowledgment of user input.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle hover transitions on buttons and cards.
  - Transform scales on interactive elements.

- **Hover:** Subtle background color shifts and slight transform scales.
- **Click:** Immediate feedback with transition effects.
- **Transition:** All transitions use a standard 0.3s ease-in timing function.
- **Keyboard:** Standard focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is direct, technical, and authoritative, tailored for engineering and product leaders. Headlines are short, punchy, and benefit-oriented, while calls to action are clear and action-specific.

- **Tone:** Direct, technical, and authoritative, speaking to engineering and product leaders.
- **Headline style:** Short, punchy, and benefit-oriented sentences.
- **CTA style:** Clear, action-oriented calls to action like 'Book a demo'.
- **Avoid:** Jargon that isn't industry-standard. / Overly casual or playful language. / Passive voice.

### Don'ts
- ❌ Don't use bright backgrounds — screenshot shows a predominantly dark theme.
- ❌ Don't use multiple accent colors — screenshot shows a single dominant neon-yellow accent.
- ❌ Don't use serif fonts — screenshot shows only sans-serif and monospace fonts.
- ❌ Don't use small, cramped spacing — screenshot shows generous padding in cards and sections.
- ❌ Don't use heavy drop shadows — screenshot shows very subtle, almost flat elevation.
- ❌ Don't use playful illustrations — screenshot shows abstract, technical grid patterns and charts.

The system deliberately avoids playful illustrations, bright backgrounds, multiple accent colors, and heavy drop shadows to preserve its focused, professional integrity.

## System Prompt (paste into AI tool)

```
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.
```