CURATED · OPEN · FREE

Liveblocks

Realtime infrastructure for multiplayer apps and agents.

devtoolscollab

↓ Download design system (12 MB)Open in OpenDesign

Visit: https://liveblocks.io

📦 Browse pack contents →

Identity DNA

RealtimeInfrastructureCollaborationMultiplayerDeveloper

Vercel for realtime collaboration features

Color

#FFFFFFInk

#918D8DInk soft

#000000BG

#111111BG soft

#171616BG quiet

#A3A3A3Muted

rgba(255,255,255,0.1)Line

High-contrast monochromatic dark mode with extreme restraint.

Typography

humanist-sans · monospace

display68px · 500
h152px · 500
body16px · 400
small14px · 400

Headlines use a geometric/humanist sans with tight tracking and high weight. · Body text maintains a relaxed 1.5 line-height for readability. · Monospace is strictly used for code blocks and technical labels.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px grid with generous padding for breathing room.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(255,255,255,0.1)

0 0 0 1px rgba(255,255,255,0.1) · 0 2.767px 2.214px 0px rgba(0,0,0,0.05) · 0 100px 80px 0px rgba(0,0,0,0.17)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered column layout with max-width container and full-width background sections.

Motion & Interaction

100msmicro

150mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth opacity and color transitions on interactive elements. · Subtle transform and scale effects on hover.

Subtle color or background shifts with 0.1s to 0.3s duration. · Immediate response with minimal visual feedback.

Components

button Pill-shaped or rounded-rectangular buttons with high contrast (white on black or black on white).
card Dark cards with subtle 1px borders and no background color differentiation.
chip Small rounded labels with subtle background or border treatments.
input Dark background with 1px border and rounded corners.
hero Massive centered typography with a large product screenshot and dual CTAs.

Voice & Don'ts

Tone Technical, direct, and authoritative.
Headlines Bold, concise, and value-oriented.
CTAs Action-oriented and clear, often emphasizing 'Free' or 'Start'.

Don't use colorful gradients for primary backgrounds — screenshot shows solid black and dark grays.
Don't use serif fonts for headlines — screenshot shows a clean, geometric humanist sans-serif.
Don't use soft, rounded pastel colors — screenshot shows a high-contrast monochrome palette.
Don't clutter the UI with unnecessary borders or shadows — screenshot shows extremely minimal surface treatments.
Don't use justified text alignment — screenshot shows centered and left-aligned layouts.
Don't use playful or overly decorative icons — screenshot shows simple, line-based iconography.
Avoid: Avoid overly casual or slang-heavy language.
Avoid: Avoid long, winding sentences in UI copy.
Avoid: Avoid decorative elements that distract from the technical value.

Inside the pack — real screenshots

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Liveblocks is a developer-focused SaaS providing realtime infrastructure. The design is characterized by a stark, high-contrast dark mode using a pure black (#000000) background and white (#FFFFFF) or light gray (#918D8D) text. Typography is a clean humanist-sans (Suisse Int'l) with tight tracking on large headlines and a secondary monospace font. Key constraints: never use serif fonts, avoid colorful or gradient backgrounds in favor of monochrome surfaces, and maintain extreme restraint in layout with generous spacing and minimal borders. Do not use decorative elements that compromise the professional, technical tone.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko