Liveblocks — design system & UI screens

Dev Tools · 2 screens · 14 sections · liveblocks.io

Near-black dev-tool landing where the signature element is a hero product mockup framed in a noisy magenta-pink "tie-dye" glow, surrounded by hand-drawn marker annotations (Multiplayer undo/redo, AI toolbar, Anchored comments) pointing at a live collaborative document UI with avatars, inline comments and an AI Copilot popover. Centered white sans headline ("Realtime infrastructure for multiplayer apps and agents") sits above twin solid/outline CTAs, and the page proceeds through alternating left-text feature blocks paired with dark realistic product cards (Inbox like Linear, AI copilots like Notion, Co-editing like Google Docs), icon feature grids, a syntax-highlighted useThreads code showcase, and a testimonial-plus-trust block. The whole page is monochrome black/grey with magenta as the sole brand accent.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/liveblocks.

Decoded design system

Liveblocks's decoded design system: background #000000, text #EBF6FF, accent #0090FF, link #0090FF, primary #EBF6FF; type scale h1 64px / h2 52px / body 16px; 4px spacing base; 6px base radius. The single interactive/action color is #FFFFFF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#000000`
surface	`#0E0E0F`
border	`#232426`
text	`#EBF6FF`
text_muted	`#91989E`
primary	`#EBF6FF`
accent	`#0090FF`
link	`#0090FF`
secondary	`#34A7FF`
button_bg	`#FFFFFF`
button_text	`#000000`

Using these colors

Action color #FFFFFF — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #0090FF — one role, not several (the action color).
accent #0090FF — accent for emphasis — keep it rare on the page.
primary #EBF6FF — ≈ the text color — a foreground/text color, not an action color (action = #FFFFFF).
secondary #34A7FF — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Suisse Intl
Body: Suisse Intl
Mono: JetBrains Mono
h1: 64px
h2: 52px
body: 16px

Spacing

base unit: 4px
scale: 2px, 4px, 5px, 6px, 8px, 9px, 12px, 14px, 16px, 20px

Radii

base: 6px
button: 8px

Motion

Micro-interactions run at 100ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 100ms · 150ms · 300ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · cubic-bezier(0, 0, 0.2, 1)
animated properties: opacity, none, color, box-shadow

Native design tokens

Token	Value
`--lb-marketing-color-green-alpha-400`	`#51ecc51c`
`--lb-marketing-color-yellow-400`	`#efd26c`
`--lb-marketing-color-comments-500`	`#ec9e51`
`--color-marketing-surface-product-notifications`	`#6cefc3`
`--lb-color-text-code`	`#edecee`
`--lb-marketing-color-multiplayer-alpha-300`	`#5160ec1c`
`--lb-marketing-color-ai-copilots-alpha-200`	`#ec518414`
`--lb-color-text-code-value`	`#ffc266`
`--lb-marketing-color-yellow-alpha-500`	`#ecca5126`
`--color-marketing-surface-product-multiplayer`	`#6c79ef`

…and 110 more measured on the page.

Button states (measured)

primary hover: background #B7B4B4

Layout (measured)

container max-width: 768px
nav: 80px fixed
common grid: 12 columns

Motion choreography (measured)

Load order: div.-ml-1.5 → img.pointer-events-none → img.size-full×3 → div.absolute×2 → div.z-20×2 → span.transition×2

Scroll reveal: 2 elements rest at opacity 0, animate in over 0.15s cubic-bezier(0, 0, 0.2, 1).

Stagger: span ×4 — 100ms apart.

Responsive (measured)

breakpoints: 640px · 768px · 1024px · 1280px · 1536px
mobile (390px): hero 36px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →