# Liveblocks — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Canvas & surfaces
| 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 |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| text | `#ffffff` | Hero, headings, nav, annotations |
| muted | `#b7b4b4` | Sub-headline, body |
| faint | `#918d8d` | Inactive tabs, tertiary |

### Accent
| 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.

## 3. Typography Rules

- Single family: `Suisse ("Suisse Fallback"), -apple-system, system-ui, sans-serif`. Weights 400 (body) and 500 (display/UI) — no bold, no second face.
- Hand-drawn script annotations layer over the product mock (handwritten style; specific script font not captured — rendered as decorative annotation).

| 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.

## 4. Component Stylings

### Buttons
- **Primary white (hero "Get started for free")**: bg `#ffffff`, text `#000000`, height 44px, 16px/500, radius 8px, padding `0 16px`.
- **Primary white (nav "Get started")**: same recipe at height 36px, radius 6px.
- **Secondary ("Install with AI")**: transparent, white text, height 44px, radius 8px, dropdown caret.
- **Nav links**: transparent, white 14px/500, radius 6px, padding `8px 12px`.

### Announcement badge
- Pill row: transparent with `rgba(255,255,255,.13)` 1px border, radius 0, 16px/500 white label, a violet "RECAP" chip (`#a667ff` on `rgba(165,105,255,.20)`, 10px) and a bordered arrow button on the right.

### Product mock (signature)
- A LIGHT app frame embedded in the dark page: `#100f0f` tab bar with tabs (Document / Workflow / Sheet / Dashboard, active white / inactive `#918d8d`), a "Your app" sidebar with an Inbox count, a rich-text toolbar, and stacked multiplayer avatars with coloured cursor pointers — all floating over the grainy pink wash.

### Annotations
- Hand-drawn white script labels with curved arrows pointing at product features.

## 5. Layout Principles

- Centered hero column; nav is full-width with left logo + Product / Resources / Docs / Pricing and right Sign in + white Get started.
- Hero anatomy: announcement badge → 64px centered H1 → 20px grey subhead → CTA pair → floating product mock on the pink wash.
- Sections below are feature blocks (52px headings) with product visuals; separation by `rgba(255,255,255,.13)` hairlines, not shadow.

## 6. Depth & Elevation

- Radii: nav controls 6px, hero buttons 8px, product frame larger rounded; badge 0px.
- Depth is the grainy pink wash + the floating light product frame over black; chrome elsewhere is 1px `rgba(255,255,255,.13)` hairlines. Minimal drop shadows.

## 7. Motion

- Restrained hover transitions on buttons/links; the product mock demonstrates live multiplayer cursors and edits. Motion library not definitively detected; motion is purposeful, not decorative.

## 8. Backgrounds, Effects & WebGL

- The signature effect is a grainy pink→lilac gradient wash (raster texture) blooming behind the product mock — the only saturated area on the page.
- Small near-white radial glows (`radial-gradient(100px, rgba(247,247,248,.08–.12), transparent)`) accent UI details.
- Otherwise flat pure-black canvas; depth via the wash and hairlines, not blur.

## 9. Do's and Don'ts

### Do
- Use a pure-black `#000000` canvas with white type and `#b7b4b4` grey subheads.
- Set the hero centered in Suisse 500 at 64px with -0.02em tracking.
- Draw chrome with `rgba(255,255,255,.13)` hairlines instead of fills or shadows.
- Keep colour to the violet `#a667ff` badge and one grainy pink wash behind the product mock.
- Embed a light-themed product frame with multiplayer avatars/cursors and hand-drawn script annotations.
- Use white pill CTAs (radius 8px hero / 6px nav) with a transparent secondary.

### Don't
- Don't go above weight 500 or introduce a second type family.
- Don't scatter the violet or pink beyond the badge and the product-mock wash.
- Don't use heavy drop shadows — hairlines carry structure.
- Don't left-align the hero — it is centered.

## 10. Responsive Behavior

- Nav collapses and the hero type scales down on narrow viewports; the product mock reflows.
- Breakpoints from stylesheets only — mobile rendering not verified.

## 11. Agent Prompt Guide

- Canvas `#000000` · Text `#ffffff` · Muted `#b7b4b4` · Faint `#918d8d` · Border `rgba(255,255,255,.13)` · Accent violet `#a667ff`
- Font: Suisse (400/500 only) · Body 20px sub / 16px · Radius: 6px nav / 8px hero buttons · CTA: white bg, black text, 44px
- Hero 64/500 -0.02em centered · Section 52/500 · Pink wash behind product mock (raster)

<liveblocks-marketing_design_language>
Use the Liveblocks marketing design language: a pure-black #000000 canvas 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 at weights 400 and 500 (never bold): a centered 64px/500 hero at -0.02em tracking, 52px/500 sections, 20px/400 grey subhead. Colour is rationed to two moments: a violet #a667ff announcement badge (on rgba(165,105,255,.20)) 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 — bg #ffffff, black text, 44px at radius 8px in the hero / 36px at radius 6px in the nav — beside a transparent secondary. Depth is the pink wash plus the floating frame over black; minimal drop shadows. Feels: crisp, technical, quietly playful, multiplayer. Avoid: weights above 500, a second type family, scattering the violet or pink beyond the badge and product mock, heavy shadows, a left-aligned hero.
</liveblocks-marketing_design_language>