Live Demo

Liveblocks

This design system captures Liveblocks' realtime collaboration product UI and its marketing and documentation surfaces. It keeps compact, host-integrated collaboration components distinct from the dark, expressive pages used to explain the platform.

Components: 80
Tokens: 378
Guidelines: 19
Full pages: 9

Foundations

The visual decisions and reusable values that shape every interface.

color

232 tokens

--lb-accent

#1177ff

--lb-accent-foreground

#ffffff

--lb-destructive

#ff4455

--lb-destructive-foreground

#ffffff

--lb-background

#ffffff

--lb-foreground

#111111

--lb-dynamic-background

var(--lb-background)

--lb-foreground-subtle

color-mix(in srgb,var(--lb-foreground),var(--lb-dynamic-background) calc(100% - var(--lb-foreground-contrast)))

--lb-foreground-moderate

color-mix(in srgb,var(--lb-foreground),var(--lb-dynamic-background) calc(100% - (var(--lb-foreground-contrast) + 3*((100% - var(--lb-foreground-contrast))/9))))

--lb-foreground-tertiary

color-mix(in srgb,var(--lb-foreground),var(--lb-dynamic-background) calc(100% - (var(--lb-foreground-contrast) + 5*((100% - var(--lb-foreground-contrast))/9))))

--lb-foreground-secondary

color-mix(in srgb,var(--lb-foreground),var(--lb-dynamic-background) calc(100% - (var(--lb-foreground-contrast) + 7*((100% - var(--lb-foreground-contrast))/9))))

--lb-accent-subtle

color-mix(in srgb,var(--lb-accent),var(--lb-dynamic-background) calc(100% - var(--lb-accent-contrast)))

--lb-accent-moderate

color-mix(in srgb,var(--lb-accent),var(--lb-dynamic-background) calc(100% - (var(--lb-accent-contrast) + 3*((100% - var(--lb-accent-contrast))/9))))

--lb-accent-tertiary

color-mix(in srgb,var(--lb-accent),var(--lb-dynamic-background) calc(100% - (var(--lb-accent-contrast) + 5*((100% - var(--lb-accent-contrast))/9))))

--lb-accent-secondary

color-mix(in srgb,var(--lb-accent),var(--lb-dynamic-background) calc(100% - (var(--lb-accent-contrast) + 7*((100% - var(--lb-accent-contrast))/9))))

--lb-destructive-subtle

color-mix(in srgb,var(--lb-destructive),var(--lb-dynamic-background) calc(100% - var(--lb-destructive-contrast)))

--lb-destructive-moderate

color-mix(in srgb,var(--lb-destructive),var(--lb-dynamic-background) calc(100% - (var(--lb-destructive-contrast) + 3*((100% - var(--lb-destructive-contrast))/9))))

--lb-destructive-tertiary

color-mix(in srgb,var(--lb-destructive),var(--lb-dynamic-background) calc(100% - (var(--lb-destructive-contrast) + 5*((100% - var(--lb-destructive-contrast))/9))))

--lb-destructive-secondary

color-mix(in srgb,var(--lb-destructive),var(--lb-dynamic-background) calc(100% - (var(--lb-destructive-contrast) + 7*((100% - var(--lb-destructive-contrast))/9))))

--lb-background-accent-subtle

color-mix(in srgb,var(--lb-accent),var(--lb-background) calc(100% - var(--lb-accent-contrast)))

--lb-background-destructive-subtle

color-mix(in srgb,var(--lb-destructive),var(--lb-background) calc(100% - var(--lb-destructive-contrast)))

--lb-selection

color-mix(in srgb,var(--lb-accent) 40%,transparent)

--accent

var(--lb-accent)

--accent-foreground

var(--lb-accent-foreground)

--destructive

var(--lb-destructive)

--destructive-foreground

var(--lb-destructive-foreground)

--background

var(--lb-background)

--foreground

var(--lb-foreground)

--dynamic-background

var(--lb-dynamic-background)

--foreground-contrast

var(--lb-foreground-contrast)

--accent-contrast

var(--lb-accent-contrast)

--destructive-contrast

var(--lb-destructive-contrast)

--foreground-subtle

var(--lb-foreground-subtle)

--foreground-moderate

var(--lb-foreground-moderate)

--foreground-tertiary

var(--lb-foreground-tertiary)

--foreground-secondary

var(--lb-foreground-secondary)

--accent-subtle

var(--lb-accent-subtle)

--accent-moderate

var(--lb-accent-moderate)

--accent-tertiary

var(--lb-accent-tertiary)

--accent-secondary

var(--lb-accent-secondary)

--destructive-subtle

var(--lb-destructive-subtle)

--destructive-moderate

var(--lb-destructive-moderate)

--destructive-tertiary

var(--lb-destructive-tertiary)

--destructive-secondary

var(--lb-destructive-secondary)

--background-accent-subtle

var(--lb-background-accent-subtle)

--background-destructive-subtle

var(--lb-background-destructive-subtle)

--selection

var(--lb-selection)

--success

#1f9c6e

--success-foreground

#ffffff

--warning

#b45309

--warning-foreground

#ffffff

--semantic-destructive

var(--destructive)

--semantic-destructive-foreground

var(--destructive-foreground)

--semantic-success

var(--success)

--semantic-success-foreground

var(--success-foreground)

--semantic-warning

var(--warning)

--semantic-warning-foreground

var(--warning-foreground)

--semantic-info

var(--lb-accent-text-safe)

--semantic-info-foreground

#ffffff

--surface-page

#ffffff

--surface-raised

#fafafa

--surface-sunken

#f4f4f5

--surface-card

#ffffff

--surface-overlay

#ffffff

--border-faint

rgb(0 0 0/6%)

--border-subtle

rgb(0 0 0/10%)

--border-strong

rgb(0 0 0/16%)

--cursor-color

var(--lb-accent)

--avatar-outline-color

var(--lb-accent)

--lb-hover-overlay

rgb(0 0 0/4%)

--lb-pressed-overlay

rgb(0 0 0/8%)

--hover-overlay

var(--lb-hover-overlay)

--pressed-overlay

var(--lb-pressed-overlay)

--lb-accent

#44aaff

--lb-destructive

#ff7777

--lb-background

#222222

--lb-foreground

#ffffff

--lb-accent-foreground

#ffffff

--lb-destructive-foreground

#ffffff

--success

#83eecd

--success-foreground

#111111

--warning

#f0b429

--warning-foreground

#111111

--surface-page

#000000

--surface-raised

#0a0a0a

--surface-sunken

#111111

--surface-card

#161616

--surface-overlay

#1c1c1c

--border-faint

rgb(255 255 255/6%)

--border-subtle

rgb(255 255 255/10%)

--border-strong

rgb(255 255 255/16%)

--lb-hover-overlay

rgb(255 255 255/6%)

--lb-pressed-overlay

rgb(255 255 255/12%)

--family-comments

#efad6c

--family-multiplayer

#6c79ef

--family-notifications

#6cefc3

--family-presence

#bde421

--family-ai-copilots

#f288ab

--uc-media-player

#f44e6b

--uc-media-player-light

color-mix(in srgb,#f44e6b,#fff 50%)

--uc-whiteboard

#0090ff

--uc-whiteboard-light

color-mix(in srgb,#0090ff,#fff 50%)

--uc-website

#30a46c

--uc-website-light

color-mix(in srgb,#30a46c,#fff 50%)

--uc-video-editor

#8f6cef

--uc-video-editor-light

color-mix(in srgb,#8f6cef,#fff 50%)

--syntax-background

#050505

--syntax-header

#111111

--syntax-border

rgb(255 255 255/11%)

--syntax-plain

#e4e4e7

--syntax-comment

#7c7c86

--syntax-meta

#8b8b93

--syntax-active

#f4f4f5

--syntax-punctuation

#a78bfa

--syntax-keyword

#a78bfa

--syntax-string

#5eead4

--syntax-function

#f472b6

--syntax-param

#c4b5fd

--marketing

#f7f7f8

--marketing-subtle

rgb(247 247 248/70%)

--marketing-subtler

rgb(247 247 248/48%)

--marketing-subtlest

rgb(247 247 248/28%)

--marketing-surface-base

#000000

--marketing-surface-faded-subtle

rgb(247 247 248/3%)

--marketing-surface-faded

rgb(247 247 248/6%)

--marketing-surface-faded-bold

rgb(247 247 248/10%)

--marketing-surface-faded-bolder

rgb(247 247 248/14%)

--marketing-surface-accent-green

#83eecd

--marketing-divider

rgb(247 247 248/8%)

--marketing-divider-bold

rgb(247 247 248/14%)

--marketing-divider-bold-opaque

#1c1c1d

--marketing-divider-bolder

rgb(247 247 248/22%)

--marketing-divider-boldest

rgb(247 247 248/40%)

--marketing-accent

#8f71f1

--marketing-accent-faint

#100d1b

--marketing-accent-subtle

#171227

--marketing-accent-moderate

#3f326a

--marketing-accent-tertiary

#5a4797

--marketing-accent-secondary

#745cc4

--docs-accent-sidebar

#887bd6

--docs-accent-fill

#241e3f

--resource-card-background

#171717

--resource-card-background-hover

#1c1c1c

--resource-card-foreground

#fafafa

--resource-card-muted

#a1a1a1

--resource-card-border

rgb(66 66 66/45%)

--resource-card-border-strong

#424242

--marketing-link

#d4d4d4

--marketing-link-hover

#fafafa

--marketing-link-underline

#595959

--marketing-link-nav

#a1a1a1

--marketing-link-focus-ring-color

#fafafa

--lb-link-focus-ring

0 0 0 2px var(--marketing-surface-base,#000),0 0 0 4px var(--marketing-link-focus-ring-color)

--sidebar-background

#0a0a0a

--sidebar-foreground

#fafafa

--sidebar-muted-foreground

#a1a1a1

--sidebar-accent-surface

#1d1d1d

--sidebar-accent-foreground

#fafafa

--sidebar-border

rgb(66 66 66/45%)

--sidebar-focus-ring

var(--lb-link-focus-ring)

--notification-background

var(--surface-card)

--notification-foreground

var(--foreground)

--notification-secondary-foreground

var(--text-secondary)

--notification-border

var(--border-subtle)

--notification-border-strong

var(--border-strong)

--notification-unread-indicator

var(--accent)

--notification-icon-background

var(--foreground-subtle)

--notification-icon-foreground

var(--foreground-tertiary)

--notification-background

#171717

--notification-foreground

#fafafa

--notification-secondary-foreground

#a1a1a1

--notification-border

rgb(66 66 66/45%)

--notification-border-strong

#424242

--notification-unread-indicator

#44aaff

--notification-icon-background

rgb(250 250 250/8%)

--notification-icon-foreground

#a1a1a1

--avatar-stack-overlap

calc(0.25 * var(--avatar-stack-size))

--modal-scrim-color

rgb(0 0 0/50%)

--lb-focus-ring-color

var(--lb-accent)

--lb-focus-ring

0 0 0 var(--lb-focus-ring-gap) var(--lb-dynamic-background,#fff),0 0 0 calc(var(--lb-focus-ring-gap) + var(--lb-focus-ring-width)) var(--lb-focus-ring-color)

--focus-ring

var(--lb-focus-ring)

--transition-duration

var(--lb-transition-duration)

--transition-easing

var(--lb-transition-easing)

--transition-duration-menu

var(--lb-transition-duration-menu)

--transition-duration-tabs

var(--lb-transition-duration-tabs)

--lb-link-focus-ring

var(--lb-focus-ring)

--button-default-background

var(--foreground)

--button-default-foreground

var(--background)

--button-default-border

var(--foreground)

--button-default-hover

color-mix(in srgb,var(--foreground),var(--background) 15%)

--button-default-pressed

color-mix(in srgb,var(--foreground),var(--background) 28%)

--button-secondary-background

var(--surface-sunken)

--button-secondary-foreground

var(--foreground)

--button-secondary-border

var(--border-subtle)

--button-secondary-border-hover

var(--border-strong)

--button-secondary-hover

var(--foreground-subtle)

--button-secondary-pressed

var(--foreground-moderate)

--button-outline-background

transparent

--button-outline-foreground

var(--foreground)

--button-outline-border

var(--border-strong)

--button-outline-hover

var(--foreground-subtle)

--button-outline-pressed

var(--foreground-moderate)

--button-ghost-foreground

var(--foreground)

--button-ghost-hover

var(--foreground-subtle)

--button-ghost-pressed

var(--foreground-moderate)

--button-destructive-background

var(--destructive)

--button-destructive-foreground

var(--destructive-foreground)

--button-destructive-border

var(--destructive)

--button-destructive-hover

var(--destructive-secondary)

--button-destructive-pressed

var(--destructive-tertiary)

--button-link-foreground

var(--foreground)

--button-focus-ring

var(--lb-focus-ring)

--button-default-background

#fafafa

--button-default-foreground

#171717

--button-default-border

rgb(255 255 255/10%)

--button-default-hover

#ededed

--button-default-pressed

#dadada

--button-secondary-background

#171717

--button-secondary-foreground

#fafafa

--button-secondary-border

rgb(66 66 66/45%)

--button-secondary-border-hover

#424242

--button-secondary-hover

#222222

--button-secondary-pressed

#292929

--button-outline-background

transparent

--button-outline-foreground

#fafafa

--button-outline-border

#424242

--button-outline-hover

rgb(255 255 255/8%)

--button-outline-pressed

rgb(255 255 255/14%)

--button-ghost-foreground

#fafafa

--button-ghost-hover

rgb(255 255 255/8%)

--button-ghost-pressed

rgb(255 255 255/14%)

--button-link-foreground

#fafafa

font

32 tokens

--lb-accent-text-safe

#006cfc

--accent-text-safe

var(--lb-accent-text-safe)

--text-primary

#111111

--text-secondary

rgb(17 17 17/72%)

--text-tertiary

rgb(17 17 17/52%)

--text-disabled

rgb(17 17 17/32%)

--text-primary

#ffffff

--text-secondary

rgb(255 255 255/70%)

--text-tertiary

rgb(255 255 255/48%)

--text-disabled

rgb(255 255 255/30%)

--uc-text-editor

#e89304

--uc-text-editor-light

color-mix(in srgb,#e89304,#fff 50%)

--docs-accent-text

#a090fd

--font-sans

"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif

--font-mono

"JetBrains Mono",ui-monospace,"SF Mono","Menlo","Consolas",monospace

--lb-line-height

1.5

--lb-line-height-crop

calc(1lh - 1em)/-2

--line-height

var(--lb-line-height)

--line-height-crop

var(--lb-line-height-crop)

--text-micro

0.625em

--text-timestamp

0.675em

--text-small

0.75em

--text-dense

0.8125em

--text-default

0.875em

--text-emphasized

0.9375em

--text-base

1em

--text-heading-sm

1.125em

--text-subheading

1.25em

--text-panel-title

1.5em

--text-heading-lg

1.75em

--lb-icon-weight

1.5px

--icon-weight

var(--lb-icon-weight)

other

19 tokens

--hero-wash

radial-gradient(120% 80% at 50% 0%,rgb(17 119 255/8%),transparent 70%)

--hero-wash

radial-gradient(120% 80% at 50% 0%,rgb(68 170 255/12%),transparent 70%)

--sidebar-transition

200ms

--toast-duration

5000ms

--lb-transition-duration

0.1s

--lb-transition-duration-menu

150ms

--lb-transition-duration-tabs

250ms

--lb-transition-easing

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

--ease-out-cubic

cubic-bezier(0.33,1,0.68,1)

--ease-out-bounce

cubic-bezier(0.34,1.56,0.64,1)

--z-focus

1

--z-overlay

1

--z-base

0

--z-sticky-nav

100

--z-dropdown

200

--z-tooltip

300

--z-modal-scrim

400

--z-modal

410

--z-toast

500

radius

11 tokens

--lb-radius

0.5em

--lb-button-radius

var(--lb-radius)

--lb-avatar-radius

50%

--lb-radius-panel

12px

--lb-radius-feature-tile

16px

--lb-radius-hero-media

20px

--lb-radius-code

10px

--radius

var(--lb-radius)

--button-radius

var(--lb-button-radius)

--avatar-radius

var(--lb-avatar-radius)

--radius-full

9999px

shadow

12 tokens

--elevation-padding

4px

--lb-highlight-shadow

inset 0 0 0 1px rgb(0 0 0/10%)

--lb-elevation-shadow

0 0 0 1px rgb(0 0 0/4%),0 2px 6px rgb(0 0 0/8%),0 8px 26px rgb(0 0 0/12%)

--lb-elevation-shadow-moderate

0 0 0 1px rgb(0 0 0/4%),0 2px 6px rgb(0 0 0/5%),0 8px 26px rgb(0 0 0/6%)

--lb-tooltip-shadow

0 2px 4px rgb(0 0 0/8%),0 4px 12px rgb(0 0 0/12%)

--highlight-shadow

var(--lb-highlight-shadow)

--elevation-shadow

var(--lb-elevation-shadow)

--elevation-shadow-moderate

var(--lb-elevation-shadow-moderate)

--tooltip-shadow

var(--lb-tooltip-shadow)

--inset-shadow

inset 0 0 0 1px rgb(0 0 0/10%)

--inset-shadow

inset 0 0 0 1px rgb(255 255 255/6%)

--lb-highlight-shadow

inset 0 0 0 1px rgb(255 255 255/12%)

spacing

72 tokens

--lb-foreground-contrast

8%

--lb-accent-contrast

8%

--lb-destructive-contrast

8%

--lb-foreground-contrast

10%

--lb-accent-contrast

16%

--lb-destructive-contrast

16%

--syntax-inset-highlight

inset 0 1px 0 rgb(255 255 255/6%)

--mkt-hero-h1

2.5rem

--mkt-section-h2

3rem

--mkt-lead

1.25rem

--mkt-card-title

1.0625rem

--mkt-caption

0.875rem

--lb-spacing

1em

--lb-icon-size

20px

--spacing

var(--lb-spacing)

--icon-size

var(--lb-icon-size)

--emoji-picker-padding

6px

--container-wide

1280px

--container

1152px

--container-narrow

896px

--container-prose

680px

--container-docs

1440px

--space-1

0.25rem

--space-2

0.5rem

--space-3

0.75rem

--space-4

1rem

--space-5

1.5rem

--space-6

2rem

--space-8

3rem

--space-10

4rem

--space-12

6rem

--space-16

8rem

--section-pad-desktop

6rem

--section-pad-tablet

4.5rem

--section-pad-mobile

3.5rem

--section-pad-desktop-lg

8rem

--mkt-nav-height

80px

--mkt-nav-scroll-trigger

8px

--mkt-mega-icon-size

36px

--mkt-logo-height

28px

--mkt-hero-media-max

640px

--mkt-testimonial-avatar

32px

--sidebar-width-expanded

256px

--sidebar-width-collapsed

56px

--avatar-stack-size

24px

--avatar-stack-gap

2px

--avatar-outline-width

2px

--avatar-outline-gap

2px

--floating-thread-size

350px

--floating-composer-size

350px

--anchored-threads-gap

1.25rem

--anchored-threads-active-offset

-0.75rem

--inbox-notification-aside-size

36px

--mention-suggestion-avatar-size

1.25rem

--lb-icon-button-size-dense

2em

--lb-icon-button-size-touch

2.75em

--input-padding-block

0.5em

--input-padding-inline

0.75em

--checkbox-radio-size

1em

--switch-track-width

1.75em

--switch-track-height

1em

--switch-thumb-size

0.75em

--switch-thumb-inset

0.125em

--modal-max-width

28em

--modal-max-width-large

40em

--modal-padding

1.5em

--toast-padding-block

0.75em

--toast-padding-inline

1em

--toast-max-width

24em

--toast-gap

0.5em

--lb-focus-ring-gap

2px

--lb-focus-ring-width

2px

Components

Manifest-driven component groups and their generated live previews.

ai

5 components

Liveblocks ai component preview

AgentActivityItem
AiChat
AiTool
ToolConfirmation
ToolInspector

avatar

2 components

Liveblocks avatar component preview

Avatar
AvatarStack

code

1 components

Liveblocks code component preview

CodeBlock

comments

12 components

Liveblocks comments component preview

Comment
CommentPin
Composer
FloatingComposer
FloatingThread
Thread
DEFAULT_EMOJIS
Attachments
EmojiPicker
Mention
Reactions
Timestamp

core

8 components

Liveblocks core component preview

Badge
Button
Card
Chip
IconButton
Link
SemanticStatesPanel
Tag

feedback

5 components

Liveblocks feedback component previewModal + Toast [A] authored this pass

Modal
Skeleton
Toast
ToastStack
Tooltip

forms

6 components

Liveblocks forms component preview[A] authored this pass — never measured, review before shipping

Checkbox
Input
Radio
Select
Switch
Textarea

history

2 components

Liveblocks history component preview

HistoryVersionSummary
HistoryVersionSummaryList

marketing

22 components

Liveblocks marketing component previewFramed panel + Accordion variant=marketing-faq, single-open

AlternatingFeatureSection
AnnouncementPill
BentoMosaic
CTABand
DotMatrixMap
FeatureGrid
HeroShell
HeroStage
LogoWall
MarketingFooter
MarketingNav
MegaMenu
PricingFAQ
PricingPlans
RealtimeInfrastructureVisual
RealtimeNodeDiagram
SpotlightButton
StatBlock
Testimonial
UseCaseCarousel
Wordmark
DEFAULT_INSTALL_PROMPT

notifications

2 components

Liveblocks notifications component preview

InboxNotification
InboxNotificationList

presence

2 components

Liveblocks presence component preview

Cursor
Cursors

product

3 components

Liveblocks product component preview

CommentThread
ProductIcon
StatusIndicator

utils

4 components

Liveblocks utils component preview

FeatureIcon
Icon
LiveblocksUiConfig
LiveblocksPortal

Guidelines

Live reference cards for the system's visual and interaction decisions.

Brand

8 references

Wordmark — no logo providedrender brand name in type; never approximate a mark

Icons — line grid20px grid, 1.5px stroke, round caps/joins, currentColor — icon and label move together

Interaction stateshover, focus-visible, disabled, selected/expanded — never remove outline without a replacement

Link — marketing vs. productrestrained neutral marketing links; product keeps its blue accent

Motion — timing & easing100ms default; bg/color/opacity only, never `all`

Radius scale0.5em base is one of two public knobs

Elevation & shadowalways a 3-layer stack — reserved for things that float

Sidebar — persistent page navigationexpanded, collapsed rail, mobile off-canvas — same production component

Colors

6 references

Marketing — violet accentmeasured dark; light is reconstructed [D], unverified

Product accent — blue--lb-accent, light + dark; white text on filled controls; light is the default theme

Use-case categorical palettemarketing carousel only — permanent, never semantic

Product neutralsforeground ramp, light + dark

Product-line accentsComments · Multiplayer · Notifications · Presence · AI Copilots — marketing atmosphere colors, confirmed hex

Semantic statesdestructive · success · warning · info — connected panel, see usage notes for source confidence

Spacing

2 references

Product spacing — em multiplesscales with host font-size, zero overrides

Marketing spacing scalefixed rem — 0.25rem to 8rem

Type

3 references

Family & weightsInter (marketing/docs) + JetBrains Mono (code) — 400/500/600, no 700

Marketing scalefixed rem, non-inheriting

Product scaleem-relative, 11 steps — compresses with host font-size

Full-page examples

Complete, interactive product surfaces rendered from the generated package.

Docs shellheader, sidebar, content, TOC, reduced footer

Documentationdocs shell — sidebar, TOC, use-case index, API reference, reduced footer

Commentsfull page — live thread hero, context demos, metadata, customization playground

Homepagefull page — nav, use-case hero, bento, agentic, dev experience, trust, footer

Notificationsfull page — live inbox hero, grouping, custom notification types, states

Pricing4-plan comparison, billing toggle, mobile plan-by-plan compare, FAQ

Realtime Infrastructurefull page — node-diagram hero, sync engines, capabilities, monitoring, cross-sell, footer

Syncfull page — agent/human hero modes, collapsible section rail, use cases, integrations, vs Yjs

Embedded collaboration demomock host app showing presence, comments, notifications in context