---
version: alpha
name: LangChain
website: "https://www.langchain.com"
description: >-
  LangChain's marketing surface is a dark navy canvas ("#030710") inverted with light cyan-blue text ("#cce9ff", "#7fc8ff"), broken once mid-page by a single off-white band ("#e5f4ff") that hosts the open-source frameworks rail. Display type runs Twklausanne at weight 300 from 24px through 80px — the absence of bold weights is the brand's signature voltage — while Aeonik handles 14px nav links and form fields. Particle-tree illustrations replace photography; every interactive surface uses a 6px button radius and 16px card radius without exception.

seo:
  title: "LangChain Design System for React — Navy #030710, Twklausanne 300, 17 components"
  metaDescription: "LangChain's design system as a DESIGN.md file. Navy #030710 canvas, Twklausanne weight 300, 22 colors, 17 components. For React, Next.js, and AI tools."
  highlights:
    - "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 tier — Twklausanne at 80px / 60.8px / 56px / 32px / 24px holds the page at thin geometry, never bold"
    - "Dual-family lane — Twklausanne 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 cards — a two-stop radius scale held across 17 components, no pill CTAs anywhere on the marketing surface"
  tags:
    - "AI & LLM Platforms"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.langchain.com"
      title: "LangChain homepage"
      description: "The live brand surface — navy canvas, weight-300 Twklausanne, particle-tree hero, open-source frameworks band."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is LangChain's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typography does LangChain use?"
      answer: "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."
    - id: "inverted-canvas"
      title: "Why is the LangChain canvas dark with light text?"
      answer: "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."
    - id: "shape-language"
      title: "Why does LangChain use a two-stop radius scale?"
      answer: "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."
    - id: "dark-mode"
      title: "Does LangChain have a separate dark mode?"
      answer: "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."
    - id: "use-in-project"
      title: "How do I use this DESIGN.md in a React project?"
      answer: "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."

colors:
  canvas: "#030710"
  surface-light: "#e5f4ff"
  surface-card-dark: "#030710"
  surface-card-light: "#ffffff"
  ink: "#030710"
  ink-on-dark: "#cce9ff"
  ink-on-dark-strong: "#7fc8ff"
  ink-on-dark-soft: "#99d3ff"
  ink-on-light: "#000000"
  text-secondary: "#2f4b68"
  text-tertiary: "#40668d"
  accent-deep: "#006ddd"
  hairline-light: "#cce9ff"
  hairline-soft: "#e5f4ff"
  hairline-dark: "#161f34"
  hairline-deep: "#0d1322"
  on-primary: "#ffffff"
  success: "#027a48"
  success-bg: "#ecfdf3"
  error: "#b42318"
  error-bg: "#fef3f2"
  blue-darker: "#2f4b68"
  blue-deeper: "#0d1322"

typography:
  hero-display:
    fontFamily: "Twklausanne, Tahoma, sans-serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: "-2.4px"
  display-lg:
    fontFamily: "Twklausanne, Tahoma, sans-serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: "-1.92px"
  display-md:
    fontFamily: "Twklausanne, Tahoma, sans-serif"
    fontSize: 60.8px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: "-1.824px"
  section-heading:
    fontFamily: "Twklausanne, Tahoma, sans-serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: "-1.68px"
  heading-md:
    fontFamily: "Twklausanne, Tahoma, sans-serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: "-0.96px"
  heading-sm:
    fontFamily: "Twklausanne, Tahoma, sans-serif"
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: "-0.72px"
  body-lg:
    fontFamily: "Twklausanne, Tahoma, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: "0px"
  body-md:
    fontFamily: "Twklausanne, Tahoma, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.6
    letterSpacing: "0px"
  body-aeonik:
    fontFamily: "Aeonik, Tahoma, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0px"
  nav-link:
    fontFamily: "Aeonik, Tahoma, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: "0px"
  button-md:
    fontFamily: "Aeonik, Tahoma, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: "0px"

rounded:
  none: "0px"
  hairline: "1.25px"
  sm: "6px"
  lg: "16px"
  xxl: "80px"

spacing:
  xxs: "1px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "20px"
  xl: "24px"
  xxl: "48px"
  section: "56px"
  hero: "80px"

components:
  button-primary:
    backgroundColor: "{colors.surface-card-light}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12px 18px"
  button-primary-hover:
    backgroundColor: "{colors.ink-on-dark-soft}"
    textColor: "{colors.ink}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12px 18px"
    border: "1px solid {colors.hairline-light}"
  button-accent:
    backgroundColor: "{colors.accent-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12px 18px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.nav-link}"
    padding: "16px 24px"
    border: "0"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.nav-link}"
    padding: "10px"
  announcement-bar:
    backgroundColor: "{colors.accent-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    padding: "8px 18px"
    rounded: "{rounded.none}"
  card-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-on-dark}"
    rounded: "{rounded.lg}"
    padding: "24px"
    border: "1px solid {colors.hairline-dark}"
  card-light:
    backgroundColor: "{colors.surface-card-light}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "24px"
    border: "1px solid {colors.hairline-soft}"
  agent-console-card:
    backgroundColor: "{colors.blue-deeper}"
    textColor: "{colors.ink-on-dark}"
    rounded: "{rounded.lg}"
    padding: "20px"
    border: "1px solid {colors.hairline-dark}"
  framework-tile:
    backgroundColor: "{colors.surface-card-light}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "24px"
    border: "1px solid {colors.hairline-soft}"
  interlude-band:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"
    padding: "80px 120px"
    rounded: "{rounded.none}"
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-on-dark}"
    padding: "80px 120px"
    rounded: "{rounded.none}"
  cta-module:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-on-dark}"
    rounded: "{rounded.none}"
    padding: "80px 120px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: "8px 18px"
    border: "1px solid {colors.hairline-light}"
  newsletter-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: "8px 18px"
    border: "1px solid {colors.hairline-light}"
  footer-region:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.body-md}"
    padding: "48px 120px"
---

## 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

| Role | Font | Size | Weight | Line Height | Letter Spacing |
|---|---|---:|---:|---:|---:|
| Hero Display | Twklausanne | 80px | 300 | 1.10 | -2.4px |
| Display LG | Twklausanne | 64px | 300 | 1.10 | -1.92px |
| Display MD | Twklausanne | 60.8px | 300 | 1.10 | -1.824px |
| Section Heading | Twklausanne | 56px | 300 | 1.10 | -1.68px |
| Heading MD | Twklausanne | 32px | 300 | 1.10 | -0.96px |
| Heading SM | Twklausanne | 24px | 300 | 1.10 | -0.72px |
| Body LG | Twklausanne | 18px | 300 | 1.40 | 0 |
| Body MD | Twklausanne | 16px | 300 | 1.60 | 0 |
| Body Aeonik | Aeonik | 16px | 400 | 1.50 | 0 |
| Nav Link | Aeonik | 14px | 400 | 1.00 | 0 |
| Button MD | Aeonik | 14px | 400 | 1.00 | 0 |

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

| Level | Treatment | Use |
|---|---|---|
| Flat Dark | "#030710" canvas, no shadow | Hero, capability ladder, CTA module, footer |
| Card on Dark | "#0d1322" surface with "#161f34" hairline | Agent-console mockups, dashboard screenshots inside capability cards |
| Light Interlude | "#e5f4ff" full-bleed band | Open-source frameworks rail |
| Card on Light | "#ffffff" surface with "#e5f4ff" hairline | Framework tiles inside the interlude band |

## Shapes

### Radius Scale

| Token | Value | Role |
|---|---:|---|
| `none` | "0px" | Full-bleed bands, hero, CTA module, footer |
| `hairline` | "1.25px" | Particle-tree illustration stroke detail |
| `sm` | "6px" | Buttons, inputs, nav pills, agent-console chips |
| `lg` | "16px" | Cards, framework tiles, dashboard mockup frames |
| `xxl` | "80px" | Hero illustration container (single occurrence) |

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.