## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Screenshot: https://kage-design-assets.t3.tigrisfiles.io/screenshots/liveblocks-io/98df7b6b-464d-40a0-a4c4-8946ac011a3c-1789072811018.webp
- Design on Kage: https://kage.design/designs/liveblocks-empty-state

## Before you start
Ask the user what product they are building, who it is for, and what brand assets they already have (name, logo, colours, typeface). Wait for their answers before writing any code. Apply everything below to their product and brand, not to the reference site.

## Page structure
1. **Top navigation** — one slim (~72px) row on the page background: wordmark/logo left, six inline text links (product, use cases, solutions, resources, docs, pricing) immediately right of the logo, then a bare "Sign in" text link and a solid white pill button at the far right. No border under the nav.
2. **Announcement badge** — centred, roughly 40px below the nav: a rounded-full dark pill with a hairline border containing a small grey "New" chip, short text with one accent-coloured word, and a small circular arrow button at its right end. Clickable.
3. **Headline** — centred, two lines, very large (~64-72px) bold white sans-serif with tight line-height and slightly negative tracking. Keep it to 5-8 words total.
4. **Subheadline** — centred grey text (~18-20px), two lines, max-width around 600px, sitting ~24px under the headline.
5. **CTA row** — centred: one solid white pill button with dark text as the primary action, plus a quieter text link with a small chevron as a secondary action. ~32px vertical gap from the subheadline.
6. **Product visual** — below the CTAs, a large centred demo/screenshot or interactive surface that appears to rise out of the black, lit by a soft glow from behind; this is where the page starts getting denser and more concrete.
7. Continue the page with supporting sections (features, use cases, social proof, footer) using the same dark monochrome system, letting density increase and spacing tighten as the page goes on.

## Design language
- **Colour:** near-black canvas (#050507–#0a0a0d), pure white for primary text and primary buttons, mid-grey (#9aa0a8) for secondary text, and a single restrained accent (e.g. #5e8bff) used only for inline emphasis or links. Add a faint blue-violet radial glow bleeding down from the very top edge of the page; everything else is monochrome.
- **Hierarchy by luminance and size, not decoration:** the eye path is badge → headline → subtext → button, achieved purely with scale and brightness. Use no coloured panels, cards or illustration in the hero.
- **Type:** one neutral geometric sans throughout (Inter-like). Display sizes ~64-72px bold with ~1.05 line-height; nav and body at 14-16px. The ~4x jump between nav text and headline is the page's main visual event.
- **Shape:** everything interactive is a pill or near-pill (border-radius 999px for buttons/badges, ~10px for larger surfaces). Buttons are flat solid fills — no gradients, no shadows on controls.
- **Borders:** hairline strokes only, white at 10-15% opacity, used on the announcement pill and subtle dividers; avoid visible card outlines where possible.
- **Glow and depth:** reserve soft radial glows for the page edges and behind the product visual so black space feels dimensional, not empty.
- **Spacing and rhythm:** hero is the sparsest band of the page — 120-160px vertical padding, generous gaps between badge, headline, subtext and CTA. Down the page, gradually tighten spacing and increase content density (grids, lists, code/demos) so the page accelerates after the calm opening.
- **Motion:** quiet and functional — button hover brightens or inverts, the badge arrow nudges right, chevron rotates on open. No parallax or heavy animation above the fold.

## Never
Do not copy Liveblocks' logo, wordmark, headline or body copy, its icon set, or its specific demo imagery. Do not reproduce its exact nav labels or announcement text. Never present the result as Liveblocks or imply any affiliation; rebuild the layout and visual system around the user's own brand.