What is LangChain's primary brand color?

LangChain's load-bearing voltage is the navy canvas itself — '#030710' (frequency 276, used as text 133, border 131, gradient 5). Layered over it sits a three-tier light-blue text ladder: '#cce9ff' for body and link text (frequency 400, dominant), '#7fc8ff' for sub-headers and quiet emphasis (frequency 218), and '#99d3ff' reserved for the particle-tree gradient (frequency 10, gradient-only). The deep accent '#006ddd' appears once as a button background. Read the system as a single-voltage navy field where chromatic light arrives through text, not fills.

What typography does LangChain use?

LangChain pairs Twklausanne with Aeonik, both held at narrow weight bands. Twklausanne runs weight 300 across every tier from 80px hero display through 60.8px h1, 64px h2, 56px section heading, 48px h3, 32px h4/h5, 24px lead body, 18px paragraph, down to 16px body — eleven sizes, one weight. Aeonik scopes to 14px and 16px at weight 400 for nav links, button labels, micro-copy, and the newsletter input. Documented fallbacks are Tahoma then sans-serif. The discipline is the weight-300 holdout: substitute a bolder weight at any display tier and the brand voice breaks.

Why is the LangChain canvas dark with light text?

The dark navy canvas '#030710' is the brand's continuity element — the homepage opens on it, the capability ladder for LangSmith holds it through four feature cards, the CTA module at the foot closes on it. The off-white interlude '#e5f4ff' breaks the inversion exactly once, hosting the three-column open-source frameworks rail (LangGraph, LangChain, LangGraph) on a light surface so the agent-network thumbnails can sit on bright cards. The two-band rhythm — navy / light / navy — is structural; replicating LangChain visually means committing to it and resisting the urge to soften the navy into a mid-tone gray.

Why does LangChain use a two-stop radius scale?

Every shape on the page lands at either 6px (buttons, inputs, navigation pills, badges) or 16px (cards, agent-console mockups, illustration frames, the CTA module). The extractor counted 23 occurrences of 6px and 10 occurrences of 16px, with two outliers (80px on the rounded illustration frame, 1.25px on hairline strokes). No pill CTAs anywhere — the marketing surface reads tighter and more geometric than the typical agent-platform brand, which usually defaults to fully-rounded 9999px buttons. The contrast with Replicate's fully-rounded interactive language or Cohere's 32px pill CTAs is intentional.

Does LangChain have a separate dark mode?

LangChain's public marketing surface is dark by default — the navy canvas '#030710' is the page's primary background. There is no separate dark-mode toggle on the marketing site because the marketing site IS the dark mode. The one inversion (the open-source frameworks band on '#e5f4ff') flips text to '#030710' navy on a light surface. Logged-in LangSmith dashboard surfaces and documentation live behind separate auth and use a distinct light-canvas system — those are out of scope for this DESIGN.md.

How do I use this DESIGN.md in a React project?

Feed the file to Claude, Cursor, or GitHub Copilot — the agent will reproduce LangChain's inversion (navy '#030710' canvas, weight-300 Twklausanne display, '#cce9ff' light-blue text, 6px buttons, 16px cards, one '#e5f4ff' mid-page band) inside a Tailwind + shadcn/ui project rather than a generic dark-mode AI theme. Or reference the tokens directly: every color hex, font family, radius, and spacing value is a quoted value you can paste into Tailwind config or CSS variables. Hold every display tier at weight 300 — substituting weight 500+ at 60px will collapse the brand voice the fastest.

LangChain Design System

LangChain's design system as a DESIGN.md file.

About LangChain DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source langchain.com

AI & LLM Platforms
Developer Tools & IDEs

LangChain's home page opens on a near-black navy field ("#030710") with the headline "Ship agents that wow" set in Twklausanne at 80px / weight 300 / -2.4px tracking. The hero illustration below it is a particle-tree — fine pale-blue dots converging into a vertical glyph rather than a photograph or a product mockup. Where most agent-platform brands reach for a saturated voltage hex on a white canvas, LangChain inverts the entire model: the canvas IS the brand voltage, and the text floats over it in a pale cyan-blue ladder ("#cce9ff" for body, "#7fc8ff" for sub-headers, "#99d3ff" reserved for the gradient particles). The page breaks this inversion exactly once — a single off-white band ("#e5f4ff") for the open-source frameworks rail — then snaps back to navy for the footer's CTA module.

This DESIGN.md packages the system into 22 color tokens, 11 typography styles, 4 corner radii, 9 spacing values, and 17 components built against Google Labs' open DESIGN.md specification. Inside: the navy canvas hex, the three light-blue text tiers, the off-white interlude surface, the deep-blue gradient stop "#006ddd", a Twklausanne weight-300 ladder from 80px display down to 16px body, the Aeonik 14px / weight 400 nav-and-form sub-family, the 6px button radius, the 16px card radius, the 12px-by-18px input padding pattern, and the dark agent-console card with its "#cce9ff" border-light hairline. Every hex quoted, every value traced to a node on the live page.

Feed the file to Claude, Cursor, or Copilot and the agent will produce React surfaces that reproduce LangChain's inversion discipline — navy canvas with weight-300 cyan-blue ink, particle illustrations instead of dashboard photography, 6px button radii, the single mid-page off-white interlude — rather than a default dark-mode AI theme with bold weights and pill CTAs. The discipline worth studying here is the weight-300 holdout across every display tier: where Vercel, Replit, and Anthropic all reach for weight 500-700 at 60px+, LangChain holds the line at 300 and lets the navy field do the contrast work.

What makes it distinct

Inverted canvas#030710 navy carries the hero, capability ladder, and footer; one mid-page band of #e5f4ff hosts the open-source rail
Weight 300 across every display tierTwklausanne at 80px / 60.8px / 56px / 32px / 24px holds the page at thin geometry, never bold
Dual-family laneTwklausanne carries every headline and body paragraph; Aeonik scopes down to 14px nav links, button labels, and the newsletter input
Light-blue text voltage#cce9ff (frequency 400, text 205) is the dominant ink on dark, not a fill — Stripe-style chromatic depth in reverse
6px buttons and 16px cardsa two-stop radius scale held across 17 components, no pill CTAs anywhere on the marketing surface

Live at langchain.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

langchain.com

Explore LangChain

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

LangChain design system FAQ

Common questions about LangChain's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

LangChain homepage

The live brand surface — navy canvas, weight-300 Twklausanne, particle-tree hero, open-source frameworks band.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use LangChain in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→