---
name: Launchdarkly
description: "This site exemplifies a modern, premium developer tool aesthetic, balancing technical precision with bold visual impact."
version: alpha

colors:
  background: "#0c0c0c"
  primary: "#ffffff"
  secondary: "#939598"
  tertiary: "#d4ff2e"
  neutral: "#414042"
  bg-soft: "#191919"
  bg-quiet: "#2e2e2e"
  muted-soft: "#abadae"
  line: "rgba(255,255,255,0.15)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.5px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  mono:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A dark, grid-based interface with bold white typography and sharp neon-yellow accents, emphasizing control and speed.

*A high-performance dashboard for engineering teams managing complex AI and software systems.*

## Colors

High-contrast dark mode with deep blacks, crisp whites, and a singular neon-yellow accent for maximum readability and focus.

- **Background (`#0c0c0c`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#939598`)** — uses `ink-soft` token
- **Accent (`#d4ff2e`)** — uses `accent` token
- **Muted (`#414042`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.15)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** grotesque-sans
- **Mono:** monospace

- Use geometric-sans for large, impactful headlines.
- Use grotesque-sans for readable body text.
- Maintain tight letter-spacing on display text to enhance boldness.

## Layout

Centered content on dark backgrounds with a grid-based background pattern.

*Rhythm:* 4px base grid with generous padding for large cards and sections.

## Elevation & Depth

- 0px 0px 0px 1px inset rgba(0, 0, 0, 0)
- 0px 4px 16px 0px rgba(0, 0, 0, 0.15)
- Borders: 1px solid rgba(255,255,255,0.15) for subtle card boundaries.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** High-contrast pill buttons with neon-yellow background for primary actions; outline or transparent for secondary.
- **card:** Dark rounded cards with subtle 1px borders and rounded corners.
- **chip:** Small, rounded containers for labels and tags.
- **input:** Dark background input fields with subtle borders.
- **hero:** Full-width dark section with oversized typography and a grid background.

## Do's and Don'ts

**Don't:**
- Don't use bright backgrounds — screenshot shows a predominantly dark theme.
- Don't use multiple accent colors — screenshot shows a single dominant neon-yellow accent.
- Don't use serif fonts — screenshot shows only sans-serif and monospace fonts.
- Don't use small, cramped spacing — screenshot shows generous padding in cards and sections.
- Don't use heavy drop shadows — screenshot shows very subtle, almost flat elevation.
- Don't use playful illustrations — screenshot shows abstract, technical grid patterns and charts.

---

## System Prompt (paste into AI agent)

```
LaunchDarkly's design DNA is a high-performance, dark-mode interface built for engineering and product teams. It uses a deep black background (#0c0c0c) with crisp white text (#ffffff) and a singular, high-chroma neon-yellow accent (#d4ff2e) for primary calls to action. The typography relies on geometric and grotesque sans-serif categories for a clean, technical feel, with tight letter-spacing on display text. Critical design rules include: never use a light theme, limit accents to the singular neon-yellow, and maintain generous, consistent spacing based on a 4px grid. The overall aesthetic is restrained, professional, and focused on clarity and control.
```