---
name: LangChain
description: "This site exemplifies modern developer tool aesthetics with its dark theme, technical precision, and clean typography that balances professionalism with approachability."
version: alpha

colors:
  background: "#030710"
  primary: "#FFFFFF"
  secondary: "rgba(255, 255, 255, 0.6)"
  neutral: "#7FC8FF"
  bg-soft: "#162034"
  muted-soft: "rgba(127, 200, 255, 0.5)"
  line: "rgba(204, 233, 255, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.1
    fontWeight: 300
    letterSpacing: "-1.92px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 300
    letterSpacing: "-1.44px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 2px
  md: 6px
  lg: 16px
  pill: 80px

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

---

## Overview

A dark-themed, developer-focused platform for AI agent development with a clean, technical aesthetic.

*A sophisticated digital workbench for AI developers, blending technical precision with modern aesthetics.*

## Colors

High-contrast dark theme with blue accent tones for technical emphasis

- **Background (`#030710`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`rgba(255, 255, 255, 0.6)`)** — uses `ink-soft` token
- **Muted (`#7FC8FF`)** — uses `muted` token
- **Borders (`rgba(204, 233, 255, 1)`)** — uses `line` token

## Typography

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

- Display and heading text use tight letter-spacing (-1.92px to -1.44px)
- Body text uses 16px base size with 1.5 line-height
- Font weights are predominantly light (300) for headlines and regular (400) for body

## Layout

Fixed header with centered content, generous vertical spacing between sections

*Rhythm:* Consistent 8px base grid with generous whitespace for breathing room

## Elevation & Depth

- 0px 32px 68px 0px rgba(0, 0, 0, 0.3)
- 0px 0px 32px 0px rgba(127, 200, 255, 0.5)
- Borders: 1px solid borders with blue tones for interactive elements

## Shapes

- `sm`: 2px
- `md`: 6px
- `lg`: 16px
- `pill`: 80px

## Components

- **button:** Primary: white background with black text, rounded corners (6px). Secondary: transparent with white border
- **card:** Dark cards with subtle borders, used for product showcases and feature highlights
- **chip:** Pill-shaped tags with blue borders (e.g., Build, Test, Deploy, Monitor)
- **input:** Dark input fields with blue accents and clear typography
- **hero:** Full-width dark section with large centered typography, gradient blue lines, and dual CTA buttons

## Do's and Don'ts

**Don't:**
- Don't use bright colors — screenshot shows a dark theme with subtle blue accents
- Don't use heavy font weights — screenshot shows light (300) and regular (400) weights
- Don't use wide letter-spacing — screenshot shows tight negative spacing for headlines
- Don't use complex decorative elements — screenshot shows clean, minimal design
- Don't use multiple accent colors — screenshot shows a single blue accent palette
- Don't use rounded pill shapes for all buttons — screenshot shows mix of rounded and rectangular buttons

---

## System Prompt (paste into AI agent)

```
A dark-themed developer platform for AI agent development, featuring a clean, technical aesthetic with a primary color palette of deep navy (#030710) and light blue accents (#7FC8FF, #CCE9FF). The typography combines geometric sans-serif for displays with humanist sans-serif for body text, using light weights (300) for headlines and regular (400) for body copy. Key features include generous whitespace, subtle blue gradient lines, and a mix of solid and bordered buttons. Critical design principles: maintain the dark theme consistency, use blue accents sparingly for emphasis, keep typography light and spacious, avoid heavy visual elements that would overwhelm the technical content, and ensure all interactions feel smooth and professional.
```