Not the light editorial site the collab-infra category implies: a pure-black #000000 brand that stays almost entirely monochrome — white #ffffff type, grey #b7b4b4 subheads, faint #918d8d tertiary — with structure drawn in rgba(255,255,255,.13) hairlines rather than fills or shadows. One family only, Suisse capped at weight 500: a centered 64px/500 hero at -0.02em tracking, 52px sections, 20px grey subhead. Colour is rationed to two moments: a violet #a667ff announcement badge and a single grainy pink-to-lilac gradient wash blooming behind a floating LIGHT product mock (tab bar #100f0f, multiplayer avatars and coloured cursors, hand-drawn white script annotations with curved arrows). CTAs are white pills — #ffffff with black text, 44px at radius 8px in the hero, 36px at radius 6px in the nav — beside a transparent secondary, and depth is the pink wash plus the floating frame over black.
Browse Liveblocks in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: liveblocks.io homepage (live DOM, computed styles), 2026-07-22 at desktop 1512px. Coverage: full homepage (hero → product mock → feature sections → footer). App: n/a captured (dashboard needs login → needs-dashboard). Responsive: breakpoints from stylesheets only; mobile not verified.
A pure-black realtime-infrastructure brand that stays almost entirely monochrome, then lets one thing bloom: a grainy pink-to-lilac gradient wash floats behind a floating product mock, and a single violet #a667ff accent marks the announcement badge. The hero is centered white Suisse at weight 500 with tight negative tracking over a soft grey subhead, and the CTAs are a white pill primary beside a transparent secondary. The multiplayer story is told with hand-drawn white script annotations ("Your app with Liveblocks", "Multiplayer undo/redo") and stacked collaborator avatars pointing at a light-themed app frame embedded in the dark page. Chrome is drawn almost entirely with rgba(255,255,255,.13) hairlines rather than fills or shadows. Feels: crisp, technical, quietly playful, multiplayer.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #000000 | Page background (pure black) |
| product tab bar | #100f0f | Embedded app-mock chrome |
| hairline | rgba(255,255,255,.13) | Borders, dividers, chip outlines (dominant) |
| hairline soft | rgba(255,255,255,.10) | Secondary borders |
| mock surfaces | #f9fbfd / #ececec / #fefefe | The LIGHT product frame embedded in the dark page |
| Token | Hex | Role / usage |
|---|---|---|
| text | #ffffff | Hero, headings, nav, annotations |
| muted | #b7b4b4 | Sub-headline, body |
| faint | #918d8d | Inactive tabs, tertiary |
| Token | Hex | Role / usage |
|---|---|---|
| violet | #a667ff | Announcement "RECAP" badge text |
| violet ground | rgba(165,105,255,.20) | Badge chip fill |
| pink wash | grainy pink→lilac (raster texture, exact stops not captured) | Bloom behind the product mock — the single colour moment |
Rule: the page is monochrome black/white/grey; colour appears only as the violet badge and the grainy pink wash behind the product frame.
Suisse ("Suisse Fallback"), -apple-system, system-ui, sans-serif. Weights 400 (body) and 500 (display/UI) — no bold, no second face.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 64 / 70.4 | 500 | -1.28px (-0.02em), centered |
| Section (h2) | 52 | 500 | -1.04px |
| Sub-heading | 20 | 500 | +0.08px |
| Sub-headline | 20 / 27.5 | 400 | 0, #b7b4b4 |
| Nav / button | 14 | 500 | 0 |
| Hero CTA | 16 | 500 | 0 |
Pattern: display is large but capped at weight 500 with tight negative tracking; body is the same family at 400.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.