CURATED · OPEN · FREE

LangChain

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

aidev
LangChain screenshot
↓ Download design system (16 MB)Open in OpenDesign

Visit: https://www.langchain.com

📦 Browse pack contents →

01

Identity DNA

developerAIinfrastructureagentlifecycle

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

02

Color

#FFFFFFInk
rgba(255, 255, 255, 0.6)Ink soft
#030710BG
#162034BG soft
#7FC8FFMuted
rgba(204, 233, 255, 1)Line

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

03

Typography

geometric-sans · humanist-sans · 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

04

Spacing

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px

Consistent 8px base grid with generous whitespace for breathing room

05

Surfaces

sm · 2px
md · 6px
lg · 16px
pill · 80px

1px solid borders with blue tones for interactive elements

0px 32px 68px 0px rgba(0, 0, 0, 0.3) · 0px 0px 32px 0px rgba(127, 200, 255, 0.5)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Fixed header with centered content, generous vertical spacing between sections

07

Motion & Interaction

200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions on hover states (0.3s) · Subtle fade transitions for content changes · No flashy animations, maintaining professional feel

Smooth color transitions and subtle visual feedback · Immediate response with visual state changes

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

LangChain — 桌面首屏（hero）
桌面首屏（hero）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LangChain — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko