---
name: Liveblocks
description: "A quintessential modern developer tool landing page that uses extreme restraint and high-contrast typography to project reliability and technical sophistication."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#918D8D"
  neutral: "#A3A3A3"
  bg-soft: "#111111"
  bg-quiet: "#171616"
  muted-soft: "#3F3F3F"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 68px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.04px"
  h1:
    fontFamily: humanist-sans
    fontSize: 52px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.08px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.064px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Realtime infrastructure for multiplayer apps and agents.

*Vercel for realtime collaboration features*

## Colors

High-contrast monochromatic dark mode with extreme restraint.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#918D8D`)** — uses `ink-soft` token
- **Muted (`#A3A3A3`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Headlines use a geometric/humanist sans with tight tracking and high weight.
- Body text maintains a relaxed 1.5 line-height for readability.
- Monospace is strictly used for code blocks and technical labels.

## Layout

Centered column layout with max-width container and full-width background sections.

*Rhythm:* Consistent 4px grid with generous padding for breathing room.

## Elevation & Depth

- 0 0 0 1px rgba(255,255,255,0.1)
- 0 2.767px 2.214px 0px rgba(0,0,0,0.05)
- 0 100px 80px 0px rgba(0,0,0,0.17)
- Borders: 1px solid rgba(255,255,255,0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped or rounded-rectangular buttons with high contrast (white on black or black on white).
- **card:** Dark cards with subtle 1px borders and no background color differentiation.
- **chip:** Small rounded labels with subtle background or border treatments.
- **input:** Dark background with 1px border and rounded corners.
- **hero:** Massive centered typography with a large product screenshot and dual CTAs.

## Do's and Don'ts

**Don't:**
- Don't use colorful gradients for primary backgrounds — screenshot shows solid black and dark grays.
- Don't use serif fonts for headlines — screenshot shows a clean, geometric humanist sans-serif.
- Don't use soft, rounded pastel colors — screenshot shows a high-contrast monochrome palette.
- Don't clutter the UI with unnecessary borders or shadows — screenshot shows extremely minimal surface treatments.
- Don't use justified text alignment — screenshot shows centered and left-aligned layouts.
- Don't use playful or overly decorative icons — screenshot shows simple, line-based iconography.

---

## System Prompt (paste into AI agent)

```
Liveblocks is a developer-focused SaaS providing realtime infrastructure. The design is characterized by a stark, high-contrast dark mode using a pure black (#000000) background and white (#FFFFFF) or light gray (#918D8D) text. Typography is a clean humanist-sans (Suisse Int'l) with tight tracking on large headlines and a secondary monospace font. Key constraints: never use serif fonts, avoid colorful or gradient backgrounds in favor of monochrome surfaces, and maintain extreme restraint in layout with generous spacing and minimal borders. Do not use decorative elements that compromise the professional, technical tone.
```