LaunchDarkly Design System

Overview

LaunchDarkly's marketing page resolves a design problem specific to AI-era developer tools: how do you give visual identity to five distinct AI-control capabilities without creating an incoherent rainbow? Capability-as-color taxonomy. Each of the five AI use cases in the feature list (ship code, govern agents, optimize performance, self-healing, experiment) receives a distinct illustration color — orange, periwinkle-blue, pink-magenta, purple, and lime-green. These colors appear exclusively in illustrated UI thumbnails beside each capability section. The structural chrome — nav, section headings, body text, CTAs — stays rigidly within the electric-blue-on-dark-neutral system. Where competitors like Flagsmith or Split.io use a single accent across all feature sections, LaunchDarkly lets the capability palette do taxonomic work that would otherwise require icon systems or labeled badges.

The page's above-fold design is one of the boldest in the feature-flag category: a near-black canvas (#191919) carrying a pure-white display headline at the maximum extracted font weight. Where Statsig runs Geist at 500 and Heap runs Circular Standard at 400, LaunchDarkly pushes to weight 800 — the headline "Move at AI speed. Stay in control." reads as an imperative, not an editorial statement. The electric-blue pill CTA sits below an email input in the hero; the email/button pairing is an enterprise capture pattern that assumes user intent before they click.

Key Characteristics:

• Near-black canvas ({colors.canvas} — #191919) hero with pure-white display text at weight 800 — the highest display weight in the feature-flag peer group.
• Electric blue ({colors.primary} — #405bff) fills the single CTA button above the fold; wired as --primary and --blue.
• Lime-green ({colors.lime} — #ddff46) as the hero "secondary" accent, appearing on illustrated capability chips and toggle UI — never as a button fill.
• Dual-canvas page: dark above-fold for authority, white below-fold for evaluation; the transition is hard-cut with no gradient fade.
• Five capability accent colors (orange, blue, pink, purple, lime) each mapping to a named AI-control product domain.
• Five-step gray scale from #939598 to #2c2c2c provides nav muting, sub-text tiers, and dark-surface card borders.

Colors

Brand Blues

• Primary ({colors.primary} — #405bff): frequency 9. Used as text (3), bg (3), border (3). The sole CTA fill color, wired as --blue, --primary, --blue-500. The most restrained chromatic deployment in the system — three background uses for the hero CTA, three text uses for inline links, three border uses for interactive states.
• Primary Light ({colors.primary-light} — #7084ff): frequency 10. Used as text (5), border (5). The gradient start and text-link accent (--blue-400, --text-gradient-a). More frequent than the primary fill — appears in link text and interactive borders throughout the white-canvas sections.
• Primary Hover ({colors.primary-hover} — #4e6cee): frequency 4. Used as text (1), bg (2), border (1). The hover state for primary blue elements (--refresh-blue-500).

Capability Accents

• Lime ({colors.lime} — #ddff46): frequency 5. Used as background (5). Appears exclusively as the fill for illustrated UI elements in the "Experiment continuously" capability section. Wired as --lime, --yellow, --yellow-500.
• Lime Light ({colors.lime-light} — #eafca1): frequency 1. Gradient use in the lime capability section only (--yellow-300, --lime-light).
• Orange ({colors.orange} — #ff9d29): frequency 7. Used as text (2), bg (3), border (2). The "Ship AI-built code" capability color. Wired as --orange, --refresh-orange-500. Appears in rollout-duration chart illustrations.
• Purple ({colors.purple} — #a34fde): frequency 2. Used as background (2). The "Enable self-healing systems" capability color. Wired as --purple-500, --purple.
• Cyan ({colors.cyan} — #3dd6f5): frequency 1. Used as background (1). The "Optimize AI performance" capability illustration color. Wired as --refresh-cyan-500, --cyan.

Structural

• Ink ({colors.ink} — #ffffff): frequency 654. Used as text (334), bg (52), border (268). The dominant above-fold text color — pure white on near-black. The extraction merged a near-white variant into this cluster token.
• Canvas ({colors.canvas} — #191919): frequency 306. Used as text (133), bg (41), border (132). The above-fold dark floor and footer background. Wired as --refresh-grey-900, --black-03.
• Canvas Light ({colors.canvas-light} — #212121): frequency 11. Used as background (9). Slightly lighter dark tier for sub-sections within the dark canvas (--refresh-grey-800).
• Canvas Mid ({colors.canvas-mid} — #2c2c2c): frequency 54. Used as bg (15), border (38). Card surfaces within the dark hero region (--black-00, --refresh-grey-700).
• Surface White ({colors.surface-white} — #ffffff): the white canvas for below-fold feature sections — the same hex as {colors.ink} but used as background.
• Ink Dark ({colors.ink-dark} — #000000): frequency 28. Used as text (12), bg (2), border (13). Pure black for the white-canvas sections.

Gray Scale

• Gray 1 ({colors.gray-1} — #939598): frequency 152. Used as text (74), border (74). The sub-heading and nav-muted text color in the dark canvas (--refresh-grey-400).
• Gray 2 ({colors.gray-2} — #abadb0): frequency 132. Used as text (67), border (65). The secondary muted text tier (--refresh-white-300).
• Gray 3 ({colors.gray-3} — #414042): frequency 99. Used as text (49), border (50). The mid-dark tier for card borders in the dark canvas (--refresh-grey-600).
• Hairline ({colors.hairline} — #d1d6d9): frequency 28. Used as text (13), bg (1), border (14). The card border for white-canvas sections.

Typography

Font Family

The system runs a geometric sans across all tiers. The extracted CSS does not reveal a named proprietary typeface — the font stack resolves to system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, suggesting LaunchDarkly either uses a custom webfont loaded externally or relies on the system geometric. The weight range is 400 through 800, spanning more of the weight axis than most analytics peers.

Hierarchy

Principles

The weight axis is the hierarchy signal above the fold: weight 800 for the hero, 700 for dark section heads, 600 for the white-canvas feature titles. No italic or letter-spacing extremes — hierarchy comes from weight steps alone, not spacing-based differentiation. The body weight never changes from 400 regardless of canvas (dark or light).

Note on Font Substitutes

If the system loads a custom webfont not detected by the extractor, Inter at the same weights is the most accurate open-source substitute given the geometric sans proportions visible in the screenshot. Plus Jakarta Sans is an alternative with slightly more personality at the heavy weights.

Layout

Spacing System

• Base unit: 8px, with 24px and 48px as the dominant module values.
• Tokens: {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.base} 24px · {spacing.lg} 32px · {spacing.xl} 40px · {spacing.2xl} 48px · {spacing.3xl} 64px.
• Hero padding (vertical): ~80px above the headline, creating a visually spacious dark frame around the bold text.
• Capability row padding: 32px vertical, hairline-bordered — each AI-capability section separated by a thin line.
• Section padding: 64px horizontal on the dark canvas sections.

Grid & Container

• Max content width: ~1280px for the feature sections.
• Hero: two-panel layout — left: display headline + email input + CTA; right: animated UI mock (rollout slider, model distribution chart).
• Capability list: single-column list of 5 rows, each with a left text panel and a right illustration thumbnail.
• Footer: multi-column link grid on the dark canvas.

Rhythm

The page has two distinct rhythm zones. The dark hero zone runs large type with maximum vertical whitespace — emphasis through emptiness. The white-canvas zone runs 5 tight capability rows separated by hairline borders — emphasis through density and repetition. The transition between zones is a hard cut rather than a gradient: one row ends on dark canvas, the next begins on white.

Elevation

The dark-canvas zone has no shadow system — the near-black floor is too dark for shadows to read, and elevation comes from tonal contrast alone:

• Tonal lift (dark): {colors.canvas-mid} (#2c2c2c) cards sit on {colors.canvas} (#191919) — a ~7% lightness delta creates visible hierarchy.
• Border lift (white): {colors.hairline} (#d1d6d9) 1px borders on the white-canvas capability cards. No shadow needed when the canvas is white and the card is white — the hairline is the separator.
• No blur shadows: the system has zero recorded shadow usage in the extracted data.

Shapes

The radius scale is moderate with a pill jump:

• {rounded.none} 0px — section dividers and illustration-region edges.
• {rounded.sm} 4px — small capability chips and status indicators.
• {rounded.md} 8px — text inputs, code snippets, illustration thumbnails.
• {rounded.lg} 16px — feature cards and partner logo chips.
• {rounded.pill} 9999px — the primary CTA button and the hero email input row.

The gap from 16px (card) to 9999px (button) is deliberate: interactive elements declare themselves through radical rounding while containers use moderate rounding. This is the same binary shape vocabulary as Statsig (10px container / 30px pill), executed at a larger scale.

Components

button-primary — Electric blue {colors.primary} fill, white text, {rounded.pill} 9999px, 12x24 padding, 48px height. "Book a demo" in the hero is the canonical instance. The single chromatic button above the fold.

button-primary-hover — Hover shifts to {colors.primary-hover} (#4e6cee), a slightly muted blue. Text and radius stay constant.

button-secondary — Transparent fill, white text, gray-2 border, {rounded.pill} radius. Used for secondary CTAs in the white-canvas sections.

button-secondary-dark — Transparent fill, white text, 1px {colors.primary} border, pill radius. Used within the dark canvas for "Learn more" type actions beside capability rows.

top-nav — Dark canvas {colors.canvas} background, 56px height. White text at {typography.nav-link}, pill-shaped primary CTA at right.

hero-heading — Transparent background on dark canvas, pure-white text, {typography.display-xl} (weight 800). The heaviest typographic moment in the system by a significant margin.

hero-subtext — Gray-2 {colors.gray-2} text, {typography.body-lg} (18px / 400). The subheadline beneath the hero h1 uses the muted gray tier rather than full white, creating a two-level white hierarchy within the dark canvas.

section-heading-dark — Pure white text on dark canvas, {typography.display-md} (56px / 700). Used for the "Ship with AI that does what you expect — however you build." dark closing section.

section-heading-light — Ink-dark text on white canvas, {typography.heading-lg} (40px / 700). Used for the "Control every change in production." headline in the white capability section.

capability-row — White surface, ink-dark text, {rounded.none}, 32px vertical padding, 1px {colors.hairline} bottom border. The five AI-capability rows share this exact structure; only the illustration thumbnail changes per row.

capability-chip — Lime-green {colors.lime} fill, ink-dark text, {rounded.sm} 4px, 4x8 padding. The illustrated feature-domain identifier inside capability thumbnails.

text-input — Dark-mid {colors.canvas-mid} fill, white text, {rounded.md} 8px, 12x16 padding, 48px height. The hero email capture input; dark fill matches the hero canvas.

illustration-thumbnail — Dark-mid {colors.canvas-mid} fill, {rounded.lg} 16px. The right-side capability illustration panel — each uses a different accent color internally (orange, blue, pink, purple, lime) while the container is uniformly dark.

dark-section — Dark canvas {colors.canvas} background, white text, 64x40 padding. The closing hero-style call-to-action section at the bottom.

footer — Dark canvas background, gray-1 text, 48x40 padding. Matches the hero canvas — the page begins and ends on the same dark surface.

Do's and Don'ts

Do keep the electric blue ({colors.primary} — #405bff) as the exclusive CTA fill. It appears 3 times as a background in the captured page — once on the hero button and twice in secondary interactive contexts. Each additional blue fill dilutes the signal. Use {colors.primary-light} (#7084ff) for text links and focus states instead.

Do assign the capability accent colors to illustration content only. Orange, purple, cyan, and lime each map to a specific AI-control domain. Using them on nav items, section headings, or card borders repurposes them as general accents and breaks the taxonomic system.

Do use weight 800 for the dark-canvas hero h1 and step down to 700 for dark-canvas section headings. The weight ladder (800 → 700 → 600 → 400) is the hierarchy signal on a canvas with no color differentiation.

Do make the dual-canvas transition a hard cut. The page goes from {colors.canvas} (#191919) dark to {colors.surface-white} white with no intermediate gray, no gradient, no shadow separator. A soft transition (gradient or 50% gray) diminishes the authority signal of the dark-canvas hero.

Don't use {colors.lime} (#ddff46) as a button fill or section background. It is wired as a feature-illustration color for the "Experiment continuously" domain. As a button fill it would read like an error or warning state — the OKLCH chroma is high enough that it dominates any element it fills.

Don't use the gray scale ({colors.gray-1} #939598, {colors.gray-2} #abadb0) as text on white canvas. Both grays are calibrated for dark-canvas legibility where white #ffffff is the primary text and these are the secondary tiers. On a white background, #939598 fails WCAG AA at any size below 18px. Use {colors.ink-dark} (#000000) for primary and {colors.gray-3} (#414042) for secondary on white.

Don't add border radius larger than 16px to feature cards. The capability rows use {rounded.none} (bordered by hairlines only); the illustration thumbnails use {rounded.lg} 16px. Larger radii (24px, 32px) would make the data-precision layout feel like a consumer-app card grid.

Don't apply {colors.primary-light} (#7084ff) as a background fill. It appears 10 times in the capture as text and border only — its perceptual lightness makes it too pale for fills at this chroma level, where it would read as a soft lavender rather than as brand blue.

Known Gaps

• Font family identity: the extractor did not identify a named proprietary webfont; the system may load a custom face via a CDN not captured in the CSS snapshot. Visual analysis suggests a geometric sans near Inter or DM Sans at the displayed weights.
• Hover state matrix: captured for the primary blue CTA only; the full state matrix for secondary buttons, nav links, and capability rows is not extracted.
• Mobile hero layout: the two-panel hero (headline left, animated mock right) collapses on mobile; the responsive layout is not captured.
• Animation: the hero UI mock (rollout slider, model distribution chart) is animated; easing curves and keyframe values are not in the extracted CSS.
• Product dashboard tokens: the capability illustration thumbnails show product UI with their own internal token system; only the outer container values are captured here.
• Dark mode toggle: the above-fold dark canvas is not a system dark-mode preference — it is always dark regardless of OS setting. A true dark mode for the below-fold white sections is not documented.