LangChain Design System

Overview

LangChain's marketing surface is held together by a single load-bearing decision — the navy field ("#030710") is the canvas, not an accent, and every other token in the system exists in relation to it. The page opens on that navy, runs four capability cards down a particle-anchored ladder still on navy, breaks exactly once into an off-white "#e5f4ff" band for the open-source frameworks rail, then snaps back to navy for the closing CTA module and footer. Chromatic energy arrives through text — "#cce9ff" carries body copy, "#7fc8ff" lifts sub-headers, "#99d3ff" handles the gradient stops in the particle-tree hero illustration — rather than through fills, badges, or bold accents.

Inverted-voltage canvas: where most agent-platform brands burn a saturated hex into a white field for the CTA stamp, LangChain inverts the entire stack and lets the dark navy field do the brand work, with light-blue text providing the only chromatic energy on the page. The system's restraint is enforced by typography: Twklausanne holds weight 300 across every display tier from 80px hero through 16px body — eleven distinct sizes, one weight value. Aeonik takes over only below 16px for nav links, button labels, and the newsletter input.

Key Characteristics:

• Navy canvas "#030710" as the primary surface, not an accent — frequency 276, dominant on the page
• One off-white interlude "#e5f4ff" for the open-source frameworks band — the single inversion
• Twklausanne weight 300 across every display tier; Aeonik weight 400 only at 14-16px
• Three-tier light-blue text ladder ("#cce9ff" body, "#7fc8ff" sub-header, "#99d3ff" gradient)
• Two-stop radius scale: 6px for interactive surfaces, 16px for cards — no pill CTAs
• Particle-tree hero illustration replaces photography; dotted vertical glyph anchors the brand mark

Colors

Brand & Voltage

• Navy Canvas ("#030710") — frequency 276. Used as text (133), border (131), gradient (5). The load-bearing brand surface; carries hero, capability ladder, CTA module, and footer.
• Light-Blue Body ("#cce9ff") — frequency 400. Used as text (205), border (195). The dominant ink token, scoped to body copy and link text on the navy canvas.
• Light-Blue Strong ("#7fc8ff") — frequency 218. Used as text (111), border (107). Sub-headers, quiet emphasis, h2 type, and component hairlines inside dark cards.
• Particle Gradient ("#99d3ff") — frequency 10. Used as gradient (10). Reserved for the hero particle-tree illustration and the radial glow at the foot CTA; never a fill.
• Accent Deep Blue ("#006ddd") — frequency 1. Used as background (1). The one saturated blue stamp, scoped to the announcement bar and the single accent CTA.

Surface & Background

• Interlude Light ("#e5f4ff") — frequency 21. Used as text (8), background (4), border (9). The single off-white band hosting the open-source frameworks rail mid-page.
• Card White ("#ffffff") — frequency 79. Used as text (32), background (11), border (36). Framework tile and primary button surface inside the interlude band.

Text & Rules (Dark)

• Blue Darker ("#2f4b68") — frequency 9. Used as border (9). Secondary text on dark surfaces and panel rules inside agent-console cards.
• Blue Mid ("#40668d") — extracted as --_v-2-colors---c-blue-dark--500. Tertiary metadata color, footer micro-copy.
• Blue Deeper ("#0d1322") — extracted as --_v-2-colors---c-blue-dark--800. Agent-console card background, one tone above the canvas.
• Hairline Dark ("#161f34") — extracted as --_v-2-colors---c-blue-dark--700. Card borders inside dark surfaces.

Semantic

• Success Green ("#027a48") — system token, success text on light.
• Success Bg ("#ecfdf3") — pale wash behind success messaging.
• Error Red ("#b42318") — system token, error text on light.
• Error Bg ("#fef3f2") — pale wash behind error messaging.

LangChain does not use gradients as decorative fills. The only gradient on the page is the particle-tree hero illustration, where "#99d3ff" stops fade into "#030710" canvas as dots rather than a continuous surface. Keep gradient richness scoped to that one illustration moment.

Typography

Font Family

• Display & Body: Twklausanne, falling back to Tahoma, then sans-serif. Carries every headline and paragraph from 80px hero down to 16px body, always at weight 300.
• UI Sub-family: Aeonik, falling back to Tahoma, then sans-serif. Scoped to 14-16px nav links, button labels, form fields, and announcement-bar microcopy at weight 400.

Hierarchy

Principles

Weight as signature: hold every Twklausanne tier at weight 300. The visual identity collapses the moment a display headline goes to weight 500 or higher — the brand's confidence signal is the thin geometry, not size or color. Unlike the convention of pairing display weight 700 with body weight 400, LangChain pairs display weight 300 with body weight 300 and lets the navy canvas carry the contrast.

Use Aeonik only below 16px for chrome: nav links, button labels, form fields, announcement-bar microcopy. Any text inside a paragraph, heading, or display block stays in Twklausanne.

Layout

Spacing System

LangChain's spacing reads as a 4px base scale with strategic large stops: 4px, 8px, 16px, 20px, 24px, 40px, 48px, 56px, 80px, and a wide 120px horizontal section padding. The extractor's most-frequent values are 4px (19 occurrences), 16px (18), and the 12px 18px button padding pair (12 occurrences).

Grid & Container

• Three-zone top nav: logo left, primary menu center, "Try LangSmith" + "Get a demo" pair right.
• Hero block centers headline + dek + button pair over the particle-tree illustration.
• LangSmith capability ladder uses left-text / right-mockup pairs stacked vertically, each card padded 24px on 16px corner radius.
• Open-source band uses a 3-column tile grid on light surface — the one mid-page inversion.
• Customer-quote carousel renders five 5-column logo cards with case-study text below.
• Closing CTA module centers headline + form pair on navy.

Whitespace Philosophy

The page uses tall vertical gaps as a structural marker rather than a stylistic flourish. Between the hero illustration and the trust-logo strip sits empty navy — no fill, no shape, no rule. The same gap pattern repeats between each capability card on the LangSmith ladder and again before the open-source band. Reading whitespace as part of the system rather than padding is what keeps the page from feeling busy at the long-page scroll.

Elevation & Depth

LangChain is structurally flat. Depth arrives from canvas inversion (navy → light → navy) and the particle-tree illustration's atmospheric gradient. No drop shadows on the marketing surface; no surface-elevation ladder beyond the canvas / card / light-interlude alternation.

Shapes

Radius Scale

The two-stop interactive scale (6px buttons / 16px cards) is held without exception across all 17 components. Where Replicate uses fully-rounded 9999px pills and Cohere lands at 32px pill CTAs, LangChain commits to angular geometry — the contrast is part of the brand voice.

Components

button-primary

White surface ("#ffffff") with navy ink, weight-400 Aeonik 14px label, 12px 18px padding, and 6px corner radius. The primary action on the navy canvas. Hover lifts the surface toward the "#99d3ff" particle-gradient stop.

button-secondary

Transparent fill with 1px solid "#cce9ff" hairline, light-blue text, identical 6px radius and 12px 18px padding. Used for "Get a demo" pair-actions next to the primary CTA.

button-accent

The one saturated blue button — "#006ddd" background, white text. Scoped to the announcement bar's "Learn more" trigger and the closing newsletter submit. Treat as a stamp; one per viewport at most.

top-nav

Full-width navy bar with light-blue link labels in Aeonik 14px, three-zone layout, no border at the foot. 16px 24px padding.

nav-link

Transparent background, "#cce9ff" text, 10px hit-area padding, no underline or pill background — the link IS the typography.

announcement-bar

Full-width "#006ddd" deep-blue strip above the nav, white microcopy, 0px corner radius. Hosts the recurring launch announcements ("Join us May 13-15 at Interrupt...").

card-dark

Navy "#030710" surface with 1px solid "#161f34" hairline, 16px corner radius, 24px padding. Used for the four LangSmith capability cards stacked down the page.

card-light

White "#ffffff" surface with 1px solid "#e5f4ff" hairline, 16px corner radius, 24px padding. Appears inside the interlude band only.

agent-console-card

Slightly-elevated "#0d1322" surface with "#161f34" hairline, 16px corner radius, 20px padding. The mockup frame for "Email Agent" / "Trace Tree" / "Run Detail" screenshots inside each LangSmith capability card.

framework-tile

Three-column tile inside the interlude band, white surface, "#e5f4ff" hairline, "LangSmith Agents" / "LangGraph" / "LangGraph Studio" content with chart thumbnails.

interlude-band

The single off-white "#e5f4ff" full-width band hosting the open-source frameworks rail. 80px 120px padding, 0px radius. The one inversion on the marketing surface.

hero-band

Full-width "#030710" navy band with 80px 120px padding. Hosts the "Ship agents that wow" headline and particle-tree illustration.

cta-module

Closing navy band before the footer, headline + newsletter pair centered, 80px 120px padding.

text-input

Navy "#030710" surface, "#cce9ff" placeholder, 1px solid "#cce9ff" hairline, 6px corner radius, 8px 18px padding, Aeonik 14px weight 400. The newsletter and contact fields use this style without variant.

newsletter-input

Identical structure to text-input, used in the closing CTA module. Submit pairs with button-accent.

footer-region

Bottom navy band, "#cce9ff" link text, Twklausanne 16px body, 48px 120px padding.

Do's and Don'ts

Do

• Treat the navy canvas "#030710" as the primary surface, not an accent — every other token exists in relation to it.
• Hold every Twklausanne tier at weight 300. Hero through body, no exceptions.
• Use the three-tier light-blue text ladder ("#cce9ff" body, "#7fc8ff" sub-header, "#99d3ff" gradient).
• Break the inversion exactly once per page with an "#e5f4ff" band — never twice.
• Scope Aeonik to 14-16px chrome only (nav, buttons, form fields, microcopy).
• Use 6px for interactive surfaces and 16px for cards. Hold the two-stop scale.
• Anchor the hero with the particle-tree illustration rather than photography or a dashboard mockup.

Don't

• Don't render hero or display type at weight 500 or above — the weight-300 ladder is the brand voice; substituting weight 500 at 60px collapses the identity faster than any color change.
• Don't use "#cce9ff" as a background fill — its 400 occurrences are text (205) and border (195) only, with zero bg count. Treating it as a card background inverts its semantic role and reads as alien to the system.
• Don't add a second off-white interlude band — the inversion is one moment in the page, not a rhythm. Two breaks dissolve the navy-as-canvas identity.
• Don't use pill (9999px) radii on buttons — every interactive surface on the marketing page is 6px. Pill CTAs read as a different system.
• Don't substitute Aeonik for Twklausanne on any text 16px or larger — Aeonik's geometry breaks the display ladder.
• Don't use "#006ddd" as a body link color or hover state — it's scoped to one stamp per viewport (announcement bar + accent button).
• Don't drop shadows onto cards — depth on this system comes from canvas inversion, not elevation. A shadow under card-dark reads as a stylesheet leak from a different brand.

Known Gaps

• LangSmith dashboard surfaces (authenticated traces, evaluation runs, billing) sit behind sign-in and are not captured here — those use a distinct light-canvas system out of scope for this DESIGN.md.
• Animation and transition timings are not extracted; recommend 150-200ms ease for hover and focus transitions to match the marketing surface's restraint.
• Proprietary font files (Twklausanne, Aeonik) are not bundled — external implementations should fall back to Tahoma then a geometric sans, and clamp display tracking to match the original -2.4px / -1.92px values, which most fallback fonts will render looser by default.
• The particle-tree hero illustration is treated as decorative artwork, not a system component — replicating it requires bespoke generative art rather than tokens.
• Mobile screenshots were not captured in this pass; responsive collapse behavior is inferred from desktop layout and standard breakpoints.