Home
DESIGN.mdStar on GitHub
Copied!

Realtime infrastructure for multiplayer apps and agents

Add presence, live cursors, comments, and collaborative editing to your product in minutes.

Colors
Primary
Brand Blue
#0057FF
CTAs, links, focus
Blue Link
#0090FF
Inline links
Black
#000000
Text, buttons
Off-White
#FDFCFD
Page
Presence — Multiplayer Cursors & Avatars
Surfaces — Dark (real near-black)
Page
#161618
Dark background
Surface
#1C1C1F
Panels, canvas
Elevated
#232327
Cards
Sunken (light)
#F7F7F8
Canvas, wells
Accent & Semantic
Purple
#8F6CEF
Accent
Success
#22C55E
Online, connected
Error
#F44E6B
Disconnected
Secondary
#808080
Muted text
Typography — Suisse Intl · Inter · JetBrains Mono
h1
Multiplayer, in minutes
40px600Suisse
h2
Presence & live cursors
27px600lh 1.1
h3
Comments & notifications
20px500lh 1.3
body
Broadcast every user's presence and cursor to everyone else in the room, in real time, with a few lines of code.
15pxInterlh 1.6
mono
const others = useOthers();
13pxJetBrains Mono
Signature — Live Cursors
room:design-review
4 online

Q3 Launch Plan

Move your pointer over the canvas — your cursor broadcasts to the room alongside everyone else's.

Components
Buttons
Presence Avatars
AD MK PR JS +3
Search
Connection
Connected Reconnecting
Guardrails
DO
Give every collaborator a distinct presence color for cursor + avatar
Use brand blue #0057FF for CTAs, links, and focus
Keep surfaces near-black / off-white so presence colors pop
Pair a live cursor with a name label in the same presence color
Use Suisse Intl for display; Inter for dense UI
DON'T
Don't make the brand orange — Liveblocks is blue with a rainbow presence set
Don't reuse one presence color for two collaborators in a room
Don't invent dark surfaces; anchor on the real near-black #161618
Don't show a cursor without an owner (name + color)
Don't let presence colors double as semantic status colors