LaunchDarkly DESIGN.md

Feature management design with bold teal identity, flag-first surfaces, targeting-rule clarity, and safe release confidence.

1. Visual Theme & Atmosphere

LaunchDarkly should feel precise, confident, and developer-trusted. The design language communicates feature flags, progressive rollouts, A/B testing, targeting rules, and the infrastructure for safe software releases.

• Mood: precise, confident, technical, safe
• Density: medium-to-high, with flag tables, targeting rules, rollout percentage bars, and variation panels
• Character: bold teal brand, clean white flag surfaces, dark rule-builder panels, percentage-fill rollout indicators

2. Color Palette & Roles

The on/off toggle is the product's most iconic element — teal for on, red for off. This mapping is absolute and must never be reversed or repurposed.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  background: #0DAEB4;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.flag-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #E2E8F0;
}

.flag-toggle {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #DC2626;
  transition: background 0.2s;
  cursor: pointer;
}

.flag-toggle.on {
  background: #0DAEB4;
}

.rollout-bar {
  height: 8px;
  border-radius: 999px;
  background: #E2E8F0;
  overflow: hidden;
}

.rollout-fill {
  height: 8px;
  border-radius: 999px;
  background: #0DAEB4;
}

.flag-key {
  font: 400 13px/1 "JetBrains Mono", monospace;
  color: #64748B;
}

5. Layout Principles

Flag list is the primary surface — show key, name, environment status, and toggle at a glance. Targeting rules expand inline, not on a separate page. Rollout percentage is visualized as a fill bar, never just text.

6. Depth & Elevation

css.shadow-card   { box-shadow: 0 1px 4px rgba(17, 24, 39, 0.06); }
.shadow-panel  { box-shadow: 0 8px 24px rgba(13, 174, 180, 0.10); }
.shadow-modal  { box-shadow: 0 20px 50px rgba(17, 24, 39, 0.16); }

Flag targeting modals use teal-tinted shadow to reinforce the brand when users make release decisions.

7. Do's and Don'ts

Do make the flag toggle the most visually prominent element in every flag row. Do display flag keys in mono font — engineers copy them. Do show rollout percentage as a visual fill bar. Do not use teal for anything other than the flag-on state and primary CTAs. Do not hide environment-specific targeting — it must be visible in the main flag view.

8. Responsive Behavior

Mobile access is critical for emergency flag kills. The toggle must be reachable in under two taps.

9. Agent Prompt Guide

Design like LaunchDarkly: bold teal CTAs, iconic teal/red flag toggles, mono flag keys, rollout percentage fill bars, dark targeting-rule builder, environment-column flag tables, and safe-release feature-management hierarchy.