the lab family

Lab

The interface is the instrument — one face, zinc canvas.

Lab is the family for developer-facing surfaces where the interface is the instrument. It has no warmth, no editorial voice, and no storytelling ambition. JetBrains Mono carries every typographic role — display, body, meta — and the whole canvas reads from the zinc scale. Stone is warm, slate is blue; neither is Lab. Elevation is never spatial: a hairline border, a tonal step, and negative space do all the work.

The references are Cursor, Warp, Linear's chrome, Raycast, the Vercel CLI and Fly.io docs, Claude Code and Anthropic API docs, GitHub CLI, and the developer surfaces of Stripe. Single-face discipline is part of the look — adding a humanist sans or a serif breaks the family. Density is preset to compact, motion is short and functional, and the canonical theme is dark.

Use Lab when the deliverable is a tool: a CLI, a debugger, an API reference, an observability dashboard, a release-notes page. The voice is precise, legible, measurable, and instrument-of-record.

Default palette · Green · 1 recommended palettes below

Best for
  • Developer CLIs and consoles
  • API documentation and SDK reference
  • Observability and log explorers
  • Internal admin dashboards
  • Release and changelog pages
Character
  • experimental
  • monospaced
  • precise
  • instrumental
  • flat
TypeJetBrains Mono · JetBrains Mono · JetBrains Mono
How it differs

Trade shares Lab's utilitarian voice but uses system sans for density-first dashboards. Lab is mono-only and instrument-credible; Trade is sans-only and data-first.

Try a paletteLight mode →
Green

01 - Typography

The voice of lab.

Hero title - JetBrains Mono

Made with intention.

Hero subtitle - JetBrains Mono

A supporting lead carries the second voice without competing.

Section title - JetBrains Mono

Section heading at the second tier

Section subtitle - JetBrains Mono

Supporting copy holds context next to the title without competing for attention.

Card title - JetBrains Mono

Card title at the third tier

Body - JetBrains Mono

The body face carries paragraphs, captions, and inline labels - anywhere prose reads at length. It is tuned for legibility at small sizes and reads naturally next to the display face above.

Caption

Smaller supporting copy, used for metadata and inline notes.

Meta - JetBrains Mono

01 - 02 - 03 - v1.0 - 99.9% - $29 - 240ms

02 - Palette

Resolved palette.

The same family-aware mapping the product runtime applies. Each token has been resolved against the active palette and theme.

Backgroundcolor-mix(in srgb, rgb(74 222 128) 16%, #020617)
Surfacecolor-mix(in srgb, rgb(74 222 128) 8%, rgb(18 13 28))
Bordercolor-mix(in srgb, rgb(52 211 153) 18%, #0f172a)
Ink#fafafa
Brandrgb(34 197 94)
Brand · strongrgb(74 222 128)
Accentrgb(16 185 129)
On brandrgb(17 24 39)

03 · Primitives

The building blocks.

Each control below is the real component the runtime renders. The same buttons, badges, inputs, and chips appear in every generated site that picks this family.

Buttons

Badges

DefaultAccentOutlineInk

Tags

DefaultAccentOutlineInk

Status

NeutralSuccessWarningDangerInfo

Filter controls

Icon containers

Small
Medium
Large

Fields

04 - Card archetypes

How content sits.

Five archetypes - feature, pricing, profile, stat, and testimonial. They use server-rendered family type and palette tokens so this section keeps first-paint SSR parity.

Feature

Generated families, real engineering

Every family ships as manifest data. The server render resolves the same typography, composition, and palette tokens the product uses.

ManifestTokens

Pricing

Recommended

Studio

$29/ month

  • Unlimited generations
  • Custom domains
  • Priority models

Profile

Mara ChenProduct design lead

Twelve years leading design at high-growth SaaS. Available for fractional engagements this quarter.

AvailableFractional

Stat

99.9%

Uptime across all rendered sites this quarterLast 90 days

Testimonial

"The shared semantic tokens made the new family feel consistent from the first pass."
Jules ParkStaff designer, Patagonia Digital

05 - Motion

How it moves.

Hover or focus either surface. The transition uses CSS variables and respects reduced motion without requiring a hydrated showcase.

Card - hover

Lift on hover, hairline tightens

Move your pointer over this card. The surface rises a few pixels and the border tightens to the brand color.

Button - focus

Tab into the button below. The focus ring uses the family's brand color and transitions at this family's curve.

06 · Recommended palettes

Try a different chord.

Each palette below pairs with this family. The cards link straight to a fresh render of this page in that palette — share the URL, it's crawlable.

GreenTry →

06 · Compositions

A few of the section topologies.

Compositions are family-agnostic — every family can render every topology. Combined with card layouts and collection layouts, the engine produces dozens of section presentations per section type. Diagrams show the shape; the family supplies the skin.

banner

Banner

Content stacks above a wide image rail.

grid

Grid

Uniform card grid for collections.

bands

Bands

Alternating horizontal bands of copy and media.

sidebar

Sidebar

Text column paired with a media column.

See all compositions →

07 · See it live

See a full page.

A complete site rendered in Lab. Open the example to walk through every section in the family's voice.

Open example →Open demo