# LangChain · Design system migration spec

> Source: https://www.langchain.com  ·  Curated by OpenDesign  ·  en

> This site exemplifies modern developer tool aesthetics with its dark theme, technical precision, and clean typography that balances professionalism with approachability.

## 1. Identity DNA

LangChain's identity is that of a sophisticated digital workbench for AI developers. It operates as a platform for the agent lifecycle, from building to monitoring, grounding its technical precision in a clean, modern aesthetic.

**One-liner:** A dark-themed, developer-focused platform for AI agent development with a clean, technical aesthetic.
**Keywords:** developer · AI · infrastructure · agent · lifecycle
**Analogy:** A sophisticated digital workbench for AI developers, blending technical precision with modern aesthetics.

## 2. Color

The palette is a high-contrast dark theme, built on deep navy backgrounds. A singular blue accent provides technical emphasis, creating an atmosphere of focused, premium tooling.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#030710` | main background |
| `--bg-soft` | `#162034` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `rgba(255, 255, 255, 0.6)` | secondary text |
| `--muted` | `#7FC8FF` | placeholder |
| `--muted-soft` | `rgba(127, 200, 255, 0.5)` | weak hint |
| `--line` | `rgba(204, 233, 255, 1)` | divider |

**Color principle:** High-contrast dark theme with blue accent tones for technical emphasis

The core principle is restraint: blue is used for interactive emphasis and subtle gradients, never as a dominant wash.

## 3. Typography

Type is set in a geometric sans-serif for display and a humanist sans-serif for body copy, creating a clear hierarchy between headline impact and comfortable reading. The voice is predominantly light, using tight letter-spacing for headlines to command attention without weight.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.1 | 300 | -1.92px | Main hero headline |
| heading | 48px | 1.1 | 300 | -1.44px | Section headings |
| body | 16px | 1.5 | 400 | 0 | Body text and descriptions |
| caption | 14px | 1.5 | 400 | 0 | Small text and metadata |

**Type rules:**
- 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

## 4. Spacing

A consistent 8px base grid establishes an underlying mathematical rhythm, while generous vertical whitespace provides essential breathing room between sections of dense technical content.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 px
- **Rhythm:** Consistent 8px base grid with generous whitespace for breathing room

## 5. Surfaces

Surfaces employ layered, translucent shadows with blue undertones to suggest depth without obscuring content. Borders are minimal, rendered as 1px solid lines in blue tones to define interactive zones with precision.

- **Radius:** sm 2px · md 6px · lg 16px · pill 80px
- **Shadows:**
  - 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

## 6. Layout

The skeleton is a fixed header anchoring a centered content column, with generous vertical spacing separating logical sections. This structure prioritizes a focused, linear reading experience for complex material.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Fixed header with centered content, generous vertical spacing between sections

## 7. Motion & Interaction

Motion is functional and restrained, using smooth 0.3-second transitions on hover states and subtle fades for content changes. The goal is to provide clear, professional feedback without introducing distracting flourish.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on hover states (0.3s)
  - Subtle fade transitions for content changes
  - No flashy animations, maintaining professional feel

- **Hover:** Smooth color transitions and subtle visual feedback
- **Click:** Immediate response with visual state changes
- **Transition:** All properties transition smoothly over 0.3s duration
- **Keyboard:** Full keyboard navigation support with visible focus states

## 8. Voice & Don'ts

The editorial voice is professional, technical, and empowering, speaking directly to developers with clear, action-oriented language. It avoids casual tone and unexplained jargon, maintaining the clarity of a well-documented API.

- **Tone:** Professional, technical, and empowering
- **Headline style:** Large, light-weight typography with tight letter-spacing for impact
- **CTA style:** Clear, action-oriented language ('Start building', 'Get a demo')
- **Avoid:** Overly casual language / Excessive exclamation marks / Jargon without explanation

### Don'ts
- ❌ 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

The system deliberately rejects decorative elements, heavy font weights, and a bright color palette, committing fully to the disciplined aesthetic of a developer's instrument.

## System Prompt (paste into AI tool)

```
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.
```