---
title: "Langbase design system"
variant: extended
source: https://langbase.com/
captured_at: 2026-10-12
theme: dark
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/langbase-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Langbase · Design System

> A dark, precise canvas for building AI in public.

**Theme:** dark · **Industry:** ai · **Source:** https://langbase.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Langbase pairs a near-black canvas and fine technical grids with restrained white typography and vivid gradient media. The long homepage moves from a concise platform pitch through product demonstrations, code examples, and customer proof.

## North star

Keep the page nearly black and structurally precise; reserve bright color for product media and crisp calls to action.

## Overview

The visual system is built on a near-black canvas, with charcoal panels and thin, low-contrast borders defining a precise technical grid. White headings and controls establish hierarchy, while muted gray copy keeps dense explanations legible without competing with the product. Geist Sans gives navigation and editorial content a clean, contemporary voice; Geist Mono signals code, compact labels, and oversized slash-prefixed product names. The first screen balances a left-aligned text-and-action block against abstract gradient bars on the right. Farther down, the same grid organizes product walkthroughs, code panes, feature cards, and customer testimonials into clear bands. Colorful media is concentrated in product illustrations rather than used as broad page backgrounds, so the purple accent remains selective. Spacious section breaks offset the otherwise information-rich layout, and pill-shaped controls provide the main soft contrast to square-edged, border-led panels.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pitch Black | `#000000` | `--color-pitch-black` | brand | Dominant page canvas, hero background, and the dark ground behind the product grid. |
| Graphite Panel | `#161618` | `--color-graphite-panel` | surface | Subtle dark surface for code and product interface elements against the black canvas. |
| Soft Alloy | `#a1a1aa` | `--color-soft-alloy` | neutral | Primary muted copy for descriptions, supporting links, and secondary navigation. |
| Gridline Charcoal | `#232324` | `--color-gridline-charcoal` | semantic | Fine dividers and card or navigation outlines that structure the dark page. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Headings, prominent links, logos, and high-contrast text on black. |
| Signal Lavender | `#9887ff` | `--color-signal-lavender` | accent | Selective accent text; colorful product artwork supplies most of the page's vivid color. |
| Quiet Slate | `#616166` | `--color-quiet-slate` | neutral | Lowest-emphasis supporting text and subdued metadata on the dark canvas. |
| Muted Steel | `#74747a` | `--color-muted-steel` | neutral | Occasional secondary text; subordinate to white headings and brighter muted copy. |
| Cool Mist | `#ebeced` | `--color-cool-mist` | neutral | Light supporting text within selected text content, not a dominant surface color. |
| Smoked Graphite | `#3f3f3f` | `--color-smoked-graphite` | neutral | Low-emphasis text detail; avoid treating it as a major background or brand color. |

### Semantic aliases

`--color-canvas` → `#000000` (Pitch Black) · `--color-surface` → `#161618` (Graphite Panel) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#a1a1aa` (Soft Alloy) · `--color-text-subtle` → `#616166` (Quiet Slate) · `--color-border` → `#232324` (Gridline Charcoal) · `--color-accent` → `#9887ff` (Signal Lavender)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#161618` | 18.07:1 | AAA |
| `#a1a1aa` | `#000000` | 8.19:1 | AAA |
| `#a1a1aa` | `#161618` | 7.05:1 | AAA |
| `#616166` | `#000000` | 3.41:1 | AA-large |
| `#616166` | `#161618` | 2.93:1 | fail |
| `#9887ff` | `#000000` | 7.24:1 | AAA |
| `#9887ff` | `#161618` | 6.23:1 | AA |

### Gradients

- `repeating-linear-gradient(90deg, rgb(24, 24, 24) 0px, rgb(24, 24, 24) 5px, rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0) 7px)`
- `repeating-linear-gradient(rgb(24, 24, 24) 0px, rgb(24, 24, 24) 5px, rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0) 7px), repeating-linear-gradient(90deg, rgb(24, 24, 24) 0px, rgb(24, 24, 24) 5px, rgba(0, 0, 0, 0) 5px, rgba(0, 0,`
- `repeating-linear-gradient(90deg, rgb(24, 24, 24) 0px, rgb(24, 24, 24) 5px, rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0) 7px), repeating-linear-gradient(90deg, rgb(24, 24, 24) 0px, rgb(24, 24, 24) 5px, rgba(0, 0, 0, 0) 5px, rgb`
- `repeating-linear-gradient(rgb(24, 24, 24) 0px, rgb(24, 24, 24) 5px, rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0) 7px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GeistSans | `--font-display` | webfont | 400, 700, 500, 600 | Navigation, headings, body copy, links, and buttons. | Inter |
| GeistMono | `--font-mono` | webfont | 500, 400 | Code, compact labels, captions, and oversized product display names. | Space Mono |

- **GeistSans:** Clean sans-serif hierarchy; headings are regular weight, while navigation and controls use medium weight.
- **GeistMono:** Use for technical detail and slash-prefixed display labels; measured weights are regular and medium.

### Type scale — Perfect Fifth (ratio ≈ 1.534, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1 | 0 | — | GeistMono | Oversized slash-prefixed names for product areas such as command and memory. |
| h1 | 48px | 400 | 1.17 | -0.025em | — | GeistSans | Primary hero headline and other top-level page statements. |
| h2 | 20px | 400 | 1.4 | 0 | — | GeistSans | Section and product-feature headings. |
| h3 | 18px | 400 | 1.56 | 0 | — | GeistSans | Supporting feature titles and smaller content headings. |
| body | 13px | 500 | 1.52 | 0 | — | GeistMono | Compact technical descriptions and mono-styled explanatory copy. |
| caption | 12px | 400 | 1.33 | 0 | — | GeistMono | Small metadata, code annotations, and tertiary labels. |
| button | 12px | 500 | 1.33 | 0 | — | GeistSans | Compact text in pill-shaped actions. |
| nav | 14px | 500 | 1.43 | 0 | — | GeistSans | Top navigation items and navigation controls. |
| link | 14px | 400 | 1.43 | 0 | — | GeistSans | Inline links, customer-story references, and supporting actions. |
| code | 13px | 500 | 1.52 | 0 | — | GeistMono | Code samples and developer-oriented snippets. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 40, 160 px.
- Section rhythm 160px · element gap 8px · card padding — · max content width 1150px.

Use a centered, wide content frame with a measured maximum width of 1150px. Organize most content in a fine, dark grid with thin outlined cells and left-aligned copy. The hero pairs text and actions on the left with abstract product artwork on the right. Below it, alternate logo proof, testimonials, product walkthroughs, code examples, and feature-card rows. Keep section breaks spacious, but let product demonstrations carry denser content inside their grid panels.

## Shape & elevation

- Radius: button `9999px` · media `4px` · nav `9999px` · xs `4px` · sm `6px` · md `12px` · pill `9999px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Shadow `md` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat: fine charcoal borders, gridlines, and outlined panels establish structure rather than elevated cards. Keep the dark surfaces close to the canvas in tone, and avoid large drop shadows. Pill buttons provide the main rounded contrast; product panels remain square and precisely divided.

## Imagery

The hero and feature sections use abstract horizontal bars with colorful gradients as product-adjacent artwork, not photographic brand imagery. Product walkthroughs and code panes are framed as dark interface mockups within the grid. Customer proof includes small portrait images, while the logo cloud uses monochrome marks. Preserve the vivid media as localized accents against the black canvas.

## Components

### Top navigation

A compact horizontal header with white brand mark, restrained links, and a bright pill-shaped sign-up action.

### Announcement strip

A narrow, centered product announcement below navigation, with a small icon and an underlined supporting link.

### Hero

Left-aligned headline, muted supporting text, and contrasting pill actions beside right-aligned gradient-bar artwork.

### Logo cloud

Monochrome customer marks arranged in cells, preceded by a brief trust statement.

### Product walkthrough

Bordered grid panels combine a step-by-step prompt flow, large mono product label, short description, and CTA.

### Feature cards

Three-column bordered cells pair concise feature copy with colorful horizontal product illustrations.

### Testimonials

Dark, grid-aligned customer quotes with small portraits, names, roles, and subdued supporting text.

### Measured component styles

- **Primary button** (“Get started with Command Code”): background #fafafa · text #000000 · radius 100px · padding 10px 20px · 500 16px GeistSans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Docs”): transparent background · text #ffffff · border 1px solid #27272a · radius 100px · padding 10px 20px · 500 16px GeistSans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Try the first coding agent with taste.”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px GeistSans
- **Card** (“Command Code is live now. Try the first ”): transparent background · text #fafafa · border 1px solid #232324 · radius 0px · padding 0px · 400 16px GeistSans
- **Navigation item** (“Products Docs Solutions Customers Pricin”): transparent background · text #fafafa · radius 0px · padding 0px · 400 16px GeistSans

## Do

- Build the page on a near-black canvas.
- Use fine charcoal gridlines to define content regions.
- Keep primary headings white and supporting copy muted.
- Use Geist Mono for code and technical display labels.
- Reserve gradients for localized product artwork.
- Use white-filled pill buttons for primary actions.

## Don't

- Do not introduce bright full-width color bands.
- Do not use heavy shadows to separate panels.
- Do not round every card or grid cell.
- Do not make supporting copy compete with headlines.
- Do not replace product artwork with generic stock photography.
- Do not scatter accent colors across ordinary text.

## Agent prompt

Build a new Langbase-style AI developer page on a Pitch Black (#000000) canvas. Structure the content with thin Gridline Charcoal (#232324) borders and subtle Graphite Panel (#161618) surfaces, keeping the grid precise and largely flat. Use Clean White (#ffffff) for headings and key actions, Soft Alloy (#a1a1aa) for supporting copy, and Signal Lavender (#9887ff) sparingly. Set editorial content in Geist Sans or a close substitute; use Geist Mono for code, compact labels, and slash-prefixed product names. Make the hero left-aligned with concise copy and pill actions, balancing it with localized abstract gradient product artwork. Continue with product demonstrations, code panes, feature cards, and customer proof, separated by generous section breaks. Favor borders over shadows and preserve strong contrast.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long, centered page on a black grid; hero and logo proof lead into product walkthroughs, code, features, and testimonials. | Product-focused hero actions, Customer credibility, Feature discovery, Developer examples | Dark technical grid, Gradient product artwork, Monochrome logo cloud, Bordered feature panels, Customer quote cards |

## Source CSS custom properties (selected)

```css
--tremor-brand-faint: #eff6ff;
--tremor-brand-muted: #bfdbfe;
--tremor-brand-subtle: #60a5fa;
--tremor-brand: #3b82f6;
--tremor-brand-emphasis: #1d4ed8;
--tremor-brand-inverted: #ffffff;
--tremor-background-muted: #f9fafb;
--tremor-background-subtle: #f3f4f6;
--tremor-background: #ffffff;
--tremor-background-emphasis: #374151;
--tremor-border: #e5e7eb;
--dark-tremor-brand-faint: hsl(240,3%,9%);
--dark-tremor-brand-muted: hsl(240 3.45% 11.37%);
--dark-tremor-brand-subtle: #1e40af;
--dark-tremor-brand: #3b82f6;
--dark-tremor-brand-emphasis: #60a5fa;
--dark-tremor-brand-inverted: hsl(240 3.45% 11.37%);
--dark-tremor-background-muted: hsl(240 3.45% 11.37%);
--dark-tremor-background-subtle: hsl(240 3.45% 11.37%);
--dark-tremor-background: hsl(240,3%,9%);
--dark-tremor-background-emphasis: #d1d5db;
--dark-tremor-border: hsl(240 2% 14%);
--background: 240,3%,9%;
--foreground: 0 0% 98%;
--card-foreground: 0 0% 98%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive-foreground: 0 0% 98%;
--warning-foreground: 120 12.5% 3.14%;
--border: 240 2% 14%;
--radius: 6px;
--border-muted: 240 2% 14%;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/langbase-com