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

# Liveblocks · Design System

> Quiet monochrome, vivid collaboration

**Theme:** dark · **Industry:** devtools · **Source:** https://liveblocks.io/ · **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._

Liveblocks uses a near-black canvas, restrained typography, and fine hairline borders to frame its realtime collaboration platform. Product examples, code previews, customer proof, and generous section spacing make the page feel technical without becoming visually dense.

## North star

Keep the page quiet and black-led, letting white actions and real product interfaces provide the contrast and proof.

## Overview

The page is built around an almost uninterrupted black canvas, with white type and restrained gray copy doing most of the visual work. White primary buttons stand out as the clearest calls to action; borders are subtle and cards largely remain dark, so content feels integrated rather than boxed in. The Suisse sans-serif family gives headings and body text a clean, contemporary voice, with medium-weight, tightly tracked display headlines and lighter supporting copy. JetBrains Mono is reserved for code-like content. A centered hero gives way to customer logos, a product-example strip, feature sections, a developer demo, trust proof, and a closing CTA. Broad vertical gaps keep this long page calm. Bright interface screenshots and small collaboration badges introduce color, but remain contained within product visuals rather than redefining the brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Dominant page canvas and the black text color on white primary buttons. |
| Muted Ash | `#918d8d` | `--color-muted-ash` | neutral | Secondary navigation, footer links, and subdued supporting text. |
| Signal White | `#ffffff` | `--color-signal-white` | brand | Headings, primary body text, logos, and primary CTA surfaces. |
| Hairline Charcoal | `#292929` | `--color-hairline-charcoal` | neutral | Fine borders and subtle outlines around dark controls and cards. |
| Panel Black | `#161616` | `--color-panel-black` | surface | Occasional inset section and card surface against the black canvas. |
| Cursor Sand | `#dfd28a` | `--color-cursor-sand` | accent | Small collaborator badge accent inside product-interface illustrations. |
| Cursor Blue | `#86a9da` | `--color-cursor-blue` | accent | Small collaborator badge accent inside product-interface illustrations. |
| Smoky Gray | `#635f5f` | `--color-smoky-gray` | neutral | Low-emphasis text and headings; not a prominent page-wide color. |
| Near Black | `#010101` | `--color-near-black` | surface | Subtle dark gradient and section-edge variation around black. |
| Gradient Graphite | `#2e2e2e` | `--color-gradient-graphite` | surface | Faint gradient transition in dark section treatments. |
| Soft Silver | `#b7b4b4` | `--color-soft-silver` | neutral | Occasional secondary text against the black canvas. |
| Cloud Gray | `#ebecf0` | `--color-cloud-gray` | surface | Light product-card or badge surface within embedded interface examples. |
| Blue Charcoal | `#21222b` | `--color-blue-charcoal` | surface | Dark card surface inside interface mockups and product visuals. |
| Interface Gray | `#e5e5e5` | `--color-interface-gray` | surface | Light neutral surface appearing within product-card imagery. |
| Pale Interface | `#f3f3f3` | `--color-pale-interface` | surface | Light surface detail inside embedded product-interface examples. |
| Warm Interface | `#f6ece2` | `--color-warm-interface` | surface | Warm-tinted interface surface contained within product mockups. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#ffffff` (Signal White) · `--color-surface-2` → `#ebecf0` (Cloud Gray) · `--color-surface-3` → `#161616` (Panel Black) · `--color-surface-4` → `#21222b` (Blue Charcoal) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#918d8d` (Muted Ash) · `--color-text-subtle` → `#000000` (Canvas Black) · `--color-border` → `#292929` (Hairline Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#ebecf0` | 1.18:1 | fail |
| `#ffffff` | `#161616` | 18.1:1 | AAA |
| `#918d8d` | `#000000` | 6.4:1 | AA |
| `#918d8d` | `#ffffff` | 3.28:1 | AA-large |
| `#918d8d` | `#ebecf0` | 2.78:1 | fail |
| `#918d8d` | `#161616` | 5.51:1 | AA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ebecf0` | 17.79:1 | AAA |
| `#000000` | `#161616` | 1.16:1 | fail |

### Gradients

- `radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 100%)`
- `radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 100%)`
- `radial-gradient(50% 50%, lab(0 0 0) 90%, oklch(0.07 0 0) 95%, oklch(0.2 0 0) 97%, oklch(0.3 0 0) 100%)`
- `linear-gradient(45deg, rgba(0, 0, 0, 0) 25%, rgba(255, 255, 255, 0.075) 50%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| suisse | `--font-body` | webfont | 400, 500 | Headings, body copy, navigation, buttons, and captions | Inter |
| JetBrains Mono | `--font-mono` | webfont | 400 | Code and developer-example content | Roboto Mono |

- **suisse:** Use regular and medium weights; display headings are compact and slightly negatively tracked, with natural sentence case.
- **JetBrains Mono:** Regular monospace for code-like details; keep it functional and visually secondary to Suisse.

### Type scale — Perfect Fourth (ratio ≈ 1.303, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1.1 | -0.02em | — | suisse | Large centered hero headline and high-impact campaign statements. |
| h1 | 52px | 500 | 1.1 | -0.02em | — | suisse | Primary page headline and prominent section introductions. |
| h2 | 48px | 500 | 1.05 | 0 | — | suisse | Major feature-section headings. |
| h3 | 32px | 500 | 1.2 | -0.01em | — | suisse | Subsection headings and prominent feature labels. |
| h4 | 24px | 400 | 1.38 | 0 | — | suisse | Smaller feature titles and card headings. |
| body | 16px | 400 | 1.38 | 0.004em | — | suisse | Explanatory paragraphs and feature descriptions. |
| caption | 14px | 400 | 1 | 0 | — | suisse | Small labels, helper copy, and understated metadata. |
| button | 14px | 500 | 1.43 | 0 | — | suisse | Primary and secondary CTA labels. |
| nav | 14px | 400 | 1 | 0 | — | suisse | Header navigation links. |
| code | 14px | 400 | 1.43 | 0 | — | JetBrains Mono | Code snippets and developer-demo content. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 12, 14, 16, 28, 40 px.
- Section rhythm 196px · element gap 8px · card padding 28px · max content width 791px.

The page uses a centered, relatively narrow content measure, with full-width black section bands and product media that can extend wider than the text. Sections align mostly to a consistent left edge for feature storytelling; the hero and closing CTA are centered. Two-column feature layouts and compact grids alternate with product demonstrations. Vertical spacing is generous and creates a deliberate, spacious rhythm across the long page, while borders divide dense card content without adding heavy containers.

## Shape & elevation

- Radius: button `6px` · card `8px` · media `50%` · badge `8px` · nav `4px` · link `6px` · xs `4px` · sm `6px` · md `8px` · pill `9999px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(39, 38, 38) 0px 0px 0px 1px`
- Shadow `hairline-2` (link, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-3` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(39, 38, 38) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset` (section): `rgba(255, 255, 255, 0.6) 0px 0px 86.4px 0px inset`
- Motion: standard transition `0.3s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The interface favors flat layers over cast shadows. Thin charcoal hairlines define card boundaries and separate grid cells against black; dark panels use restrained contrast. Small inset or radial gradient treatments add depth to selected media and CTA areas, while buttons rely on a solid white fill rather than prominent shadow.

## Imagery

Product interfaces are the main visual evidence: bright collaboration tools, message panes, code previews, and customer-story panels appear within dark frames. The hero uses a blurred, low-contrast product scene that fades into the black canvas. Logo marks and small cursor or collaborator badges add detail. Keep imagery crisp enough to read as software, but avoid letting colorful mockups overwhelm the monochrome page.

## Components

### Header navigation

A compact horizontal row on black, with white brand and primary links, muted secondary links, and a white rounded Get started action.

### Primary CTA

White button with black Suisse text, moderate corner rounding, and horizontal padding; repeat it in the hero and closing CTA.

### Customer logo cloud

A low-key customer proof band with subdued brand marks arranged in two rows against the black canvas.

### Feature card grid

Dark or transparent cells with fine #292929 hairlines, white titles, and muted descriptions; keep the grid visually light.

### Product example strip

A horizontal collection of interface previews, some light and some dark, with their color contained within each mockup.

### Developer demo

A large dark framed collaboration preview paired with a monospace code area and small colored participant badges.

### Trust testimonial panel

Customer quote and proof details arranged in a dark card, divided into compact feature cells with understated borders.

### Measured component styles

- **Primary button** (“Get started for free”): background #ffffff · text #000000 · radius 8px · padding 0px 16px · 500 16px suisse
- **Secondary button** (“Previous”): background #292929 · text #ffffff · radius 4px · padding 0px · 500 12px suisse
- **Link** (“Sync The sync engine for the agentic web”): transparent background · text #ffffff · radius 6px · padding 14px 0px · 400 16px suisse · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“Persistent shared data Data is stored an”): transparent background · text #ffffff · radius 0px · padding 28px · 400 16px suisse · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“AI”): background #eaeaea · text #000000 · radius 6px · padding 4px 10px · 500 14px suisse
- **Navigation item** (“Sync”): transparent background · text #918d8d · radius 4px · padding 8px · 400 14px suisse

## Do

- Use #000000 as the dominant canvas.
- Reserve white surfaces for the clearest primary actions.
- Keep supporting copy gray and visibly subordinate.
- Use thin #292929 hairlines instead of heavy card borders.
- Let product interfaces supply contained color and detail.
- Preserve broad vertical pauses between major sections.

## Don't

- Do not introduce a bright page-wide accent palette.
- Do not place every content block in a raised card.
- Do not use heavy shadows to create depth.
- Do not let product screenshots overpower the black canvas.
- Do not replace the concise sans-serif hierarchy with decorative type.
- Do not compress the long-page section rhythm.

## Agent prompt

Build a new page in the Liveblocks visual style. Use Canvas Black (#000000) across the main canvas, white (#ffffff) for primary text and CTA surfaces, Muted Ash (#918d8d) for secondary copy, and Hairline Charcoal (#292929) for delicate dividers. Set headings and interface copy in Suisse or a close sans-serif such as Inter; reserve JetBrains Mono for code. Keep the main text measure narrow and centered where appropriate, then alternate left-aligned feature storytelling, compact grids, and framed product demonstrations. Use generous vertical gaps. Product screenshots may contain brighter interface colors, but keep them inside their frames. Favor flat dark surfaces, thin borders, and subtle gradients over pronounced shadows. Make the primary action immediately legible without adding decorative noise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy over a full-bleed, dark product scene. | Announcement link, Primary CTA, Secondary action | Black canvas, Blurred interface media, White CTA |
| 2 | logo-cloud | Centered introduction with customer logos arranged in two rows. | Customer proof, Meet our customers link | Muted logo marks, Black band, Compact rows |
| 3 | other | Single centered statement with generous black space around it. | Value proposition | Centered heading, White and gray text |
| 4 | gallery | Wide horizontal strip of multiple interface previews. | Browse product use cases | Mixed light and dark mockups, Horizontal cards |
| 5 | feature-grid | Left-aligned section introduction followed by a two-column feature grid. | Feature discovery, Capability scanning | Dark grid cells, Fine dividers, Small line icons |
| 6 | feature-grid | Introductory copy above a wider feature panel and supporting grid cells. | Feature discovery, Capability grouping | Dark framed panel, Product interface imagery, Fine hairlines |
| 7 | product-showcase | Section copy and actions above a large two-part product demo. | Read the docs, Browse examples | Code pane, Live collaboration view, Participant badges |
| 8 | testimonials | Section introduction above a wide testimonial card with proof grids. | Customer quote, Previous and next controls, Trust proof | Dark testimonial panel, Feature grid, Uptime metric |
| 9 | footer | Centered closing CTA above a dense, multi-column footer. | Get started CTA, Contact sales link, Footer navigation | Soft radial glow, White CTA button, Muted link columns |

## Source CSS custom properties (selected)

```css
--lb-accent: #4af;
--lb-background: #222;
--lb-foreground: #fff;
--lb-accent-contrast: 16%;
--lb-foreground-contrast: 10%;
--lb-inset-shadow: inset 0 0 0 1px #ffffff0f;
--lb-highlight-shadow: inset 0 0 0 1px #ffffff1f;
--lb-elevation-shadow: 0 0 0 1px #0000000a, 0 2px 6px #00000014, 0 8px 26px #0000001f;
--lb-elevation-shadow-moderate: 0 0 0 1px #0000000a, 0 2px 6px #0000000d, 0 8px 26px #0000000f;
--lb-tooltip-shadow: 0 2px 4px #00000014, 0 4px 12px #0000001f;
--spacing-inner-gutter: calc(.25rem * 7);
--spacing-outer-gutter: calc(.25rem * 10);
--lb-color-text-code: #edecee;
--lb-color-text-code-comment: #edecee66;
--lb-color-text-code-variable: #8099ff;
--lb-color-text-code-value: #ffc266;
--lb-color-text-code-punctuation: #bf7af0;
--lb-color-text-code-tag: #9f8dfc;
--lb-color-text-code-class: #00c1d6;
--lb-color-text-code-constant: #f76e99;
--lb-color-text-code-string: #70e1c8;
--lb-color-background-scroll-thumb: #ffffff1a;
--lb-color-background-scroll-thumb-bolder: #fff3;
--marketing-spacing-2xl: calc(.25rem * 70);
--marketing-spacing-xl: calc(.25rem * 49);
--marketing-spacing-lg: calc(.25rem * 32);
--marketing-spacing-md: calc(.25rem * 24);
--marketing-spacing-sm: calc(.25rem * 16);
--marketing-spacing-xs: calc(.25rem * 12);
--marketing-spacing-2xs: calc(.25rem * 8);
--lb-marketing-color-surface-200: #000;
--lb-marketing-color-surface-300: #000;
--lb-marketing-color-surface-400: #080707;
--lb-marketing-color-surface-500: #100f0f;
--lb-marketing-color-neutral-100: #272626;
--lb-marketing-color-neutral-200: #635f5f;
--lb-marketing-color-neutral-300: #918d8d;
--lb-marketing-color-neutral-400: #b7b4b4;
--lb-marketing-color-neutral-500: #fff;
--lb-marketing-color-neutral-alpha-100: #fdfcfc17;
```

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