Signal Violet
#7084ffHero text accent, link underlines, icon glows, decorative gradient endpoint — the brand's chromatic signature; used as paint, not fill; Hero ambient washes, card glow halos, decorative background floods
LaunchDarkly
launchdarkly.comWebsite preview
The design language
LaunchDarkly is a midnight control room: deep charcoal canvas, cool violet-blue as the only chromatic voice, and white type that cuts through like console output. The interface is dense and technical without feeling cluttered — it borrows the visual language of developer tools (monospace code, panel grids, pill-shaped inputs) and wraps it in a confident marketing skin. The violet→blue gradient (#405bff → #7084ff) acts as the brand's electronic pulse, appearing in glows, hero text, active states, and decorative washes rather than flat fills. Components are pill-soft (30-60px radii dominate), borders are hairline-white on near-black, and elevation is communicated through glow rather than shadow.
Color palette
brand
Voltage Blue
#405bffViolet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
accent
Plasma Cyan
#3dd6f5Secondary gradient endpoint — used sparingly in radial glows for atmospheric warmth
neutral
Midnight Ink
#0e0e0ePage canvas, deepest background layer
Carbon
#191919Surface level 1 — nav pill, card backgrounds, button fills, footer
Graphite
#414042Surface level 2 — elevated panels, card borders, secondary surfaces
Steel
#58595bInput borders, inactive form fields
Slate
#6d6e71Muted helper text, disabled labels
Fog
#a7a9acSecondary text, subtle borders, placeholder copy
Ash
#d1d3d4Tertiary text, icon strokes, list dividers
Paper
#ffffffPrimary text, heading fills, icon strokes, card backgrounds in product-screenshot panels
Smoke
#2c2c2cList dividers, row separators in dense tables
Typography
Type scale
Minor Third (1.2) · 16px basetext-125
125px · 500 · 1The quick brown fox jumps
display
100px · 500 · 1The quick brown fox jumps
text-85
85px · 500 · 1.2The quick brown fox jumps
text-84
84px · 500 · 1.2The quick brown fox jumps
heading-lg
66px · 500 · 1.09The quick brown fox jumps
text-40
40px · 500 · 1.2The quick brown fox jumps
heading
36px · 500 · 1.2The quick brown fox jumps
text-32
32px · 500 · 1.3The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
bodyFont
- Weights
- 400, 500, 600, 700
- Sizes
- 12px, 13px, 14px, 15px, 16px, 18px, 20px, 22px, 24px, 26px, 28px, 32px, 36px, 40px, 66px, 84px, 85px, 100px, 125px
- Line height
- 1, 1.09, 1.2, 1.3, 1.4, 1.5, 1.6, 1.71
- Letter spacing
- 0.129, 0.167
bodyFont — detected in extracted data but not described by AI
Additional typeface
Sohne / custom grotesk
- Weights
- 400, 500, 600, 700
- Sizes
- 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 32, 36, 40, 66, 84, 85, 100, 125
- Line height
- 1.20, 1.30, 1.40, 1.50, 1.60
- Fallback
- Inter, Geist, Söhne (if licensed), or Space Grotesk
Primary interface and display typeface. Weight 500 dominates headings — heavier than typical marketing sites (400-600) but lighter than editorial displays (700-800), landing in a confident middle register. The largest sizes (84-125px) carry very tight line-height (1.0-1.09), letting headlines stack as a solid block of type. Letter-spacing opens up to 0.129-0.167em on small uppercase labels (eyebrows, tags) but stays normal on body and display.
Additional typeface
Sohne Mono / JetBrains Mono
- Weights
- 400
- Sizes
- 14, 16, 20, 22
- Line height
- 1.50, 1.65
- Fallback
- JetBrains Mono, IBM Plex Mono, Geist Mono
Code snippets, SDK names, technical labels. Normal letter-spacing, 1.50-1.65 line-height for readability. Appears in the hero email input and the 'Copy, paste, go.' code block.
Additional typeface
monoFont
- Weights
- 400
- Sizes
- 16px, 20px, 22px
- Line height
- 1.09, 1.5, 1.65
monoFont — detected in extracted data but not described by AI
Additional typeface
Arial
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.2
Arial — detected in extracted data but not described by AI
Additional typeface
Helvetica
- Weights
- 400
- Sizes
- 15px
- Line height
- 1.5
- Letter spacing
- 0.007
Helvetica — detected in extracted data but not described by AI
Additional typeface
headingFont1
- Weights
- 500
- Sizes
- 125px
- Line height
- 1
headingFont1 — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80-120px
- Card padding
- 32-48px
- Element gap
- 16-24px
Border radius
tags
30pxcards
30pxinputs
10pxbuttons
30pxnavPill
60pxSpacing scale
4px5px6px7px8px10px11px12px16px20px21px24px25px26px28px29px30px32px36px38px40px41px48px63px64px72px73px74px80px92px99px104px106px120px133px143px160px175px283px308pxGuidelines
Do
- Use 30px radius for all buttons, tags, and cards — the pill-softness is non-negotiable for this brand
- Use 60px radius for the top navigation pill and any full-width pill containers
- Use Signal Violet (#7084ff) for the second half of hero headlines to split the message into 'what' (white) and 'why it matters' (violet)
- Render embedded product screenshots as pure white panels on the dark canvas — the contrast signals 'this is the real workspace'
- Use the #405bff → #7084ff linear gradient at 179deg for ambient glows behind cards and hero text
- Set body text at 16-18px weight 400, white on Carbon — never below 14px for readability on dark
- Use mono font for SDK names, code, and technical identifiers — the monospace voice is part of the developer-tool identity
Don’t
- Don't use square corners or small radii (4-8px) on user-facing components — they break the pill language
- Don't use drop shadows for elevation — use glow (rgba(64,91,255,0.25) or rgba(112,132,255,0.19)) instead to stay on-brand
- Don't introduce additional accent colors — the entire system is monochromatic-plus-violet; adding green, red, or yellow dilutes the signal
- Don't use white or gray for primary action buttons — Voltage Blue (#405bff) is the only correct fill for a main CTA
- Don't center-align body copy or feature lists — only headlines and hero blocks center; everything else is left-aligned
- Don't use 1.5+ line-height on display headlines — keep it tight (1.0-1.09) so the type stacks as a solid block
- Don't put dark product screenshots on the page — the real product UI is always bright/white, creating the page's key visual tension
Components
Floating Nav Pill
Primary site navigationCentered floating pill at top of viewport, 60px radius, Carbon (#191919) fill, 1px white-alpha border. Contains: logo with arrow icon, nav links (Platform, Solutions, Resources, Developers, Pricing) with chevron dropdowns, Sign In text link, Sandbox text link, and Voltage Blue (#405bff) 'Get a demo' button. Sits 16-24px from viewport top with horizontal margin. No traditional header bar — the pill IS the header.
Primary Action Button
Main CTAVoltage Blue (#405bff) fill, white text, 30px radius, 16px vertical × 24px horizontal padding. Used for 'Get a demo' in nav and 'Get started' in hero form. No border, no shadow — the saturated blue is enough presence.
Hero Form Input
Email captureLarge dark input with Carbon (#191919) fill, 10px radius, 1px subtle border. Internal layout: email field (white text, #58595b placeholder) fills left, Voltage Blue 'Get started' button fills right. The whole composite has a soft blue glow halo (rgba(64,91,255,0.25) box-shadow) making it feel like a glowing console. Approximately 600px wide, centered, with generous vertical padding (~16-20px).
Segmented Tab Control
Section navigationThree-tab pill control (Release / Observe / Iterate) with 30px radius, Carbon fill, 1px border. Active tab indicated by a small Voltage Blue dot to the left of the label and brighter white text. Inactive tabs use Ash (#d1d3d4) text. Centered above a two-column section.
Feature Checklist Item
Section bullet listCheckmark icon in Voltage Blue or white, followed by white text at ~16-18px. No background, no card. Vertical stack with 12-16px gap between items.
Sub-feature Card
Linked feature calloutSemi-transparent dark card with subtle violet/blue glow at edges, rounded 16-20px radius. Contains: small icon (blue or violet), white label text, right-arrow icon. Sits inside a larger section as a navigational sub-element.
Product Screenshot Panel
Embedded UI demonstrationPure white (#ffffff) card with 12-20px radius and soft shadow, containing the actual LaunchDarkly product interface (pipeline configuration). Contrasts sharply with the dark page — the product UI is always shown as 'light' even on the dark marketing page, signaling that the real tool has its own bright workspace.
Code Snippet Block
SDK code exampleDark Carbon (#191919) panel with 12-16px radius, containing syntax-highlighted code. Language tabs (JavaScript / Python / iOS / React) at top in Ash text with active language in white. Code uses mono font at 14-16px with Dracula-inspired syntax colors (green strings, cyan keywords, pink literals). Copy button in top-right corner.
SDK/Resource Card
Linkable resource tileDark card (Carbon fill) with 1px white-alpha border, 20-30px radius, 32-40px padding. Contains: small icon top-left, white heading text (~18-20px weight 500), white subtext at 14-15px weight 400. Used in grids of 3 columns to link to Docs, Demo Project, Discord, etc.
Logo Strip
Social proofHorizontal row of grayscale partner/customer logos (SpaceX, Tricentis, GoPro, Volvo, Ally, Priceline) at ~70% opacity, Ash or Fog tone. Logos are rendered in white-alpha on the dark background — no boxes, no borders, just quiet type marks.
Hero Headline
Primary page headingTwo-line display headline at 84-100px, weight 500, line-height 1.0-1.09. First line in white ('Move at AI speed.'), second line in Signal Violet ('Stay in control.'). The violet second line is the signature — the brand literally colorizes its differentiator. Letter-spacing tight (normal or slight negative).
Ghost / Outlined Action
Secondary CTATransparent fill with 1px Signal Violet (#7084ff) border, Signal Violet text, 30px radius. Used for secondary actions where the primary blue button already exists. The violet outline echoes the hero accent — secondary actions share the brand's signature hue rather than fading to neutral.
Surfaces & elevation
Level 0
Midnight Canvas
#0e0e0Page background — the void beneath everything
Level 1
Carbon Panel
#191919Nav pill, footer, primary card surface
Level 2
Graphite Edge
#414042Card borders, elevated panel outlines, subtle separation on dark
Level 3
Product White
#ffffffEmbedded product screenshots — the LaunchDarkly pipeline UI appears as a bright white card floating on the dark canvas
Elevation in this system is communicated through chromatic glow, not neutral shadow. Cards float on the dark canvas via a soft blue or violet halo (using rgba(64,91,255,0.2-0.4)) rather than a gray drop shadow. The only neutral shadow is reserved for the floating nav pill, which needs physical lift. This keeps the entire dark interface feeling like a single luminous surface rather than a stack of separated panels.
Floating Nav Pill
0 4px 20px rgba(0, 0, 0, 0.45)
Hero Form Input
0 0 40px rgba(64, 91, 255, 0.25)
Layout & imagery
Layout
Full-bleed dark canvas with max-width 1200px content containers centered inside. The hero is a tall vertical block (80-100vh) with centered headline + subtext + form input stacked vertically with generous breathing room. Below the hero, sections alternate between two-column layouts (text-left / product-screenshot-right) and three-column card grids. The floating nav pill sits fixed at top center. Section gaps are large (80-120px) to let the dark canvas breathe between content blocks. Content rhythm: hero → logo strip → tabbed feature section (2-col) → code integration section (2-col) → resource card grid (3-col).
Imagery
Imagery is sparse and functional. The primary visual content is embedded product UI screenshots — bright white panels showing the LaunchDarkly pipeline interface floating on the dark page. The hero has no photography or illustration; it relies on type, glow, and a large form input. Customer logos appear as a grayscale strip. The code-snippet section uses syntax-highlighted mono text as a visual element. There is no lifestyle photography, no abstract 3D, no decorative illustration — the brand's visual language is the product itself, the code, and the type.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff - background: #0e0e0e - card/surface: #191919 - border: rgba(255,255,255,0.1) or #414042 - accent: #7084ff - primary action: #191919 (filled action) **Example Component Prompts** 1. **Hero headline block**: Full-width dark section, centered. First line 'Move at AI speed.' at 96px weight 500, #ffffff, line-height 1.0. Second line 'Stay in control.' at 96px weight 500, #7084ff, line-height 1.0. Subtext below at 18px weight 400, #d1d3d4, max-width 560px centered. 2. Create a Primary Action Button: #191919 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. **Floating nav pill**: Fixed top center, 60px border-radius, #191919 fill, 1px solid rgba(255,255,255,0.08) border, padding 8px 8px 8px 24px. Logo left, links in #d1d3d4 at 14px, 'Get a demo' button (Voltage Blue, white, 30px radius) right. 4. **Product screenshot card**: White #ffffff panel, 16px radius, 32px padding, contains embedded light-UI screenshot. Sits on dark canvas with a subtle rgba(64,91,255,0.2) glow. 5. **Code snippet block**: Dark #191919 panel, 12px radius, 24px padding. Language tabs at top (#d1d3d4 inactive, #ffffff active). Code in mono font 14px, syntax colors: strings #a6e22e, keywords #66d9ef, literals #f92672.
Similar brands
Linear
Same dark-canvas + single-accent-glow approach; both treat the product UI itself as the hero visual, and both use pill-shaped inputs and tight type stacks.
Vercel
Shares the monochrome dark palette with one chromatic accent, gradient-driven glow effects, and the practice of rendering product interfaces as bright white cards on a dark page.
Datadog
Both use deep charcoal surfaces with violet/purple brand accents, and both embed real product dashboards (not mockups) as the primary visual proof.
Stripe
Similar typographic confidence — large weight-500 display headlines, tight line-height, and the strategy of using color selectively on a subset of words in a headline for emphasis.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
