LaunchDarkly Design System Deep Dive

1. Brand Overview

LaunchDarkly isn’t a consumer brand chasing lifestyle imagery — it’s a developer-first platform, and the design language shows it. The vibe is “controlled velocity”: sharp typography, high-contrast colors, and deliberate motion cues. You can feel the engineering mindset in the precision of the grid and the restraint in decorative elements.

The palette leans heavily into saturated blues (#405bff and #7084ff) against a bright white (#ffffff) and deep near-black (#191919). This is not a playful, candy-colored startup palette — it’s confident, technical, and aimed at people shipping code. Those blues aren’t the same as the safer, corporate navy you’d see in banking fintech; they’re electric and slightly aggressive, which fits the “feature flags at speed” positioning.

Typography is modern and utilitarian. The primary face, Sohne, is a clean grotesk with a slightly mechanical feel. It’s paired with Sohne Mono for code-related contexts — again, speaking directly to engineers. There’s no bloated ornamental type here. Everything is in service of clarity and hierarchy.

Layout is tight, controlled by an 8px base grid. Breakpoints are granular — there are dozens — which tells you they care about pixel-perfect control across devices. Border radii are varied but consistent within component families: sharp edges for inputs, large rounds for pills, and full circles for avatars.

Overall, this system says: “We’re fast, we’re precise, and we respect your time.” It’s not trying to “wow” with whimsy — it’s trying to get out of the way and let the product shine. If you’re designing inside this system, you need to respect that restraint.

2. Color System

2.1 Primary Colors

The main brand driver is Blue. Two key blues:

• Primary action blue #405bff — used for CTAs, active states, and links
• Secondary blue #7084ff — used for outlines, hover borders, and secondary buttons

Psychology: Electric blues convey speed, trust, and a bit of daring. Compared to say, GitHub’s muted gray/black scheme, LaunchDarkly’s blues are more about momentum and energy.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong. White on #405bff yields high readability. Blues on white pass WCAG AA easily. The only watch-out is light gray text (#d1d3d4) on white — that’s low contrast, acceptable only for disabled states or non-critical text.

Dark mode isn’t explicitly defined here, but the palette already accommodates dark backgrounds (#191919 with white/blue text).

2.4 Usage Guide

• Works: #405bff background with #ffffff text — core CTA combo.
• Works: #7084ff border with transparent background — clear secondary action.
• Avoid: #d1d3d4 text on #ffffff unless it’s intentionally “disabled” or de-emphasized.
• Avoid: Mixing both blues in the same button — use one per element to maintain hierarchy.

3. Typography

3.1 Font Families

• Primary UI font: Sohne (custom, not Google/Adobe hosted)
• Mono font: Sohne Mono — used for code, technical labels; fallbacks: Consolas, Monaco, Andale Mono, Ubuntu Mono
• Fallback system fonts: Arial, Helvetica in some button contexts

No variable fonts, no web-hosted Google/Adobe kits.

3.2 Type Scale

3.3 Hierarchy

Headings are bold-ish (500 weight) and large — even 40px+ for section titles. Body/link text runs from 16px down to 12px, with consistent 1.4–1.5 line height. Captions often go uppercase with extra letter spacing (up to 2px) for emphasis.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Multiples are everywhere.

4.2 Layout

Breakpoints are numerous — from 339px up to 2200px. This isn’t a “three breakpoint” system; it’s fine-tuned for many viewport widths. That means you need to respect responsive adjustments at granular sizes.

5. Visual Elements

Border Radius:

• 0px: Tables, inputs — sharp edges
• 2px: Inputs — minimal rounding
• 4px: General divs — small rounding
• 12px: Some divs — modals
• 14px: Links/divs — mid rounding
• 20px: Larger containers
• 30px: Cards/buttons — pill-like
• 40px: Tabs/panels
• 50%: Circles — avatars, round icons

Consistency: Radii are applied per component category — don’t mix a 2px input radius with a 30px card radius.

Shadows: Minimal. Mostly flat design. Exceptions: colored glows (rgb(64, 91, 255) 0px 0px 30px 7px) for specific highlight states.

Borders: Used for separation instead of shadows. Common: 1px solid #414042 for dividers, 1px solid #7084ff for interactive outlines.

6. Components

6.1 Buttons

Primary Button (c-button):

• Default: background-color: #405bff, white text, padding: 12px 24px, no border radius (0px), no border
• Hover: Background darkens to rgb(54, 77, 217), text color changes to #405bff, scale up 1.1, border appears 1px solid #7084ff
• Active: Scale down 0.9, inset box shadow #405bff, text color #bcbec0
• Focus: Scale up 1.2 and translateX(10%), outline 2px solid, background #fafafa, text color #122124

Secondary Button (button-secondary-updated):

• Default: Transparent background, text #7084ff, padding: 16px 24px, border-radius: 60px, border 1px solid #7084ff
• Hover: Background #6d6e71, text stays #7084ff, border becomes transparent, slight translate(8px) motion

6.2 Links

Four color variants:

• Blue (#405bff) — underline on hover
• White (#ffffff) — hover changes to blue
• Secondary blue (#7084ff) — hover changes to primary blue
• Gray (#d1d3d4) — hover changes to primary blue

6.3 Forms

Text input (email):

• Default: background: #282828, text #939598, no border, no radius
• Focus: Inset box shadow rgb(232, 59, 59) 0px -2px 0px

6.4 Cards

No explicit card data here, but radii (30px), padding from spacing scale (24px or 32px), and borders/shadows indicate flat surfaces with slight rounding.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-secondary-blue: #7084ff;
  --color-primary-blue: #405bff;
  --color-near-black: #191919;
  --color-light-gray: #d1d3d4;
  --color-medium-gray: #a7a9ac;
  --color-dark-gray: #333333;
  --color-almost-black: #414042;
  --color-off-white: #f8f8f2;
  --color-black: #000000;
  --color-hover-blue: #3850e2;

  /* Typography */
  --font-primary: "Sohne", sans-serif;
  --font-mono: "Sohne Mono", Consolas, Monaco, Andale Mono, Ubuntu Mono;
  --font-fallback: Arial, sans-serif;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4_125: 4.125px;
  --space-5_625: 5.625px;
  --space-6_6875: 6.6875px;
  --space-7_57812: 7.57812px;
  --space-8: 8px;
  --space-8_21875: 8.21875px;
  --space-10: 10px;
  --space-10_4375: 10.4375px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-120: 120px;

  /* Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-md2: 14px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-xxl: 40px;
  --radius-pill: 60px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-none: rgba(0,0,0,0) 0px 0px 0px 0px;
  --shadow-blue-glow: rgb(64,91,255) 0px 0px 30px 7px;
  --shadow-red-glow: rgb(255,56,107) 0px 0px 30px 7px;
  --shadow-yellow-glow: rgb(235,255,56) 0px 0px 30px 7px;
  --shadow-soft: rgba(0, 0, 0, 0.15) 0px 4px 16px 0px;
}

8. AI Coding Assistant Prompt

# LaunchDarkly Design System Specification

System Prompt:
You are a LaunchDarkly design expert. Build UIs matching their visual language exactly.

Brand Context:
LaunchDarkly’s design is developer-focused: precise, high-contrast, and minimal decoration. Electric blues signal action and speed, paired with restrained grays and whites. Typography is utilitarian (Sohne) with monospace for code contexts.

Color Palette:
- White: #ffffff — Backgrounds, text on dark
- Secondary Blue: #7084ff — Outlines, secondary buttons
- Primary Blue: #405bff — CTAs, primary buttons, links
- Near Black: #191919 — Primary text on light backgrounds
- Light Gray: #d1d3d4 — Disabled text, subtle dividers
- Medium Gray: #a7a9ac — Secondary text
- Dark Gray: #333333 — Button rows, dark UI elements
- Almost Black: #414042 — Logos, link blocks
- Off White: #f8f8f2 — Light surfaces, code blocks
- Black: #000000 — Strong text, UI labels
- Hover Blue: #3850e2 — Hover/focus accents

Typography:
- Primary: "Sohne", sans-serif
- Mono: "Sohne Mono", Consolas, Monaco, Andale Mono, Ubuntu Mono
- Fallback: Arial, Helvetica

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 85px | 500 | 1.20 | Hero titles |
| H1 | 40px | 500 | 1.20 | Section titles |
| Body | 16px | 400 | 1.50 | Main text |
| Link | 16px | 400 | 1.50 | Navigation |
| Caption | 14px | 500 | 1.71 | Labels |

Spacing & Grid:
Base: 8px. Scale includes 2px, 4px, 8px, 12px, 16px, 20px, 24px, 30px, 32px, 40px, 64px, 120px.
Use multiples for all padding/margin.

Border Radius:
- none: 0px — Inputs, tables
- xs: 2px — Small inputs
- sm: 4px — Divs
- md: 14px — Links, divs
- lg: 30px — Cards, buttons
- pill: 60px — Secondary buttons
- circle: 50% — Avatars

Shadows & Depth:
Mostly flat design. Occasional colored glow for highlights:
- Blue glow: rgb(64,91,255) 0px 0px 30px 7px

Component Specifications:

Primary Button:
Default: bg #405bff, color #ffffff, padding 12px 24px, radius 0px, border none.
Hover: bg rgb(54,77,217), color #405bff, border 1px solid #7084ff, scale 1.1.
Active: scale 0.9, inset shadow #405bff, color #bcbec0.
Focus: scale 1.2 translateX(10%), outline 2px solid, bg #fafafa, color #122124.

Secondary Button:
Default: transparent bg, color #7084ff, padding 16px 24px, radius 60px, border 1px solid #7084ff.
Hover: bg #6d6e71, color stays #7084ff, border transparent, translate(8px).

Navigation Links:
Blue variant: #405bff default, underline on hover.
White variant: #ffffff default, hover to #405bff.

Input Fields:
Email default: bg #282828, color #939598, no border, padding 16px 24px.
Focus: inset shadow rgb(232,59,59) at bottom.

Layout & Responsive Rules:
Many breakpoints from 339px to 2200px. Respect fine-grained changes.
Page padding: multiples of 8px grid.

Interaction Rules:
- Motion: scale transforms on hover/focus for buttons (~150ms ease)
- Focus indicators: clear outline or inset shadow

DO List:
- Use only palette colors
- Maintain 8px grid
- Use Sohne for headings, Sohne Mono for code
- Keep button radii consistent
- Restrict shadows to specified glow cases

DON'T List:
- Add custom colors
- Mix sharp and rounded corners in same element
- Use shadows for depth except glow accents
- Overuse hover transforms — keep subtle

Code Examples:

Primary Button:
```css
.btn-primary {
  background: #405bff;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 0;
  border: none;
  font-family: "Sohne", sans-serif;
  font-size: 16px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: rgb(54,77,217);
  color: #405bff;
  border: 1px solid #7084ff;
  transform: scale(1.1);
}
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #7084ff;
  padding: 16px 24px;
  border-radius: 60px;
  border: 1px solid #7084ff;
  font-family: "Sohne", sans-serif;
}
.btn-secondary:hover {
  background: #6d6e71;
  border-color: transparent;
  transform: translateX(8px);
}
```

Input Field:
```css
.input-email {
  background: #282828;
  color: #939598;
  padding: 16px 24px;
  border: none;
}
.input-email:focus {
  box-shadow: rgb(232,59,59) 0px -2px 0px inset;
  outline: none;
}
```

9. Summary

TL;DR: LaunchDarkly’s design system is built for speed and precision — electric blues for action, a disciplined 8px grid, and utilitarian typography. Minimal shadows, varied but consistent radii, and restrained motion keep the UI fast and clear.

Brand Keywords:

• developer-precision
• electric-minimal
• high-contrast
• motion-disciplined