LaunchDarkly Design System

LaunchDarkly's marketing site runs a dual-canvas strategy that most feature-flag platforms don't attempt: the hero section is a near-black field (#191919) with a pure-white display headline at weight 800, and the blue CTA button sits below an email capture field. Below the fold, the page inverts to pure white with a five-section capability list where each AI-control domain carries its own illustration color — orange for "Ship AI-built code," blue-purple for "Control and govern AI agents," magenta-pink for "Optimize AI performance," purple for "Enable self-healing systems," lime-green for "Experiment continuously." The capability colors are not interchangeable; each maps to a named product capability, functioning more like a product taxonomy than a brand palette.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 18 color tokens drawn from the near-black canvas, the electric-blue brand primary, the lime-green secondary accent, a 5-tier gray scale, and the capability-specific accent palette; 11 typography tokens using a geometric sans at weights from 400 through 800; 5 radius tokens from 4px to pill; 8 spacing values on a 16-48px scale; and 20 component definitions covering the dark-canvas hero, the electric-blue pill CTA, the email-capture input row, the white-canvas feature capability cards, and the accent-chip taxonomy.

Feed this file to Claude or Cursor and it reproduces LaunchDarkly's specific moves: near-black above-fold hero with pure white display text at weight 800, electric blue reserved for the primary CTA, capability accent colors that self-describe domain rather than decorate, a pill-radius CTA (9999px) on an otherwise moderate-radius system, and the white below-fold layout where AI-feature chips carry color rather than the structural chrome. The dual-canvas pattern is worth borrowing when the product operates in two modes — "trust and buy" (dark canvas, bold headline) and "understand and evaluate" (white canvas, feature list).